월간 회고 | 24.06.

무슨 일을 했나?

온보딩 (Onboarding) - 2주

- Vue 공부
- Nuxt 공부
- 우리팀 프로젝트 구조 파악

 

첫 업무 (알림센터 2차 개선) - 2주

- 뷰 쿼리 활용해서 API 요청 캐싱

- 스타일링

- 무한 스크롤 구현

 

배운 점

FE 마크업, 언어

스타일링

- 스타일링 레이아웃 잡는 법 (1. flex만 잘 사용하면 끝난다, 2. margin 말고 padding과 gap 사용 (서로 개입 못하게))

- 레이어 개념 (css alpha blend, mix-blend-mode, 알파 채널, 게임 픽셀 쉐이터, 해골책)

- (vue) deep 속성

- 마스크 속성

- 숫자 고정값, % 는 가능한 CSS에 포함되지 않는게 좋다. 

- 믹스인(mixin) (SCSS)

- CSS Nesting (SCSS)

- 다양한 CSS 속성 (truncate, flex-grow min-h-0/ min-w-0)

 

타입스크립트

- 타입 정의의 중요성 (사례: 에러 케이스 있었음. watch -> notificationCard에 타입 설정을 안해서 에러추론이 제대로 안됐고 원인파악에 어려움을 겪음)

- 타입 정의시 type alias vs interface

 

FE 프레임워크, 라이브러리

Vue 프레임워크

- Vue는 프레임워크, React는 라이브러리

- 기본 디렉티브와 메서드(v-bind, v-model, ref, computed, watch, ..)

 

Nuxt

- 라우팅 방식

- useAsyncData, useNuxtData .. 

 

SSR 개념

- 그 과정에서 SSR이 무엇인지 직접적으로 보고 이해해보는 시간을 가졌다. 아직 완벽히 이해했다고 보기는 어렵지만..

- 서버는 무슨 서버를 얘기하는가? 진짜 Backend? -> Nuxt 서버

- isClient? isServer? <ClientOnly> - SSR 환경 개발 특징

- 첫 페이지 렌더링시엔 SSR 방식, 이후 국지적 변화는 CSR 방식?

- 하이드레이션?

 

Tanstack Query (뷰 쿼리)

- 쿼리키 상태

- resetQueries, invalidateQueries 이해 

- 파라미터에 Ref vs ComputedRef 차이

 

 

깃허브 전략

- 모노레포 전략

- Git flow 전략

- fetch vs Pull vs Rebase vs Merge

- fork 사용법

 

실무적 지식 (FE)

개발자도구 활용

- element 탭 활용

- network 탭을 더 상세히 활용

 

스토리북 활용하기

- 컴포넌트 재사용

 

프로젝트 디자인패턴

- 서비스 레이어 (BE -> model, service -> FE)

 

스웨거로 API 열람, 테스트하기

 

타입 제너레이터

 

젠킨스 구축된 환경에서 배포하기

- dev/stage/production

 

프론트는 가능한 로직 포함 X (필터링 같은 단순한 기능이라도) -> 가능하면 백엔드 구현 후 api로 내려받아서 사용

 

실무적 지식 (보편적)

업무

- 작업 순서 산정시 원칙 (기능 -> UI -> hotfix)

- 설계에 시간투입을 많이 할수록 전체 시간은 줄어든다

- 일정 산정시 원칙 (변수에 대비해서 널널하게)

 

비즈니스 지표 고려하기

- Google Analytics

- Google Tag Manager에 태그 달기

 

깔끔한 코드

- 오답은 있으나 정답은 없다

- 코드 정리 중요 (정리 순서: hooks -> ref -> computed -> 함수 -> 생명주기 함수)

- 동료 개발자가 한 눈에 눈이 편할 것, 왔다갔다 시선이 불편하지 않을 것, 머리가 편할 것(로직)

- 한 눈에 간결한 코드 vs 확장성을 고려해서 미리 랩핑해놓기

 

좋은 코드에 대한 고민이 필요하다
- SOLID in Frontend

- OOP in Frontend