전체 글68 JavaScript 모듈 시스템 CommonJS와 ESM FEConf에 2022년 내 import 문이 그렇게 이상한가요? 발표를 보고 정리한 글입니다.모듈 시스템이 없던 시절초기 JavaScript는 모듈 시스템이 없었습니다. 모든 코드가 전역 스코프에 존재했고, 파일을 분리하더라도 실질적인 모듈화는 불가능했습니다. 라이브러리를 사용하려면 CommonJS의 등장과 혁신Node.js가 등장하면서 CommonJS 모듈 시스템이 도입됩니다. 이때 우리가 익숙한 require() 함수가 생겨났죠.// CommonJS 방식const fs = require('fs');const myModule = require('./myModule');module.exports = { myFunction: function() { // ... }};CommonJS는 JavaSc.. 2025. 6. 27. 웹팩 정확히 알고가기 웹팩이란?웹팩은 모던 자바스크립트를 위한 정적 모듈 번들러입니다. 웹팩이 애플리케이션을 처리할 때, 내부적으로 프로젝트에 필요한 모든 모듈을 매핑하고 하나 이상의 번들을 생성하는 디펜던시 그래프를 만듭니다. 웹팩의 핵심 개념Entry(엔트리)Output(출력)Loaders(로더)Plugins(플러그인)Mode(모드)Browser Compatibility(브라우저 호환성) Entry내부의 디펜던시 그래프를 생성하기 위해 사용하는 모듈입니다. 진입점이 의존하는 다른 모듈과 라이브러리를 찾아냅니다. // webpack.config.jsmodule.exports = { entry: './path/to/my/entry/file.js',};// ormodule.exports = { entry: { main.. 2025. 5. 27. ESLint 정확히 알고가기 v8버젼 ESLint란? (v8)공식홈페이지의 문구다Find and fix problems in your JavaScript code ESLint statically analyzes your code to quickly find problems. It is built into most text editors and you can run ESLint as part of your continuous integration pipeline.즉, ESLint란 자바스크립트 프로젝트에서 코드 품질을 유지하고, 일관성을 확보하며, 오류를 초기에 발견해 주는 정적 분석 도구입니다.ESLint의 핵심 개념에 대해 알아 보겠습니다.Rules 규칙✅ESLint의 핵심 구성 요소입니다. 코드가 특정 기대 조건을 충족하는지 검증하고, .. 2025. 5. 23. Next.js SSR과 Zustand 사용시 주의점 Next.js는 React 애플리케이션을 구축하기 위한 강력한 프레임워크이며, 서버 사이드 렌더링(SSR) 기능을 통해 성능 및 SEO 이점을 제공합니다. 상태 관리 라이브러리인 Zustand는 간결하고 유연한 API로 많은 개발자에게 사랑받고 있습니다. 하지만 Next.js의 SSR 환경에서 Zustand를 사용할 때는 한 가지 중요한 주의사항이 있습니다. 바로 상태(Store)를 어떻게 관리하고 제공하느냐입니다. 특히 SSR의 특성 때문에 발생하는 문제를 해결하기 위해서는 특정 패턴을 따르는 것이 필수적입니다. 이 글에서는 Next.js SSR에서 Zustand 사용 시 주의해야 할 점과 그 해결책인 Provider 패턴의 중요성에 대해 알아보겠습니다. 1. Zustand란 무엇인가? Zustand.. 2025. 5. 17. 이전 1 2 3 4 ··· 17 다음