I'm a Fig, Not a Pig

문제상황Next.js 14 에서 프로젝트를 생성하면 기본적으로 /app 디렉토리 내의 모든 컴포넌트들은 서버 컴포넌트이다. 따라서 클라이언트 컴포넌트로 사용하려면 상단에 use client 를 붙여주어야 한다. 그런데 작업 중 깜빡하고 useState를 사용하는 컴포넌트에 use client를 붙이지 않았는데 앱이 에러 없이 잘 동작하는 것을 보게 되었다. 일시적인 현상인가 싶어 새로고침을 해보았는데 여전히 앱이 잘 작동하길래 당황했다. use client 매번 달아주는 거 귀찮았는데 살짝 좋기도 하고.. 클라이언트 컴포넌트에는 use client를 무조건 붙여야 한다고 알고 있었는데 use client가 없어도 잘 작동하는 이유가 뭘까?  React가  UI를 표현하는 방법이 현상을 이해하기 위해 먼저..

컴퓨터에서 워드로 문서작업을 하면서 동시에 유튜브로 음악을 재생해서 들을 수도 있다. 그러면서 동시에 카카오톡으로 채팅을 할 수도 있는데 우리는 이를 통해 컴퓨터가 여러 일을 동시에 수행하고 있음을 알 수 있다. 어떻게 CPU 코어 수보다 많은 작업을 멀티태스킹 하는 걸까? 프로세스와 스레드의 개념을 알아야 이 질문에 답할 수 있다.  프로세스먼저 프로그램이란 어떤 일을 수행하기 위해 만들어진 명령 모음이다. 다른 관점에서 보면 명령 모음이 파일로 빌드되어 보조 기억 장치에 저장되어 있는 정적인 상태라고 할 수 있다. 우리가 프로그램 실행 명령을 내리면 CPU는 보조 기억 장치에서 꺼내 메인 메모리에 올려놓고 코드를 해석하며 작업을 시작한다. 이처럼 프로그램이 메인 메모리로 올라와 실행되고 있는 상태를 ..

