Today I Learned/개인공부

[TOOL] joi

joi 란? 자바스크립트용의 스키마 설명 언어이자, 데이터 유효성 검사 툴이다. 우버 이츠 클론코딩 때 환경 변수의 유효성을 검사할 때 사용한 것 일반적으로 툴들은 타입스크립트로 작성되있지 않아 import하는 방법이 따로 있다. import * as Joi from 'joi';

쿠키와 세션의 차이

쿠키와 세션을 사용하는 이유? HTTP 프로토콜의 특징이자 약점을 보완하기 위해서 사용한다. HTTP 프로토콜의 특징 1. Connectionless 프로토콜 (비연결 지향) 클라이언트가 서버에 요청(Request)을 했을 때, 그 요청에 맞는 응답(Response)을 보낸 후 연결을 끊는 처리방식이다. HTTP 1.1 버전에서 커넥션을 계속 유지하고, 요청(Request)에 재활용하는 기능이 추가되었다. (HTTP Header)에 keep-alive 옵션을 주어 커넥션을 재활용하게 한다. HTTP 1.1 버전에선 디폴트(default) 옵션이다. HTTP가 TCP위에서 구현되었기 때문에(TCP : 연결 지향, UDP : 비연결 지향) 연결 지향적이라고 할 수 있다는 얘기가 있어 논란이 있지만, 아직까진..

[개인공부] node.js Express 에러 핸들링

최근에 혼자서 클론코딩하며 연습하고 있는 프로젝트가 있는데, 굉장히 쉽고 간단한데 한번도 보지못했던 에러 핸들링 방법이 있어서 미리 정리해두려고 한다. 미들웨어를 사용하는 index.js 파일에서 위와 같은 식을 미리 만들어두고, 어느 파일에서도 간단하게 불러올 수 있게 utils폴더에 error.js 파일을 만들어 관리해준다. 위 사진과 같이 api endpoint 마다 에러 발생 시, response 하고싶은 http 상태코드와 오류 메세지를 입력해준다. 그러면 위와 같이 내가 입력해둔 HTTP 상태코드와 메세지 그리고 왜 오류가 났는지에 대해 한눈에 볼 수 있게끔 보내줄 수 있다!

[개인공부] 2/15 React Custom Component

Modal export const Modal = () => { const [isOpen, setIsOpen] = useState(false); const openModalHandler = () => { setIsOpen(!isOpen) // true가 아닌 !isOpen 으로 해준 이유는 클릭할 때마다 상태를 변환해주기 위함! }; return ( {isOpen ? 'Opened!' : 'Open Modal'} {isOpen ? {event.stopPropagation()}}> × //&times는 'X'를 표현하는 HTML 엔티티(Entities) Hello : null} ); }; 모달 창을 제외한 백그라운드를 종료하고 싶어서 를 입력하면 작동이 잘 되는 줄 알았으나, 어디든 클릭하면 모달창이 종료되..