dev.daisy

CJS와 ESM은 단순히 문법만 다른 것이 아니라, 로딩 방식, 최적화 가능성, 트리 쉐이킹 여부, 의존성 관리 방식까지 전반적으로 구조가 크게 다르다는 점을 공부하면서 새롭게 느꼈습니다. 특히 ESM은 정적 분석이 가능하기 때문에 번들링 과정에서 더 효율적인 최적화가 이루어진다는 점이 인상적이었습니다. 실제로 프로젝트를 진행하면서 모듈 시스템이 어떻게 코드의 구조를 좌우하는지 체감했고, 전역 스코프가 오염되던 시절과 비교하면 개발 환경이 얼마나 안정적으로 변했는지도 이해할 수 있었습니다.또한 모듈을 어떻게 나누고 어떤 방식으로 가져올지를 설계하는 것이 단순한 파일 분리가 아니라, 전체 애플리케이션의 유지보수성과 확장성에 직결된다는 것을 경험했습니다. 작은 예시 코드에서도 export 방식 하나 바꾸는 ..

JavaScript 함수에 관련된 개념을 공부하면서 익숙하게 사용하던 함수들이 서로 구체적인 차이와 목적을 가지고 있다는 점을 다시 확인할 수 있었습니다. 특히 개발하면서 자주 사용하는 JavaScript에서 함수가 일급 객체로 취급된다는 사실이 고차 함수, 콜백, 함수 조합 같은 패턴을 가능하게 한다는 구조적 특징이라는 점이 가장 인상깊었습니다. 코드 작성 방식이 프로그램 전체의 안정성과 복잡도에 어떻게 기여하는지 다시 생각해 볼 수 있는 시간이었습니다.1) 함수(Function)정의함수는 특정 입력을 받아 내부 로직을 통해 결과를 계산한 뒤 반환하는 실행 단위입니다. 프로그램의 연산을 독립된 블록으로 구성해 재사용할 수 있는 구조를 제공하며, 동일한 로직을 여러 곳에서 호출할 수 있도록 단일 책임 단..

절차 지향, 객체 지향, 함수형 프로그래밍은 각각의 장단이 명확하기 때문에 어떤 패러다임이 절대적으로 우월하다기보다는, 해결하려는 문제의 성격과 팀의 기술적 맥락에 따라 적절한 방식을 선택하고 조합하는 것이 중요하다는 생각이 들었습니다.프론트엔드 개발자로서 클래스 컴포넌트(OOP)로 작성된 레거시 코드를 이해해야 할 수도 있고, 최신 리액트 코드(FP)를 작성해야 할 때도 있기 때문에 각 패러다임의 핵심 아이디어를 정확히 이해하고 상황에 맞게 적절히 활용하는 것이, 견고하고 유지보수하기 쉬운 코드를 작성하는 개발자의 핵심 역량이 될 것이라고 생각합니다.프로그래밍 패러다임 이해하기소프트웨어 개발은 본질적으로 복잡한 문제를 논리적으로 해결하는 과정입니다. 이러한 문제를 효과적이고 일관되게 해결하기 위해, 개..

자바스립트를 공부하다보면 자연스럽게 습득하는 개념들이지만 막상 질문을 받으면 명확히 대답하기 어려운 개념인 것 같아 정리해보았습니다. 자바스크립트를 잘 다룬다는 것은 객체를 잘 설계할 줄 아는 것 같습니다. 나중에 기회가 된다면 객체 코드를 깊이있게 뜯어보고 싶습니다.자바스크립트는 '객체 기반' 언어라고 불릴 만큼 객체(Object)가 핵심적인 역할을 합니다. 데이터와 기능을 묶어 관리할 수 있게 해주는 객체는 자바스크립트 프로그래밍의 기본 단위입니다. 이 글에서는 JavaScript 객체의 기본 개념인 속성과 메서드, 객체를 생성하는 다양한 방법, 그리고 네임스페이스로의 활용까지 담백하게 알아보겠습니다.1. 자바스크립트 객체(Object)란?자바스크립트에서 객체는 이름(Key)과 값(Value)으로 구..

브라우저 렌더링 파이프라인을 공부하며 가장 크게 느낀 점은 '보이지 않는 비용'에 대해 인지하고 있어야겠다는 것입니다. 그저 코드를 작성하면 화면에 나타난다고 당연하게 생각했지만, 바이트가 DOM과 CSSOM으로 파싱되고, 결합하여 렌더 트리를 만드는 작업의 동작 과정을 알게 되었습니다. 자바스크립트의 async/defer 속성 하나가 파싱을 중단시키는지 여부를 결정하고, 무심코 쓴 offsetWidth 조회가 강제 동기식 레이아웃을 유발해 전체 파이프라인을 멈추게 할 수 있다는 사실도 놀랍게 느껴졌습니다. 이제는 코드 한 줄을 작성하더라도 이 코드가 렌더링 엔진을 얼마나 영향을 주는지, 어떻게 하면 레이아웃과 페인트를 건너뛰고 합성 단계만으로 효율적으로 처리할 수 있을지 고민하는 습관을 갖게 되었습니다..

