[React.js] 리액트의 기초 환경 설정, 초기 세팅

리액트 프로젝트를 시작하는 가장 쉬운 방법은 Create React App이라는 툴을 사용하는 것이다. 

일단 그러려면 Node.js를 설치해야 한다. Node.js는 리액트와 직접적으로 관련있는 기술은 아니다. 다만 브라우저 밖에서 자바스크립트 코드가 실행될수 있도록 돕는 것으로 자바스크립트를 위한 런타임 환경을 제공한다. Create-react-app을 사용하기 위해서는 Node.js가 설치되어야 한다. 

node js 설치하기 => https://nodejs.org/ko/

 설치파일을 다운로드하고 실행하여 노드를 설치해보자. 이 과정은 간단하므로 생략해보겠다. 

그다음 VSCode 터미널을 열고 다음과 같이 입력한다. 옛날에는 이것 말고도 입력할게 많았던 걸로 기억하는데 요즘엔 이 한줄이면 끝!

 npx create-react-app {앱이름}

나는

나는 react-complete-guide라는 이름의 리액트 앱을 생성했다.

설치가 완료되면 Happy hacking! 이라는 글이 뜨며 리액트의 중요한 파일이 담긴 폴더가 생성될 것이다. 

그렇다면 이제 리액트 서버를 실행하는 일만 남았다.

cd 폴더명을 입력하여 생성된 폴더 안으로 진입한다. 그다음 터미널에 npm start 라고 입력하면

다음과 같은 화면이 우리를 반겨준다.

만약 npm start라고 했는데도 자동으로 안열리면 수동으로 localhost:3000에 접속하면 된다.

이 모든 작업을 다 완료한 후에는 생성한 리액트 프로젝트로 접속한다. 우선 구성된 리액트 프로젝트의 폴더 구조를 살펴보자.

리액트에서 크게 업데이트를 하지 않는 이상 다음과 같은 폴더 구조가 뜰것이다.

여기서 Package.json 파일은 프로젝트에서 어떤 패키지들을 사용하고 있는지 보여준다.

각종 패키지명과 패키지의 버전이 나와 있다. 프로젝트의 변환과 최적화 단계에서 필요한 개발과 관련된 것들이 있다.

Src 폴더에서는 우리가 작업하게 될 실제 소스코드들이 들어있다.

Src 폴더에는 다양한 구조의 파일들이 있지만 이것은 초기 서버 화면을 구성하는 요소들로 실질적인 개발에서는 이 3개의 파일만 있어도 된다.

 

참고로 리액트 서버를 중지하고 싶으면 Ctrl+C를 입력하면 된다.