공부하는 비오

프론트엔드 개발자라면, 자주 마주칠 CORS 에러. CORS는 일종의 보안정책이다. 해커가 마음대로 서버에 접근하지 못하도록, 다른도메인에서 접근하지 못하게 브라우저에서 미리 막아둔다. 즉 CORS에러는 다른도메인으로(3060에서 3065로)보낸 요청을 브라우저가 차단하기 때문에 생긴다. 브라우저에서 다른 도메인으로 보낼 때에만 생기는 문제이기 때문에, 프론트서버(3060)에서 백엔드서버(3065)로 보낼때는 문제가 안생긴다. 브라우저를 변조하면 cors에러가 안걸리지만... 용자의 브라우저를 변조할수없다^^(그건해킹이니까) 그러므로 다른 도메인으로(3060에서 3065로) 보낼 수 있도록 해결해줘야한다. CORS 해결하는 방법으로는 두 가지가 있다. 1. 프록시방법 2. 백엔드서버에서 헤더를 만들어주는..

Node/Express 2020. 12. 25. 21:08

현재 사용하고 있는 구성요소는 네개다. 브라우저(client):3060 - 프론트서버(Next):3060 - 백엔드서버(express):3065 - DB(MYSQL):3306 브라우저랑 프론트서버는 같은 프로그램이다. (포트가 같으므로) 브라우저는 특별히 화면을 보여주기 위해서 구동하는 프로그램이다. 회원가입을 할 때의 흐름을 이 네가지 구성요소와 함께 생각해보고, 백엔드서버를 구성해보자. [브라우저] 회원가입을 위해 data를 입력한 후, 회원가입 버튼을 누른다. [프론트서버] signup request 리듀서가 실행되고, saga에서 action.data로 받아온 값이 백앤드서버로 전달된다. 즉, signUpAPI의 매개변수인 data는 signUp에서 받아온 action.data이다. 서버 기본설정..

Node/Express 2020. 12. 25. 20:41

기본 폴더인 app.js에 있는 라우터들. 동일한 이름의 라우터들끼리 묶어서 분리할 수 있다. 이 두개의 라우터를 app파일에서 분리해보자. - 루트디렉토리에 routes 폴더를 만들고, 하위파일로 post.js를 만든다. const express = require('express'); const router = express.Router(); router.post('/', ...); router.delete('/', ...); module.exports = router; app.js const postRouter = require('./routes/post); app.use('/post', postRouter); postRouter로 가져오고, 원래있던 곳에 app.use를 적는다. 여기서 첫번째 인자..

Node/Express 2020. 12. 21. 15:58

익스프레스를 설치한다. 익스프레스는 http를 내장하고있는 express를 불러온다. http 메서드(클라이언트가 수행하고자 하는 동작을 정의한 동사나 명사. get, post, put delete 등)를 좀더 직관적으로 사용할 수 있다. 터미널에서 현재 파일을 실행하자. 그러면 브라우저에 hello express 가 나온다. 브라우저에서 /api로 라우팅 된 것을 확인할 수 있다. res.send(string) res.json(json형식의 파일). 보통 서버에서 받아오는 data는 json 형태의 파일이다. 하지만 get 이외의 다른 메서드는 브라우저에서 표시해주지 않는다. Postman이라는 툴을 사용해서 POST랑 DELETE를 해보자. www.postman.com/downloads/ 포스트맨을 ..

Node/Express 2020. 12. 19. 21:41