I'm a Fig, Not a Pig

Swap MemorySwap Memory는 Linux 시스템에서 물리적 RAM이 부족할 때 사용하는 디스크 공간이다.RAM의 확장 개념으로 하드 디스크나 SSD의 일부를 메모리처럼 사용하기 때문에 가상 메모리라고 할 수 있다.   Swap Memory가 필요한 이유1. 메모리가 부족한 경우RAM이 가득 찼을 때 시스템이 중단되는 것을 방지할 수 있고, 당장 사용하지 않는 데이터를 Swap으로 이동시켜 실행 중인 프로그램을 계속해서 구동할 수 있다. 2. 비활성 프로세스 관리오랫동안 사용하지 않는 프로세스의 메모리 페이지를 Swap으로 이동시키고, 이를 통해 활성 프로세스를 위한 RAM 공간을 확보할 수 있다.   Linux에서 Swap Memory 확인하기아래 명령어를 이용해 사진과 같이 메모리를 확인할..

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

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

문제 발견최근에 Next.js로 개발 중, 흥미로운 문제를 마주했다. 개발 모드에서 새로고침을 하지 않으면 데이터가 로드되지 않는 현상이었다. 처음에는 새고로침으로 문제가 해결되었기 때문에 큰 문제가 아니라고 생각했지만, 매번 yarn dev를 실행할 때 마다 새로고침을 해야 하는 번거로움이 있었다. 또 이 문제의 원인을 알고 있어야 이후에 같은 상황이 발생하지 않을 것이라고 생각해 원인을 찾아보기로 했다.   ChunkLoadError: Loading chunk app/layout failed.(timeout: http://localhost:3000/_next/static/chunks/app/layout.js)새로고침 없이 페이지 로딩을 기다려보니 다음과 같은 에러가 발생했다.ChunkLoadError..

참여하고 있는 프로젝트에서 UI 구현을 마치고 API 연동을 하고 있는 중이다. 에러 처리를 위해 Axios Interceptor를 사용했는데, 이 과정에서 AxiosError를 처리했던 과정을 기록해보려 한다.  초기 코드초기에 작성한 에러 처리 코드는 다음과 같았다.if (error) { const errorMessage = error instanceof Error ? error.message : '알 수 없는 에러가 발생했습니다.'; return {errorMessage};} 이 코드에 대해 리뷰를 받으면서, 공통 모듈로 처리할 수 있는지에 대한 피드백을 받았다. 처음에는 이 부분을 별도의 공통 컴포넌트로 분리하라는 의미인지, 이해가 잘 되지 않아 혼란스러웠다. 리뷰어분은 Axios를 직..

오늘은 Vercel에 Next.js를 배포한 경험에서 알게 된 것들 적어보려한다. Vercel 배포를 검색했을 때 많은 자료들이 있어서 금방 끝낼 줄 알았는데 시간이 꽤 걸렸다. 그래도 깔끔하게 해결하고 잠들어서 좋다. (현재시각 오전 2시 54분..)  Hobby에서 Pro로 변경지금 참여하는 프로젝트는 Oraganization인데, Vercel에서 Github Organization에서 프로젝트를 운영할 경우 Pro로 전환해야 한다. Pro 버전은 2주 간 무료로 이용할 수 있고, 이후에는 월마다 $20 씩 지불해야 한다. 우회해서 사용하는 방법도 있긴 한데 별로 내키지 않아서 유료 버전을 사용했다.     도메인 등록도메인 구입 후, vercel에 등록된 도메인을 구매한 도메인으로 변경했다. 방법을..

월화수 추석 연휴라서 어제(월요일)는 쉬었고 오늘 오후부터 슬금슬금 다시 작업중인데, 하루 푹 쉬니까 컨디션이 좋다! 또 요새 개인적인 일로 가족이랑 시간보내는 걸 뒤로 미뤘는데, 이번 연휴에는 통으로 함께 보내게 되어서 행복하다😊 푹 쉬었으니 다시 작업하러 가보자고~~!  Github Pages에서 Vercel로 변경저번주에 React에서 Next.js로의 마이그레이션을 마치고, 오늘은 Github Actions로 Vercel가 자동 배포 되도록 환경을 셋팅했다. 기존에는 github pages로 배포 했었는데, Next.js로 마이그레이션 하면서 Vercel로 배포하는 것으로 바꾸었다. 이유는 아무래도 Vercel이 Next.js에서 공식적으로 제공하는 호스팅 사이트이기 때문이다. 공식문서에도 Ne..

토이 프로젝트를 시작하면서, Vite를 빌드 툴로 사용하기로 했다. 예전에 Vite가 빠르다고 들어서 사용해보고 싶었는데, 이번에 사용하게 되어 어떤 툴인지 정리해보려 한다.   Vite란?Vite는 프랑스어로 빠르다라는 의미이며 Vue, React, Svelte 등 주요 프론트엔드 라이브러리, 프레임워크 커뮤니티에서 주목하고 있다. 이유가 뭘까? Vite를 사용하는 하는 이유와 등장배경을 알아보자.   Vite를 사용해야 하는 이유?1. JavaScript의 모듈화공식문서에 따르면, ESM(ES Modules)을 지원하기 전까지는 브라우저에서 JavaScript 코드를 모듈로 나눠서 사용하는 게 쉽지 않았다.여기서 모듈이란 간단하게 말해서 코드를 기능별로 나눠서 관리하기 쉽게 만든 작은 단위이다. 예를..