오전에 쿠키와 세션 속성 강의를 듣고 간단한 쇼핑 미션을 수행했다.
백엔드 기초인 CRUD를 응용한 미션이었지만 나는 여전히 헤매고 있다...ㅠ
node.js 언제쯤 익숙해질까
쿠키는 브라우저에서 저장!
세션은 서버에서 저장!
기본 개념을 탑재하고 고군분투하며 숙제하던 중 자주 마주치는 에러와 헷갈리는 개념을 정리해보겠다.
• express.urlencoded(): HTML 폼 전송용 (기본 브라우저 form POST)
• express.json(): JavaScript로 JSON 보낼 때 (fetch, axios 등)
Express.js의 express.urlencoded() 미들웨어는 URL로 인코딩된 폼 데이터를 파싱하여 req.body에서 JavaScript 객체로 접근할 수 있도록 하는 데 사용됩니다. application/x-www-form-urlencoded 형식의 폼 제출을 처리하는 데 필수적입니다.
express.json () 함수는 Express에 내장된 미들웨어로, JSON 페이로드가 포함된 수신 요청을 파싱하는 데 사용됩니다. express.json 미들웨어는 수신 JSON 페이로드를 파싱하고 해당 데이터를 req.body 에 포함시키거나 경로 내에서 추가 처리하는 데 중요합니다 . express.json을 사용하지 않으면 Express는 요청 본문의 JSON 데이터를 자동으로 파싱하지 않습니다.
express.json 미들웨어를 사용하면 클라이언트에서 서버로 JSON 데이터를 전송하는 POST, PUT 또는 PATCH 요청을 처리할 수 있습니다.
const res = await fetch('/api/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
credentials: 'include',
body: JSON.stringify({ username, password })
});credentials가 뭔지 부연 설명
HTTP Access-Control-Allow-Credentials는 응답 헤더입니다. Access-Control-Allow-Credentials 헤더는 요청의 자격 증명 모드 Request.credentials 가 "include" 일 때 브라우저가 응답을 프런트엔드 JavaScript 코드에 노출하도록 지시하는 데 사용됩니다. Request.credentials 가 "include" 모드일 때 Access-Control-Allow-Credentials가 true로 설정된 경우 브라우저가 응답을 프런트엔드 JavaScript 코드에 노출한다는 점을 기억하세요 .
Access-Control-Allow-Credentials 헤더는 XMLHttpRequest.withCredentials 속성이나 Fetch API의 Request() 생성자 에 있는 credentials 옵션과 함께 수행됩니다.
<script src="/js/home.js"></script>
경로 설정 확인!
그리고 별 것 아닌데 시간을 오래 잡아먹은 코드... 바로 경로 설정!
js 디렉토리에 있는 걸 까먹고 src에 "/home.js"라고 써놔서 시간을 한참이나 잡아먹었다...
참고
https://www.geeksforgeeks.org/express-js-express-urlencoded-function/
https://www.geeksforgeeks.org/express-js-express-json-function/
