개발소발닭발

브라우저의 세계에서 VSync가 어떻게 동작하고 있는지 알아보자.

디자이너와 기획자, 그리고 개발자를 위한 UI '디자인 시스템' 관리 모듈인 @storybook/react 를 소개하고자 한다.

[2016] Array.prototype.includes array.indexOf('5') !== -1 // 이전 array.includes(5) 해당 값의 포함 여부를 확인 할 수 있다. [2016] Exponentiation Operator Math.pow(5, 2) // 이전 5 ** 2 거듭 제곱 연산을 쉽게 할 수 있다. [2017] Object.values / Object.entries const obj = {name:'이석규', age:35}; Object.values(obj); // ["이석규", 35]; Object.entries(obj); // [["name", "이석규"],["age", 35]] 객체의 값을 배열로 반환 받을 수 있다. 객체의 키, 값 쌍을 2차원 배열로 받을 수 있다..

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에서 사용한다. 실행해보면 첫 번째 파비콘 파일은 빌드 타임에 다른 파..