javascript10 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. 함수형 프로그래밍과 자바스크립트 그리고 이터러블/이터레이터 프로토콜 함수형 프로그래밍 자바스크립트는 멀티 패러다임 언어로, 객체지향과 함수형 프로그래밍 스타일을 모두 지원합니다. 자바스크립트는 함수를 일급 객체로 취급하는 언어로, 이러한 특성 덕분에 함수형 프로그래밍을 자연스럽게 지원합니다. 1. 일급 함수자바스크립트에서 함수는 일급 객체로, 변수에 할당하거나 다른 함수의 인자로 전달할 수 있습니다. 2. 고차 함수Array 객체의 내장 메서드들(map, filter, reduce 등)은 함수형 프로그래밍의 대표적 예입니다. 3. 클로저클로저는 함수가 자신이 생성된 환경의 변수를 기억하고 접근할 수 있는 기능으로, 함수형 프로그래밍에서 상태를 캡슐화하는 데 사용됩니다. 4. 불변성ES6부터 도입된 const와 스프레드 연산자(...)는 불변성을 구현하는 데 도움이 됩니다.. 2025. 4. 30. History api (pushState, replaceState) https://programmers.co.kr/skill_check_assignments/199 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 평소 리액트로만 주고 코딩을 했고 자바스크립트 구현에 익숙하지 않아 공부하기 위해 바닐라 자바스크립트 구현 과제테스트를 풀어보았다. 바닐라 자바스크립트로 SPA를 구현할때 가장 중요한 페이지 라우팅을 구현할 때 필요한 history api를 정리해 보았습니다. 1. History api History api란 history 글로벌 객체를 이용해 브라우저의 세션 히스토리에 대한 접근과 조작 기능을 제공하는 것으로 즉.. 2023. 7. 17. 이전 1 2 3 다음