개발일지 #14 - 리액트02

오늘은 리액트 개발환경 세팅부터 시작해서 프로젝트 생성까지를 복습했다.
리액트를 사용하기 위해서는 몇 가지 세팅이 필요하다.
우선 node.js를 구글에서 검색해서 설치를 한다. 최신 버전 버전보다는 조금 더 안정적인 LTS버전 설치를 추천한다.
(npm명령어를 사용하기 위해서 설치가 필요하다)
그리고 프로젝트를 생성할 폴더를 생성하고 사용하는 에디터를 실행시키면 개발환경 세팅이 끝이 난다.

이후 생성한 폴더에서 터미널을 실행시킨다. 나는 맥북 유저이기 때문에 맥북 사용법을 위주로 기록하겠다.
터미널을 실행한 후 아래의 명령어를 입력시킨다.

npx create-react-app projectName

만약 에러가 발생한다면 다음 명령어를 입력해보자.

sudo npx create-react-app projectName

그럼 맥북 비밀번호를 입력하라고 나온다. 그럼 비밀번호를 입력하면 성공적으로 설치가 진행될 것이다.

설치가 완료되었다면 에디터로 생성된 프로젝트 폴더를 연다.
그 이후 에디터에서 터미널을 실행시킨다.

npm start

위 명령어를 입력하면 미리보기도 할 수 있다. 제일 처음으로 미리보기가 뜨는 것은 src폴더에 있는 App.js 파일의 내용이 미리보기로 보이는 것이다.

*폴더 설명*
<node_modules>
리액트 라이브러리 코드 보관함 폴더이다. 깃허브를 통해 원격 저장소를 이용하고 싶을 때 이 폴더를 제외한 폴더를 업로드해야 한다.
<public>
Static파일 보관함이라고 생각하면 된다. html 파일, 파일명이 변경되지 않았으면 하는 파일 같은 것들을 보관하면 된다.
<src>
리액트 개발 시, jsx, js 파일을 생성해서 직접 개발을 하는 폴더이다. 가장 많이 접하고 수정, 추가하게 될 폴더이다.
<package.json>
리액트 프로젝트의 정보, 라이브러리 등의 정보가 담긴 파일이다. 자동 생성되기 때문에 수정할 필요가 없다.