김기지의 코딩노트

🖥️ Metadata SEO와 웹 공유성을 향상시킬 수 있는 API 메타데이터를 추가하는 방법 구성 기반 메타데이터 : 정적 메타데이터 객체 또는 동적 generateMetadata 함수를 layout 또는 page로 내보냄 파일 기반 메타데이터 : 라우팅 세그먼트에 정적 또는 동적으로 생성된 특수 파일을 추가 이 두가지 옵션을 모두 사용하면 Next.js가 페이지에 대한 관련 요소를 자동으로 생성한다. ImageResponse 생성자를 이용해 동적 OG 이미지를 생성할 수도 있다. 정적 Metadata layout.js나 정적 page 파일에서 메타데이터 객체를 내보낸다. ※ 메타데이터는 서버 컴포넌트 요소이므로 클라이언트 컴포넌트에서는 사용할 수 없다. metadata의 title에 문자열 또는 객체..

🖥️ 데이터 추가하기 create 버튼을 눌러 /create 페이지로 이동해 title과 body를 작성한다. 1. 입력폼 만들기 // create/page.js export default function Create() { return ( ); } 2. 폼 제출하기 onSubmit 이벤트를 사용해 사용자의 입력을 받아 제출하는 동작을 수행해야한다. => 클라이언트 컴포넌트로 구현 "use client"; title과 body에 입력된 값을 담아 POST 요청을 보낸다. 서버는 json-server로 만든 서버를 사용한다. fetch로 POST 요청을 보낼 때는 options를 추가한다. method headers -> 콘텐츠 타입 정의 body -> 전송할 데이터. 통신 시 string 형태의 JSON..

노마드 Next.js 강의가 업데이트 되어 수강한 내용을 정리해 보았다. 🖥️ Client Component 클라이언트 컴포넌트에서 useState, useEffect, fetch를 사용해 데이터를 화면에 뿌린다. export default function HomePage(){ const [movies, setMovies] = useState([]); const getMovies = async () =>{ const response = await fetch(API_URL); const json = response.json(); setMovies(json); } useEffect(()=>{ getMovies(); },[]) return ( {movies.map((movie) => ( {movie.title..

🧑‍💻 Server Component vs Client Component React 18버전 이후부터 Server Component라는 개념이 추가되어 Server Component와 Client Component라는 개념이 구분되었다. 서버 컴포넌트와 클라이언트 컴포넌트에서 사용하는 api가 다르다. 따라서 클라이언트 컴포넌트에서 사용하는 useState, useEffect와 같은 함수를 서버 컴포넌트에서 사용하는 경우 오류가 발생한다. Server Component 서버에서 동작하는 컴포넌트 Next.js에서는 기본적으로 서버 컴포넌트로 동작한다. 서버 컴포넌트는 서버에서 먼저 해석이 된 이후에 클라이언트로 전달되어 표시된다. 서버 컴포넌트를 사용하면 서버에서 렌더링하고 선택적으로 캐시할 수 있는 U..

🧑‍💻 Next.JS 라우팅 Next.js에서는 URL을 수동으로 작성하지 않고 파일 시스템을 사용해 URL을 표현한다. 라우팅 네트워크 상의 주소로 이동하여 해당 주소에 연결되어 있는 데이터를 사용하는 일련의 과정 react의 경우 react-router-dom 패키지를 설치해 페이지 라우팅을 구현하지만 next에서는 정해둔 방식대로 폴더 구조를 구현하면 page 파일이 라우터 역할을 한다. (-> page 파일이 담긴 폴더의 이름이 경로가 됨) 1. 페이지 뼈대 만들기 상위 layout 파일에 공통으로 보여질 컴포넌트를 생성한다. 각 컴포넌트를 클릭하면 페이지가 이동할 수 있도록 a태그를 사용해 경로를 연결한다. export default function RootLayout({ children }) ..

🧑‍💻 Next.JS란? React를 기반으로 한 풀스택 웹 애플리케이션 프레임워크 React : 라이브러리, 다운받아 사용에 맞게 폴더 이름, 구조를 작성 => 사용자에게 주도권이 있음 Next : 프레임워크, 정해진 폴더 이름, 구조 등을 따름 => 사용자에게 주도권 없음 Next.js는 규칙에 맞게 코드를 작성하고 올바른 위치에 export하면 프레임워크가 알아서 처리하기 때문에 준수한 규격을 가진 웹앱을 만들 수 있다. Next.js의 특징 1. SSR SSR(Server Side Randering) 서버 측에서 먼저 자바스크립트를 실행해 HTML을 만들어 클라이언트 측에 전송해 렌더링하는 방식 Next.js는 React를 기반으로 하지만 CSR 방식을 사용하는 React와는 다르게 SSR 방식을..