Frontend

프로젝트의 float 기반 레이아웃을 CSS Grid로 전환했다. IE11 지원 때문에 고민이 있었지만, autoprefixer로 어느 정도 해결할 수 있었다.

프로젝트를 Webpack 2에서 3으로 마이그레이션했다. Scope Hoisting과 ModuleConcatenationPlugin을 적용하며 번들 사이즈를 약 15% 줄일 수 있었다.

프로젝트에서 콜백 지옥을 정리하면서 Promise와 async/await를 함께 사용하게 됐다. 두 방식의 차이점과 실제 사용 경험을 정리했다.

IE11 지원 때문에 미뤄두었던 CSS Grid를 드디어 프로젝트에 적용했다. Flexbox 대비 레이아웃 코드가 얼마나 간결해지는지 확인할 수 있었다.

ES6에서 추가된 Array.includes()를 기존 indexOf() 대신 사용하면서 성능 차이가 궁금해졌다. 프로덕션 환경에 적용하기 전 간단히 벤치마크를 돌려봤다.

SPA 프로젝트의 초기 로딩 시간이 5초를 넘어가면서 개선 작업이 필요했다. Webpack 3의 CommonsChunkPlugin과 dynamic import를 활용해 번들 사이즈를 40% 줄였다.

React 16이 정식 릴리즈되면서 파이버 아키텍처가 도입되었다. 새로 추가된 Error Boundary를 실무에 적용하면서 알게 된 내용을 정리했다.

회원가입 폼에서 method 속성을 누락해 민감한 정보가 URL에 노출되는 문제를 겪었다. 기본값이 GET이라는 기초적인 사실을 간과한 사례.

React 16으로 업그레이드하면서 새로 추가된 Error Boundary 기능을 적용했다. componentDidCatch 라이프사이클을 활용해 런타임 에러를 안전하게 처리하는 방법을 정리한다.

Flexbox만으로 복잡한 2차원 레이아웃을 구현하는 데 한계를 느꼈다. CSS Grid Layout을 도입해 대시보드 화면을 리팩토링한 과정을 정리했다.