[React] React 복습

 

알림

 

본 포스팅은 공부 목적으로 작성된 글이며 상업적 목적으로 절대 사용되지 않았음을 밝힙니다.

 

NPM과 NPX 차이

 

NPM(Node Package Manager)

1. 레지스트리 저장소 역할

레지스트리란? 라이브러리를 담고 있는 곳이다.

2. npm run start, npm run build 등

npm 관련된 건 package.json에 정의되어 있다.

 

react에서 root 자리?

 

 

 

 

root가 오는 자리를 보면, 보시다시피 index.html의 root와 index.js의 getElementById('root') 위치가 같아야 합니다.

 

폴더 의미 및 기능: src 폴더

 

1. actions, reducers

2. components

2-1. LandingPage: 첫 페이지

2-2. LoginPage: 로그인 페이지

2-3. NavBar: 메뉴

2-4. RegisterPage: 회원가입

 

App.js: Routing 관련 일 처리

Auth(HOC): 자격이 되는지를 판단해서 다음 액션을 취하거나 다른 기능을 준비함.

 

폴더 의미 및 기능: utiis 폴더

 

 

이 폴더 및 파일 정리 방식은 제가 지금 듣고 있는 인프런 무료 강의의 강사님을 따라한 것입니다. 폴더 및 파일 정리에는 본인 편한 대로 정리하면 되는 것 같습니다.

 

es7 확장 프로그램

 

 

vscode에서 'es7'을 검색하신 뒤에 다음 확장프로그램을 설치해 주시면 rfce만 쳐도

 

 

 

이처럼 자동완성이 되는 것을 보실 수 있습니다.

 

react-router-dom

 

https://reactrouter.com/web/example/basic

React Router: Declarative Routing for React

 

 

이처럼 작성 됐을 때 화면을 미리 볼 수 있고, 이미 작성되어 있어서 공부하고 코드를 가져오고 참고할 때(?) 좋은 사이트인 것 같습니다.

 

react-router-dom 설치하기

 

 

축약형? 더 깔끔하게 작성하기

 

 

원래는 하얀색 박스처럼, Route로 묶어서 그 안에 이동 페이지를 작성해줄 수 있는데, 노란색 박스처럼 component를 이용해서 더 깔끔하게 작성이 가능합니다.(이때 '/'를 이용하여 닫아주기)

 

 

다 바꾼 모습입니다. 훨씬 깔끔해졌죠? 그리고 Route 다음에 exact를 넣어주셔야 합니다.

 

AXIOS

 

npm install axios --save
# AXIOS 설치

 

Proxy Server

 

npm install http-proxy-middleware --save
# Proxy 설치

 

유저 <ㅡ> Proxy Server <ㅡ> 인터넷

 

Proxy Server 사용 이유

1. 회사에서 직원들이나 집 안에서 아이들 인터넷 사용 제어.

2. 캐쉬를 이용해 더 빠른 인터넷 이용 제공.

3. 더 나은 정보 제공.

4. 이용 제한 된 사이트 접근 가능.

(출처: 인프런 '따라하며 배우는 노드, 리액트 시리즈 - 기본 강의 中')

 

Concurrently

 

npm install concurrently --save
# Concurrently 설치
# 프론트 서버와 백 서버 한 번에 켜기

 

프론트 서버는 client 디렉토리에서 'npm run start'로 열어야 하기 때문에, 백 서버를 열 때 디렉토리 위치가 달라 터미널 창을 두 개를 열거나 하는 번거로움이 있는데, 이것을,

 

 

이치럼 package.json 파일에 script 안에 dev를 만들어 하나로 합쳐주고, npm run dev로 실행해 줍니다.

 

 

1번과 2번을 보시면 백엔드 서버와 프론트 서버가 같이 켜진 것을 확인 할 수 있습니다.