daniary 4주차

🌟 이번 주 목표

back-end

• CORS 에러 해결

front-end

• post list 페이지 퍼블리싱

CORS 에러 해결

찾아보니 CORS 에러를 해결할 수 있는 방법에는 여러가지가 있었다.
1. Chrome 확장 프로그램 이용
2. 프록시 사이트 이용하기
3. 서버에서 Access-Control-Allow-Origin 헤더 세팅하기

이 중 내가 채택한 방법은 3번으로 cors 미들웨어를 사용하는 것이었다.

사용 방법

• cors 설치

> yarn add cors

• cors 미들웨어 적용

const express = require('express')
const cors = require('cors');

const app = express();

app.use(cors({
    origin: '도메인', // '*'을 사용할 경우-모든 출처 허용 옵션. true 를 써도 된다.
}));

어려웠던 점

app.use(cors(...)) 코드를 경로가 담긴 핸들러보다 아래에 적어서 계속 CORS 에러가 발생하였다.

express 애플리케이션에서 미들웨어는 순서대로 실행되며, 요청이 처리되는 동안 미들웨어 체인을 통과하기 때문에 각 미들웨어는 요청 및 응답 객체에 대한 조작을 수행하거나 다음 미들웨어로 제어를 전달하는 역할을 한다.

CORS 미들웨어는 요청 헤더에 CORS 관련 헤더를 추가하여 클라이언트와 서버 간의 크로스 오리진 요청을 처리한다. 그렇기 때문에 CORS 미들웨어는 요청이 서버의 경로 핸들러에 도달하기 전에 실행되어야 하고, 그렇지 않을 경우 경로 핸들러가 실행되기 전에 CORS 에러가 발생할 수 있다.

CORS 에러를 해결하기 위해 많은 글을 보았는데도 어려운 점이 많다. 나중에 정리해서 글쓰기!
🥸 참고용 블로그

---

post list 페이지 퍼블리싱

퍼블리싱의 경우 디자인만 있으면 간단한 경우에는 생각보다 빨리 할 수 있지만 내 블로그의 디자인은 아직 완전히 정해지지 않아서 퍼블리싱을 하는데 약간의 시간이 걸렸다.

퍼블리싱을 마치고 저번주에 CRUD를 구현해두기도 했고, CORS 에러도 해결한김에 DB에 저장된 데이터를 뿌려주는 것까지 진행하였다. 뿌듯✌️✌️

---

🔥 다음주 목표

• post CRUD entity 추가하기 (날짜, 태그 등)
• app routing 적용시켜보기
• 글쓰기 페이지 퍼블리싱