Spec

사용 언어 및 프레임워크(라이브러리)

• Javascript
• React

파일 검증을 위한 방법

react-crop 활용하기

상세링크
굿즈 프리뷰 이미지의 크기를 제한 및 검증하는데 한계가 있다고 판단했습니다.
그래서 검증 대신 프리뷰 이미지 크기에 맞게 크롭할 수 있는 도구를 제공하여 이 문제를 해결할 수 있었습니다.

컴포넌트 분리 및 재사용

그리드, 좋아요, 댓글

지덕체 페이지 내에서 반복적으로 사용되고 있는 그리드카드 두 종류와 좋아요, 댓글 요소를 컴포넌트로 따로 분리하여 코드 재사용성을 높일 수 있었습니다.

배포 후 수정한 사항들

hoc 랜더링 방지

접근 권한에 맞지 않는 접근을 시도할 경우 이를 막기 위해 hoc(higher order component)를 적용하였습니다.
다만 비동기 처리에 의해 접근 권한에 대한 판단이 끝나지 않은 상태에서 렌더링이 진행되어 접근 권한이 없음에도 불구하고 잠깐 떴다 사라지는 현상이 있었습니다.
이를 해결하기 위하여 플래그를 하나 설정하여 접근 권한이 있다고 판단되기 전까지 어떠한 요소도 렌더링 되지 않도록 설정하였습니다.

모바일 뷰 최적화

지덕체는 Desktop First 방식으로 개발되었습니다.
따라서 처음 MVP를 완성했을 때는 css에 대한 부담감때문에 모바일 뷰가 제대로 지원되지 않았는데요.

하지만 서비스 이용자의 대부분이 모바일로 접속한다는 Google Analytics의 데이터가 있었고, 모바일 뷰 최적화는 필수라는 것을 깨달았습니다.
이에 미디어쿼리(@media)를 이용하여 반응형을 구현하고, 이와 더불어 기존에 제대로 정리되어있지 않았던 css코드들을 정리할 수 있었습니다.

앞으로 개선할 방향

1. redux를 이용한 상태관리

현재 지덕체 프론트코드는 react hook 만을 이용하여 상태관리를 하고 있습니다.
이에 따라 부모 컴포넌트에서 자식 컴포넌트로 정보를 넘겨줘야할 때 props가 과도하게 길어지는 현상이 발생했습니다.
이를 개선하기 위하여 redux를 도입하여 상태관리를 개선하고 싶습니다.

2. 컴포넌트 분리를 이용한 구조 개선

현재 일부 UI 요소들은 컴포넌트 분리가 되어 있지만 대부분의 요소들은 라우트 하나를 이루는 컴포넌트 하나에 통째로 구현되어 있습니다.
이를 조금 더 분리하여 가독성을 개선하고 이와 더불어 코드 스플리팅을 통해 성능도 개선해보고 싶습니다.

3. css 개선

css에 대한 이해가 부족한 상태로 UI를 구현하여 일부 어긋나있는 UI들이 있습니다. 또한 보기에는 정상적이지만 유지 보수에 불리한 방식으로 구현되어 있는 css 요소들이 많아 이를 개선하고 싶습니다.

4. 프론트 서버 분리

현재 지덕체는 백엔드 express서버에서 프론트엔드의 정적파일들을 서빙해주는 방식으로 구현되어있습니다.
이는 한 서버만 다운돼도 전체가 다운된다는 치명적인 약점을 비롯하여 한 서버로 트래픽이 몰리게 된다는 약점도 존재합니다.
이를 해결하기 위하여 프론트 서버를 분리하는 작업을 진행하고 싶습니다.

5. SSR 적용 및 웹 표준 개선

SEO와 페이지 성능 개선을 위하여 SSR을 적용하고 싶습니다.
크롬 라이트하우스 분석에 따르면 모바일 퍼포먼스가 심각하게 낮은 것을 알 수 있습니다.
SSR을 적용하면 이를 어느정도 개선할 수 있을 것으로 보이며 그 외에도 라이트하우스의 제안들을 바탕으로 사용자 경험을 향상시켜 나가고 싶습니다.

네이버 서치 어드바이저에서 사이트 최적화를 위해 HTML 구조를 개선하라고 나와있고 실제로 현업 개발자 분에게 조언을 구했을 때 SSR도 중요하지만 웹 표준을 잘 지키는 것만으로도 충분히 SEO 효과가 있다라는 말씀을 들었기 때문에 웹 표준에 맞춰 HTML 구조를 개선해보고 싶습니다.