서비스워커란? 서비스워커는 브라우저가 백그라운드에서 실행하는 스크립트로, 웹페이지와는 별개로 작동하며 웹페이지 또는 사용자의 인터랙션이 필요하지 않은 기능만 제공하고 있습니다. 서비스워커의 수명 주기는 웹페이지와는 완전히 별개입니다. 웹 서비스와 브라우저 및 네트워크 사이에서 프록시 서버의 역할을 하며, 오프라인에서도 서비스를 사용할 수 있도록 합니다. 주의 ServiceWorker 적용 전 알아두어야할 점은 서비스워커는 보안상의 이유로 HTTPS에서만 실행이 됩니다. 서비스워커 사용 서비스워커를 사용하기 위해서는 먼저 등록하는 단계가 필요합니다. async function registerServiceWorker() { const swRegistration = await navigator.serviceW..

CORS 발생 원인 보안을 위해서 교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)이 허용 되지 않기 때문에 발생. 해결 방법은 간단하다. "C:\Program Files\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir="C:\chrome" 기존에는 --disable-web-security 만 붙히면 됐는데 지금은 --user-data-dir 인자를 추가로 더 붙혀야 한다. 이제 CORS 에러 없이 사용 할 수 있다. 적용 후 브라우져 재 접속 시 아래와 같이 경고 문구가 나오는데, 보안경고이므로 그냥 사용 하면 된다.

WhatFont https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=ko JSON Viewer http://jsonviewer.stack.hu/ https://chrome.google.com/webstore/detail/json-viewer/gbmdgpbipfallnflgajpaliibnhdgobh?hl=ko ColorZilla https://www.colorzilla.com

보호되어 있는 글입니다.

HTTP 프로토콜의 특징 Connenctionless 클라이언트와 서버가 요청과 응답을 한 번 주고받으면 연결을 끊어버리는 특징을 말한다. 클라이언트가 request를 서버로 보내면 서버는 클라이언트가 보낸 request에 맞게 response를 보내고 연결을 끊는다. Stateless 위처럼 요청과 응답으로 인해 통신이 끝난다면 상태 정보를 유지하지 않는 특징이다. 예를들어 메인페이지에서 로그인을 하고 다른 페이지로 넘어가면 다시 로그인을 해야된다. 이런 특징들 때문에 쿠키와 세션 혹은 jwt를 이용하여 사용자 인증에 대한 정보를 유지할 수 있다. 인증 방식 쿠키 쿠키는 클라이언트에 저장되는 key와 value로 이루어진 데이터이다. 인증 유효 시간을 설정할 수 있고 유효 시간이 정해진다면 클라이언트가..

자바스크립트 코드가 많아지면 하나의 파일로 관리하는데 한계가 있다. 그렇다고 여러개 파일을 브라우져에서 로딩하는 것은 그만큼 네트웍 비용을 치뤄야하는 단점이 있다. 뿐만 아니라 각 파일은 서로의 스코프를 침범하지 않아야 하는데 잘못 작성할 경우 변수 충돌의 위험성도 있다. webpack은 서로 연관 관계가 있는 웹 자원들을 js, css, img와 같은 스태틱한 자원으로 변환해주는 모듈 번들러입니다. 자원들을 최적화해서 압축 등 웹페이지의 성능을 끌어올려줍니다. 웹팩의 주요 네 가지 개념 1. 엔트리 자바스크립트가 로딩하는 모듈이 많아질수록 모듈간의 의존성은 증가한다. 의존성 그래프의 시작점을 웹팩에서는 엔트리(entry)라고 한다. 웹팩은 엔트리를 통해서 필요한 모듈을 로딩한고 하나의 파일로 묶는다. ..