[프로젝트] 회고록...

함민혁·2024년 9월 2일
0

프로젝트

목록 보기
17/18
post-thumbnail

회고록

프로젝트 취지

2개의 프로젝트를 진행해봤으니, 마지막으로 사용자가 실제로 존재하는 프로젝트를 진행해보고 싶다는 생각을 함.
친구의 sns 계정을 이용해서 쇼핑몰을 오픈해보려고함.

처음 기획할때는 쇼핑몰이니 의류들을 보여주는 shop페이지, 마이페이지 등등 가볍게 생각하고 진행.

하지만 관리자페이지 구현,결제 시스템 연동, 쇼핑몰 특성상 많은 이미지를 딜레이없이 보여주는 등 생각할 것들이 굉장히 많았음....

그 전 프로젝트에서는 넘어갔단 작은 이슈들에 대해 정말 사용자가 있다고 생각하니 넘어갈 수 있는 문제가 하나도 없었고, + 처음 6개월정도로 기획했던 프로젝트는 1년이 되어서야 마무리 됨

초기 기획의도와 비교했을 때 바뀐 점

친구가 sns활동을 하면서 장기적으로 사용할 쇼핑몰을 만들려고 했으나 여러 비용적인 문제로 이벤트성으로 한달정도만 이벤트성으로 쇼핑몰을 오픈하기로 결정 -> 주 컨텐츠가 ‘이벤트’로 바뀜

다양한 sns 홍보 + 친구 sns 계정 팔로워수로 인해 약 1500명의 회원이 생성됐고, 약 2만건의 이벤트참여율이 발생함.

SEO향상을 위해 노력한 이유 “쇼핑몰이니까"

csr만 작업을 해온 나에겐 첫 도전이였음.

구글에 어떻게 하면 우선순위로 검색이 되고, 어떤 메타태그를 사용해야 페이지 노출 정도를 높일 수 있고 등등에 대해 많이 고민을 함.

어떤 데이터는 SSR로, 또 어떤 데이터는 SSG로 구현을 해야겠다 등등 많은 고민을 함.

초기 뷰포인트 로딩시간 너무 오래걸림 -> lighthouse 점수

페이지를 로딩하는 데 너무 오랜 시간이 걸려 뭐가 문제인지 고민을 좀 해봄

비록 결과적으로는 많은 도움이 되지는 않았지만, 경험이라 생각하고 번들사이즈를 줄이려고 노력을 해봄.

  1. 사용자의 뷰포인트에 당장 등장하지 않는 요소는 나중에 hydrate해보자!
  2. 일부 사용자에게만 보이는 팝업창 요소는 다이나믹 임포트로 구현해보자!
  3. 이미지를 전부 next/image로 변경!
  4. 폰트를 otf->wott2로 변경!

결과적으로 눈의 띄게 큰 변화를 준 것은 3,4번이였음

테스트 코드의 중요성을 피부로 직접 깨달음

회사 지원을 하다보면 여기저기 테스트코드에 대한 언급이 많음.
그리하여 직전 프로젝트의 경우 jest를 통해 unit test를 진행하고 cypress를 통해 e2e테스트를 진행함.
하지만 하면서도 이 테스트코드가 정말 도움이 될까라는 생각이 많이 들었음. 왜냐면 이미 잘될거를 알았으니까. 그런데 시간도 많이 드니까.

이런 생각을 가진채로 이번 프로젝트의 경우 정말 일부의 기능만 e2e테스트를 진행함.

로그인, 결제, 장바구니 위 세기능에 대해만 작성함

그리고 오픈함

이벤트는 약 4일간 진행되었고 매일매일 약 1000명이 넘는 사람들이 우리의 페이지를 방문함. 그러던 도중 백엔드에서 정말 사소한 이슈가 발생했고, 해당 코드 한줄을 고침으로써 사용자의 정보가 담긴 디비가 꼬이는 일이 발생함.

남들은 어떻게 생각할지 모르겠지만 나는 테스트커버리지가 높은 코드라면 해당 이슈들이 발생하지 않았을 것이라고 생각이 들었음.

결국 사이드 이펙트 체크가 정말 중요하다는 거임. 사용자가 많아져서 미처 발견하지 못한 이슈가 발생하거나, 작은 기능하나가 추가될때 나머지 기능들이 원활하게 돌아가는지 메인에 코드가 푸쉬되고 빌드가 되기전에 개발자가 알아야한다는 거임.

새로운 테스트코드 툴? ->api 요청 수 확인 후 이상 감지

마찬가지로 프론트엔드 쪽에서도 이벤트 참여이후 응모하기 버튼이 즉시 멈추지않아서 급하게 조건문없이 refetch코드를 작성했다가, 응모내역조회가 응모상품페이지 방문 시 10번 이상 발생함.

코드 추가 후 같은 api가 중복호출되는 경우를 잡을 수는 없을까?
e2e테스트 코드에서 해당 api가 한번만 불리는게 맞는지 체크하는 코드를 작성해보면 어떨까?

경험삼아 메인코드에 푸쉬전에 api 요청 수 확인해서 한기능에 한번씩 요청을 하고 있는지 테스트코드를 추가해보기로 결정

유지보수의 중요성

1년동안 길어지면서 7~8개월 전에 작성했던 코드에 대해 직관적으로 이해가 되지 않는 경우들이 발생.
일반적인 네이밍과 구조!가 얼마나 중요한지 알게됨

.
.
.

친구의 계정 덕분에 너무너무 귀중한 경험을 했고, 이력서에 잘 반영해봐야겠다. 끝!🫠

profile
Born to be FE developer 🧑🏻‍💻

0개의 댓글