따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
해당 학습 코드
15. 리액트란?
- Library, Made by Facebook
- components - module과 비슷하게 컴포넌트로 이뤄져 있어서 reusable이 뛰어남
- Virtual DOM
16. Create - React - App
- 원래 리액트 앱을 처음 실행 하기 위해선 webpack 이나 babel 같은 것을 설정하기 위해서 엄청 나게 많은 시간이 걸렸다.
→ 하지만 이제는 create-react-app Command로 바로 시작할 수 있다.
→ npx create-react-app .
17. npm npx
-
npm(node package manager)
it is an online repository for the publishing of open-source Node.js projects -
npm → packge.json 확인 가능
npm install locally → ./node_modules/.bin 에서 확인 가능
npm install globally (-g 사용) → /usr/local/bin 에서 확인 가능 -
원래 crate-react-app을 할때 npm install -g create-react-app 했었다. global 디렉토리에 다운
→ 이제는 npx를 이용하여 그냥 이용(다운 x)
→ npx이 npm registry에서 crate-react-app을 찾아서(look up) 다운로드 없이 실행 시켜준다 -
Advantages to use NPX
4.1 Disk space를 낭비하지 않을 수 있다.
4.2 항상 최신 버전을 사용할 수 있다.
18. 구조 설명
- ..boiler-plate/client> npm run start
- index.js→ ‘root’ ↔ index.html
- webpack은 src만 관리하고 public x → image를 넣고 싶다면 src에 넣어라
19. CRA to Our Boilerplate
첫 번째 사진을 두 번째 사진과 같이 변경 예정 (파일 설명은 참고)
20. React Router Dom
-
페이지 이동을 할때 React Router Dom 이라는 것을 사용
-
사용 방법은 사이트 참고
-
Dependency 다운
→ npm install react-router-dom --save -
react router dom 코드 Documentation에서 복사해서 붙여넣기
-
그 후 우리 앱에 맞게 바꿔서 넣기
error : export 'Switch' (imported as 'Switch') was not found in 'react-router-dom'...
react-router-dom이 버전 6이후 switch를 지원 x → Routes로 변경되었다고 한다.
react router update site
21. 데이터 Flow & Axios
request 를 할때 지금까지는 client 부분이 없었기에 POSTMAN을 이용함
→ 이제는 있으므로 React JS부분에서 Request를 보내면 되는데 그때 사용할게 AXIOS (jQeury를 사용할때 AJAX라고 보면됨)
→ npm install axios --save
22. CORS 이슈, Proxy 설정
이렇게 두개의 다른 포트를 가지고 있는서버는 아무 설정없이 request를 보낼 수 없다. 해결방법에는 여러가지가 있지만 우리는 Proxy를 사용 하는 방법으로 해결한다. create-react-app.dev
Proxy 사용방법
- npm install http-proxy-middleware --save
- 이 다음에 server와 client를 켜주기 위해서 terminal에서
..boiler-plate>npm run backend
..boiler-plate/client> npm run start
5번 실행 뒤 error
Error: Cannot find module 'C:\Users\hun\Documents\boiler-plate\index.js' at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15) at Function.Module._load ... { code: 'MODULE_NOT_FOUND', requireStack: [] }
현재 server에 있는 index.js를 root에 위치에 있는 package.json에서 backend를 실행하는데 error가 당연히 나겠지..그래서 package.json에 backend 아래와 같이 변경
그리고 서버 연결을 아예 종료 후 다시 실행해야 오류 해결된다 :]
23. Proxy Server?
User ↔ Proxy Server ↔ 인터넷
if : User → Proxy Server → 인터넷
- IP를 Proxy Server에서 임의로 바꿔 버릴 수 있다. 그래서 인터넷에서는 접근하는 사람의 IP를 모르게 된다.
- 보내는 데이터도 임의로 바꿀 수 있다.
Proxy Server
- 방화벽 기능
- 웹 필터 기능
- 캐쉬 데이터, 공유 데이터 제공 기능
Proxy Server 사용이유
- 회사에서나 직원들이나 집아넹서 아이들 인터넷 사용 제어
- 캐쉬를 이용해 더 빠른 인터넷 이용 제공
- 더 나은 보안 제공
- 이용 제한된 사이트 접근 가능
24. Concurrently
server와 client 둘다 실행하는것의 번거로움을 줄이기 위해서 다음과 같이 실행한다.
-
npm install concurrently --save
-
root에 package.json에 dev..를 아래와 같이 넣으면 된다
"scripts": {
"start": "node server/index.js",
"backend": "nodemon server/index.js",
"test": "echo \"Error: no test specified\" && exit 1",
"dev" : "concurrently \"npm run backend\" \"npm run start --prefix client\""
},