Next.js 기초 23.12.19

오늘은 생활코딩 강의 기반 Next.js 를 연습해봤다 이번에는 바닐라 JS로 진행된다

npx create-next-app@latest .

 

테일 윈드안써봤지만 강의대로 일단 yes 타입스크립트는 이번강의에서 안쓴다고한다...

페이지 라우터를 사용하냐 앱라우터사용이냐로 많이 갈린다고하는데 여기서는 앱라우터를 사용하는걸로

이 화면이 나왔다면 next.js 개발환경 구축완료

 

npm run dev

 

next js에서는 개발환경 실행 명령어가 start 가아니라 dev이다

 

이후에 run build 후 run start 하면 페이지에 전송 용량이 줄어든것도 확인 가능하다

 

Next.js의 도로교통 시스템 - Routing

출저:https://opentutorials.org/course/5098/32350

 

layout 파일안에 props를 받아서 page를 출력해오고있다 children이 자동 출력중이다

리액트랑 별반 다를게 없어보인다

dynamic routing

페이지 경로마다 props.parms.id 를 통해 id값을 추출가능하다

경로는 read/[id]/page.js 새그먼트에 id를 부여하고싶을때는 [] 후 id폴더를 만든다

리액트 라우터 돔을 사용하다가 이렇게 손수 페이지를 분리하니

리액트 라우터 돔의 소중함을느끼는중이다

 

next.js 에서는 <a> 태그를 <Link> 로 바꾸는것 만으로도 SPA 구축이 가능하다

리액트만 가능한줄 알았는데 아니였다

https://opentutorials.org/course/5098/32364

fetch('http://localhost:9999/topics')
.then((resp)=>{return resp.json()})
.then(result=>{console.log('result',result);});

 

Json-server를 이용해서 간단하게 백엔드를 구축하고, 뒤에서 백엔드를 사용하는 방법도 알아봤다

---

server component

nextjs의 컴포넌트는 크게 server component와 client component로 구분됩니다. 특별한 처리를 하지 않으면 nextjs에서 컴포넌트는 server component 입니다.

위의 그림을 보면 S가 server, C가 client component의 사용 사례를 보여줍니다.

서버 컴포넌트는 아래와 같은 경우에 사용합니다.

• 사용자와 상호작용하지 않는 경우
• 백엔드에 엑세스하면서 보안적으로 위험한 정보를 주고 받는 경우

 

클라이언트 컴포넌트는 아래와 같은 경우 사용합니다.

• 서버 컴포넌트로 해결되지 않는 경우
• 사용자와 상호작용하는 경우
• useEffect, useState, onClick, onChange와 같은 API를 사용해야 하는 경우
• useRouter, useParams와 같은 nextjs의 client component API를 사용하는 경우

---

백엔드를 직접 구축하는게 많이 어색했지만 뭔가 써본듯한 느낌이 많이들었고

역시나 익숙해 짐이 필수인거같다. 내일은 udemy 에서 세일한다길래 추천받은

React 완벽 가이드 with Redux, Next.js, TypeScript

강의를 들어볼건데 기대가 된다.치킨 보다 싸길래 한번 구매해봤다.

들으면서 이전에 완료하지못한 개인과제들도 직접 해봐야겠다