Next.js는 메타데이터를 통해서 페이지의 제목을 보여준다.메인 페이지처럼 하나의 제목만 있어도 되는 정적인 페이지는 원래대로 작성하면 된다.export const metadata = { title: 'Home',};그런데 아이템에 따라 제목이 달라져야하는 경우에는 메타데이터를 어떻게 설정해야 할까?Dynamic Metadata예를 들어, 실습에서 movies/[id] 디렉토리에 있는 page.tsx는 API로 받아온 아이템의 id를 파라미터로 보내서, 그 id에 맞는 정보를 출력하라고 되어있다.// movies/[id]/page.tsxexport default async function MovieDetail({ params: { id },}: { params: { id: string };}) {..

Next.js에서 코드를 모듈화해서 관리하는 방법에 대해서 배웠는데, 이건 쉽게 말하자면 React에서 컴포넌트별로 파일을 나눠놓는 것과 같은 개념이다. 코드를 모듈화해서 관리하는 것에는 여러가지 장점이 있다.재사용성: 컴포넌트를 모듈로 분리하면 다른 페이지나 프로젝트에서도 동일한 컴포넌트를 재사용할 수 있어서, 코드의 중복이 줄어들고 유지/보수가 쉽다.가독성: 기능별로 분리된 모듈은 코드의 구조를 더 명확하게 만들어서, 개발자가 어떤 기능이 어디에 있는지 쉽게 파악할 수 있다.유지보수: 코드를 모듈화하면 특정 기능에 변경/추가가 필요한 경우에 해당 모듈만 수정하면 되기 때문에, 다른 부분에 영향을 주지 않으면서 코드를 업데이트할 수 있다.협업 효율성: 여러 개발자가 동시에 작업할 때, 모듈로 분리된 코..

