[React] 리액트 설치와 세팅법

사이드 프로젝트에서 리액트로 Styled Components 를 써야 하는데,

Styled Components 하기 전에 리액트부터 알아야 할 것 같아서 기초 공부를 하려고 한다.

 

아직은 자바스크립트도 공부를 더 해야 하는 상황이고, 리액트는 다소 급하게 바로 써먹어야 하기 때문에

깊게 들어가지는 않고 일단 간단하게 한 번 훑어보려고 한다.

 

우선 기본적인 설치와 세팅 타임!

 

---

React 설치하기

 

리액트를 설치하기에 앞서 VSC (에디터)와 Node.js 가 설치되어 있어야 하는데,

둘 다 최근에 설치해서 따로 깔 필요가 없었다.

 

이때 nodejs 를 설치한 이유에 대해 의문이 들 수 있는데 이는 아래와 같다.

 

해당 프로젝트에서 create-react-app 라이브러리를 사용하고자 하는데,

이 라이브러리를 npm 과 npx 를 이용해서 설치해야 하기 때문이다.

nodejs 를 설치하면 npm 이라는, 라이브러리를 쉽게 설치할 수 있게 도와주는 툴을 이용할 수 있다.

아래에서 이 create-react-app 을 npm 을 이용해서 설치해보려고 한다.

 

우선 바탕화면에 react-class 라는 폴더를 만들어서 VSC로 열어준다.

터미널을 열고 아래 내용을 입력해서 리액트 프로젝트를 생성한다.

npx create-react-app blog

1) npx : 라이브러리 설치를 도와주는 명령어 (nodejs 설치 되어있으면 이용 가능)

2) create-react-app : 리액트가 세팅이 완료된 보일러플레이트 (= 프젝 만들기 쉽게 도와주는 라이브러리)

3) blog : 프로젝트명 (다른거 써도 됨)

 

이렇게 하고 나면 blog라는 하위 폴더가 생긴다

vsc에서 이 폴더(blog)를 다시 open folder 해서 코딩을 시작하면 된다

 

---

생성된 파일 뜯어보기

 

blog 폴더를 불러왔을 때 src 폴더 내의 App.js 파일이 메인 페이지 격이 될 것이다 (index.html 과 비슷한 역할)

사실 진짜 메인페이지는 아니고, 메인페이지에 들어갈 HTML을 짜는 곳이라고 생각하면 된다.

실제 메인페이지는 public 폴더에 있는 index.html 파일이다.

index.html 안에 App.js 의 요소를 넣어두도록 설정했기 때문에 다소 비어있다.

(이때 App.js를 넣으라는 명령은 index.js가 한다. 아직은 크게 이해할 필요 없음)

 

생성된 파일 중 설명이 필요한 부분은 아래와 같다.

• node_modules 폴더는 설치한 라이브러리를 모아놓은 곳이다
• public 폴더는 static 파일(ex. 이미지 파일, favicon 등 잘 바뀌지 않는 파일들)을 보관하는 장소이다
  나중에 배포를 할 때 작성한 다른 코드들은 압축이 되는데, 
  public 폴더 안에 있는 코드들은 압축이 되지 않는다. 그래서 static 파일을 보관하기 좋다. 
• src 폴더는 소스코드를 보관하는 곳이다. 실질적인 코딩은 다 여기서 한다.
• package.json 파일은 설치한 라이브러리의 이름과 버전 등의 목록을 모아놓는 파일이다.
  직접 건드릴 일은 없고, npm 으로 설치할 때마다 자동으로 해당 파일에 기록이 된다

 

---

작성한 코드 미리보기

 

터미널을 열어서 폴더가 blog로 잘 되어있는지를 우선 확인한다

그리고 아래와 같이 입력하면, 실시간으로 작성한 코드가 화면에 나타나는 걸 볼 수 있다.

npm start

미리보기는 디폴트로 이런 모습이 나타난다

 

+ 가끔 실시간으로 반영이 안되는 경우(브라우저가 자동으로 열리지 않는 경우),

터미널에 뜨는 localhost 주소(ex. http://localhost:4000) 에 접속해서 보면 된다

 

 

 

---

 

TIL 끝!