본문 바로가기

전체 글54

CommonJS (exports module.exports) 목차 - CommonJS - 직접 만드는 모듈 로더 - 해결(resolving) 알고리즘 - 모듈 캐시 - 순환 종속성 CommonJS CommonJS는 Node.js의 첫 번째 내장 모듈 시스템입니다. require로 모듈을 임포트하게 해 줍니다. exports와 module.exports는 특별한 변수로서 현재 모듈에서 공개될 기능들을 내보내기 위해 사용 이제 모듈 로더를 간단하게 만들어 봅시다. 직접 만드는 모듈 로더 const fs = require('fs'); function loadModule(filename, module, require) { const wrappedSrc = ` (function (module, exports, require){ ${fs.readFileSync(filenam.. 2024. 1. 1.
[CSS] container-queries 목차 - 컨테이너 쿼리 vs 미디어 쿼리 - 사용법 컨테이너 쿼리 vs 미디어 쿼리 기존 반응형을 작성하려면 mdedia query로 css를 작성하게 되는데 이는 viewport 크기를 기준으로 작성하게 됩니다. container-query는 element 크기를 기준으로 작성할 수 있게 해줍니다. 사용법 사용법은 간단하게 container-type: inline-size로 컨텍스트를 지정해준다음 @container [:name] (size)로 사용하시면 됩니다. 아래 코드와 처럼 주의할 점은 container context로 지정된 컨테이너틑 css 수정할 수 없습니다. container 내부 요소들만 css를 변경시킬 수 있습니다. .post { container-type: inline-size; .. 2023. 12. 30.
zustand persist(broswer storage(localstorage)연동) zustand persist(broswer storage연동) - 리액트 기준 사용법 - NextJS 기준 사용법 리액트 기준 사용법 기존 zustand의 스토어 정의에서 persist 미들웨어와 옵션을 추가해 준 것이 끝입니다. 공식문서 샘플을 확인 하여 broswer storage를 사용하는데 필요한 최소 코드를 확인해 봅시다 아래 코드를 보시면 옵션 부분 중 name만 명시해도 기본으로 localStorage가 적용되기 때문에 손쉽게 사용가능 합니다. import { create } from 'zustand' import { persist, createJSONStorage } from 'zustand/middleware' export const useBearStore = create( persist.. 2023. 12. 29.
타입스크립트 교과서: 3-10 Awaited, Promise 타입스크립트 교과서가 나왔길래 보는 중. 어려운 부분이 있어서 작성 Awaited에 대한 이야기다. 이걸 직접 사용해 본적은 없는데 가끔 라이브러리를 찾아보면 이런게 써져 있음 Awaited에 대해 알아보자 1. 프로미스는 기본적으로 Awaited 타입이 붙여짐 2. await 키워드를 붙이면 자동으로 Awaited로 감싸짐 const str1 = Promise.resolve('promise'); // type str1 = Promise const str2 = await Promise.resolve('promise'); // type str2 = Awaited 3. Awaited 분석 규칙 규칙 1 Awaited === 객체가 아닌 값 규칙 2 Awaited === Awaited 규칙은 아래를 읽고 코드.. 2023. 12. 1.