https://ko.vitejs.dev/ Vite Vite, 차세대 프런트엔드 개발 툴 ko.vitejs.dev https://webpack.kr/ webpack 웹팩은 모듈 번들러입니다. 주요 목적은 브라우저에서 사용할 수 있도록 JavaScript 파일을 번들로 묶는 것이지만, 리소스나 애셋을 변환하고 번들링 또는 패키징할 수도 있습니다. webpack.kr Vite vs Webpack vite는 번들링을 생략해서 개발 서버의 시작속도를 높이고, HMR을 위해 네이티브 ES 모듈을 사용해서 코드의 변경사항을 빠르게 반영함 최소한의 설정으로도 개발을 진행할 수 있다는 것이 큰 장점 webpack은 프로젝트가 복잡하고 다양한 설정을 요구하는 경우에 사용하는 것이 적합 요즘 webpack에서 vite로 옮..
CORS란? Cross-Origin Resource Sharing(CORS)는 웹에서 발생하는 보안 정책 다른 도메인(Origin)간의 자원 공유를 제어하는 것 보안 상의 이유로 다른 도메인으로의 HTTP요청을 제한함 원인? 브라우저에서 다른 도메인에 있는 리소스에 접근하려고 할때 발생함 ex) A에서 실행중인 코드가 B에있는 api에서 http 요청을 보내려고 할때 통신을 차단하면서 CORS가 발생함 해결 방법 1. 서버에서 헤더 설정하기 Access-Control-Allow-Origin 헤더를 설정해서 허용할 도메인 명시 2. 크롬 확장 프로그램 사용하기 https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcel..
패키지 매니저란 프로젝트에서 종속성을 관리하고 외부 패키지를 설치, 업데이트 제거하는 도구 1. npm node.js를 설치하면 함께 제공되는 패키지 매니저 package.json파일을 사용해서 종속성 관리 npm install (npm i)로 패키지를 설치함 2. pnpm npm을 기반으로 만들어진 패키지 매니저 npm보다 빠른 설치 속도와 적은 디스크 공간 사용을 제공함 npm과 yarn의 문제점을 해결하기 위해 개발됨 ghost dependency문제를 해결해서 예상치 못한 버그를 방지함 3. yarn npm의 단점 보완을 위해서 facebook에서 만든 패키지 매니저 npm보다 나은 캐싱 매커니즘을 제공함 4. yarn-berry yarn 2.x버전부터 도입됨 (yarn의 다음세대 버전) 플러그..
https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading Lazy loading - Web performance | MDN Lazy loading is a strategy to identify resources as non-blocking (non-critical) and load these only when needed. It's a way to shorten the length of the critical rendering path, which translates into reduced page load times. developer.mozilla.org https://imagekit.io/blog/lazy-loading-images..
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Proxy Proxy - JavaScript | MDN Proxy 객체를 사용하면 한 객체에 대한 기본 작업을 가로채고 재정의하는 프록시를 만들 수 있습니다. developer.mozilla.org https://ko.javascript.info/proxy Proxy와 Reflect ko.javascript.info Proxy란? 특정 객체에 대한 가로채기 동작을 제공하는 내장 객체 객체의 동작을 수정하거나 전달함 프록시 생성 const proxy = new Proxy(target, handler) Proxy get & set 예제 let target = { gree..
RESTful API? RESTful은 REST의 설계 규칙에 따라 설계된 API를 말함 REST의 원리를 따르는 시스템을 RESTful이라고 함 그렇다면 REST는 무엇일까? REST? REST(Representational State Transfer)는 자원의 표현에 의한 상태 전달이라는 의미로 웹에서 사용되는 아키텍쳐 스타일 중 하나임 HTTP 프로토콜을 기반으로 하여 웹의 장점을 최대한 활용할 수 있고, 클라이언트와 서버간의 통신을 처리함 HTTP URI를 통해 리소스를 명시하고 Method(get, post, put, delete, patch)를 통해 자원에 대한 CRUD(create, read, update, delete)연산을 적용함 REST API를 사용하는 이유 - HTTP 프로토콜을 기..
