I'm a Fig, Not a Pig

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

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

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

참여하고 있는 프로젝트에서 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에 등록된 도메인을 구매한 도메인으로 변경했다. 방법을..

Tailwind CSS에서 기본 스타일(텍스트 색상, 글꼴 등)을 추가하기 위해서는 두 가지 방법이 있다. 첫번째는 index.html 파일에 클래스를 추가하거나   두번째는 @layer 지시문을 이용해서 추가하는 것이다.@tailwind base;@tailwind components;@tailwind utilities;@layer base { h1 { @apply text-2xl; } h2 { @apply text-xl; } /* ... */}   나는 두번째 방법으로 전역 폰트를 적용하기 위해 아래와 같이 코드를 작성했다. 폰트는 Pretendard를 적용했고 CDN을 이용해 Pretendard를 사용할 수 있기 때문에 https://github.com/orioncactus/pr..

저번 프로젝트에서 TanStack-Query(React-Query)를 사용해보자는 논의가 나왔지만 라이브러리를 사용하지 않고도 구현할 수 있을 것이라는 결론이 내려져 사용하지 않았었다. 그래서 데이터 페칭을 위한 hook을 만들었었는데, 이후에 리팩토링하는 과정에서 이 hook을 useQuery와 useMutation으로 분리시켰다. (왜 분리했는지에 대한 자세한 내용은 링크에서 볼 수 있다.) 이렇게 훅을 분리하는 것에 대한 아이디어는 프로젝트 시작 전 TanStack Query에 대해 공부하면서 얻게되었는데, 프로젝트 이후 TanStack Query 공식문서를 읽다보니 api 예외처리를 간편하게 해주는 것 이외에도 다양한 기능이 많아서 공부해보려고 한다. 1. TanStack-Query(React-Q..

try catch 문으로 에러를 처리할 때 아래와 같이 작성했더니 err에 타입에러가 뜨는 것을 보게되었다.const getSth = async (pararms) => { try { // ... actinos } catch (err) { setError(err.message) } }; err에 커서를 대보면 다음과 같은 메세지가 뜬다. 사진에서 알 수 있듯이 error는 unknown 타입이다. unknown 타입은 any 타입 외의 어떤 타입에도 할당할 수 없기 때문에 타입 좁히기를 해주어야 한다. 따라서 instanceof를 이용해서 타입을 좁혀주었더니 에러가 말끔히 사라졌다. 이렇게 타입을 좁혀주는 매커니즘을 타입 가드라고 한다.if (err instanceof Error) { setError(er..

MongoDB를 이용해서 PATCH 요청을 보냈는데 결과값이 제대로 안뜨고 Invalid JSON이 뜬다.PATCH http://localhost:3000/api/short-links/665eb7c2ef6c89ac004f5e89Content-Type: application/json{ "title": "title",}HTTP/1.1 400 Invalid JSONDate: Tue, 04 Jun 2024 07:08:29 GMTConnection: closeTransfer-Encoding: chunkedInvalid JSON   이유를 찾아보니 JSON의 마지막 항목에는 쉼표가 오면 안된다고 한다. 따라서 아래와 같이 쉼표를 제거해주어야 한다.PATCH http://localhost:3000/api/short..

매번 검색하는 스크롤바 숨기기.. 이참에 정리해보자! 가로 스크롤이나 세로 스크롤 영역이 생기면 자동으로 스크롤바가 생기게 된다. 스크롤바를 없애려면 스크롤바가 생기는 부분에 브라우저 별로 스크롤바를 없애주는 css를 추가해주면 된다.  아래와 같이 코드를 사용하면 IE, Edge, Firefox, Chrome, Safari, Opera 등의 브라우저에서 스크롤바를 없애도록 대응할 수 있다..no-scroll { -ms-overflow-style: none; /* IE, Edge */ scrollbar-width: none; /* Firefox */}.no-scroll::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera */}   참고http..