Next.js 문서 읽기 - 개요

화면 개발 시 주로 Vuejs를 사용했는데 실제로 부딪혀보며 사용하다가 모르는 게 있으면 그 때 그 때 구글링하여 학습하곤 했다. 그러다 Vuejs 문서를 함께 보는 스터디에 참가했는데 문서를 전체적으로 훑고나니 몰랐던 방식도 많았고 잘못된 사용 방식도 많았다는 것을 알았다. 그 뒤로 무언가 학습할 때 먼저 사용해보고 어느정도 맛을 봤다 싶으면 시간을 내어 문서를 처음부터 끝까지 정독하려고 한다. 
이번에 개인 프로젝트 및 그룹 프로젝트를 진행하면서 Next.js를 몇 번 사용하게 되었다. 그리고 이제 Next.js를 의도에 맞게 효율적으로 사용하기 위해 문서를 읽고 이 곳에 기록해보려고 한다. 

 

---

 

Next.js는 리액트를 기반으로 만든 프레임워크이다. 그리고 리액트는 자바스크립트 라이브러리로써 UI를 구축하는데 효율적인 도움을 준다.
자바스크립트만으로 웹을 만들다가 왜 리액트라는 라이브러리가 등장했을까? 그리고 리액트에서 그치지 않고 이를 이용한 Next.js라는 프레임워크가 나오게 되었을까? Next.js에 대해 배우기 전에 먼저 Next.js가 어떤 환경에서 탄생하게 되었는지 살펴보아야 할 것이다. 

이를 위해 Next.js의 Learn Next.js 문서를 기반으로 아래와 같은 과정으로 학습해볼 것이다.

1. 자바스크립트에서 리액트로
DOM 대해 간단한 개념을 익히고 자바스크립트로 DOM 조작을 해봄으로써 명령형 프로그래밍이란 무엇인지 알아보며, 리액트를 통해 DOM 조작을 다시 해보며 선언형 프로그래밍이 무엇인지 알아봄으로써 리액트가 어떤 이점이 있는지 살펴본다. 

2. 리액트에 Next.js로
위에서 작성한 리액트 코드를 활용하여 직접 Next.js로 전환해봄을써 Next.js가 탄생하게 된 이유를 고민해본다.

3. Next.js로 간단한 앱 만들기
Learn Next.js 문서를 따라서 앱을 만들어보며 Next.js의 이점을 직접 살펴보고 Docs 문서를 참고하여 추가적인 내용을 학습한다.

4. Next.js에 대한 학습 정리
Next.js에 대한 학습을 마쳤다면 이제 최종적으로 왜 Next.js를 사용하는지 정리하고 또 어떤 상황 때 Next.js를 사용하면 좋을지에 대해 고민해본다.