데몬 (Daemon)의 어원데몬은 사용자가 직접적으로 제어하지 않고, 백그라운드에서 돌면서 여러 작업을 하는 프로그램을 말한다. 사용자의 요청을 기다리고 있다가 요청이 발생하면 이에 적절히 대응하는 리스너와 같은 역할을 하고 메모리에 상주하면서 특정 요청이 오면 즉시 대응 할 수 있도록 대기중인 프로세스를 말한다. 데몬 단어의 어원데몬는 악마나 유령을 뜻한다.유령은 걷지 않고 항상 떠 있기 때문에 백그라운드에서 조용하게 항상 수행되는 프로그램을 데몬 프로그램이라 부른다.   데몬은 항상 돌아가고 있어야 하는 웹 서버에 적합하기 때문에 주로 서버에서 사용된다. 대표적으로 Apache 웹서버의 httpd가 있으며 이외에도 유닉스(리눅스) 운영체제에서 데몬임을 나타내기 위해 끝에 'd'가 붙는다. (ex. i..

나는 보통 어떤 페이지를 개발해야 할 때 Header 컴포넌트에 대한 파일명을 지을 때 MemberHeader.tsx가 아니라 Header.tsx로 짓는 편이다. MemberHeader.tsx로 짓다보면 일관성을 위해 MemberList, MemberListItem 등 계속해서 Member라는 접두사를 붙여줘야 하기 때문이다.또 members/_components/Header.tsx  vscode 상단에 보면 이렇게 폴더구조로 어떤 페이지의 Header인지 이해할 수 있기 때문에 간결하게 작성해왔다. 그런데 문득.. 프로젝트 규모가 큰 경우는 내가 사용하는 방법이 그닥 좋은 방법은 아닐 거라는 생각이 든다. 확실히 저 경로를 보고 컨텍스트를 파악하는 것 보다는 MemberHeader.tsx로 직관적으로 ..

백엔드 CI/CD 파이프라인을 구축하고 워크플로우를 실행 하던 중에 특이한 점을 발견했다.  일반적으로 모든 과정이 성공적으로 진행 된 경우, "Done in n초(s)" 와 같은 완료 메시지가 표시되어야 하는데, 이번에는 Killed pnpm install이라는 메시지가 나타났기 때문이다. 더 흥미로웠던 점은 메시지가 표시된 후에도 파이프라인이 계속 진행되어 배포가 성공적으로 완료되었다는 것이다. 패키지 설치 단계가 실패했다면 전체 워크플로우도 실패로 표시되어야 할 것 같은데 왜 이런 현상이 발생했을까? 😲  OOM(Out Of Memory)먼저 Killed pnpm install 에러가 발생한 이유에 대해 알아보았다.보통 Killed ~ 메시지는 Linux의 OOM(Out of Memory) Kil..

EC2 프리티어를 사용하던 중 메모리 부족 현상으로 프로세스 강제 종료 현상을 겪었다. Swap Memory 할당으로 문제를 해결했지만, 메모리에 대한 지식이 부족하다고 느껴 따로 정리해보려 한다.   메모리(Memory)현재 실행되는 프로그램의 명령어와 데이터를 저장하는 부품이다. 즉, 프로그램이 실행되려면 반드시 메모리에 저장되어 있어야 한다. 이때 컴퓨터가 빠르게 작동하기 위해서는 메모리 속 명령어와 데이터가 중구난방으로 저장되어 있으면 안 된다. 그래서 메모리에는 저장된 값에 빠르고 효율적으로 접근하기 위해 주소(address)라는 개념이 사용된다. 정리프로그램이 실행되기 위해서는 반드시 메모리에 저장되어 있어야 한다.메모리는 현재 실행되는 프로그램의 명령어와 데이터를 저장한다.메모리에 저장된 값..

서버를 배포하기 위해 AWS EC2 인스턴스를 사용해서 배포를 진행했다. SSH 방식으로 서버 내에서 빌드와 배포를 진행하는 방식을 선택했는데 배포 과정에서 'command not found' 에러가 발생하게 되었다. 하지만 SSH로 직접 접속했을 때는 해당 문제가 발생하지 않았었고 pnpm, pm2 패키지가 프로젝트 내에 제대로 설치되어 있다는 점을 확인한 후에, CI/CD 방식으로 배포 시 환경변수를 읽어오지 못하는 것 같다고 판단했다.이 문제를 해결하는 과정에서 Linux Shell의 설정 파일들과 non-interactive shell, non-login shell에 대해 공부하게 되어 정리해보려 한다.  Shell이란?Shell이란 리눅스 커널과 사용자를 연결해주는 인터페이스를 말한다. 쉘은 크..

Github Issues에는 이슈 제목을 바탕으로 브랜치를 자동으로 생성해주는 유용한 기능이 있는데, 이슈 페이지 오른쪽에서 Development 탭의 Create a branch 버튼을 통해 손쉽게 브랜치를 생성할 수 있다.   원격에서 생성된 브랜치를 로컬로 가져오려면 다음 명령어를 실행하면 된다.git fetch origingit checkout 브랜치명   이때 주의할 점은 최신화된 main 또는 develop 브랜치를 기반으로 브랜치를 생성해야한다는 것이다🥲나는 이걸 까먹어서.. 아래와 같은 에러가 발생했다.error: The following untracked working tree files would be overwritten by checkout: packages/ui/sr..

내가 원하는 건 아래의 UI 인데 자꾸 이렇게 한 쪽으로 쏠리는 현상이 발생..🫠 겨울이라 추워서 붙어있고 싶나본데... 떨어지라구우우ㅇ~~ 이유를 찾다가 w-full 이 문제인 것을 알게 되었는데, w-auto 과의 차이가 매번 헷갈려서 정리해보려고 한다.Header 부분만 똑 떼어서 코드를 가져와봤다.export default function Header({ onMemberSelect, onSearch, keyword }: HeaderProps): JSX.Element { return ( 멤버 관리 + 멤버 추가 );} 이 컴포넌트에서 ..

Git은 기본적으로 파일명 또는 폴더명의 대소문자를 구분하지 못한다. 그래서 git actions을 사용한다면, build시에 아래와 같이 Module no found 에러를 볼 수 있다.   이 경우에는 git에게 대소문자를 구분하라는 명령어를 작성해주어야 한다.git config core.ignorecase false