Next.js TIL
1.[Next TIL]Next.js가 필요한 이유
react는 유저가 화면에서 보는 요소들을 구현하는 js 라이브러리입니다.Next.js가 프레임워크로써 react에 필요한 도구와 설정을 처리하고 코드의 구조, 추가적인 기능들과 최적화까지 함께 제공한다는 의미입니다.Next.js를 사용하면 react로 ui를 구현하고
2.[Next TIL] 서버 컨포넌트
RSC란 서버에서 동작하는 컴포넌트를 말한다. 서버 컴포넌트는 서버에서 한차례 해석된 이후 클라이언트에 전달된다.RCC란 클라이언트에서 동작하는 컴포넌트를 말한다.클라이언트 컴포넌트는 클라이언트가 js 번들(js 파일 묶음)을 다운받은 후 해석하게 된다.클라이언트로 내
3.[Next TIL]라우팅(routing)
웹 어플리케이션에서 경로란 URL Path를 의미합니다.next.js에선 파일 시스템 기반으로 경로를 지정합니다.app이라는 폴더를 만들고 그 아래 dashboard, settings라는 폴더를 만들면 URL path가 폴더 이름과 동일한 순서를 따라 만들어집니다. n
4.[Next TIL]페이지 간 이동
< Link > 컴포넌트는 HTML < a > 태크의 확장된 버전이다.useRouter는 클라이언트 컴포넌트에서만 사용할 수 있다.
5.[Next TIL]데이터 페칭(data fetching)
Next.js 에선 Web API에서 제공되는 fetch API의 확정된 버전을 제공합니다. 덕분에 Next.js에선 fetch로 각각의 페치 요청에 대한 캐싱(Caching)과 재검증(Revalidating) 동작을 설정할 수 있다.캐싱이란? 파일 복사본을 캐시 또는
6.[Next TIL]메타데이터
페이지를 설명하는 데이터. 데이터에 대한 데이터설정 기반 메타데이터(Config-based Metadata)와 파일 기반 메타데이터(File-based Metadata)가 그 방법입니다.설정 기반 메타데이터 방식에는 정적 방식(Static Metadata)과 동적 방식
7.[Next TIL] 날씨앱 - 프로젝트 세팅 및 라우팅 구성하기
npx create-next-app < project-name >라우팅을 기반으로 페이지 경로를 구성한다.app/page.tsx에 홈을 만듭니다.app/\[location]/page.tsx 에 상세 페이지를 만듭니다. location으로 전달되는 params 값을
8.[Next TIL]날씨앱 - 페이지 간 이동하기
홈에서 Link 컴포넌트를 활용해 상세로 이동하는 동작을 구현합니다. href 프로퍼티에 경로를 입력해주면 됩니다.상세에서 useRouter를 이용해 홈으로 이동하는 동작을 구현합니다. useRouter를 사용하는 별도의 클라이언트 컴포넌트를 만들어 서버 컴포넌트에서
9.[Next TIL] 날씨앱- 페이지 스타일 입히기
.module.css라는 확장자 파일을 하나 만들어줍니다.선언한 파일을 불러와 컴포넌트에 사용합니다.이렇게 선언한 파일을 layout.tsx 파일에 불러온다.
10.weather api 사용하기 & transform.tools으로 json을 typescript로 바꿔기
weater api 홈페이지https://www.weatherapi.com/ 대시보드에서 api key를 복사한다.json을 typescript로 바꿔주는 사이트로 json to typescript 로 검색해주면 된다. https://transform
11.[Next TIL]메타데이터 다루기
항상 고정된 메타데이터를 지정하는 건 metadata 객체를 정의하는 것으로 해결된다.데이터에 따라 다른 메타데이터를 지정하기 위해선 generateMetadata라는 이름의 함수를 정의함수 내에서 fetch 함수를 이용해 데이터를 가져올 수도 있으니 원하는 어떤 문구
12.[Next TIL]vercel로 배포하기
Next.js 앱을 배포하는 가장 쉬운 방법은 Vercel을 이용하는 것이다.Vercel은 Next.js를 만드는 곳이다.https://vercel.com/github에 들어가게 되면 select repositories에서 vercel에서 배포하고 싶은 파일을