0️⃣세팅전 준비
Node.js 및 npm 설치
리액트 애플리케이션을 개발하기 위해서는 먼저 Node.js라는 것과 npm(Node Package Manager)이라는 것을 설치해야 해요.
Node.js는 자바스크립트 런타임 환경이며, npm은 Node.js 패키지를 관리하는 도구입니다.
🙋🏻 : 런타임 환경이 무슨 말이에요??
🐸 : 물고기는 물에 넣어야 움직이고, 새는 하늘에서 날아야 하듯
내가 짠 코드가 갑자기 아무곳에서나 살아갈 수 없어요
그래서 런타임 환경이란! 간단히 말해서, 특정 프로그래밍 언어로 작성된 코드가 실행되는 환경을 의미해요
예를 들어,Java에서는Java Virtual Machine (JVM)이 라는 것이 런타임 환경의 역할을 해요.
Python에서는Python 인터프리터가 런타임 환경을 제공해요.
그리고 브라우저에도브라우저의 JavaScript 엔진(V8, SpiderMonkey 등)아라는 런타임 환경을 제공하기 때문에 우리가 만든 웹페이지가 돌아가는 것이죠,서버측면에서는Node.js가 JavaScript 코드의 실행 환경을 제공해요.
따라서 런타임 환경은 특정 언어에 국한되지 않고, 그 언어로 작성된 코드가 실행되는 환경을 일반적으로 나타내는 개념입니다.
🚩 런타임 환경과 서버에서의 런타임환경 역할에 대해서는 따로 정리해볼게요!
Node.js 공식 웹사이트 에서 최신 버전의 Node.js를 다운로드하여 설치합니다.
Node.js 설치가 완료되면 npm이 함께 설치됩니다.
설치를 확인하기 위해 터미널 또는 명령 프롬프트에서 다음 명령어를 실행합니다.
node -v
npm -v각각의 명령어는 현재 설치된 Node.js와 npm의 버전을 출력합니다.
1️⃣ Create React App으로 프로젝트 자동 생성
Create React App은 리액트 애플리케이션을 쉽게 생성하고 관리할 수 있도록 도와주는 공식 도구입니다.
다음 명령어를 사용하여 새로운 리액트 프로젝트를 생성합니다.
npx create-react-app my-react-app
npx create-react-app [내가 원하는 프로젝트 폴더이름]
ex) npx create-react-app test-app
프로젝트가 성공적으로 생성되었다면, 생성된 디렉토리로 이동하여 작업을 시작합니다.
cd test-appCreate React App은 자동으로 개발 서버를 시작하고 프로젝트를 브라우저에서 볼 수 있도록 해줍니다. 다음 명령어를 실행하여 개발 서버를 시작합니다.
🐸 : 터미널에서 세팅하고 있고 VS Code가 깔려있다면 code . 명령어로 현재 프로젝트를 vsCode로 열 수 있어요
npm start위 명령어를 실행하면 기본 브라우저에서 http://localhost:3000 으로 개발 서버가 열리고, 리액트 애플리케이션을 확인할 수 있습니다.
끝🙋🏻
💬 : 위 내용에대해 더 궁금한점이 있거나,
틀린내용이 있거나
질문이 있다면 댓글로 달아주세요.! talk!talk!
