[Next.js] Section01 인트로

제로초님의 Next + React Query로 SNS 서비스 만들기로 공부를 하고자 한다. 

 

 

# Chapter 01

Next13 이후 주요 변화 : 

React 18 도입 및 서버 컴포넌트 활용 

 

서버 컴포넌트란? 

서버에서 리액트 컴포넌트를 미리 렌더링하고 완성된 HTML을 클라이언트로 보내주는 방식이다. 

클라이언트가 데이터를 받아 화면을 구성하는 대신, 이미 렌더링된 HTML을 받아오기 때문에 초기 로딩 속도가 빨라진다. 

 

서버 컴포넌트로 하면 Next 서버에 무리가 많이 가기 때문에, 서버 최적화(캐쉬 등) 필요하다. 

그래서 Next에서는 서버 캐시를 적극적으로 활용하기 시작했다. 

캐시는 동일한 요청이 반복될 때, 서버가 새로 데이터를 가져오지 않고 저장된 데이터를 재활용하도록 한다. 

 

App Roter 등장

 

Next와 React의 차이점 

1. React란? 

React는 UI을 그리는데 초점을 맞춘 라이브러리이다. 

주된 기능은 컴포넌트 기반 설계, 가상 DOM, 상태 관리 등이 있다. 

 

2.Next란? 

Next는 React 위에서 동작하는 프레임워크이다. React의 부족한 기능을 보완한다.

 

주요 기능 : 

데이터 가져오기  / 라우팅 / 서버와 클라이언트의 통합 / 캐싱 및 최적화 / 배포 

 

 

효율적인 학습법 

클론 코딩할 때 뇌 빼고 코딩 하지 말아라 

먼저 만들어보고 비교해보는게 좋다. 

강좌 따라하는데 그치지 말고 기능을 스스로 추가해볼 때 그때 실력이 늘어난다. 꼭 명심해라. 

 

 

# Chapter 02

Next15에서 바뀐점 : 

공식 문서에 Breacking Change라고 적혀 있는게 있으면, Next15로 업그레이드 했을 때 에러가 나온다. 그런것들은 유심히 봐야한다. 

heards,cooki, params, searchParams 비동기로 바뀌어서 사용할 때 앞에 await 붙여주면 된다. 

 

 

#Chapter 03

클론 코딩의 장점 : 

1. 세계적인 기업 트위터에서 만든 코드를 개발자 도구에서 스스로 공짜로 볼 수 있다. 클론 코딩한다는거는 아주 훌륭한 소스를 습득할 수 있다는거다.

 

2.완벽히 똑같이 구현하려다 보면 예상치 못한 문제에 직면하게 되고, 이를 해결하기 위해 공식 문서나 자료를 꼼꼼히 읽고 시도하면서 실력이 크게 향상이 된다. ex -> 트위터 클론 코딩 중 공식 문서 3회독 했다고 한다. 

 

3. 강제적인 학습 효과가 생긴다. 클론 코딩 과정은 혼자서 하기 꺼려질 만한 기능도 억지로 따라 해야 하는 상황을 만든다. 똑같이 만들기 위해서 온갖 시도를 다 하게 된다. 

 

클론 코딩 주의할점!!

뇌를 빼고 따라 하지 말아라. 그건 타자 연습이다. 항상 생각을 하고 해야 한다. 

뇌를 빼고 하면 그냥 코딩 쇼를 몇 시간 동안 보는거나 마찬가지다. 그래서 능동적으로 해야한다. 

클론 코딩에서 배운 기술을 바탕으로 새로운 기능을 추가하거나, 프로젝트를 만들어서 다시 클론코딩을 하거나 스스로만의 포트폴리오를 만들어서 활용해야한다. 

 

 

chapter 4,5는 따로 정리를 해서 올리겠습니다. 

#Chapter 06

이 강의를 효율적으로 보는 방법 : 

강의를 처음부터 쭉 보기 / 수강생 노트 폴더가 있는데 그거 같이 보면서 공부를 하면 더 좋다. 

코드가 너무 많아서 따라서 치는 강의가 아니다. 

일단 코드를 쭉 보면서, 강의를 눈으로 흐름을 쭉 보고, 직접 따라 만들어 봐라. 영상 보면서 따라 치는거는 자유지만, 권장 하는 방식이 아니다.