[React JS] proxy, concurrently, redux, hook 개념 정리

CORS 이슈

• Cross-Origin Resource Sharing (보안을 위한 정책)
• 원인 : request 보내는 client 와 response 보내는 server가 다른 포트를 가지고 있다면, CORS 정책에 막혀짐
• 해결 : 다양한 방법이 있는데, 그 중 하나는 Proxy 사용

(https://create-react-app.dev/docs/proxying-api-requests-in-development#configuring-the-proxy-manually)

 

Proxy?

: 유저와 인터넷 사이에 Proxy Server가 있다.

: IP를 Proxy Server에서 임의로 바꿔, 인터넷에서는 접근하는 사람의 IP를 모르게 된다. 데이터 또한 임의로 바꿀 수 있다.

1. 방화벽 기능 2. 웹 필터 기능 3. 캐쉬 데이터, 공유 데이터 제공 기능

 

Proxy Server 사용 이유

1. 인터넷 사용 제어 (회사, 가정 등 ....)
2. 캐쉬를 이용해 더 빠른 인터넷 이용 제공
3. 보안
4. 이용 제한된 사이트 접근 가능

 

---

concurrently 프론트, 백서버 한 번에 키기

concurrently 라이브러리 활용

npm install concurrently --save

 

---

React JS를 위한 CSS Framework 종류

: 기능 개발에 초점을 맞추기 위해 CSS framework 를 사용

1. Material UI 2. React Bootstrap 3. Semantic UI 4. Ant Design 5. Materialize ...

https://ant.design/

Ant Design - The world's second most popular React UI framework

 

 

---

Redux?

먼저 props와 state에 대한 이해가 필요.

 

Props

: Properties의 줄임말.

: 컴포넌트 간에 부모 컴포넌트에서 자식 컴포넌트로 값을 전달할 수 있음.

: 이 값은 자식 컴포넌트 안에서 변할 수 없음. (immutable)

 

State

: 컴포넌트의 값이 바뀔 수 있으며 (mutable), state가 변하면 다시 랜더링이 된다. (re-render)

: props와 다르게 부모 컴포넌트에서 자식 컴포넌트로 데이터를 보내는 것이 아닌, 컴포넌트 안에서 데이터를 전달한다.

state = {message :'', attachFile : undefined, openMenu : false,};

 

Redux

: State를 관리해주는 툴, 상태 관리 라이브러리

 

Redux 데이터 Flow

React Component -> (Dispatch) -> Action -> REDUCER -> Store -> (Subscribe) -> 다시 React Component ...

한 방향으로 데이터가 흐른다. (strict undirectional data flow)

 

• Action : 어떤 일이 일어났는지 설명하는 객체
• {type : 'LIKE\_ARTICLE', articeldId : 42} // 42번 게시글을 좋아요

 

• Reducer : Action을 통해 일어난, state의 변화를 설명하는 곳. 이전 State와 action object 받은 후의 next state을 return
• (previousState, action) => nextState

 

• Store :어플리케이션의 state을 감싸주는 역할. store 안에는 여러가지 method가 있어, 이를 이용해 state를 관리.

 

---

Redux 사용을 위한 Dependeny 다운

• redux
• react-redux
• redux-promis
• redux-thunk

npm install redux react-redux redux-promise redux-thunk --save (client에서 진행)

 

Redux middleware ( redux-thunk, redux-promise)

: Redux를 잘 쓸 수 있게 돕는다.

Redux Store에서 state을 관리하는데, dispatch를 통해 Action에서 변경시킨다. 이 Action은 객체형식이여야 store가 받을 수 있음. 하지만 Store에서 항상 객체 형식의 Action을 받는 것이 아닌, Promise, Function 형태로 받을 때도 있다.

• redux-thunk : Dispatch에게 Function을 받는 방법을 알려줌.
• redux-promise : Dispatch에게 Promise를 받는 방법을 알려줌.

 

Redux extension

https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd/related?hl=ko

 

Combine Reducer

: 여러가지 state이 있으면, 또 그에 해당하는 여러가지 reducer가 있는데, combine reducer은 root reducer에서 이들을 하나로 합쳐줌.

(Combine Reducer => Root Reducer)

 

 

---

React Component와 Hook

 

Class Component (클래스 컴포넌트)

: Provide more features, longer code, more complex code, slower performance

: 더 많은 기능 사용 가능

: 길고 복잡한 코드

: 성능적으로 느린 퍼포먼스

Functional Component (함수형 컴포넌트)

: Provide less features, shorter code, simpler code, faster performance

: 적은 기능 사용가능

: 간결한 코드

: 성능적으로 빠른 퍼포먼스

 

Hook

Hook 을 통해 functional component에서도 빠른 퍼포먼스와 다양한 기능(state, lifecycle...) 사용할 수 있게 됨.