1. 주특기 심화 (2.7~2.10)
지난주에 작성했던 테스트 코드에 미흡한 부분을 검토했다.
남은 시간에는 소켓 프로그래밍에 대해 공부하고 실시간 채팅을 구현해 보기도 하고, 그 외에는 배운것들을 복습하며 시간을 보냈다.
2. 미니 프로젝트(2.11~2.13)
리액트 팀원과 프론트/백으로 나누어 첫 협업을 진행했다.
api와 db 설계를 잘 해놓아야 나중에 프로젝트 진행이 수월할 것이라 생각하고 첫날은 와이어 프레임을 작성하고 api설계, db설계, 초기 세팅을 하며 시간을 보냈다.
그 후 프로젝트 진행은 백엔드 부분은 기초적인 crud와 로그인 기능을 팀원들과 함께 구현했다.
다음주에는 생각해두었던 추가기능 혹은 필요한 기능들에 대해 이야기하고 프로젝트의 진행 방향에 대해 팀원들과 한번 더 이야기를 할 계획이다.
그동안 협업의 기회를 얻기가 힘들었는데 이번주 부터는 좋은 경험을 얻어갈 수 있을 것 같다.
3. What I Learned
CORS
CORS란?) 현재 브라우저로 접속중인 페이지에서 자바스크립트를 이용해 다른 도메인 또는 포트를 가진 주소로 요청을 하는 경우, 해당 리소스에 접근을 허용했는지 확인해 보안을 높이는 동작
쉽게 말해 브라우저는 내 코드의 자바스크립트에서 다른 외부 URL로 요청을 보내는 경우 위험한 주소가 아닌지 확인요청한다. 그래서 브라우저가 요청하려고 시도했던 주소에 get이나 post같은 요청전에 먼저 OPTIONS 메서드를 이용해 요청을 의도적으로 허용하고 있는게 맞는지 확인한다 이것을 CORS preflight 라고 한다.
요청을 받은 서버는 평소와 같이 응답하고 응답을 받은 브라우저는 요청에 대한 허가를 받지 못했다고 판단하고 CORS 에러를 발생시킨다. 이건 브라우저에 구현된 비동기 API에서만 동작하는 규칙이다. 내 서버 내에서만 하는 요청이나 Thunder Client같은 api client를 이용해 요청하는 경우에는 (브라우저를 사용하지 않으므로) CORS가 절대 발생하지 않는다.
CORS TEST
https://test-cors.org 에서 remote server의 url을 localhost로 요청하면 cors 에러발생 (네트워크 탭 확인)
해결법
Access-Control-Allow-Origin를 응답헤더에 추가하면되는데 그냥 추가하는게 아니고 Options 메소드에 추가하면 된다. 즉, Options 메소드로 들어올때 저 응답헤더를 추가해서 응답해주면 된다.
cors라는 모듈을 통해 간단히 해결할 수도 있다.
1.package.json 에서 cors에 hover시 나오는 tooltip 링크를 타고 들어가면 cors module에 관한 사용법이 나온다.
app.use(cors());를 통해 들어오는 모든 요청에 대해 cors 에러를 막을 수 있다.
실습
// app.js
const express = require("express");
const app = express();
const port = 3000;
app.get("/cors-test", (req, res) => {
res.send('hi');
});
app.listen(port, () => {
console.log("서버가 켜졌어요!");
});
//내 서버로 오는 모든 요청 허용
const express = require("express");
const cors = require("cors");
const app = express();
const port = 3000;
app.use(cors());
app.get("/cors-test", (req, res) => {
res.send("hi");
});
app.listen(port, () => {
console.log("서버가 켜졌어요!");
});
Next week
-
팀원들과 미니 프로젝트 진행하며 코드 리팩토링 및 추가기능 공부 및 개발
+) 테스트 코드 작성, joi validation , aws s3 이용한 이미지 업로드 방법 공부
-
노마드 코더 expressjs 강의 수강해보기
-
알고리즘 스터디 계속 진행
