🌱 React 첫 프로젝트 생성하기 (create-react-app) - 완전 초보 가이드

React의 완전 저같은 초보가 프로젝트를 만들어 볼 수 있는 방법을 공유하려고 한다.

순서대로 진행해보자. 🚀

 

🎈1. React를 시작하려면?

React 프로젝트를 만들기 위해선 Node.js 코드 편집기 (Visual Studi Code, 줄여서 VS Code - 제일 많이 사용함)이 필요하다.

🎈2. React 환경설정하기

2-1. Node.js 설치하기

node.js 공식 사이트 다운로드

🔹Windows에서 설치

1. Node.js 공식 사이트 접속
2. LTS(추천) 버전 다운로드
3. 다운로드한 설치 파일 실행
4. 다음 -> 다음 -> 설치로 진행 (중간에 "Add to PATH" 체크 확인)
5. 설치 완료 후, 명령 프롬프트(cmd)를 열고 아래 명령어 입력:

node -v

버전이 표시되면 설치 성공!

 

🔹Mac에서 설치

1. Node.js 공식 사이트 에서 LTS버전 다운로드
2. dmg 파일 실행 후 설치
3. 터미널을 열고 버전 확인:

node -v

 

💡 팁: Mac 사용자 중 터미널 설치를 선호하는 분들은 brew install node로 설치할 수 있음. (Homebrew 필요)

 

2-2. VSCode 설치 + 필수 확장 프로그램

코딩은 메모장으로도 가능하지만, VScode를 쓰면 훨씬 편하고 작업 속도도 빨라진다.

1. VSCode 공식 사이트 접속
2. 운영체제에 맞게 다운로드 후 설치
   1. Mac에서는 brew로 설치 가능하다.
      
      

brew install --cask visual-studio-code

 

3. VSCode 실행 후, 왼쪽 확장(Extensions) 아이콘 클릭

4. 검색창에 아래 확장팩 입력 후 설치

 

• ES7+ React/Redux/React-Native snippets (React 코드 자동완성)
• Prettier - Code formatter (코드 자동 정렬)
• Auto Rename Tag (HTML 태그 자동 이름 변경)
• React Developer Tools (React 디버깅)

💡 팁: 테마도 마음에 드는 걸 설치하면 코딩할 맛이 나겠죠?

 

 

🎈3. React 프로젝트 생성하기 (create-react-app)

이제 준비는 되었으니, 첫 React 프로젝트를 만들어 보자.

1. 터미널(cmd or VScode 터미널) 열기

2. 원하는 폴더 위치로 이동:

cd 원하는_폴더_경로

 

3.  create-react-app 명령어 실행:

npx create-react-app my-app

여기서 my-app은 프로젝트 이름이다. 마음대로 변경 가능!

 

4. 설치가 끝나면 프로젝트로 폴더로 이동:

cd my-app

 

5. 개발 서버 실행:

npm start

 

6. 브라우저에서 http://localhost:3000 열기 -> React 로고가 보이면 성공이다.

 

 

Next.js의 Pages Router는 풀스택 React 프레임워크이다.

npx create-next-app@latest

cd my-app

npm start

 

Next.js의 App Router는 React 팀의 풀스택 아키텍처 비전을 구현하기 위해 재설계된 Next.js API이다. 이를 통해 서버에서 또는 빌드 중에 실행되는 비동기 컴포넌트에서 데이터를 가져올 수 있다.

Next.js는 Vercel이 관리합니다. 어떤 Node.js 서버, 서버리스 호스팅 또는 직접 소유한 서버 어느 곳에라도 Next.js 애플리케이션을 배포할 수 있다. Next.js 는 서버가 필요없는 정적 내보내기Static Exports도 제공한다고 한다.act 팀의 풀스택 아키텍처 비전을 구현한 기능은 무엇인가요?

npx를 사용하려면 로컬 개발 node 버전이 14이상이 되어야 가능하다 (단 서버에서는 필요하지 않음)

Create React App is deprecated.

 

🎈4. 프로젝트 구조 간단히 살펴보기

프로젝트를 열면 이런 폴더들이 보입니다:

• node_modules : 프로젝트에 필요한 라이브러리
• public : 정적 파일(html, 이미지)
• src : React 코드 파일 (여기서 개발)
• package.json : 프로젝트 설정

🎈5. 마무리

여기까지 따라왔다면, 이제 React 프로젝트가 돌아가고 있을 거다. 🎉