2024. 03. 27(수) Today I Learned

What I Did Today

1. 기술 면접 준비

2. 팀 프로젝트

• 기획
  • GitHub Convention & Code Convention 선정
  • 와이어프레임 시안 제작

---

기술 면접 준비

Question

상태 관리를 하는 이유에 대해 말하시오.

My Answer

React는 기본적으로 부모 컴포넌트에서 자식 컴포넌트로 Props를 내려주는 "단방향 방식"을 사용한다. 이 방식은 props의 출발지와 목적지의 거리가 멀어질수록, 오류 발생 시 해당 오류의 source 추적이 힘들어진다. 따라서 props를 출발지에서 목적지까지 한번에 전달할 수 있는 방법이 필요하다. 나는 평소 Redux Toolkit이나 Zustand를 사용하여 전역적으로 state를 관리한다. 또한, 서버와 클라이언트 간의 비동기 작업에서는 React Query를 사용하여 상태를 관리한다.

---

최종 프로젝트 일지

GitHub Convention

커밋 메시지 타입

타입	사용 용도
feat	기능 구현
fix	문제 수정
rename	파일 이름 변경 or 파일 위치 변경
remove	파일 삭제 or 폴더 삭제
refactor	코드 리팩토링
comment	주석 추가/수정/삭제
style	CSS 관련 코드 추가/수정/삭제
docs	README 파일 추가/수정/삭제
test	테스트 코드(ex. console.log) 추가/수정/삭제
chore	컴포넌트, 훅 등을 제외한 파일(ex. 패키지 매니저) 수정
!HOTFIX	긴급 수정

버전 관리

• Issue 입력
  • 형태: [타입] - 이슈 제목 (ex. [feat] - 헤더 UI 제작)
• PR (Pull Request)
  • Issue와 연동하여 구현한 주요 내용을 본문에 기입
  • 모든 팀원을 Reviewer로 지정하여 코드의 내용을 숙지하고 진행함

---

Code Convention

함수

• 화살표 함수(Arrow Function) 사용
• Event Handler 는 on+동작+Handler 형태로 이름 작성 (ex. onChangeHandler)
  • 이벤트는 event 가 아닌 e 로 표기

export

// Good
export const name1 = () => {};
export const name2 = () => {};

// Bad
const name1 = () => {};
const name2 = () => {};
export {name1, name2};

타입(Type) 관리

• 모든 타입을 /types/index.ts 파일에 작성
• type 대신 interface 사용
• 타입을 import 할 때 import type 으로 명시

변수 관리

• 공통적으로 사용하는 값들은 반드시 상수화하기
• 중요하거나 값이 긴 변수는 .env 파일로 설정하여 상수화하기 (ex. URL 주소, API 키)
• QueryKey를 상수화하기

주석

• 모든 팀원들이 한 눈에 이해할 수 있게 주석을 적극 사용하기

---

트러블 슈팅

문제 1

문제
: 개발자들이 사전에 작성한 와이어프레임이 디자이너가 제작해야하는 시안 형태와 많이 다름

원인
: 웹(Web)에서 페이지를 표현하는 방식과 앱(App)에서 페이지를 표현하는 방식이 다름

• 웹(Web) : "페이지" 단위로 레이아웃을 표현함
• 앱(App) : "화면" 단위로 레이아웃을 표현함

해결
: 웹(Web) -> 앱(App) 버전으로 발전시키는 것보다 앱(App) -> 웹(Web) 버전으로 발전시키는 것이 더욱 편해서 앱(App) 버전의 와이어프레임을 먼저 제작해보기로 결정함

문제 2

문제
: 웹(Web) 환경에서 제작했던 와이어프레임을 앱(App) 환경으로 변동하는 데 어려움을 겪음

원인
: 웹(Web)에서 한 페이지로 표현 가능한 화면을 앱(App)에서는 여러 화면으로 쪼개서 표현해야 함

해결과정

• 한 페이지를 여러 URL로 쪼개 Routing으로 처리하도록 시도
  • 문제 : 웹(Web) 환경과 앱(App) 환경의 코드를 따로 생성하면 유지보수할 때 각각의 코드를 수정해야 하는 번거로움이 발생
  • 해결방안 : 한 페이지를 여러 컴포넌트로 구성하여 컴포넌트 리렌더링을 통해 화면을 전환
• 화면 전환 방식
  • 슬라이드 기능 사용 : 앱(App) 스러움
  • 탭 기능 사용
  • 진행 상황을 표시해야하는 경우, Progress 바 등을 사용

---

Diary

1. 와이어프레임

• 와이어프레임을 나름 열심히 만들었다고 생각했는데, 생각보다 깊은 부분까지 고려해야 했고 미비한 부분이 정말 많았다.
• 또한, 웹 기획과 앱 기획의 접근 방식이 페이지 이동같은 부분을 포함하여 많이 다르다는 것이 신기했다.
• 디자이너께서 정말 잘 말씀해주시고 짚어주시고 잘해주셔서 너무 감사할 따름이다..

2. 팀 프로젝트

• 정말 할게 많다.
• 기존보다 수행기간이 많이 늘어나서 여유가 있는 것 같아보이지만 실제로는 여유가 전혀 없다.
• 이게 실전인가..
• 매일 밤을 새다보니 피곤하다. 점점 피로가 쌓이는 것 같다.