위 포스팅은 이전 포스트의 내용을 이어서 진행합니다. [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이 다른 유형의 파일을 처리하거나, 그들을 유효한 모듈로 변환하여 애플리케이션에서 사용하거나 디펜던시 그래프에 추가합니다. 예를 들어서, 이전의 예시에서 레이아웃 구성을 위..

Configuration 이전 포스트에서 웹팩 설치, 웹팩 빌드에 대한 간단한 튜토리얼을 통해 웹팩이 무엇이고, 왜 필요한지, 그리고 웹팩을 통해 빌드한 결과물이 어떤 모양인지를 간단하게 살펴보았습니다. 이번 포스팅에서는 웹팩을 다루기 위한 여러 설정들을 조작할 수 있는 Configurations file (webpack.config.js)과 간단한 몇 가지 설정들에 대해서 알아보고, Webpack에서 정적 리소스들 (Image, video, font 등)을 다루는 방법에 대해 간단하게 알아보도록 하겠습니다. 시작하기 전에 아래 "Reference"에 Webpack공식 문서 링크를 걸어두었습니다. 공식 문서에서 Configuration에 대한 상세한 내용을 살펴보실 수 있습니다. 이번 포스팅에서는 기초적..

webpack이란 webpack은 Frontend Framework에서 가장 많이 사용되는 모듈 번들러입니다. 현재의 반응형 웹 프로그램은 HTML, CSS, JS로 구성되어 있으며, 웹 페이지에서 점차 많은 기능들을 요구함에 따라 다양한 기능이 추가되고, 다양한 라이브러리들을 추가하게 됩니다. 기능이 추가된다는 것은 대부분의 경우에 작성하는 코드의 양이 많아진다는 것을 의미합니다. 하지만 방대한 코드를 개발자가 하나의 파일에서 모두 작업하는 것은 개발과 유지보수를 어렵게 만들게 됩니다. 따라서 개발자들은 의미 있는 부분(기능 단위, 페이지 단위 등)들로 코드를 쪼개어 별도의 모듈에서 작업하는 경우가 일반적입니다. (여기서 모듈이란 웹 애플리케이션을 구성하는 모든 자원을 의미합니다. HTML, CSS, ..

Overview 4월 회고를 쓰려고 보니 5월이 다 지나가 버렸다. 별 수 없이 4~5월 회고를 쓰기 위해 키워드를 정리하는데 생각보다 이것저것 배운 게 많은 것 같아서 회고할 타이밍을 굉장히 잘 잡았다는 생각이 들었다. 초당 수만 ~ 수십만 건의 대용량 트래픽이 발생하는 애플리케이션의 최전선에서 여러 버저닝을 관리하고 예측하기 어려운 에러들을 핸들링하는 기회가 모든 개발자들에게 찾아오는 건 아닐 것 같은데, 이런 경험을 쌓아나간 것 같아서 감사한 마음이 들었다. FrontEnd Service With Million Traffics 900만명 가까운 사용자가 접속하는 웹 프로젝트를 맡아 개발하는 데에는 참 많은 책임이 따른다는 걸 배웠다. 이전에는 TF에서 맡은 컴포넌트만 몇 개 만든 다음에 QA 돌려보..

Overview AWS(Amazon Web Service)를 사용해서 동영상을 제공하는 서비스를 개발할 때, 동영상은 정적 파일이므로 S3 Bucket을 사용하여 저장하고, 세계 각지에 있는 사용자들에게 이를 빠르게 제공할 수 있도록 Cloud Front를 사용하는 것이 일반적입니다. 필요하다면 Route53 등의 도메인 네임 서비스를 통해 해당 Cloud Front 주소를 알맞은 도메인과 연결하여 제공합니다. 모든 사용자들이 접근할 수 있는 동영상이라면 보통 이 정도 선에서 구현이 가능하지만 온라인 강의 등, 멤버십 등을 통해 제한적인 사용자, 즉 권한이 있는 사용자들에게만 동영상을 제공하고, 권한이 없는 사용자에게는 동영상을 재생할 수 없도록 하기 위해서는 추가적인 보안 처리가 필요합니다. 이번 포스..