Next와 React의 차이

React는 라이브러리고 Next.js는 프레임워크야!

라이브러리
라이브러리는 코드 내에서 우리가 사용하는 것이다.
원하는 아키텍쳐를 사용해 원하는 방식으로 코드를 작성한다.
객체 지향 프로그래밍을 할 수 있고, 함수 지향 프로그래밍도 할 수 있고...
아무튼 원하는 언어로 작성 할 수 있다!

라이브러리는 코드 내에서 사용하려고 설치하는 것이지만 사용의 주체는 우리이다.
우리가 구조(아키텍쳐)에 대한 모든 것을 정한다.
예를들어 파일을 어디에 저장할지, 폴더의 이름은 무엇인지, 파일의 이름은 무엇일지 등등...
즉, 라이브러리는 우리가 필요할 때 사용할 수 있는 것!
프레임워크
프레임워크는 프레임워크가 우리의 코드를 사용한다!
여기서는 우리에게 주도권이 없고, 프레임워크에게 주도권이 있다.
대신 프레임워크를 사용하면 프레임워크가 우리를 위해 많은 일들을 해준다!
여러가지 결정을 우리 대신 해주며 자동화가 가능하다.
폴더 이름이 어떻게 될 지 생각하거나, application을 실행하거나 하는 것이 전혀 필요없는 것!

단, 프레임워크를 사용하기 위해서는 라이브러리를 사용할 때처럼 우리가 마음대로 사용하는것이 아닌 프레임워크의 규칙을 지켜서 사용해야한다!
우리가 올바른 방법으로, 올바른 위치에 파일을 넣고, 올바른 함수명을 사용하는 등 프레임워크의 규칙을 잘 지킨다는 전제하에 프레임워크는 우리 대신 일을 해줄것이다. (여기서는 Next.js)
하지만 규칙을 따르지 않는다면.. 프레임워크는 우리를 위해 일해주지 않을것이다.

그리고 우리가 사용하려고하는 Next.js는 프레임워크이므로, 우린 Next.js의 규칙을 따르면서 프로젝트를 진행할 것이다.

Next.js 시작하기

Next.js를 본격적으로 시작하기 앞서 우리는 Next.js를 설치해야 한다.
설치 방법으로는 자동 설치와 수동 설치가 있는데 우리는 수동 설치 방법으로 Next.js를 설치해보겠다.
이유는 처음에 수동 설치를 통해 Next.js를 배우게 되면 다음에 자동 설치를 통해 어떤 것들이 생성되고 있는지, 어떤 일이 일어나고 있는지, 어떤 파일들이 왜 존재하는지 알 수 있기 때문이다.

일단 VSC에서 Next.js를 설치할 폴더를 생성하거나 이동하자.

그 후 터미널에 npm init -y 이라는 명령어를 실행해보자.
그러면 여러가지 정보를 가진 package.json 파일이 생성된다.
혹시 모르니 license 부분을 MIT로 바꿔주도록 하자.

이제 react, next, react-dom 을 받아보자.
npm install react@latest next@latest react-dom@latest
위 명령어를 터미널에 입력해 모두 최신버전으로 받는다.

모두 받았다면 package.json 파일의 script 부분을 아래와 같이 수정하자.
"scripts": { "dev": "next dev" }
이는 dev라는 명령어를 실행하면 Next.js를 실행시키고, Next.js가 우리의 코드를 찾을것이다.
(Next.js는 라이브러리가 아닌 프레임워크이기 때문이다!)

app/page.tsx를 생성하자.
Next.js는 코드를 찾은 후에 page라는 파일을 찾으려고 하는데, 이 page라는 파일은 반드시 app이라는 폴더 안에 있어야 한다.
(이때 tsx가 아닌 jsx로 생성해도 상관없다. 하지만 필자는 tsx를 사용해보도록 하겠다.)
기본적인 컴포넌트 export하기.
 export default function Tomato() {
 return <h1>Hello NEXT!</h1>;
}
위 코드를 page.tsx에 입력 후 저장하자.
그럼 VSC가 에러를 띄울건데 우리는 명령어를 실행시켜 볼거라 걱정하지 않아도 된다.
터미널에 npm run dev 명령어를 실행하자.
만약 page.tsx 파일에 에러가 떠있더라도 상관없다.
왜냐하면 Next.js는 멋진 프레임워크이기 때문에 프레임워크를 시작하는 순간 우리가 typescript를 원하고 있다는 것을 알아내고, 우리가 필요한 typescript를 자동으로 설치해주기 때문이다!!

터미널에 위와 같이 typescript를 사용하려는 것 같으니 자동으로 설치하겠다는 문구가 나온다.

이제 localhost:3000 에 접속해 Next.js 서버가 제대로 작동했는지 확인해보자.

제대로 작동했다면 위와 같이 나올것이다.
이는 브라우저에 localhost:3000을 쳐도 나오지만 VSC 터미널에서 나온 localhost:3000을 클릭해도 자동으로 브라우저에 띄워준다.

이렇게 해서 우리는 Next.js를 사용할 준비가 되었다.
그런데 무언가 이상하지 않은가?
그렇다! 우리의 app폴더에 layout.tsx라는 파일이 새로 생성되었다!!
다시 터미널을 살펴보자.

오.. 아무래도 Next.js가 app/page.tsx에 root layout이 없어 우리를 위해 자동으로 생성해준 것 같다.
이것이 무엇인지, 왜 필요한지는 다음 글에서 알아보도록 하자.