wisecrypto, 효율을 높인 기술 도입

 

Next.js를 고른 이유

 해당 프로젝트에서 nextjs를 사용했던 이유는 딱 두 가지입니다.

첫 째로 npm trends, youtube 등 다양한 커뮤니티에서 인기있는 react기반의 프레임워크이기 때문입니다.

둘 째로 react보다 더 편리하지만 강력한 기능들이 탑재되어 있기 때문입니다.(App Routing, React Server Component...)

 

이 프로젝트에 이렇게 사용해보자

1. App Routing과 Private Folder

- 기존 React에서 따로 react-router-dom을 설치하고 세팅하는 번거러움을 피하고 app 폴더 안에서 편리하고 명시적으로 라우팅을 하자

- Private Folder를 적극적으로 사용하여 도메인 단위로 폴더를 구조화하여 파일을 찾기 위한 불필요한 스크롤을 줄이자

 

2. Image, Font

- 프로젝트에서 사용하는 font는 Google Font 중 Mulish, Montserrat이기 때문에 nextjs에서 제공해주는 font를 import해서 사용하자

- 자동으로 브라우저 크기에 맞게 이미지 사이즈를 최적화해주고, 지연 로딩이 구현되어 있는 next/image를 사용하자

 

3. RSC와 SSR

- 최대한 페이지 레벨에서는 서버 컴포넌트를 사용해서 SSR의 장점을 활용하고, 컴포넌트 레벨에서 클라이언트 컴포넌트가 필요한 컴포넌트라면 최대한 부모 자식 간 관계 깊이가 깊지 않을 때 클라이언트 컴포넌트를 사용하자

 

그래서 잘 사용했을까?

 먼저 1번은 nextjs를 도입하기 잘 했다는 생각을 들게 해주었던 기능들이라 야무지게 프로젝트에 적용해서 사용했습니다.

특히 Private Folder는 기존에 nextjs로 진행했던 프로젝트와 비교했을 때 파일 하나를 찾을 때만 해도 길게 오르락 내리락 하던 스크롤도 확연히 줄었고, 파일이 많아지면 많아질수록 폴더가 빵빵해져 한 눈에 찾기 어려운 hooks 관련 파일이나, component도 해당 도메인 폴더에 있으니 찾는 시간도 많이 줄어들었습니다.

 

또한 2번의 Font도 기존에 다운로드 받거나, CDN을 사용했던 번거러움 역시 없어지고, 코드 레벨에서 import로 간단하게 설정할 수 있어 헤맬 필요 없이 빠르게 개발이 가능했습니다. 

Image는 간단하게 자동으로 최적화 해주는 부분들만 사용해서 이미지가 로드되기 전에 이미지 높이만큼 영역을 표시해서 이미지가 로드된 후에 레이아웃이 흔들리지 않도록 해주는 placeholder, 로컬 이미지를 Import 해와서 자동으로 width와 height를 맞춰주는 기능 등 좀 더 다양한 기능을 적용해 보지 못한게 아쉬웠습니다.

 

마지막으로 3번은 nextjs를 공부하면서 많은 혼란을 겪기도 했었는데요, 결국 "서버 컴포넌트와 클라이언트 컴포넌트로 나누고, SSR과 CSR을 적절히 활용해서 보다 빠르게 로딩이 되고, 인터랙션이 합쳐진 하이브리드 앱을 만드는 것"이 목표였습니다.

그래서 서버 컴포넌트의 장점을 최대한 활용하기 위해(작은 번들 사이즈, 자동 코드 분할 등) 페이지 레벨에서는 서버 컴포넌트를 사용하려고 했습니다. 그러나 인터랙션이 필요한 페이지 그리고 특히 컴포넌트 레벨에서는 자연스럽게 클라이언트 컴포넌트가 많이 생길 수 밖에 없었고 이러한 부분과 더불어 서버 컴포넌트에서 사용되는 data fetcing에 관한 부분은 서버를 분리한 프로젝트여서 어떻게 적용하고 좀 더  개선해 나갈 수 있을지 좀 더 심도깊은 연구가 부족했던 것이 아쉬웠습니다.