단순하게 파일 이름으로 해당 파일을 접근하는 것이 아니라각각의 의존성 파일에 hash id 를 부여하고 관리이 과정에서 중복되는 패키지는 동일한 hash id를 얻게 된다.개념저장되는 컨텐츠의 해시값을 주소로 사용동일한 컨텐츠는 항상 동일한 주소내용 기반으로 파일을 식별하고 저장위치(URL)가 아닌 컨텐츠를 기반으로 검색할 수 있도록 정보를 저장하는 방법기존의 데이터는 중앙화된 서버에 보관되어 주소(URL)를 통해 접근하여 데이터를 볼 수 있었음이런 방법을 위치 주소라고 함*ex) https://n.news.naver.com/article/032*네이버 뉴스 페이지에서 기사 032를 가져오라는 URL이다. 말 그대로 네이버 뉴스 페이지라는 위치에서 기사 032라는 데이터를 가지고 오는 방식이다. 이러한 ..
enum과 as const는 탄생한 목적 자체가 다르다.enum은 서로 연관된 상수들을 하나의 네임스페이스로 묶어 추상화하기 위해 도입된 것이다. 이를 통해 코드만 보더라도 의도를 명확히 알 수 있어 가독성을 높일 수 있다.반면 as const는 타입 단언의 한 종류로써 리터럴 타입의 추론 범위를 줄이고 값의 재할당을 막기 위한 목적으로 만들어졌다.프론트엔드 입장enum은 번들링된 코드의 용량이 기대하는 것보다 조금 더 클 수 있다프론트엔드용 JS는 브라우저의 페이지로드마다 브라우저가 JS파일을 다운받는다JS 파일을 다운로드 받는 시간이 짧아질수록 사용자 입장에서 최초 페이지 진입 시 로딩 시간이 줄어드는 효과를 가짐그치만 node.js는 자바스크립트 소스코드를 받아서 읽어오는 시점은, node.js 서..
공유 용이성URL만 복사해서 공유하면 동일한 상태를 다른 사용자와 쉽게 공유할 수 있습니다특정 필터나 검색 조건이 적용된 페이지를 북마크하거나 공유하기 좋습니다브라우저 히스토리 활용뒤로가기/앞으로가기 버튼을 사용했을 때 이전 상태로 자연스럽게 돌아갈 수 있습니다사용자의 브라우징 경험이 더 자연스러워집니다초기 상태 설정 편의성페이지 로드 시 URL을 파싱해서 바로 초기 상태를 설정할 수 있습니다서버사이드 렌더링(SSR)시에도 초기 상태를 쉽게 파악할 수 있습니다SEO 최적화검색 엔진이 URL을 통해 페이지의 상태를 이해하기 쉽습니다다양한 상태의 페이지가 검색 결과에 노출될 수 있습니다분석 용이성사용자들이 어떤 필터나 검색 조건을 많이 사용하는지 추적하기 쉽습니다웹 분석 도구에서 URL 패턴을 통한 사용자 ..
React.lazy()는 동적 import를 사용하여 컴포넌트를 필요한 시점에 불러오는 기능입니다. 이를 통해 초기 번들 크기를 줄이고 애플리케이션의 초기 로딩 성능을 개선할 수 있습니다.특징사용자가 보는 부분만 먼저 렌더링하고 나머지 부분은 나중에 렌더링을 한다.lazy 컴포넌트를 사용할 때는 반드시 Suspense 컴포넌트로 감싸야 합니다.코드 스플리팅큰 번들을 작은 청크로 분할하여 필요할 때만 로드할 수 있다사용자가 실제로 필요로 할 때까지 코드 로딩을 지연한다내부적으로 동작 방법1. promise 기반 동작이 코드가 실행되면 다음과 같은 과정이 일어난다.const LazyComponent = React.lazy(() => import('./MyComponent'));이 코드가 실행되면 다음과 같은..
NaNNot-A-Number(숫자가 아님)을 나타내는 전역 객체의 속성이다. Number.NaN의 값과 같다.NaN을 반환하는 경우는 다음과 같다.숫자로서 읽을 수 없는 경우 ex) parseInt('blahblah'), Number(undefined)결과가 허수인 수학 계산식 ex) Math.sqrt(-1)피연산자가 NaN인 경우 ex) (7 ** NaN)정의할 수 없는 계산식 ex) (0 * Infinity)문자열을 포함하면서 덧셈이 아닌 계산식 ex) ("안녕" / 3)isNaN(value)과 Number.isNaN(value)은 value가 NaN인지 판별할 때 쓰인다isNaN('hello world'); // trueNumber.isNaN('hello world'); // falseisNaN()..
https://blog.banksalad.com/tech/build-a-website-with-gatsby/소개React 기반의 정적 사이트 생성 프레임워크 (JAM Stack 기반) aka. 블로그 생성기CSR과 SSR, lazy loading을 적절히 섞어 사용특징React 기반GraphQL을 통한 데이터 관리정적 사이트 생성플러그인과 테마최적화된 성능SEOGatsby의 장점빠른 로딩 속도와 SEO 향상정적 사이트로 미리 생성되기 때문에 페이지 로딩이 빠르며, 검색엔진 최적화(SEO)에도 유리합니다.플러그인 생태계이미지 처리, 분석, 성능 최적화 등 기능을 플러그인으로 쉽게 추가할 수 있어 개발 속도가 빠릅니다.React와 GraphQL 학습Gatsby를 통해 React와 GraphQL에 대한 지식을..
Zero install소프트웨어 패키지를 로컬에 설치할 필요 없이 실행할 수 있는 개념이에요.이 방식에서는 패키지를 로컬로 완전히 다운로드하거나 설치하지 않아도, 패키지 매니저가 필요할 때 자동으로 필요한 파일을 불러와서 사용해요.패키지 매니저에서의 Zero Install은 주로 Yarn Berry와 같은 패키지 매니저에서 제공됩니다.장점빠른 설치: 패키지 설치가 매우 빠릅니다. 필요한 의존성만 적재되고, 모든 패키지가 이미 캐시되어 있는 경우에는 거의 즉시 시작할 수 있습니다.일관된 환경 보장: Zero Install은 패키지를 설치하는 과정에서 발생할 수 있는 충돌 문제를 최소화하고, 팀 프로젝트에서 환경의 일관성을 보장하는 데 유용합니다.불필요한 중복 제거: node_modules처럼 거대한 폴더를..
Compile Cache(컴파일 캐시)는 자바스크립트 엔진의 성능 최적화 기술 중 하나입니다. 이미 컴파일된 코드를 재사용하여 반복적인 컴파일 작업을 줄이는 메커니즘입니다.기본 개념// 같은 코드가 여러 번 실행될 때 function greeting(name) { return `Hello, ${name}!`; } // 첫 번째 호출: 컴파일 후 캐시 greeting("Alice"); // 두 번째 호출: 캐시된 컴파일 결과 재사용 greeting("Bob");캐시 저장 방식소스 코드의 해시값을 키로 사용컴파일된 바이트코드/기계어를 값으로 저장// 내부적으로 이런 형태로 저장const compileCache = { "hash_of_source_code": { byteCode: compil..
소개고성능의 JavaScript와 TypeScript 컴파일러로, Rust로 작성됨Babel과 같은 트랜스파일러나, Webpack 같은 번들러의 대안빠른 속도로 JavaScript/TypeScript 코드를 컴파일하고 번들링할 수 있도록 해줌SWC의 주요 특징속도:SWC는 Rust 언어의 성능을 활용해, Babel과 Webpack 같은 기존 자바스크립트 도구보다 훨씬 빠르게 작동합니다. Rust는 컴파일 속도가 빠르고 메모리 관리를 효율적으로 수행하기 때문에, SWC는 대용량 프로젝트에서 성능 이점을 제공합니다.트랜스파일링:SWC는 최신 JavaScript나 TypeScript 코드를 구형 브라우저 환경에서도 작동할 수 있도록 트랜스파일링해줍니다. 이 과정에서 JSX 변환, ES6+ 문법 변환, Type..
PNG비트맵 이미지 포맷특징픽셀(래스터) 기반각 픽셀(작은 사각형) 하나에 색상하나의 정보가 있음픽셀이 많을수록 품질이 좋음래스터 이미지를 너무 확대하면 입자가 거칠어지는 픽셀화 현상이 나타남이미지를 너무 축소해도 이미지가 희미해짐래스터 기반으로 JPEG, GIF, PNG가 있음투명도 지원압축무손실 압축을 사용해 이미지를 압축한다. 이미지 품질을 유지하면서 파일 크기를 줄일 수 있음JPEG 같은 손실 압축보다 파일 크기가 크다복잡한 이미지장점5~20%정도 줄어드는 무손실 압축으로 인해 이미지 품질이 높음그래도 SVG파일 보다는 파일이 큼투명도와 다양한 색상 지원PNG는 래스터 기반의 투명 파일에 가장 적합한 포맷 중 하나픽셀과 투명도가 중요한 작업을 한다면 PNG가 적합하다단점파일 크기가 클 수 있음해상..