이번에 Promise와 async/await를 다시 정리하면서 단순히 문법적인 차이를 아는 것에 그치지 않고, 실제 프로젝트에서 어떤 방식이 더 적합한지 고민하게 되었습니다.처음에는 콜백 기반 코드로 비동기를 처리했는데, API 호출이 여러 번 중첩되다 보니 코드 가독성이 너무 떨어지고 디버깅도 쉽지 않았습니다. 그때 Promise를 적용하면서 에러 처리를 명확하게 할 수 있었고, 체인 형태로 이어가는 흐름 덕분에 코드 구조가 훨씬 깔끔해진 경험이 있습니다. 하지만 Promise.then 체인이 길어질수록 여전히 코드가 복잡해지는 문제가 있었고, 실제로 제가 진행했던 프로젝트에서 채팅 메시지를 보여주는 기능을 구현할 때 어려움을 느꼈습니다. 그때 async/await를 적용했더니 마치 동기 코드처럼 자연..

자바스크립트는 흔히 싱글 스레드 기반 언어라고 불립니다. 즉 동시에 하나의 작업만 처리할 수 있다는 뜻입니다. 하지만 실제 브라우저 환경을 떠올려보면, 웹 페이지는 애니메이션을 실행하면서 동시에 사용자 입력을 받고, 네트워크 요청도 처리합니다. Node.js 서버 역시 수많은 HTTP 요청을 동시에 처리합니다. '스레드는 하나인데, 어떻게 이런 일이 가능할까?'라는 생각이 들었지만, 모두 이벤트 루프(Event Loop) 덕분에 가능합니다.이벤트 루프란?자바스크립트의 이벤트 루프(Event Loop)는 싱글 스레드 기반 엔진과 여러 스레드를 사용하는 실행 환경을 연결하는 핵심 장치입니다.JS 엔진 자체는 단일 호출 스택(Call Stack)을 사용해 한 번에 한 작업만 처리할 수 있습니다. 그러나 브라우..

처음에는 자바스크립트에서 상속을 구현할 때 단순히 클래스 기반 언어처럼 복사(copy)가 된다고 생각했었지만, 공부할수록 JS는 프로토타입을 통한 위임(delegation) 구조를 가지고 있다는 점이 인상깊었습니다. ES6 클래스가 나오면서 JS가 클래스 기반 언어처럼 보인다고 생각했었는데 결국 내부는 프로토타입 체인 위에 돌아간다는 사실도 흥미롭게 다가왔습니다.실제로 개발하면서 프로토타입과 클래스의 동작 원리를 이해하고 있으면 더 깊이 있는 개발을 할 수 있을 것 같다는 생각이 들었습니다. 공부한 내용을 바탕으로 어떻게 하면 더 효율적이며 안정성을 갖춘 개발을 할 수 있을지 고민해보려고 합니다. 프로토타입이란?자바스크립트에서 프로토타입(Prototype)은 객체가 다른 객체의 속성과 메서드를 공유하거나..

스코프 체인을 공부하기 전에는 “변수를 찾을 때 안쪽에서 바깥쪽으로 찾는다” 정도만 이해했었는데, 실제로는 Lexical Environment와 outer 참조를 기반으로 엔진이 규칙적으로 동작한다는 것을 알게 되니 코드가 어떻게 실행되고 왜 특정 상황에서 에러가 발생하는지 명확하게 이해할 수 있었습니다.특히 React의 Hook이 단순한 스코프 체인 원리에서 비롯되었다는 점이 신기했습니다. 앞으로는 단순히 “작동한다”를 넘어서, 엔진이 어떻게 탐색하고 연결하는지까지 설명할 수 있도록 더 깊이 이해해야겠다고 느꼈습니다. 스코프 체인(Scope Chain)이란? 스코프 체인은 자바스크립트에서 식별자(변수, 함수 등)를 탐색할 때 현재 스코프에 없으면 상위 스코프로 거슬러 올라가며 찾는 구조를 의미합니다. ..

이번에 this 바인딩 규칙을 정리하면서, 단순히 ‘전역에서는 window', '메서드에서는 객체’ 정도로만 이해했던 개념이 훨씬 복잡하고 상황에 따라 다르게 동작한다는 것을 깨달았습니다. 특히 함수 참조 분리 시 this 소실, ES 모듈에서의 this = undefined, 그리고 이벤트 핸들러에서의 this 차이(일반 함수 vs 화살표 함수) 같은 부분은 실제 코드에서 자주 마주칠 수 있는 상황이라고 느껴 실제로 개발하면서도 적절하게 사용해보려고 합니다. JavaScript에서 this는 함수 또는 메서드 내에서 동작하며, 호출되는 방식에 따라 값이 동적으로 결정되는 실행 컨텍스트의 참조 객체입니다. 따라서 함수가 어디서 정의되었는지가 아니라 어떻게 호출되었는지에 따라 값이 달라집니다.전역에서는 전..