Programming/Frontend 4

Webpack 마이그레이션 작업 (v4 -> v5) 및 디버깅, 최적화 공유

올해부터, 데이터 로그 정의 플랫폼 프로젝트를 맡게 되었다. 해당 프로젝트는 Node version 10.16.3, webpack v4, react class component와 function component의 산재 등으로, 오래된 프로젝트이다. 개편 과정에서 처음 삽을 뜬건, webpack 업그레이드 작업이었다. vite나 rollup 같은 다른 번들러로 교체할 까 생각도 했지만, 해당 프로젝트는 사내 사용자가 많고, 최대한 사이드 이펙트를 줄이기 위해, 기존의 config들을 활용하는 방안이 안정성을 가지기에 좋다고 생각했다. 또, 웹팩에 관련된 커뮤니티도 잘 형성되어있고 디버깅에 대해 도움 받을 수 있는 글들도 많아서 마이그레이션 작업을 선택했다.  https://webpack.kr/migrat..

SDK 고도화 및 경량화 (부제 : 우리 이제 최소한 ES6는 써요...)

사내 SDK 고도화 및 경량화 발표 자료 용어 jasmine - js 테스트 프레임워크 (테스트 케이스를 작성하고 구조화하는 도구) karma - js 테스트 러너 (테스트 실행하는 환경을 제공하는 도구) babel - 브라우저 간 호환성을 위한 js 트랜스파일러 (최신 js 문법 지원) parcel-bundler - (js 번들러 parcel의 이전 버전 === 이하 parcel v1) ex: webpack 친구 parcel - (js 번들러 parcel의 최근 버전 === 이하 parcel v2) browserlist - (대상 브라우저 및 노드 버전을 명시하는 config 파일) es6 - (ECMAScript 6번째 : 2015년에 발표한 표준화된 스크립트 프로그래밍, ES5 이하 명세에서 문제가..

Next.js 13 (App Router)에서 MultiPart Form 처리 && 파일 업로드

최근 사내 프로젝트로 Next.js를 이용하고 있다. Next.js 13이 나오면서 기존 Pages Router가 아니라 새로운 App Router를 바로 적용하게 되었다. (어짜피 Pages Router로 개발해도 나중에 App Router로 다 바꿔야 할 것 같아서;;) 나에게 Next.js가 가장 좋았던 점은 API Route가 있어서 간단한 API는 바로 같은 디렉토리에서 개발할 수 있다는 것이었다. React랑 Express가 적절히 잘 버무려진 느낌. Docs 읽어보면 Pages Router 대비해서 바뀐게 꽤 몇개 있는데, 적용하는게 그다지 어렵지 않고, Docs도 친절히 잘 설명해주고 있는게 대부분이었다. 하지만 구글링해보면 대부분 Page Router에 대한 글이고, App Router로..

Parcel 번들러 Migration 후기 (parcel-bundler -> parcel)

인턴 때부터 지금까지 맡은 프로젝트 중 하나는 데이터 수집 SDK이다. 사내 웹/앱 서비스 개발자 분들이, SDK를 이용하여 브라우저에 생성하면, 기 정의된 로그 포맷에 해당하는 data들을 서버로 전송하는 역할을 한다. 해당 SDK는 여러가지의 js 파일로 구성되어 있고, 번들러를 이용하여 빌드 된 파일을 다른 개발자분들이 로드해서 사용한다. 번들러에는 webpack, RequireJS, Browserify, Rollup, Parcel 등이 있는데, 해당 프로젝트에는 Parcel v1이 적용되어 있었다. 올해(2022) 업무 중 하나는 번들러인 Parcel의 마이그레이션 작업이었다. (버전 업그레이드) Parcel v1은 npm에서 parcel-bundler로 명시되어있고, v2는 parcel로 명시되..