Overview 리액트를 사용해서 프론트엔드 웹 애플리케이션을 개발하는 경우, 많은 곳에서 Atomic Design Pattern을 사용하게 됩니다. 컴포넌트를 하나의 함수로 보고, 클린 아키텍쳐의 관점에서 재사용 가능한 컴포넌트들을 그 기능과 구성에 따라 구조화 하여 사용하는 이 패턴은 어느샌가 프론트엔드 아키텍쳐를 이루는 하나의 교과서처럼 되어 알려지고 있습니다. 하지만 이 Atomic Design Pattern을 실제 애플리케이션에 적용해서 개발하다보면 생각보다 많은 부분들이 "추상적"이고 "주관적"이라는 느낌을 받는 경우가 많습니다. 오히려 적용한 이후에 코드가 더 관리가 어려워지고 지저분해지는 경우도 많은데, 이는 Atomic Design Pattern이 처음 등장할 때 그 사용처가 "Desig..

위 아티클은 React 17버전(17.0.1) 기준으로 작성되었습니다. 17버전 이전(16버전 이하)에서는 조금 다르게 동작할 수 있으며, 이 차이점에 대해서는 이어지는 시리즈(2)에서 다룰 예정입니다. Overview 리액트로 웹 애플리케이션을 개발하다보면 사용자와 유연하게 상호작용하는 컴포넌트를 만들기 위해 onClick, onChange등의 이벤트 핸들러(Eventhandler)를 사용해야 합니다. 크로스 브라우저 대응 등을 위해 리액트 자체적으로 제공하는 안정성 있는 이벤트 핸들링 시스템 덕분에 대부분의 경우 핸들러를 붙이기 원하는 컴포넌트에 다음과 같은 형태로 이벤트 핸들러를 넣어주면 되지만, 컴포넌트들이 복잡하게 상호작용하고 있는 대형 애플리케이션의 경우, 때로는 이 이벤트 핸들러들로 인해 의..

Overview 자바스크립트 ES6부터 비동기 코드 처리를 위해 async / await 문법이 추가되었습니다. ES6(=ES2015) 문법 자체가 도입된 지 꽤 많은 시간이 지났기 때문에 최근의 웹 개발은 async / await 을 통해 대부분의 비동기 처리를 하는 것이 일반적입니다. 서버로 네트워크 요청을 보내고, 그 결과를 가지고 다시 서버에 요청을 보내는 등의 비동기 처리를 할 때, ES6이후의 문법에서는 async / await을 사용해 다음과 같이 처리할 수 있습니다. async function getResult(id) { const result = await getSearchResult(id); const video = await getVideo(result); return video; }..

위 포스팅은 이전 포스트의 내용을 이어서 진행합니다. [Webpack] Config file & Asset Modules [Webpack] Introduction & Setup [Webpack] Loaders [Webpack] Plugins Code Splitting 애플리케이션을 번들링 할 때, 적절한 단위로 번들을 쪼개는 것은 애플리케이션 성능에 있어서 중요한 요소 중 하나입니다. 규모가 크고 많은 페이지를 가지고 있는 애플리케이션이더라도 사용자의 화면에 보이는 페이지는 하나이기 때문에 사용자가 보지 않을 수도 있는 페이지까지 함께 가져오는 것은 잠재적인 대역폭 낭비이고, 초기 렌더링 시간을 잡아먹게 됩니다. 따라서 적절한 단위로 번들을 나누어서(Code Splitting) 빌드하는 것이 중요합니다...

위 포스팅은 이전 포스트의 내용을 이어서 진행합니다. [Webpack] Config file & Asset Modules [Webpack] Introduction & Setup [Webpack] Loaders Plugins webpack 공식 문서에는 플러그인에 대해 다음과 같이 정의하고 있습니다. 로더는 특정 유형의 모듈을 변환하는 데 사용되지만, 플러그인을 활용하여 번들을 최적화하거나, 애셋을 관리하고, 또 환경 변수 주입등과 같은 광범위한 작업을 수행 할 수 있습니다. 플러그인은 webpack의 핵심 요소이며, webpack의 컴파일 프로세스를 활용할 수 있는 방법을 제공해 준다는 점에서 커스텀 영역을 넓혀줍니다. 플러그인은 webpack 컴파일(번들링)과정에서 발생하는 주요 이벤트에 후킹하여 여러..

위 포스팅은 이전 포스트의 내용을 이어서 진행합니다. [Webpack] Config file & Asset Modules [Webpack] Introduction & Setup Loaders 로더(Loader)는 Webpack이 웹 애플리케이션을 번들링 할 때 자바스크립트 파일이 아닌 다른 리소스들 (Typescript, HTML, CSS, Font 등)을 변환할 수 있도록 도와줍니다. 공식문서의 설명을 인용하면 다음과 같습니다. webpack은 기본적으로 JavaScript와 JSON 파일만 이해합니다. 로더를 사용하면 webpack이 다른 유형의 파일을 처리하거나, 그들을 유효한 모듈로 변환하여 애플리케이션에서 사용하거나 디펜던시 그래프에 추가합니다. 예를 들어서, 이전의 예시에서 레이아웃 구성을 위..