개발소발닭발

Webpack 설정으로 인해 어려움을 겪고 있는 사람들을 위해 이 글을 씁니다. 프런트엔드 개발에 있어 웹팩은 필수조건이 되었습니다. 많은 프런트엔드 개발자들이 웹팩을 이용하는 이유는 "빌드를 이용한 프로젝트 최적화"라고 정리할 수 있을 겁니다. 빌드라는 과정을 통해 웹팩은 정말 많은 일(정말 정말 정말!)을 할 수 있고, 당연히 그에 따른 설정도 굉장히 많습니다. 공식문서에 웹팩의 어메이징 한 기능들에 대한 설명이 아주 잘 나와 있지만 스타터에게는 이도 쉽지가 않습니다. 하지만 겁먹지 마세요. 차근차근 따라 하다 보면 그리 복잡하지 않습니다. 그리고 웹팩과 바벨의 버전이 올라가면서 설정이 더욱더 간단해졌으니깐요. 웹팩이란 무엇인가 webpack is a static module bundler for m..

실행문맥, Lexical Environment, OuterEnvironmentReference, EnvironmentRecord 자바스크립트의 동작 원리를 이해하면 자바스크립트의 특성들이 쉽게 이해가 됩니다. 이전에 콜 스택과 이벤트 큐, 이벤트 루프 이야기를 한 적이 있는데요, 오늘 다룰 이야기는 콜 스택에 쌓았던 그 친구에 대한 이야기입니다. 1. 실행 컨텍스트? Execution context (abbreviated form — EC) is the abstract concept used by ECMA-262 specification for typification and differentiation of an executable code. https://www.ecma-international.org..

Multiplexed Streams 하나의 TCP 커넥션으로 여러 개의 메시지를 주고받을 수 있습니다. Stream Prioritization 소스간의 의존관계를 설정할 수 있습니다. Server Push 클라이언트의 요청 없이 서버에서 리소스 푸시가 가능합니다. Header Compression 요청 시마다 매번 같은 정보를 헤더에 담지 않고 중복된 헤더는 index만 보내고 새로운 데이터만 인코딩하여 보낸다. 아래의 링크에서 http 1.1과 http 2.0의 성능을 비교해 볼 수 있다. 개발자 도구의 네트워크탭을 확인해 보면 1.1 에서는 요청이 큐에서 엄청나게 오랫동안 기다려지는 것을 알 수 있다. Stalled https://www.httpvshttps.com/ HTTP vs HTTPS Test..

JS를 사용하다 보면, 서버도 Nodejs로 만들고 싶다는 욕망이 생깁니다. ㅎㅎ 서버와 프론트가 모두 TS로 이루어지면 타입을 공유할 수 있는 장점이 생깁니다. npm install --save-dev webpack webpack-cli typescript ts-loader @types/express nodemon ts-node npm install --save express 1. 늘 그렇듯이 모듈들을 설치해 줍시다. 웹팩과 타입스크립트, 웹팩에서 사용할 타입스크립트 로더, 노드 핫로더, 타입스크립트 변환 모듈입니다. // webpack.config.js const path = require('path'); module.exports = { entry: './app.ts', module: { rules..

// webpack.config.js { ..., resolve: { extensions: ['.jsx', '.ts', '.tsx', '.js'], alias: { '@': path.resolve(__dirname, 'src/'), '@Route': path.resolve(__dirname, 'src/route/'), '@Pages': path.resolve(__dirname, 'src/pages/'), '@Components': path.resolve(__dirname, 'src/components/'), '@Style': path.resolve(__dirname, 'public/scss/'), '@Public': path.resolve(__dirname, 'public/'), '@Config': pa..

회사에서 진행 중인 프로젝트에 쓰고 있는 웹팩 설정 파일이다. 웹팩 설정을 하기 위해 처음에는 오랜 시간이 걸렸는데, 이제는 눈 감고도 뚝딱할 정도가 되었다. 누군가에게 조금이라도 도움이 되길 바라면서 올린다. // webpack.common.js // 웹팩 설정 파일 - 공통 const path = require('path'); const webpack = require('webpack'); const I18nPlugin = require('i18n-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); con..

html에서 웹팩 변수와 정적 파일들(이미지)을 사용하고 이 녀석들까지 빌드에 포함시키자. (js, css에서 사용한 친구들처럼) 왜냐하면 html상에서 사용한 모든 에셋들도 빌드로 전부 같이 튀어나오는 것이 추후 배포 전략에서 편하기 때문이다. (현재 우리 팀에서는 카카오 파일 서버를 쓰고 있는데, html과 js, css에서 바라보는 환경을 통일시킬 필요가 있었다.) 1. 설정에서 플러그인을 추가해준다. plugins: [ new HtmlWebpackPlugin({ // 기본 확장 템플릿 template: './src/index.html', // 외부 호스팅 파일 originPath: ASSET_PATH, }), ], 2. html에서 사용한다. 실행해보면 첫 번째 파비콘 파일은 빌드 타임에 다른 파..

1. 웹팩 설정에서 변수를 설정해준다. ..., { loader: 'sass-loader', options: { prependData: '$imagePath: "https://t1.daumcdn.net/liveboard/kidsnote/";', }, } 2. scss에서 사용한다. background: url(#{$imagePath}/예쁜내얼굴.png) no-repeat left bottom;

자바스크립트의 식과 문에 대해 알아봅시다.

프로젝트에서 지난 9개월 동안 Redux를 주력으로 사용하다 MobX로 바꾼 개인적 경험을 바탕으로 작성하였습니다. Redux를 사용하였으므로 체계는 매우 잘 잡혀 있었고 스토어를 바꾸는 과정은 대략 3주가 걸렸습니다. 아키텍처는 곧 인터페이스이고 Flux 인터페이스의 핵심을 알고 있다면 그것을 구현한 라이브러리들은 프로젝트 상황에 맞게 선택하면 된다고 생각합니다. 고구마 줄기들보다 더한 Redux와 친구들에 대해, MobX는 정말 훌륭한 대안입니다. 너무 장황하게 펼쳐지는 Redux Redux를 사용하다 보면, 너무 장황하게 펼쳐지는 느낌을 지울 수가 없습니다. 스토어의 개념이 익숙지 않은 사람들에게는 더욱 어렵고, 어지럽게 느껴집니다. Actions, Saga, Thunk 외에도 '기술을 위한 기술'..