이직 회사 적응 안내서 -2- Front-End 분석

Build/Bundle

Webpack

• Plugins
• Assets
• Loaders

Framework 종류 파악

Next/React, 혹은 Nuxt/Vue3를 대부분 사용하겠지만, 경우에 따라서 React Native, Flutter, AngularJS, Svelte 등 다양한 Framework나 Library를 사용할 수 있다. 설정 파일과 build를 위한 설정도 확인해두자.

Directory 구조 파악

우선 Directory 구조를 훑어본다. 다음 항목들이 좋은 시작점일 수 있다.

• API Endpoint를 어떻게 모아서 정리했는지
• image나 font 등 asset을 어떻게 정리하는지
• build 및 개발 서버를 위한 hot module reload를 어떻게 설정했는지
• Store Pattern으로 중앙 상태 관리를 한다면 어떤 reducer 혹은 initial 상태가 있는지
• monorepo라면 packages 의존성과 module을 어떤 용도로 구별하여 정리하는지

CSS

• 전후처리 사용 여부 : SCSS를 쓰는지, emotiv를 쓰는지, styled-component를 쓰는지 tailwind를 쓰는지
• 보통 reset.css라고 이름 짓는, 기본 설정을 덮어쓰는 역할을 하는 부분을 유심히 본다.
  • box-sizing : 크기 계산을 어떻게 할지를 결정하기 때문에 layout 폭, 길이 등을 계산할 때 있어서 반드시 숙지해야한다

Convention

eslint, prettier, git-hook이나 husky를 이용하여 특정 convention을 요구하는지도 확인해야한다.

위 정보를 이해했다면 사용하는 IDE를 해당 환경에 맞추어 설정하자. lint는 기본이다.

CSS

• depth나 element 종류에 따라 어떤 rule이 있는지 확인한다 예시 : Container > Wrapper > Section > List > Item 등…
• 정렬에 있어서 flex box를 쓰는지, 혹은 margin을 쓰는지
• line-height는 어떻게 정의하는지 : 임의로 디자이너가 규칙 없이 정한다면 Design System을 먼저 만드는 것을 고려해보자
• position을 임의로 변경하거나 설정하면 화면이 깨지기 일수다. 어떤 경우에 relative, absolute, fixed 등을 사용하는지 주의 깊게 살펴본다.

TypeScript

• request나 response 목적으로 별도로 정의하는지
• 특정 prop을 정의할 때 어떤 식으로 type을 정의하는지
• 특정 string이나 number 값만 전달하거나 받는 경우 enum으로 사용하는지 등

Component, Hooks, Store

• Component 단위를 어떻게 나누는지 : hook을 제외하고 render 시 어떤 식으로 구조화하고 어떤 기준으로 render를 하고, Modal 처럼 공통적이지 않은 경우 구조를 어떻게 구성하는지
• Global Hook : modal 제어나 전체 화면을 제어하는 경우 global hook+store+context를 활용하는 경우가 많다.
• Context 종류 파악 : 특정한 Component에서 활용하는 Context를 파악해야한다. 어떤 Context들이 있는지 React Dev Tools에서 Components tab을 통해 살펴보자
• Store 구조 파악 : Redux Dev Tools를 활용해서 페이지마다 store 조작이 어떻게 일어나는지 먼저 파악하는 것이 수월하다
• react-query를 사용하는 경우
  • mutation을 사용하는 경우, 성공/실패 처리를 하는 경우 예외 처리 패턴

package 파악

package.json 파일을 열어서 어떤 package를 사용하는지, 개략적인 정보를 파악한다.

예시

• 날짜를 다루는 package로 date-fn을 쓰는지, moment.js를 쓰는지, day.js를 쓰는지.
• axios를 사용해서 connection 관리를 하는지
• Form과 Input을 어떻게 처리하는지 (ex) react-form-hook
• Store 구성 : Redux ToolKit, Zustand, Recoil, MobX 등

기능 별 호출 API 따라가기

위 ‘서비스 이해’에서 route와 화면에 따라 정리 했다면, 화면 내 특정 입력이나 CTA(Call-To-Action, Button이나 Link 등, 특정 행동을 위해 상호작용하는 요소)에 따라 어떤 API를 호출하는지 정리해보자.

개발자 도구를 열어서 서버로 전송하는 요청 주소들을 순서대로 Sequence Diagram 형태로 정리해보자.