강의정리 (백엔드 / 프론트소개)

로그아웃 기능

 

로그인할때처럼 조회해서 토큰을 지워주고 결과를 보내주면 될거같다.

 

1) 로그아웃 Route만들기

app.get('api/users/logout', auth, (req, res)=>{})

2) 데이터베이스에서 로그아웃 유저를 찾기

auth가 토큰으로 유저정보를 찾아준다 (미들웨어로 auth만 넣어주면 된다)

3) 유저의 토큰 지워주기

그동안 해온게 있다보니 로그아웃은 따로 할게 없어서 금방 끝난다.

//로그아웃
app.get('/api/users/logout', auth, (req, res)=>{
  //유저를 찾아왔을테니 업데이트 해주어야 한다
  User.findOneAndUpdate({_id : req.user._id}, {token : ""}, (err, user)=>{
    if(err) return res.json({success : false, err})
    return res.status(200).send({success : true})
  })
})

 

 

백엔드는 끝, 이제 프론트엔드부분

 

---

리액트 특징 : virtureDOM으로 스캔하고, 변경된 것만 리렌더링한다

 

이전에는 바벨, 웹팩을 설치하느라 시간이 많이 소요되었지만, 이제는 편하게 설치 가능하다

 

바벨 : 오래된 브라우저에서 돌 수 있도록, 구문법으로 변경해주는 서비스

 

웹팩 : 수많은파일, 라이브러리, 프레임워크들을 번들화시켜주는 서비스

리액트에서 웹팩이 관리해주는 부분은 src이기 때문에 (public폴더는 해주지 않는다) 이미지파일이나 그런것들을 넣을 때, src에 넣어주어야 웹팩의 기능이 작용한다

 

npx : npm과 다르긴 다른데 비슷한거

 

 

---

 

1. 우선 서버와 클라이언트 구분을 위해 server폴더와 client폴더를 만든다

그리고 server 폴더에 config(DB접속 키 저장폴더) / middleware(auth.js 폴더) / models / index.js 를 넣어준다.

 

2. client에 리액트를 받기 위해 콘솔에서 "cd client"를 해서 이동해준다

그리고 아래의 명령어를 입력해준다. (여기에서 . 은 client디렉토리 안에다가 리액트를 설치하겠다는 의미이다)

(. 이 현재 디렉토리를 의미하므로)

npx create-react-app .

 

만약에 설치시 에러가 발생하면 아래코드를 차례대로 입력해서 c컴파일러?를 재설치해주면 된다고 한다.

(쓴적업승ㅁ)

sudo rm -rf $(xcode-select -print-path)
xcode-select --install

 

 

---

 

npm / npx

 

npm : 레지스트리 저장소 역할 (메이븐같은거) / 배포시 빌드역할 (npm run build)

 

npx : 레지스트리에 있는 react-create-app을 그냥 이용 가능하다 (다운로드 필요 x)

용량을 낭비하지 않는다 / 항상 최신 버전을 사용할 수 있다

 

 

---

 

이제 리액트 부분의 폴더에 많은 변화가 있을 예정인데 간략히 설명하자면 다음과 같다

 

정답이 있는것은 아니지만 강사는 이방식이 편하다고 함

 

이제 실제로 폴더 구조를 변경할 예정

- _actions / _reducers / components 폴더를 client루트폴더에 만든다

 

- components 폴더에 views 폴더를 만들고,

views폴더 안에 LandingPage / LoginPage / RegisterPage / NavBar / Footer 폴더를 만들고,

각 폴더안에 이름과 같은 js파일을 생성해준다

 

- src에 Config.js 파일을 생성하고, App.test.js / logo.js 파일은 지워준다

- src에 hoc / utils 폴더를 생성한다

 

 

---

App.js 라우터설정

 

- 우선 react-router-dom 설치를 위해 client폴더로 이동 후 아래 코드로 설치

npm install react-router-dom --save 

그리고 codeSand박스에서 코드를 가져와서 NavBar 라우터 설정을 해줄 것이다

 

우선 강사가 대충 axios 써서 백엔드로 신호 보냈는데 cors 에러가 떴다.

따라서 cors설치해서 설정은 완료해두었고, proxy 설정을 할 것이다.

npm install cors --save
...
const cors = require('cors')
app.use(cors());

 

(cors정책은 주소의 origin이 다를경우 요청을 보안상의 이유로 차단하는 것이다)

 

---

 

Cors / Proxy설정

 

proxy 설정 참고 : https://create-react-app.dev/docs/proxying-api-requests-in-development

npm install http-proxy-middleware --save

proxy설정을 해주면 cors를 따로 설치하지 않고도 cors이슈를 해결할 수 있다

 

src폴더에 setupProxy.js파일을 생성하고 아래처럼 설정해준다

const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:5000',
      changeOrigin: true,
    })
  );
};

안되면 아래코드로 바꿔서 넣는다 (버전마다 다르다)

const proxy = require('http-proxy-middleware');
module.exports = function(app) {
  app.use(
    '/api',
    proxy({
      target: 'http://localhost:5000',
      changeOrigin: true
    })
  );
};

app를 들고와서 api경로로 오는 요청을 5000번포트로 proxy연결하겠다는 의미

target이 백서버주소, hangeOrigin은..??

 

/api로 오는 요청을 받게 설정을 해두었기 때문에,

프론트에서 axios를 사용할때 전체 주소를 사용하지 않고 '/api/hello' 처럼 5000번 포트 뒷부분만 적어줘도 된다.

이렇게까지만 설정해주면 되는 것 같다

---

 

proxy란?? 클라이언트와 서버 중간에 proxy라는 서버를 두어서 클라이언트의 정보(IP, 데이터)를 보호하고 방화벽 기능, 필터기능, 공유데이터 기능도 수행할 수 있다. 

장점 : 사용제어 / 캐시로 빠른 인터넷 제공 / 나은 보안 / 제한된 사이트 이용가능

 

 

---

Concurrently : 백서버와 프론트서버를 같이 실행시켜주는 라이브러리

npm install concurrently --save

사용법 : https://www.npmjs.com/package/concurrently

 

명령어로 이용

concurrently "command1 arg" "command2 arg"

 

script로 이용 (package.json)

"start": "concurrently \"command1 arg\" \"command2 arg\""

npm run dev 해주면, 아래코드로 백, 프론트를 실행하게된다

(--prefix client 해주면 알아서 client폴더를 찾아 npm run start를 실행하게된다)

    "dev" : "concurrently \"npm run backend\" \"npm run start --prefix client\""