Jay's Coding Log

1. Next JS란?

 Next JS는 React 기반의 웹 애플리케이션 개발을 쉽게 만들어주는 JavaScript 프레임 워크다. 아마 프로그램을 처음 접하는 사람은, 프레임 워크가 무엇인가? 하는 질문을 갖게 될 것이다.

 프레임 워크는 한 마디로 정리하자면, 효율적인 도구라 정의할 수 있겠다.

 가령 네가 집을 짓는다고 가정을 해보자. 

 비어있는 땅에 집을 짓기 시작한다면, 너의 노력과 시간은 상상 이상이상으로 투자되어야 할 것이다. 하지만 이미 어느정도 구조가 잡혀있는 집을 짓는다면?

이미 벽, 천장, 바닥, 수도 등 기본 시스템이 갖추어져 있기에 훨씬 쉽게 집을 지을 수 있을 것이다.

즉, NextJS는 어느정도 시스템이 갖춰진 개발 도구라 할 수 있겠다.

2. Next.js 설치

 그렇다면 이제 Next JS를 설치해 보자. 2023년 12월 기준 Next JS 는 14버전이며, 이에 대한 자세한 내용은 공식 홈페이지를 통해 얻을 수 있다. 아래는 홈페이지 URL이다.

https://nextjs.org/

이제 설치를 시작해보자!

2_1. VsCode 설치하기

NextJS를 비롯해서 프로그램 개발에, VsCode는 정말 큰 도움이 된다. 특히 우리는 cmd 명령어 기반으로 설치를 해야하기 때문에, VsCode가 있으면 훨씬 쉽게 개발을 진행할 수 있다.

Goolge에 VsCode를 검색해서 VsCode의 공식 사이트에 들어가자.

이제 다운로드에 들어가면, 자신의 운영체제에 맡는 VsCode를 다운받으면 된다.

우리는 Window기반으로 실습을 할 것이기에, 처음 "Windows"를 클릭하여 다운로드를 시작하자.

VsCode를 설치할 때 가장 주의할 점은,

PATH에 추가

라는 선택지를 꼭 선택해야 한다는 점이다.(이거 선택안하면 나중에 프로젝트 진행하다 골치아픈 경우가 많다.)

그러면 설치를 마무리 하자!

2_3. Node.js 설치하기

이제 다음 차례로 Node.js를 설치하자.

Node.js는 쉽게 설명하자면, 기존에 웹 브라우저에서 실행되던 JavaScript 언어를 서버에서도 실행될 수 있도록 해주는 Runtime Environment(프로그램 실행 환경)이다.

혹시 내 컴퓨터에 Node.js 가 설치되어있는지 확인하려면, 버전을 확인해주는 명령어(node -v)를 실행해보면 된다. 우선 VsCode를실행해서 터미널을 열자.

[ VsCode Open ] - [ Terminal ] - [ New Terminal ]

그리고 아래 명령어를 입력하자.

node -v

없다면 이번에도 Node.js라는 단어를 인터넷에 검색하고 다운 받자.

여기서 무엇을 설치해도 사실 큰 문제는 없지만, 간혹 버전이 안맞으면 설치가 안되는 파일이 있다.(그렇기에 자신이 하는 프로젝트의 상황에 따라 설치를 전행하자)

가장 추천하는 방법은 LTS 최신 버전을 설치하는것을 추천한다.

Node.js도 설치를 그냥 따라서 설치를 진행하면 끝이난다.

2_3. Next.js 14 설치하기

이제 드디어 Next.js 14버전을 설치해 보자.

우선 폴더 하나를 생성하고, VsCode로 폴더를 열어보자.

[VsCode 실행]-[좌측 아이콘 클릭] - [Open Folder] - [폴더선택]

이제 터미널을 다시 열고, 아래의 명령어를 입력하자.(최신 버전 설치)

npx create-next-app@latest

그러면 아래와 같이 계속 설치를 진행할거란 질문이 나타난다.

키보드 (y)를 클릭하자.

그리고 난 후, 개발 환경을 세팅하는 질문이 나타난다. 

질문에서 어떤걸 선택해도, 프로그램 제작에 큰 영향을 주지 않는다.

(다만 나와 똑같이 프로젝트를 진행해보고 싶다면, 아래의 Yes or No를 똑같이 선택하는게 도움이 될것이다.)

선택이 끝났다면 설치를 기다리고, 설치가 끝났다면 다음과 같은 파일이 설치 된 것을 확인할 수 있을 것이다.

오늘은 Next.js 14버전을 다운받아 보았다.

다음시간에는 가장 쉬운 ToDoList를 만드는 것부터 공부를 해보자.