설치 npm install msw --save-dev npx msw init --save 세팅 node환경에서 테스트하거나 browser에서 하기 위해서는 다음과 같은 세팅이 필요합니다. 작성해야하는 파일은 총 4개입니다. mock 하위에 다음의 4파일을 만들어주세요. browser.ts server.ts handlers.ts worker.ts 그리고 App에서 작성한 worker를 호출해오면 세팅이 끝납니다. 1. browser.ts import { setupWorker } from "msw"; import handlers from "./handlers"; // mocking될 response를 정의해놓는 곳 ​ export const worker = setupWorker(...handlers); ​ ..

git hooks 어떠한 이벤트가 발생했을 때 자동으로 스크립트를 실행할 수 있다. 예를 들어 commit 마다 lint체크를 하고 싶을 때 pre-commit 이라는 hook을 사용해 스크립트를 작성하면 된다. 종류 Git hooks의 종류 중 제가 사용할 것은 다음 두 가지입니다. pre-commit : 커밋할 때 가장 먼저 실행 prepare-commit-msg : 커밋메시지를 생성 후, 편집기 실행 전 실행 (커밋메시지를 지정하기 이전에 실행됨) - 커밋메시지를 자동으로 수정하고 싶을 때 사용 husky git hooks는 이미 레포지토리에 존재합니다. .git/hooks 에 스크립트들이 존재하죠. 이를 수정해서 사용해도 되지만 이렇게 수정되는 파일들은 git에 관리되지 않기에 따로 관리해야하는 ..

LightHouse 과제를 수행하며 해결해나간 항목들을 정리해둔 것 웹 페이지 품질 개선할 수 있는 자동화도구 Chrome의 개발자도구 탭에서 사용가능 npm으로 설치해서 사용가능 Lighthouse에서 측정하는 지표는 실제 사용자의 사이트 경험을 이해하고 개선하는데에 중요하다. Lighthouse으로 미리 측정하여 확인하면 이런 해프닝을 방지할 수 있다. 다음은 Lighthouse에서 측정해주는 UX를 높이는데에 필요한 지표들을 알아보자. 성능측정 지표 Lighthouse는 Mertics(척도)로 다음 6가지를 측정한다. 이 성능값들은 절대적인 수치가 아니다. 컴퓨터의 퍼포먼스나 익스텐션들로 인한 네트워크 요청들, 바이러스 소프트웨어 등등에 의해 영향을 미칠 수 있다. 각 지표는 가중치를 매겨 전체 점..

JWT Json 객체를 사용해 가볍고, self-contained 방식으로 정보를 안전성있게 전달해주기 위한 토큰. 1. JWT ? JSON Web Token (JWT) is an open standard (RFC 7519) that defines a compact and self-contained way for securely transmitting information between parties as a JSON object. 여기서 keyword는 compact, self-contained, JSON, securely 다. self-contained : 다른 매개를 이용하지 않고 JWT안에 필요한 정보를 담고 있다. JSON : JWT는 JSON형식으로 이루어져 있다. securely : 암호화하..

함수형 프로그래밍 Side effect가 없이 in, output이 동일한 순수함수로만 작성되고 공유상태, mutable을 피하는 SW를 만드는 프로세스 함수형 프로그래밍은 명령형(imperative) 이 아닌 선언형(declarative) 이며 애플리케이션의 상태는 순수 함수를 통해 전달됩니다. 애플리케이션의 상태가 일반적으로 공유되고 객체의 메서드와 함께 배치되는 객체 지향 프로그래밍과는 대조됩니다. 출처 함수형 프로그래밍은 딱 정해진 것이 아니라, 특징들을 갖는 프로그래밍의 패러다임이다. 애플리케이션의 상태가 일반적으로 공유되고 객체의 메서드와 함께 배치되는 객체 지향 프로그래밍과는 대조된다는 말은, 애플리케이션의 상태(클래스의 멤버변수)가 공유되고 메서드를 통해 처리되는 객체지향과 선언형이 다르다..

OAuth based on naver d2 What is OAuth ? Authentication + Authorization 다양한 플랫폼 환경에서 권한을 부여를 위한 프로토콜. 비밀번호를 공유하지 않고 인증 토큰을 사용해 User - Servie Provider 간의 ID를 증명한다. OAuth는 타 App에 구글 비밀번호를 제공하지 않고 다른 App이 구글에 있는 내 정보, 기능을 사용할 수 있도록 한다. 타 App의 DB가 해킹당해도 나는 해당 App에 구글 정보를 제공하지 않았으므로 관계없어진다. Why OAuth ? OAuth는 third party App에서도 페이스북, google, kakao, naver 등 사용자가 필요한 일부 기능을 다른 서비스에서도 사용할 수 있도록 개발 생태계를 확..

HTTP 1.0, 1.1 그리고 2.0 What is HTTP? Hyper Text Transfer Protocol : www상에서 정보를 주고 받을 수 있는 프로토콜. HTTP를 통해 HTML문서를 전달 0.9 HTTP의 첫 버전 번호로 이전에는 버전번호가 없었다. 요청과 응답은 매우 단순했고 오로지 GET 메소드로만 요청을 수행했다. 요청 : GET /mypage.html 응답 : hello 1.0 하나의 TCP연결 당 한번의 데이터 전송만 이루어진다.(3way-handshake) 연결하자(syn) 연결 오케이(syn + ack) 연결 수립(ack) 통신 데이터 전송이 끝나면 TCP연결을 끊는다. (4way-handshake) 버전 정보가 요청 내에 전송되기 시작 Status code가 응답의 시작에..