NextJS 시작
NextJs는 다양한 유명 웹사이트에서도 사용이 되고, 좋은 성능, 효율성, 개발자 경험으로 React 프레임워크 중에 단연 1등인 프레임워크이다.
하기 전 필요한 요구사항
React의 jsx, state, props, data fetch, routing 기본 개념 숙지해야한다.
NextJS란?
Next.js는 서버 사이드 렌더링, 정적 웹 페이지 생성 등 리액트 기반 웹 애플리케이션 기능들을 가능케 하는 Node.js 위에서 빌드된 오픈 소스 웹 개발 프레임워크이다.
대표적인 사용이유로는 SSR과 간편한 Routing이 있다. ( SSR은 제대로 글을 작성할 예정 )
NextJs에 대해서 알아보기전에 React와 NextJs의 차이점을 먼저 알고 가야한다.
라이브러리? 프레임워크?
React는 라이브러리이고 NextJs는 프레임워크이다.
라이브러리는 코드 내에서 우리가 사용하는 것이다.
원하는 아키텍쳐를 사용하여 원하는 방식으로 코드를 짤 수 있다.
객체 지향, 함수 지향..또 원하는 언어로 말이다.
라이브러리라는 것은 코드내에서 사용하려고 설치하는 것이고, 우리가 마음대로 사용할 수 있다.
파일 이름, 폴더 이름도 마음대로 해도 된다.
간단하게 생각해서 우리가 필요할 때 사용할 수 있는 것이다.
예시로, 우리가 어떤 것을 계산하는 프로그램을 만든다고 가정하였을 때
우리는 모든 코드를 생각해서 작성하지만, 거기서 어떤 계산을 하는 작업이 필요할 수 있는데 그 어떤 계산을 작업해주는 라이브러리를 깔아서 우리 코드에 필요할 때 넣어줄 수 있다.
이게 라이브러리이다.
여기서 React는 UI Interface를 bulid하는데 사용하고, 반응형 사용자 인터페이스를 구축하는데 도움이되는 라이브러리이다.
그 뿐이다. React를 사용하면서 제약은 없다. css에 styled-component를 사용하던지, tailwind를 쓰든 상관이 없다. 그냥 우리가 하고 싶은데로 하면 된다.
프레임워크는 프레임워크가 우리의 코드를 사용한다는 점이다.
여기에서는 우리가 자유롭게 코드를 짤 수가 없다.
즉, 우리가 주도권이 없고, 프레임워크 주도하고 당담을 한다.
프레임워크 사용하면, 프레임워크가 우리를 위해 많은 일들을 대신해준다.
프레임워크는 여러가지 결정을 대신해주고, 자동화해준다.
NextJs에서 지원해주는 것은 전부 구현이 되어있기에 우리가 할 일은 없지만, 우리에게 통제권은 주어지지 않는다. NextJs가 구현해준 기능들을 사용하기 위해서는 NextJs에서 제시하는 규칙을 따라야한다.
이런것이 프레임워크이다. 우리가 규칙을 지켜야 하는 것이다.
우리가 NextJs를 import해서 사용하는 개념이 아니라, NextJs 프로젝트를 시작하면 NextJs에서 우리의 코드를 가져가는 느낌이다.
그래서 우리가 NextJs를 사용하기 위해서는 NextJs의 Role을 공부해야한다.
라이브러리 : 우리(코드 작성자)가 결정권을 가짐
프레임워크 : 프레임워크의 룰을 따라야 하기에 우리(코드 작성자)가 결정권을 가지지 않음
NextJs
그럼 NextJs를 사용함으로서 우리가 통제를 못하는 부분이 있는데로 왜 사용하느냐?
NextJs가 이미 많은 기능들을 가지고 있기 때문이다. 우리는 그것을 사용하기만 하면 된다.
우리가 해야되는 것은 코드를 올바른 파일에 넣고, 올바른 폴더에 넣는 것뿐이다.
Project SetUp
이번에는 Next프로젝트를 생성하고 설정해볼 것이다.
설치방법에는 자동설치와 수동설치가 있는데, 설치를 할 때 무엇이 있는지 알아보기 위해서 수동설치를 해볼 것이다.
- 다운받고 싶은 폴더에
npm init -y라고 작성해준다. - 그리고 package.json의 license부분만 MIT로 바꿔준다.
npm install react@latest next@latest react-dom@latest라고 작성해준다.- package.json의 script안을 비우고
"dev": "next dev"이라고 작성해준다.
일단은 여기까지이다.
이제 dev라고 작성하면, NextJs가 실행되고 우리의 코드를 찾을 것이다.
NextJs는 app이라는 폴더의 page를 찾으려고 할 것이다. (이름을 정확히 똑같이 해줘야한다.)
NextJs 시작될 때 우리의 웹사이트를 빌드하려고 할 때 app의 page를 찾아 빌드하기 때문이다.
app/page.tsx를 만들어준다.- 기본 컴포넌트를 만들어준다. (vsc가 에러를 발생해도 상관없음) (next 실행하면 자동으로 TypeScript설정을 설치해준다.)
npm run dev를 작성해준다.- 로컬 3000번 서버에 열린다.
우리는 이 작업을 하면서 아무것도 import를 한적이 없다. 그리고 layout.tsx라는 파일이 자동으로 생성된 것을 알 수 있는데 이것이 무엇인지는 다음시간에 알아볼 것이다.
끝
