동영상 34개
인프런 ==> 따라하며-배우는-노드-리액트-기본
강의 자료 : https://braverokmc79.github.io/react-series/BoilerPlate%20Korean.html
소스 : https://github.com/braverokmc79/react-series
섹션 0. Node JS
강의
1.소개
2.NODE JS 와 EXPRESS JS 다운로드 하기
3.몽고 DB 연결
4.MongoDB Model & Schema
5.GIT 설치
6.SSH를 이용해 GITHUB 연결
7.BodyParser & PostMan & 회원 가입 기능
8.Nodemon 설치
9.비밀 설정 정보 관리
10.Bcrypt로 비밀번호 암호화 하기
11.로그인 기능 with Bcrypt (1)
12.토큰 생성 with jsonwebtoken
13.Auth 기능 만들기
14.로그아웃 기능
섹션 1. React JS
20.강의
15.리액트란 ?
16.Create-React-App
17.npm npx
18.구조 설명
19.CRA to Our Boilerplate
20.React Router Dom
21.데이터 Flow & Axios
22.CORS 이슈, Proxy 설정
23.Proxy Server ?
24.Concurrently
25.Antd CSS Framwork 26.Redux 기초
27.Redux UP !!!!!
28.React Hooks
29.로그인 페이지(1)
30.로그인 페이지(2)
31.회원 가입 페이지
32.로그아웃
33.인증 체크 (1)
34.인증 체크 (2) 강의 마무리.
2. Diagram 자료
2 강의
Diagram HTML 자료
Diagram XML 자료
React JS
15.리액트란 ?
리액트의 특징
- 가상 돔
- 단방향 데이터 바인딩
- JSX.
- 선언형 프로그래밍
- 컴포넌트 기반
가상 돔(Virtual DOM)
- DOM 업데이트를 추상화 시켜놓은 것 이다.
- 브라우저에서 html을 열게되면 DOM을 만들게 된다. html코드의 특정 부분이 변경되면 전체 DOM을 새롭게 만들게되어 매우 비효율 적이다.
이를 개선하기위해 리액트는 가상 DOM을 만들어 진짜 DOM과 비교한다. 그리고 변경된 부분만 진짜 DOM에 반영하는 방식으로 작업을 수행한다.
- in-memory에 존재해서 실제 렌더되지 않는다.
- Vue나 React에서 사용한다.
16.Create-React-App
vscode 확장 패키지 추가
1. - Auto Import - ES6, TS, JSX, TSX
2. - Reactjs code snippets
3. - ESLint
4. - Prettier - Code formatter
Babel은 ECMAScript 2015+ 코드를 이전 JavaScript 엔진에서
실행할 수 있는 이전 버전과 호환되는 JavaScript 코드로 변환하는 데 주로 사용되는 무료 오픈 소스 JavaScript 트랜스컴파일러로
최신 자바스크립트 문법을 지원하지 않는 브라우저들을 위해서 최신 자바스크립트 문법을 구형 브라우저에서도 돌수있게 변환 시켜줌.
webpack은 모던 JavaScript 애플리케이션을 위한 정적 모듈 번들러 이다.
모듈 번들러란 웹 애플리케이션을 구성하는 자원(HTML, CSS, Javscript, Images 등)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구를 의미한다.
간단하게 표현하자면 웹팩이란
여러 파일을 하나 이상의 파일로 합쳐주는 자바스크립트 번들러이다.
리액트 설치
npx create-react-app 경로
npx create-react-app .
예) npx create-react-app E:\react-app2
$npx create-react-app react-basic
$cd react-basic
$ls
$npm start
17.npm npx
npm이란
npm은 node.js의 자동화 된 의존성과 패키지 관리를 위한 패키지 매니저이다.
1) 패키지 설치
프로젝트를 할 때 필요한 모든 의존성 패키지는 package.json 파일 안 에서 지정할 수 있다.
npm intall를 실행하기만 하면 원하는 패키지를 로컬(node_modules)에 설치할 수 있다.
2) 버전관리 제공
npm은 패키지의 버전을 선택할 수 있기 때문에 패키지 버전 차이로 생기는 문제를 방지할 수 있다.
* npm install 모듈이름 -g
-g 옵션을 사용하면 프로젝트마다 모듈을 설치할 필요없이 글로벌한 공간에 설치되어 모듈을 공유할 수 있다.
(유의해야할 점)
- 한번 설치한 모듈을 계속 사용하기 때문에 업데이트 확인이 어렵다.
- 같은 모듈을 사용해도 프로젝트마다 다른 버전이 필요할 수 있기 때문에 버전 문제가 발생할 수 있다.
- 위와 같은 문제로 모듈 변경사항이 잦은 create-react-app 같은 보일러플레이트에서는
최신버전 설치를 매번 해줘야 하기 때문에 번거롭다.
npx란?
npm 5.2.0버전부터 추가된 node.js 패키지를 실행시키는 하나의 도구이다.
1) 패키지 실행
패키지의 최신버전 파일을 불러와 설치하여 실행시키고 실행된 이후에 해당 패키지를 제거하는 방식입니다.
(과정)
- 실행시킬 패키지가 로컬에 저장되어 있는지 먼저 확인한다.
- 존재한다면 실행시킨다.
- 존재하지 않는다면 npx가 가장 최신 버전을 설치하고 실행시킨다.
결론
npx는 결국 npm을 더욱 편리하게 사용하기 위해 나온 도구이다.
출처 및 참고자료
ljh86029926.gitbook.io/coding-apple-react/undefined/node.js-npm
javascript.plainenglish.io/yes-its-npx-not-npm-the-difference-explained-58cbb202ec33
18.구조 설명
$npm start
또는
$npm run start
19.CRA to Our Boilerplate
리액트 페이지 자동 완성 단축키 : rfce , rsc , rfc , rcc
20.React Router Dom
bootstrap cdn => https://www.bootstrapcdn.com/
react router => https://reactrouter.com/en/main/getting-started/overview
npm install react-router-dom@6
설치 안될 경우
yarn add react-router-dom
package.json 에서 설치버전확인
"dependencies": {
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.3.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
App.js
import './App.css';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import LandingPage from './components/views/LandingPage/LandingPage';
import LoginPage from './components/views/LoginPage/LoginPage';
import RegisterPage from './components/views/RegisterPage/RegisterPage';
function App() {
return (
<div className="App">
<BrowserRouter>
<h1>Welcome to React Router!</h1>
<Routes>
<Route path="/" element={<LandingPage />} />
<Route path="/login" element={<LoginPage />} />
<Route path="/register" element={<RegisterPage />} />
</Routes>
</BrowserRouter>
</div>
);
}
export default App;
21.데이터 Flow & Axios
axios 설치
$ yarn add axios
LandingPage.js
import React, { useEffect } from 'react'
import Axios from 'axios';
function LandingPage() {
useEffect(() => {
Axios.get("http://localhost:5000/api/hello")
.then(res => {
console.log(res.data);
});
}, []);
return (
<div>LandingPage 랜딩페이지</div>
)
}
export default LandingPage
22.CORS 이슈, Proxy 설정
리액트 공식문서 : https://create-react-app.dev/docs/proxying-api-requests-in-development/
스프링에서는 서버에서 cros 도메인을 허용 처리하는 데, nodejs 나 스프링에서 cros 를 허용처리 하는 것이 아니라,
리액트에서는 http-proxy-middleware 라이브러리를 통해 클라이언트에 cros 도메인을 해결한다.
다음을 설치한다.
$ npm install http-proxy-middleware --save $ # or $ yarn add http-proxy-middleware
src/setupProxy.js 파일 생성후
const { createProxyMiddleware } = require('http-proxy-middleware');
//node 서버 포트번호에 맞게 /api 로 시작하는 url 은 포트번호를 5000번으로 변경처리 한다.
module.exports = function (app) {
app.use(
'/api',
createProxyMiddleware({
target: 'http://localhost:5000',
changeOrigin: true,
})
);
};
23.Proxy Server ?
proxy server 사용 이유!
1.회사에서 직원들이나 집안에서 아이들 인터넷 사용 제어
2.캐쉬를 이용해 더 빠른 인터넷 이용 제공
3.더 나은 보안 제공
4.이용 제한된 사이트 접근 가능
24.Concurrently
nodejs 서버와 reactjs 를 한 콘솔에서 동시에 구동
node.js 서버에 concurrently 설치 한다.
$ yarn add concurrently
1) 현재 node.js 서버 package.json scripts 내용
"scripts": {
"start": "NODE_ENV=production node index.js",
"backend": "NODE_ENV=development nodemon index.js",
"test": "echo \"Error: no test specified\" && exit 1",
},
npm run backend 로 실행
2) 리액트 package.json scripts 내용
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
npm run start 로 실행
3) nodejs 서버에 concurrently 설치후
package.json scripts 에 다음과 같은 형식으로 추가한다.
"dev": "concurrently \"npm run backend\" \"npm run start --prefix ../client\""
"scripts": {
"start": "NODE_ENV=production node index.js",
"backend": "NODE_ENV=development nodemon index.js",
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "concurrently \"npm run backend\" \"npm run start --prefix ../client\""
},
실행 :
node 디렉토리에서
$ npm run dev
소스 : https://github.com/braverokmc79/react-series
댓글 ( 4)
댓글 남기기