[병원 지도 프로젝트] Next.js 사용하는 법, 설치 방법, 초보자 가이드 완벽 정리

Next.js란?

 

웹 개발을 할 때 React를 많이 사용합니다.

Next.js는 React 기반 프레임워크로

React만으로는 구현하기 어려운 개발을 잘 처리할 수 있게 해줍니다.

Next.js는 Vercel에서 만든 오픈소스 React 프레임워크입니다. React 라이브러리에 여러 기능을 추가하여 실무에서 바로 사용할 수 있는 완성도 높은 웹 애플리케이션을 빠르게 개발할 수 있게 합니다. 

 

🤔❓ 언제 Next.js를 사용하면 좋을까요?

• SEO가 중요한 웹사이트 (블로그, 쇼핑몰, 회사 홈페이지)
• 빠른 초기 로딩이 필요한 서비스
• React를 사용하면서 프로젝트 설정을 간소화하고 싶을 때
• 풀스택 개발을 한 프로젝트에서 진행하고 싶을 때

 

이번 포스팅에서는 이 Next.js로 웹을 만들기 위해 설치하는 과정을 담았습니다!

 

1. VS Code

코드 편집기는 보편적으로 쓰는 VS Code로 시작하겠습니다. 혹시 없는 분들은 아래에서 다운 받아주세요.

 

🐸 다운로드: https://code.visualstudio.com/download

Download Visual Studio Code - Mac, Linux, Windows

 

🐸확장 프로그램 설치

왼쪽 메뉴에 Extensions를 누르고, 아래 아이템들을 설치합니다.

• ES7+ React/Redux/React-Native snippets
  • React 코드를 단축키를 이용해서 자동완성 해줌
• Prettier - Code formatter
  • 저장하면 코드를 자동으로 예쁘게 정렬해줌
• Auto Rename Tag
  • HTML 태그 짝 자동 수

 

2. Node.js 설치

Node.js는 JavaScript 실행 환경입니다. 원래 자바 스크립트는 브라우저에서만 실행되는데, Node.js를 사용하면 컴퓨터에서 자바 스크립트를 실행할 수 있습니다. Next.js나 React 같은 도구를 실행할 때 꼭 필요합니다.

 

🐸 다운로드: https://nodejs.org/ko/download

Node.js — Node.js® 다운로드

 

🐸 cmd에서 설치 확인

#node.js 버전 확인
node -v

#npm 버전 확인 - 라이브러리 관리 도구, Node.js 설치 시 자동 포함
npm -v

 

3. Next.js 프로젝트 생성

🐸 VS Code에서 cmd창으로 Terminal을 엽니다.

 

이 때 아래에 터미널이 열리는데, powershell이 열렸다면 Command Prompt(cmd)로 다시 엽니다.

powershell에서는 설치가 안 되더라구요.

 

🐸 Next.js 프로젝트 생성

cmd 터미널에 아래 코드를 따라치고 생성해줍니다! 

뒤이어 나오는 질문들은 저는 다 ok 했습니다.

# 설치하고 싶은 폴더로 이동
# 이 경로 예시는 제 프로젝트 모음 폴더입니다. 본인 것으로 변경해서 쓰세요!!!
cd development/hospital

# Next.js 프로젝트 생성
npx create-next-app@latest {프로젝트 이름}

 

4. 생성 완료

이렇게 웹을 만들 수 있는 기반이 만들어졌습니다~!

 

 

다음 게시물에는 병원 지도를 만드는 과정을 올리도록 하겠습니다.

저도 배우는 입장이니 잘못된 부분이나 모르는 점은 편하게 댓글 달아주세요!