dansoon.log()

들어가며자바스크립트는 오랜 시간 동안 ‘기능적인 언어’로 오해받아 왔습니다. 필요하면 쓰고, 문제 생기면 회피하는 도구처럼 사용했습니다.하지만 개발 환경이 바뀌고, 프론트엔드가 복잡한 애플리케이션 구조를 갖추게 되면서 자바스크립트는 그 한계를 극복하며 스스로 구조를 진화시켜 왔습니다.이 글에서는 단순한 연대기적 흐름이 아닌, 언어 자체가 어떻게 '구조'와 '패턴'을 받아들이고, 실제 문법으로 진화해왔는지에 집중해 보았습니다. 1. 태생부터 빠른 실행을 위한 구조였다자바스크립트는 1995년 넷스케이프에서 태어났습니다.그리고 설계자였던 브렌던 아이크는 단 열흘 만에 이 언어를 완성했습니다.설계보다는 속도, 철학보다는 실용이 우선이었고 그 결과 JS는 아래와 같은 특징을 가진 언어로 태어났습니다.전역 스코프유..

들어가며지난 2개월 동안 '자바스크립트 + 리액트 디자인 패턴'을 읽으며 학습한 내용과 개인적인 깨달음을 공유하려 한다. 현재 진행 중인 프로젝트에서 코드 구조화와 관련된 여러 문제점들을 이해하고자 이 책을 선택했고, 기대 이상의 인사이트를 얻을 수 있었다.책 소개와 주요 내용이 책은 리액트 애플리케이션의 설계와 구조화에 초점을 맞추고 있으며, 단순히 컴포넌트를 만드는 방법을 넘어 확장 가능하고 유지보수하기 쉬운 애플리케이션을 구축하는 방법을 다루고 있다. 특히 다음과 같은 내용이 인상적이었다1. 컴포넌트 패턴의 진화기존에 알고 있던 HOC(Higher-Order Components)와 Render Props 패턴부터 최신 React Hooks를 활용한 패턴까지 리액트의 발전 과정에 따른 디자인 패턴의 ..

들어가며최근 같이 교류하던 분들과 친한 개발자 분이 이렇게 물어봤다."이 @components 같은 거 왜 쓰는 거예요? 어떤 이유가 있죠?"솔직히 처음에는 그냥 "깔끔해 보여서" 쓰기 시작했다.하지만 수년간 다양한 규모의 프로젝트를 진행하면서, 이 패턴이 단순한 미적 선호를 넘어 코드 품질과 개발 효율성에 상당한 영향을 미친다는 것을 깨달았다.이 글에서는 모듈 별칭(alias)과 barrel 패턴의 기술적 이점, 구현 방법, 그리고 실제 대규모 프로젝트에서의 활용 사례를 심층적으로 분석해보고자 한다.1. 모듈 별칭(Alias)의 기술적 필요성1.1 상대경로의 구조적 문제점프로젝트 복잡도가 증가하면서 상대경로 방식은 다음과 같은 심각한 문제를 야기한다:// 중첩 깊이가 깊어질수록 발생하는 가독성 문제im..

1. 문제이번 주에는 기존 리액트 코드의 상태 관리 방식을 Context와 Custom Hook을 활용해 리팩토링하는 과제가 있었다. 컴포넌트마다 각기 다른 상태와 로직을 관리하고 있었기 때문에 코드가 복잡해지고, 유지보수가 어려워지는 문제가 있었다. 특히 다음과 같은 문제가 있었다:복잡한 상태 관리AdminPage, CartPage 같은 주요 컴포넌트에서 여러 상태(products, cart, coupons)를 개별적으로 관리하고 있었다.상태가 분산되다 보니 로직이 길어지고, 코드 흐름을 이해하기 어려웠다.중복된 코드제품 추가, 수정, 삭제 등의 로직이 각각의 컴포넌트에 중복되어 있었다.동일한 로직을 여러 곳에서 관리하다 보니, 기능을 수정할 때 모든 컴포넌트를 일일이 수정해야 하는 번거로움이 있었다...

1. 문제리액트와 같은 프레임워크에서는 가상 DOM을 사용하여 성능을 최적화하는데, 이 과제에서는 이를 직접 구현해야 했다. 주된 문제는 다음과 같았다.첫번째로 가상 노드(vNode)를 실제 DOM 요소로 변환해야 했는데, 다양한 타입(숫자, 문자열, 배열, 함수형 컴포넌트 등)을 고려하여 처리하는 로직을 만들어야 했다.두번째로 여러 이벤트 핸들러를 각 요소에 개별적으로 설정하지 않고, 이벤트 위임 방식을 사용해 성능을 최적화하고 유지보수를 쉽게 해야 했다.세번째로 최적화된 렌더링을 위해 가상 DOM과 기존 DOM을 비교해 필요한 부분만 업데이트함으로써 불필요한 DOM 조작을 최소화해야 했다.이 문제들은 성능 최적화와 복잡한 사용자 인터페이스를 관리하기 위해 필수적인 부분들이었다.하지만 주로 잘 만들어진..