기록

리액트 같은 싱글 페이지 어플리케이션(SPA)에서 페이지를 이동하지 않고 페이지에 필요한 컴포넌트를 불러와서 보여준다. 이때 필요한 것이 리액트 라우터 돔이다. 1. 설치 react-router-dom을 모듈로 사용하기 위해 npm에서 설치 npm install react-router-dom --save 설치확인 2. 기본 코드 아래 주소 코드를 참고하여 app.js 수정 단, 예전과 변경된 점이 있음 1. 'Switch' is not exported from 'react-router-dom' 에러 Switch가 Routes로 바뀜 2. route 등록방식 변경 전 //or 변경 후 https://v5.reactrouter.com/web/example/basic Declarative routing for..

관리를 편하게 하기위해 client와 server폴더를 생성하여 코드를 나눔 기존 코드는 server로 옮기고 client에는 react 코드를 넣음. 0. 기본 구조 생성 package.json 변경된 구조에 따라 index.js의 경로를 수정해줌. 1. extensions 다운 스니펫을 다운받고 functional component 을 만들 때, rfce를 치면 리액트 기본코드가 제공됨.

*예전에는 react 설치위해 아래의 설정 필요했음 이제 설정없이 npx create-react-app 커맨드 사용하여 자동 설정! Babel 최신 자바스크립트 문법을 지원하지않는 브라우저를 위해 구형 브라우저에서 돌 수 있게 ES5문법으로 변환시켜줌. Webpack 많은 모듈들을 bundle시켜서(묶어서) 간단하게 만들어줌. 0. 리액트 설치에 앞서 기존에 만들어둔 코드 정리 client와 server 폴더를 만들어 sever폴더에 기존 서버측 코드 다 넣음. 1. 설치 npx create-react-app . 설치 확인 *npm vs npx 원래 create-reate-app을 사용할때 npm install -g create-reate-app 으로 global 디렉토리에 다운 받았는데 이제 npx를 ..

react 페이스북에서 개발한 라이브러리 components module과 비슷하게 재사용서이 뛰어남 Virtual DOM 여러 리스트 중 하나의 리스트만 update 됐을때 한가지 아이템만 DOM에서 바꿀 수 있음 cf) Real DOM 전체 리스트를 reload해야함. 1. JSX를 렌더링 -> Virtual DOM Update 2. Virtual DOM이 Snapshot을 찍어뒀다가 업데이트 이후 비교하여 변경된 부분 찾음(diffing) 3. 찾은 부분만 Real DOM에서 바꿔줌

1. setTimeout() 시간지연함수. 함수를 의도적으로 지연한 뒤 실행하고 싶을 때 사용한다. setTimeout(function() { // Code }, delay); 지연시간은 밀리세컨드 단위로 설정해야한다. (1000은 1초) *delay는 실행전 대기 시간이지만 호출 시점이 정확히 몇초 후라는 것을 보장하지 않는다. 2. 작동원리 (delay 0) 그런데 지연시간에 0을 넣거나 아무것도 넣지않아도 setTimeout함수는 다른코드가 실행된 후 마지막에 실행된다. 브라우저가 자바스크립트를 실행할 때 Call Stack(LIFO)에 넣는데 setTimeOut은 Task Queue(FIFO)에 넣음. Stack이 비워야 Queue에 있는걸 꺼내기 때문에 (아래 3번에서 설명) 지연시간으로 0초를..

https://www.inflearn.com/course/%EB%94%B0%EB%9D%BC%ED%95%98%EB%A9%B0-%EB%B0%B0%EC%9A%B0%EB%8A%94-%EB%85%B8%EB%93%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EA%B8%B0%EB%B3%B8/dashboard [무료] 따라하며 배우는 노드, 리액트 시리즈 - 기본 강의 - 인프런 | 강의 이 강의를 통해서 리액트와 노드를 어떻게 사용하는지 기본적인 내용들을 배울 수 있습니다., - 강의 소개 | 인프런... www.inflearn.com 해당폴더 글은 인프런 무료강의를 들으며 정리한 것입니다! 예전강의라 지금과 다른점이 많은데 따라하면서 그런부분 수정하여 올릴 예정

methos 객체의 인스턴스를 만들어야만 사용이 가능 statics 객체의 인스턴스를 만들지 않아도 사용이 가능 const user= new User() 로 선언하고난 뒤 user.(메소드) 이런식으로 호출해야만 쓸 수 있는 것이 메소드 User.(스태틱) 이런식으로 호출할 수 있는 것이 스태틱 스태틱은 user.(스태틱)을 형태로도 호출이 가능합니다. 둘을 구분짓는 건 인스턴스가 존재해야만 기능이 원할하게 지원되는 함수인데 스태틱으로 만들어서 프로그래머의 실수로 호출을 해서 발생되는 에러를 미연에 방지 스태틱은 인스턴스와 무관하게 공용적으로 자주 쓰이는 함수가 필요할 때 쓰이는 것 https://www.inflearn.com/questions/30860 methods, statics 차이 - 인프런 |..

Client와 Server(DB)에 있는 token을 비교하여 인증 DB에서 로그아웃 하려는 유저의 토큰을 지워주면 비교했을 때 인증실패해서 로그인이 풀리는 것 1. logout route 생성 index.js app.get('/api/users/logout', auth, (req, res) => { //로그인된 상태라서 auth바로 넣어서 사용가능 User.findOneAndUpdate({ _id: req.user._id}, { token: ""}, (err, user) => { //파라미터는 find할것, update할것, 콜백 if(err) return res.json({ success: false, err}); return res.status(200).send({ success: true }) }..

0. Auth 인증(Authentication) 사용자의 신원을 증명 ID와 Password로 로그인하는 과정 JWT나 Session을 이용해 인증을 유지 인가(Authorization) 특정 리소스에 접근할 수 있는 권한을 부여 페이지 이동 때마다 로그인 여부, 유저 role(권한) 체크 Cookie에서 인코딩된 Token을 Server에 가져와서 복호화. 복호화 하면 User ID가 나옴. 1. auth route 생성 index.js ///api/users user랑 관련된거 앞에 붙여주기 나중에 Router(express에서 제공)로 관련기능별로 정리 필요 const { auth } = require('../middleware/auth'); //쩜두개: 상위폴더로 app.get('/api/user..

1. login 라우터 생성 User.findOne으로 req로 받은 email의 정보를 DB에서 찾음. index.js const express = require('express');//express안에 body-parser포함되서 따로 안써도 된다고함 const app = express(); const port = 3000 //아무 포트번호 지정 const cookieParser = require('cookie-parser'); const { User } = require('./models/User'); const config = require("./config/key") app.post('/login', (req, res) => { //라우터의 endpoint가 register // const us..