global.cssNext.js 프로젝트에서 모든 페이지와 컴포넌트에 공통적으로 적용되는 스타일을 정의하는 파일. 일관된 디자인을 유지하는데 유용하다. app/layout.tsx에서 import하면 프로젝트 전체에 해당 스타일이 적용된다.CSS 모듈React의 스타일링 방법을 공부하면서 배웠는데, 자주 안 써서 까먹었기 때문에 여기서 한번 더 짚고 넘어간다.CSS 모듈은 CSS를 컴포넌트 단위로 관리할 수 있게 해주는 기능이다. CSS 모듈을 사용하면 DOM 요소가 만들어지는 과정에서 랜덤한 클래스 이름이 자동으로 만들어져서, 다른 컴포넌트와 스타일이 충돌하지 않게 되는 장점이 있다. 사용하는 방법은 아래와 같다./* styles.module.css */.hello { color: blue; font..

병렬 요청(Parallel Requests)한 페이지에서 여러 데이터를 불러와야하는 경우, 데이터를 불러오는 fetch()를 각각의 함수에 담고 컴포넌트에서 각자 await하면 동기적으로 처리된다. 위 사진에서는 getMovie()가 끝나야 getVideos()가 실행된다. (API_URL은 메인 페이지에서 정의하면서 export했음)데이터를 불러오는 과정이 동기적으로 실행되면, getMovie()가 서버에서 전부 준비될 때까지 사용자의 화면에는 아무 것도 뜨지 않는다. 만약 getMovie(), getVideos()가 모두 시간을 소요하는 작업이라면 UX가 굉장히 저하될 수 있다.이러한 문제를 해결하려면 데이터가 병렬로 실행되도록 해야한다.아래 사진처럼 2개의 fetch() 요청을 Promise.all..

본론으로 들어가기에 앞서, 본 카테고리에 대한 간단한 설명부터..🙂'생활코딩' 강의가 끝나고 '노마드코더' 강의를 듣고 있는데, 두 강의가 같은 내용을 다뤄서 최근에 기록하는 내용과 며칠 전에 업로드한 포스팅에 내용의 중복이 많다. 2개의 강의를 연달아 들어보니 '생활코딩'은 간단하게 개념을 잡아주는 과정이었고, '노마드코더'는 습득한 개념을 확실하고 체계적으로 이해하는 과정 같다. '노마드코더'가 조금 더 상세하게 설명하고 있으니 Next.js를 사용하며 어려움이 생기면 최신글을 봐야지..😉fetch(), cache기존의 순수 React 페이지는 클라이언트 컴포넌트이기 때문에, fetch()로 데이터를 불러오는 과정이 항상 클라이언트에서 일어나고 API 요청을 브라우저가 보낸다. 개발자 도구의 Ne..

단순하게 개념을 습득하는건 쉬웠는데 작동원리까지 확실하게 이해하려니 약간 헷갈리는 부분이 있었다.아무튼, Hydration에 대해서 설명하려면 먼저 렌더링 방식의 차이부터 이해해야 하는데, 이건 내가 예전에 정리해둔 글이 있으니까 링크를 첨부하도록 하겠다.https://hjinn0813.tistory.com/100 어플리케이션(SPA, MPA) 렌더링(CSR, SSR, SSG) 검색엔진 최적화(SEO)Next.js 공부하기 전에 기본적인 개념정리가 필요할 것 같아서 기록하는 글.아래에 언급될 기초적인 내용들에 대해서 예전에 블로그에 정리해둔게 있어서 링크도 첨부한다!🙂※ 서버와 클라이언hjinn0813.tistory.comNext.js는 기본적으로 모든 컴포넌트와 페이지를 SSR 방식으로 렌더링한다.1..

개인적으로 유튜버 '생활코딩'님의 강의가 이해하기 쉬워서 '생활코딩' 강의부터 보고 '노마드코더' 강의를 2차로 듣고 있는데, '노마드코더' 강의에서는 하나씩 수동으로 설치하는 방법으로 Next.js 프로젝트를 만들었다. 두 디렉토리를 비교해보니 자동 설치는 편리하지만 뭔가 설치되는게 많고, 수동 설치는 내가 필요한 부분들부터 먼저 설치할 수 있어서 깔끔한 것 같다. 아무튼 수동 설치는 처음이니까 기록해보는 글.✍※ Next.js 프로젝트 자동 설치 방법은 여기 - https://hjinn0813.tistory.com/105  Next.js 자동 설치, 실행, 샘플 앱 세탁hjinn0813.tistory.comNext.js 수동 설치1) 프로젝트를 진행할 디렉토리를 만들고, VS code 터미널에서 프로..

환경변수실제 OPEN API를 사용한 프로젝트에서는 API 주소 같은 것들을 환경변수로 따로 저장할 필요가 있다.Next.js 프로젝트는 .env.local 이라는 이름으로 파일을 만든다. 환경변수 지정하고 불러오는 방법은 React와 같다. (이름 대문자로 지정하고, process.env로 불러온다)루트 레이아웃은 fetch URL에 환경변수를 불러와서 넣어도 정상 작동하지만, create/page.js에서 fetch()의 주소를 환경변수로 바꾸면 작동하지 않는다. 이는 주소가 undefined가 뜨기 때문이다.환경변수에는 기밀이 중요한 정보가 포함될 가능성이 높다. 그런데 기밀 정보까지 클라이언트 컴포넌트에 노출이 되면, 정보가 브라우저에 전송되고 유출된다는 의미이다. 이런 문제를 방지하기 위해서 환..

Next.js의 update, delete 버튼 기능 설정문제: update, delete 버튼은 홈에서는 보이지 않고 글 목록을 클릭해서 확인했을 때만 보이도록 해야한다. update 버튼을 클릭했을 때, 현재 오픈하고 있는 글을 수정할 수 있어야 한다. (오픈 중인 글의 id가 URL에 있어야 함)→ 해당 기능을 구현하려면 글의 id를 확인해서 끌고와야 하는데, 루트 레이아웃은 src/app/read/[id] 밖에 있어서 오픈 중인 글의 id를 확인할 수 없다. useParams를 사용하면 되지만 그러면 루트 레이아웃 전체를 클라이언트 컴포넌트로 만들어야 한다. 서버 컴포넌트의 장점을 포기하지 말고, 해당 코드만 클라이언트 컴포넌트로 만들기. // 클라이언트 컴포넌트'use client';import..

Next.js 글 읽기읽기 페이지는 사용자와 상호작용하지 않고 정보만 보여주기 때문에 서버 컴포넌트로 제작. 함수를 async로 하여 데이터 불러오고, return 내부에 props 넘겨주면 json의 데이터 받아와서 출력됨.export default async function Read(props) { const resp = await fetch(`http://localhost:9999/topics/${props.params.id}`); const topic = await resp.json(); return ( {topic.title} {topic.body} );}Next.js 글 생성사용자가 입력한 값을 받고 서버에 저장해서 보여줘야하니까 최상위 부모태그를 으로 ..