월간 회고 | 24.07.

업무 목록

1. 위클리 발표

- Prefetch 방법: Nuxt가 제공하는 useAsyncData vs Tanstack Query 비교

- useQuery로 데이터 prefetching하여 SEO 개선하기

 

 

2. [Asset 페이지, Research 콘텐츠 페이지]에 스크롤 반응형 앵커 도입/개선

3. [모바일 앱] 내 Webview의 CSS 버그 개선

- 리서치/이벤트 섹션에서 상단 메뉴 탭이 고정되지 않는 문제였음.

 

4. [Asset 페이지] 자산 커뮤니티 게시판 phase 1 개발 및 운영 배포

- 커뮤니티 페이지 분리 및 레이아웃 작업

- 커뮤니티 페이지 상단 배너 도입(리서치 배너, Analytics Module)

- 기능 관련 API 모델 구현 및 API 연동

- 게시판 및 게시글 내부 댓글 시스템 개선

- URL 쿼리 활용한 페이지네이션 구현

 

가장 핵심인 커뮤니티 게시판에 대한 1차 개발은 되어있던 상황이라 비교적 수월했다.

 

 

배운 점

1. SEO 대응 - 데이터 프리페칭하기 

구글의 크롤링 봇이 페이지의 메타데이터를 수집해가는 타이밍은 HTML이 반환되는 타이밍이다. 따라서 CSR에서는 우리가 구글에 전달하고 싶은 메타데이터를 온전히 전달하지 못한다.

 

그러므로 SEO에 중요한 데이터의 경우(e.g. 검색어 키워드, 구글 검색 결과에서 미리보기로 보여줄 정보들 -> 비트코인 검색 시 비트코인의 현재 가격이라든지..) 하이드레이션 이전에 prefetch를 해준 뒤 SEO meta에 등록해준다.

 

2. SSR 관련 고민들

- 브라우저의 document, window 객체에 접근하는 작업의 경우 서버 사이드에서 진행할 수 없어 에러가 발생한다. 서버 사이드 단계에는 접근할 대상 자체가 없기 때문이다. 이러한 경우 클라이언트 사이드에서 처리하도록(e.g. Nuxt 환경이라면 ClientOnly 컴포넌트로 감싸주는 등) 조치해야 한다.

- 필요한 데이터가 없어 렌더링이 되다 마는 등의 상황을 막기 위해 조건문을 걸어 데이터 페칭을 완료해야 마운트하도록 설정하는 경우가 있다. 그러나 클라이언트 사이드에서 데이터 페칭을 하는 경우, 브라우저가 해당 HTML element의 레이아웃을 제대로 잡지 못할 수 있다. 앞서 걸었던 조건 때문에 당연히 하이드레이션 단계에서는 마운트되지 않는 상태이기 때문이다. 이러한 경우 앵커 탭을 눌러서 스크롤을 이동시킨다든지 하는 액션이 있을 경우 내가 예상한 이동지점과 다른 지점으로 이동하게 되는 등의 문제가 발생할 수 있다(앵커 탭이 element 들의 위치를 인지할 시점과 사용자가 브라우저를 탐색하는 시점의 element 크기, 위치가 달라서). 이는 해당 element를 감싼 영역에 최소 높이를 미리 설정해주는 식으로 대응 가능하다. 

 

 

3. 서버 사이드 상태관리 & View와 Hooks, API 서비스 레이어 분리하기

1) 백엔드 API

2) 타입 제너레이터를 통해 모델 생성

3) 타입 모델, 스웨거 docs를 기반으로 Class 모델 구현

4) Class 모델을 이용하여, Tanstack Query 기반 서비스 메서드 구현

• API 성격에 따라 enabled, refetchOnMount 등의 옵션이나 resetQueries, invalidateQueries 등 메서드를 잘 사용하기

5) 컴포넌트(View 단)에서 서비스 메서드 호출한 후 화면에 뿌리기

 



 

4. 프론트엔드에서 OOP와 FP를 적절히 섞어쓰기

- '프론트엔드 실무에서 OOP라는 패러다임을 어떻게 적용해야 best practice 일까?'. 요즘 우리 팀의 최대 관심사 중 하나인듯 싶다. 

- 팀 내에서 해당 논의가 활발하다. CPO 님은 오히려 프론트엔드야말로 백엔드보다 OOP를 적극적으로 도입할 수 있다는 시대를 앞선(?) 주장을 제기하기도 하신다(해당 주장에 대해선 아직 내가 백엔드에 대한 이해도가 부족하므로 제대로 흡수하지 못했다ㅜ).

- 동시에 디자인패턴이 우선이고, 디자인패턴에 따라 OOP 비중이 큰 경우, FP 비중이 큰 경우가 나뉜다는 말씀을 해주셨는데 이는 맞는 말씀같다.

- 나는 아직 경험치와 지식이 부족해서 내 의견을 제시할 레벨이 아니지만, 해당 화두가 업계 내에서 점차 활발히 논의되고 있는 점은 체감하고 있다. 꾸준히 관심을 갖고 많이 연구해봐야 할 것 같다.

 

 

 

 

앞으로 공부, 고민해볼 사항

궁금한 점, 아직 명확히 이해하지 않은 것들이 매우 많이 생겼다.

어째 하루하루 흡수하는 양보다 새롭게 알고 싶은 지식의 양이 더 많이 쌓이는 느낌.. 

 

- SOLID 원칙을 프론트엔드에 적용하기, 디버깅 더 효율적으로 하기, node.js 서버 메모리 누수 디버깅, 테스트코드 작성, 에러 모니터링 툴(Sentry, Grafana 등), Database 공부 ..

 

- 빌드 시스템, 웹팩, 모노레포(+ Turborepo), 프로젝트 구조 최적화 제약 사항들(쉐도우 디펜던시, shamefully-hoist ..)

 

- OOP 관련 개념들, FP 관련 개념들(파이프라이닝, lazy evaluation, 대수적 효과, 일급객체)