[Next.js] Server Component & Client Component, 렌더링 방식

Server Component와 Client Component기본적으로 app 폴더 하위의 모든 컴포넌트는 서버 컴포넌트넥스트에서 클라이언트 컴포넌트를 사용하려면 컴포넌트 파일의 최상단에 'use client' 예약어를 작성해줘야 함 -> 따라서 useState, useEffect 같은 훅을 사용하려면 use client를 작성해줘야 했던 것-> 또한 use client를 작성한 노드의 서브트리는 모두 클라이언트 컴포넌트로 취급된다. 클라이언트 컴포넌트와 서버 컴포넌트를 동시에 사용해야하는 경우에는?1) useClient를 사용하는 컴포넌트를 하나 선언하고2) 페이지인 서버 컴포넌트에서 위의 컴포넌트를 임포트해서 사용하면 된다- 사용자와의 상호작용이 필요한 컴포넌트는 클라이언트 컴포넌트로- 그렇지 않은 ..

• format_list_bulleted Next.js
• · 2024. 9. 26.
• textsms

[Next.js] 특별한 예약 파일들 (layout, template, not-found, metadata와 SEO)

layout어떤 segment와 그의 자식 노드에 있는 요소들이 공통적으로 적용받게 할 UI를 정의레이아웃을 지정하고싶은 경로의 루트 폴더에 layout.tsx 파일을 만들고, 자식 노드들이 표시될 곳에 {children}을 사용해 레이아웃을 만들어준다.  templatelayout과 유사하지만 상태를 유지 or 리렌더링 발생에서 차이가 있다.layout은 경로 전반에서 상태가 유지되며 필요한 경우가 아니라면 굳이 리렌더링 하지 않는데, template은 라우팅을 탐색할 때마다 새 인스턴스를 만든다. (즉, 동일한 DOM 요소 생성) 아래와 같은 경우에 활용할 수 있다.1) 템플릿을 통한 페이지 open animation- 페이지 전환시 애니메이션을 계속 재생하고 싶을 때- layout으로 만드는 경우에..

• format_list_bulleted Next.js
• · 2024. 9. 26.
• textsms

[Next.js] 파일(폴더) 기반 라우팅

URLURL Segment/ 로 분류된 URL path의 한 부분을 의미- http://some.com/dashboard/settings 에서 dashboard, settings 등! URL path, Pathname도메인 (~.com) 이후 따라오는 url 부분  File System based Routingpage.tsx는 path별 main ui가 표시될 곳우리는 각 라우팅마다 page.tsx 파일을 만들게 될 것 -> 그럼 라우팅이 자동으로 만들어짐 static routing (정적 라우팅)1) app 폴더에 test 폴더 생성2) test 폴더에 page.tsx 생성3) localhost:3000/test 로 들어가면 page.tsx의 내용이 렌더링되는 것을 확인할 수 있다! -> 즉 폴더는 U..

• format_list_bulleted 카테고리 없음
• · 2024. 9. 26.
• textsms

[React] 내 tanstack query는 왜 에러를 내지 않을까??

지난 프로젝트 중 API URL을 설정해두지 않아 절대 네트워크 요청이 이뤄질 수 없는 상황이었는데 네트워크 에러는 나면서 컴포넌트 내부에서 탠스택쿼리의 isSuccess 를 조건으로 설정해둔 alert이 뜨는 현상이 있었다.대체 이게 뭐지..? 하다가 우선 당장 해야했던 기능 구현을 마무리하고 조금 여유가 생겼을 때 다시 알아보았다. 이유는 생각보다 간단했다! 탠스택쿼리의 queryFn, mutationFn에서 에러가 발생했을 때도 에러가 아닌 데이터를 return해주고 있었기 때문이다. 기존 코드export const postSignUp = async (userInput) => { try { const response = await authInstance.post('/signup', userI..

• format_list_bulleted React
• · 2024. 9. 26.
• textsms

팀프로젝트 트러블슈팅 기록!

지난 팀프로젝트를 진행하면서 일정에 치여 기록을 제대로 남기지 못했다 ㅠㅠ지금도 바로 타입스크립트 + next.js 주차에 들어가면서 해야할 것들이 잔뜩 생겼지만.. 더 지나기전에 간단하게나마 기록해보려한다! dev-note가장 난감했던.. 아무런 에러 메세지도 없던 오류!!!!!!!! 그래서 원인 파악에만 시간이 아주 오래걸렸다.. 결국 발표전까지 해결을 못하고 튜터님들의 도움을 받아도 원인을 파악하기 어려워서 포기할까 싶기도했지만 사소한 오류도 아니고 아예 프로젝트를 사용할 수 없는 문제가 남아있다는게 너무 싫었다 🥹.. 괜한 오기인가 싶기도했지만 프로젝트가 실행되게 하는 것은 너무 당연한 책임인 것 같아 다음 과제 시작을 딱 하루만 미루고 그 날만 이 오류 해결에 투자해보기로 했다. 다행히 성공!..

• format_list_bulleted 팀 프로젝트
• · 2024. 9. 25.
• textsms

[TypeScript] 제네릭과 유틸리티 타입

제네릭타입을 클래스나 함수 등에서 파라미터처럼 사용할 수 있음function printAnything(arr: T[]): void { for(let i = 0; i 을 쓰지 않아도 타입 추론 가능printAnything([1, 2, 3]); // 를 쓰지 않아도 타입 추론 가능 T, U는 제네릭에서 많이 사용되는 단어이고 꼭 저런 단어가 아니더라도 내가 식별할 수 있는 단어면 활용할 수 있다! hook에서 활용하기function App() { const [counter, setCounter] = useState(); const increment = () => { setCounter(prev => prev++); }; return {counter};}- 위 경우에서 useState에 제..

• format_list_bulleted TypeScript
• · 2024. 9. 24.
• textsms