01. React 설치 및 프로젝트 구조

서론

 

최근에 일을 하며 너무 바빠 블로그 관리 및 개발 공부를 제대로 하지 못했던 것 같다.
웹 개발자가 되기 위해서는 백엔드뿐만 아니라 프론트엔드도 제대로 다룰 줄 알아야 나의 경쟁력이 조금이라도 올라갈 것 같아 리액트 공부를 제대로 하면서 프로젝트를 진행해보려고 한다.
그전에 코딩애플 리액트 강의를 들으며 기본지식을 쌓으려고 한다.

 

 

본론

Nodejs 설치

 

리액트를 사용하기 위해서 Nodejs를 먼저 설치해야 하는데 나는 예전에 이미 Nodejs를 설치한 적이 있어 따로 설치를 진행하지는 않았다.

아래 명령어를 통해 설치된 node와 npm 버전을 확인 후 바로 vscode에서 리액트 프로젝트를 생성했다.

node -v
npm -v

 

 

React 프로젝트 생성

 

프로젝트용 폴더를 하나 생성한 후 해당 폴더에서 터미널을 연 후 아래 명령어를 작성하여 프로젝트를 생성해준다.

npx create-react-app 프로젝트명

 

해당 명령어를 작성해주면 설치가 진행된다. 다행히 별다른 에러없이 리액트 프로젝트가 생성되었다.

 

* create-react-app이란?

- react는 꼭 이렇게 설치하지 않아도 되고 html에서 직접 설치를 해도 가능하다. 그러나 시간이 너무 오래걸리고 번거로워 프로젝트 생성을 간단하게 도와주는 라이브러리가 있는데 이게 바로 create react app이다.

 

해당 프로젝트를 미리보기 하고 싶다면 아래 명령어를 입력해주면 된다.

npm start

 

그러면 이렇게 미리보기 창이 뜨는데 App.js 안에 있는 글자들을 변경해서 입력을 해도 적용이 아주 잘되는 것을 확인할 수 있다.

 

 

프로젝트 구조

 

1. node modules
   - 프로젝트 구동에 필요한 모든 라이브러리 소스코드를 보관하고 있는 폴더
2. public
   - static 파일을 모아놓는 파일
3. src
   - 소스코드 보관함으로 대표적으로 App.js에 코드를 짜면 메인 페이지에 반영이 된다.
   - 기본적으로 html 파일을 생성해서 코드를 짜는게 익숙한데 App.js 코드를 보면 js파일에 html을 작성했는데도 메인 페이지에 적용이 되는 모습을 볼 수 있다. 이는 App.js의 <div> 안의 코드 내용을 index.html에 적용할 수 있도록 indes.js 파일에서 설정을 해줬기에 가능한 일이다. 아래 그림과 같은 구조라고 이해하면 된다.

 

4.  package.json
     - 프로젝트 정보들을 나열해놓은 파일이다.

 

 

결론

지금까지 React 프로젝트 생성과 프로젝트 구조에 대해서 알아봤다. 오랜만에 다시 개발 공부를 하면 느낀 점은 개발은 손에서 놓는 순간 정말 빨리 까먹는다는 것이다. 해당 프로젝트를 생성하고 터미널에서 github로 버전 관리를 진행하려고 했더니 너무 오랜만이라 진행하는 순서가 기억나지 않았다. 전에 공부했던 자료들을 보며 무사히 프로젝트를 github에 올렸지만 이런 기초적인 부분에서 버벅이는 나자신을 보며 반성을 많이 했던 시간이었다. 다시 공부를 시작하면서 평일에도 지치지 말고 나아가야겠다는 생각을 했다.