프로그래밍

프론트엔드 성능 베이스캠프 1 - 요청 크기 줄이기

프론트엔드 성능 베이스캠프는 우아한테크코스 레벨4 웹 성능 미션을 바탕으로 마주한 문제를 해결한 과정을 다룬다. 그 중 첫 번째는 요청 크기 줄이기이다.

웹팩으로 리액트 시작하기 4 - dev, prod 환경 분리하기

지금까지 하나의 파일(webpack.config.js)에서 환경(dev, prod)에 대한 웹팩을 설정하였다. 환경에 따른 분리가 필요하면 삼항연사자를 사용한다. 아직은 파일이 크지 않아 삼항연산자도 충분하다. 하지만 앞으로 설정이 많아지고 복잡해지면 삼항연산자로 인한 환경 구분은 상당히 피로감을 줄 수 있다. 때문에 환경에 따라 파일을 분리하는 것이 효율적이다. 웹팩으로 리액트 시작하기 네 번째 파트에서는 환경에 분리하여 웹팩을 설정하는 과정을 다룬다.

우테코 레벨 3 5~6주차 회고 (3차 스프린트)

배포 준비 완료

웹팩으로 리액트 시작하기 3 - 폰트, asset, 라우팅

프로젝트를 본격적으로 시작하기 전 기본적인 웹팩 설정을 마무리하였다. 하지만 여러 가지의 이유로 인해 웹팩 설정을 추가하거나 수정해야 하는 경우가 생긴다. 하루스터디의 경우 폰트를 추가하고, png, jpg와 같은 asset 그리고 라우팅으로 인해 웹팩 설정을 추가하고 수정을 해야 했다. 웹팩으로 리액트 시작하기 세 번째 파트에서는 이러한 문제를 해결하는 과정을 다룬다.

웹팩으로 리액트 시작하기 2 - 절대 경로

웹팩으로 리액트 시작하기의 두 번째 파트에서는 eslint, tsconfig, webpack, 설정을 통해 절대 경로를 적용하는 방법을 다룬다.

웹팩으로 리액트 시작하기 1

리액트를 시작하기 위해 Create-React-App(CRA) 혹은 Vite을 많이 사용한다. 이러한 도구는 webpack설정 없이 편하게 리액트를 시작할 수 있도록 도와준다. 때문에 많은 개발자들이 사용하고 있는 도구이다. 하지만 단점도 분명 존재한다. webpack설정을 추가하거나 수정하는 것이 매우 번거롭다는 것이다. 이러한 단점 때문에 webpack설정을 도와주는 다양한 라이브러리가 등장하였다. craco, react-app-alias, react-app-rewired 등이 그것이다. 충분히 좋은 라이브러리들이지만 처음부터 webpack을 직접 설정을 했다면 번거로운 작업은 하지 않아도 된다. 또한 프론트엔드 개발자로서 webpack은 학습해야 하는 개념이기 때문에 직접 webpack을 설정하여 리액트를 시작하는 것은 매력적인 과정이라고 생각한다.

우테코 레벨 3 3~4주차 회고 (2차 스프린트)

하루스터디의 새로운 방향

우테코 레벨 3 1~2주차 회고 (1차 스프린트)

팀 발표

우테코 레벨 2 인터뷰 회고

벌써 레벨 2를 마무리하는 레벨 인터뷰가 찾아왔다. 이번엔 준조였고 함께하는 크루는 세인, 노아이즈, 에디, 아커, 센트, 솔로스타였다. 레벨 1에서 레벨 인터뷰를 경험했기 때문에 긴장감은 지난번보다 크지 않았다. 하지만 레벨 1에서 받은 피드백을 얼마나 수용을 했는지, 지난번보다 얼마나 성장을 했는지를 스스로 판단을 해야 했기 때문에 이 부분에서는 부담감을 가질 수밖에 없었다.