frontend 3

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로 명시되..