<div id="readability-page-1" class="page"><div><h2 id="1월-커뮤니티탭-개발">1월. 커뮤니티탭 개발</h2>
우리 회사의 앱은 온라인 수의사 상담 플랫폼이다. 
그렇다보니 유저들이 필요할 때만 찾고(펫이 아파서 수의사분들의 도움이 필요할 때) 이후로 시간이 지날수록 리텐션율이 떨어지는 형태가 자연스웠다. 
리텐션율을 어떻게 끌어올려볼 수 있을까 팀원들과 함께 고민하다가, 앱에 상담 말고도 유저들의 흥미를 이끌어 낼 수 있는 재미 요소가 필요하다는 결론이 나왔다. 
그래서 앱에 커뮤니티 탭을 새로 하나 추가하게 되었다. 
프론트엔드는 나 혼자서 개발을 진행했는데, 개발 목록은 다음과 같다.
<ul>
<li>커뮤니티 탭 메인페이지 (게시글 리스트)</li>
<li>게시물 상세 페이지 (좋아요, 댓글 작성 포함)</li>
<li>게시물 작성 페이지 (사진 업로드 포함)</li>
<li>게시물 수정 페이지</li>
<li>게시물 댓글 수정 기능</li>
<li>커뮤니티에 노출되는 사용자 닉네임 변경 기능(프로필 탭 상에서)</li>
</ul>
아직 초기 버전이니 아주 기본적인 기능들부터 개발을 빠르게 진행했고, 이후 세세한 기능들은 유저들의 반응을 살핀 후 천천히 고도화를 해나가기로 했다.
그런데 결과는 참담했다.. 
개발하고 배포한 지 일주일이 지나도 커뮤니티 탭에 글을 쓰는 유저가 없었다.. 
그러던 어느날 밤 카톡이 왔는데 커뮤니티에 찐 유저가 글을 처음으로 썼다는 내용이었다ㅎㅎ 
대표님도 기분이 좋았는지 케이크까지 보내주셨다ㅋㅋㅋ 
<img src="https://velog.velcdn.com/images/devmoonsh/post/d0a95c50-e850-4c76-997a-45114755f859/image.jpeg">
이후로 드문드문 글을 작성하는 유저들이 있었으나, 커뮤니티 탭의 성격이 우리의 의도와는 다르게 흘러갔다. 
애초에 만성질환 커뮤니티라는 컨셉을 표방했으나, 유저들은 이와 상관없이 펫과 관련된 다양한 내용의 글들을 작성했다. 
(만성질환이라는 컨셉은 대표님의 의견이 강하게 반영된 결과물이었다.) 
이 컨셉을 버려야 한다는 의견이 여기저기서 흘러나왔으나(나 포함) 커뮤니티 탭은 점점 시간이 흐르면서 방치되어가고 있었다. (우리의 KPI는 상담 수였기 때문에..)
 
<h2 id="2월-다시-웹으로-">2월. 다시 웹으로! (😀)</h2>
<img src="https://velog.velcdn.com/images/devmoonsh/post/42c6e54c-1785-4588-9e1a-9d9d067c9f2c/image.png">이전에 날 뽑아주셨던 15년차 개발자 분이 퇴사하시면서 그 분이 맡아 하시던 웹 개발을 내가 맡게 되었다. 
React Native 개발을 하면서 답답했던 순간들이 많이 있었다. 웹에서는 쉽게 처리할 수 있는 부분들이 React Native에는 어느정도 러닝커브가 있고 까다로운 사항들도 많다는 점이었다. (애니메이션, React Navigation 등)
우리 웹은 기존에 Pure React로 개발되어 있었다. 그런데 SEO에 대한 니즈가 생기면서 15년차 개발자 분이 Next.js로 마이그레이션을 진행해주셨다. 
그런데 개선해야 할 점들이 수두룩했다. ESLint 세팅, CI/CD 구축, SSR 페이지 로딩속도 개선 등..
웹을 전담하게 되면서 가장 처음 작업했던 부분은 CI/CD 구축이었다. 
기존에는 로컬환경에서 프로젝트를 production 모드로 설정해준 뒤, s3에 직접 정적배포를 진행해야 하는 번거로움이 있었다. 
이전에 Amplify Console에 랜딩페이지를 한 번 올려본 경험이 있었는데, 쉽고 빠르게 CI/CD를 구축할 수 있었던 기억이 있어서 이번에도 동일하게 진행했다.
그러나 Next.js는 달랐다. 
Next.js 버전 때문에 발생했던 문제도 있었고, 모노레포에서 겪었던 환경변수 관련 문제, Amplify와 Next.js의 ISR 페이지 지원에 대한 문제 등 처음 겪어보는 문제들 때문에 예정 due date을 넘겨버렸다.
그러다가 우여곡절 끝에 결국 빌드를 성공했다..! 
이제 push, merge만으로 자동 배포가 가능해졌다. 👏
다만 Next.js에서 <code>getServerSideProps</code>를 사용하는 페이지들의 로딩 속도가 기존 웹(CSR)과 비교해서 상당히 느렸다. (약 70% 이상 차이.. 심각..🤦‍♂️)
하지만 앞에 개발 Queue가 쌓여 있어서 최적화 작업은 후순위로 미뤄둘 수 밖에 없었다. 🥲
이후 B2B 페이지를 개발했는데, React Native에 손이 익었던 탓인지 웹 개발이 낯설게 느껴졌다. 
(이 때 다시 React Native 하고 싶다는 생각까지 들었던..)
하지만 금방 극복하고 다시 웹에 적응할 수 있었다. 😀
 
<h2 id="3월-이직-각--front-end-advisor-합류">3월. 이직 각..? + Front-end Advisor 합류!</h2>
프론트엔드에 주니어들만 모여있다 보니, 경험이 부족한 우리들은 항상 처음 접하는 것들 투성이었다. 
그렇다보니 항상 Due date을 넘기기 일쑤였고(Due date을 항상 빡세게 잡은 이유도 있지만) 
매일매일 돛단배를 타고 지도 없는 항해를 하는 느낌이었다. 
자연스럽게 퇴근도 늦어졌다. 11시, 12시, 1시.. 
처음에는 뭔가 뽕맞은 것처럼 다들 의지에 불타올라서 자발적으로 야근하고, 늦게 일어나고 또 야근하고 반복.. 
이런 문화가 자연스러웠다. 
하지만 이게 지속 가능한 문화일까, 시간이 길어질수록 몸도 지치고 답답한 느낌이 들었다. 또 이 때 KPI가 한참 떨어지던 시기여서 더 암담하다고 느꼈던 것 같다.
그런데 마침 이 시기에 이직 제안을 받았다. 
하지만 딱 가고싶다는 느낌이 드는 회사가 아니였다. 
모회사 덕분에 네임 밸류는 어느정도 있었지만, 커리어를 전환하고 1년 사이에 회사를 이미 3번이나 경험해서인지 또 이직을 한다는 것에 부담감이 드는 것 때문도 있었다.
특별한 준비나 기대 없이 면접을 진행했는데 합격을 해버렸다. 
많은 고민이 되었으나 결국 이직을 하기로 마음먹었다.
지금 다니고 있는 회사에서 대표님과의 1on1 시간에 이직을 하겠다고 말씀드렸다. 
1시간이 넘는 시간동안 많은 설득이 있었지만 거절했고, 그 뒤로 PM님과 또 한번 1on1을 가졌다. 
이 때도 많은 얘기들을 했는데, PM님은 현재 우리가 겪고 있는 문제들을 해결하기 위해서 앞으로 더 노력하겠다고 하셨다. 그 모습들이 마음을 조금 움직였던 것 같다. 
그리고 몇일 후 다시 대표님과 1on1을 가졌다. 
결론은 연봉 약 20% 정도를 올리고, 회사에 남기로 했다. 
PM님과의 1on1이 없었으면 아마 나는 지금 다른 회사에 있었을 것이다.
아무튼 위에서 말했던 우리들의 고충이 잘 전달되어 회사에서 프론트엔드 어드바이저 한 분을 섭외해줬다. 🙌 
(사실 이 전에 시니어 프론트엔드 개발자를 뽑으려고 여러 번 면접을 보았으나 뜻대로 잘 되지 않았다..) 
<img src="https://velog.velcdn.com/images/devmoonsh/post/5a2e2033-7de9-4ef4-b39d-e42d578a07cb/image.png">
처음엔 온라인으로 미팅을 했고 이후 슬랙에서 계속 질의응답을 하는 방식으로 진행했는데 결과는 만족스러웠다! 
Best practice, 트렌드, 인사이트 등을 얻고 다양한 문제들을 해결하는 데 큰 도움이 되어주셨다. 
덩달아 KPI도 다시 회복하기 시작했다!
 
<h2 id="4월-sentry--amplify---">4월. Sentry + Amplify = ❌ ❓</h2>
기존에 Amplify Console로 웹의 CI/CD를 구축해두었던 상태였다. 
이 위에 에러 트래킹 툴인 Sentry를 올리고 Amplify에서 빌드를 돌리던 중 webpack error가 발생했다. 
응..? 로컬에서는 잘 빌드되는데..?
구글링을 하던 중 Amplify 상에서 특정 환경변수를 하나 넣어주면 된다는 글을 발견했다. 
빌드는 성공했다.
그런데 Next.js의 <code>getServerSideProps</code>를 사용하는 페이지들에서 503 에러를 띄웠다.. 😱 
다시 구글링을 했다.
온갖 방법들을 다 찾아보고 시도해보고 했지만 결국 해결하지 못했다. 이것 때문에 거의 2주는 까먹은듯 싶다.
어드바이저분께도 조언을 구했으나 Amplify 경험이 없다고 하셔서 큰 도움을 얻진 못했다. 
커뮤니티에도 여러번 질문을 올려봤는데, 도움이 될만한 답변을 얻지 못했다. 
AWS 측에 직접 문의를 해보기도 했는데, 중요한 정보들을 빼고 똑같은 환경을 만들어 패키지를 보내달라고 했다. 
음.. 모노레포 환경에 여러 패키지들이 있는데 이것들을 다 포함시켜야 하는건가.. 어디서부터 어디까지 빼고 넣어야되는지 감이 안잡혔다.
또 Amplify가 CI/CD 구축에 필요한 설정 경로들을 다 숨겨놓고, 그 경로들이 어디에 있는지 가이드라인을 명확히 주지 않아서 많이 헤맸었던 기억도 있다. 
(어떤 서비스들이 조합되어 구축되는건지. ex. CloudFront, S3, Lambda 등)
인프라 뉴비의 입장에서 참 어려웠었다. 🥲
그러다가 혹시나 해서 Next.js + Sentry 조합을 같은 버전으로 Vercel에 올려봤는데 빌드가 너무 잘되는 것이었다.. 
Sentry와 Amplify에서 뭔가 내부적으로 아다리가 안맞았나보다.
결국은 우선 Vercel로 갈아타기로 했다.. 역시 넘나 스무스하게 잘되는것.. 
심지어 빌드 속도도 2배 이상 빨랐다.
그런데 또 걱정되는 부분은 Vercel이 Amplify보다 CI/CD 구축에 필요한 서비스들을 더 꽁꽁 숨겨놓았다는 사실.. 
우선 현재까지 문제없이 만족하며 사용하고 있지만, 또 비슷한 문제가 생긴다면 다시 다른 방법을 찾아야 될 수도 있다는 점이다. 
아무튼, Sentry 하나 도입시켜보겠다고 시작했던 길고 긴 삽질의 여정이 드디어 끝났다. 🤪
 
<h2 id="5월-시니어-프론트엔드-개발자분-합류">5월. 시니어 프론트엔드 개발자분 합류!</h2>
PM님의 우리들의 고충을 덜어내주고자 하는 노력의 일환으로 시니어 프론트엔드 개발자 1분 모셔왔다. 
원래 게임쪽부터 시작해서 다방면으로 경험이 많으신 분이라고 하셨다. 
또 소프트웨어 마에스트로 출신이시라 그런지, 컴퓨터에 대해서 정말 잘 아시는 분 같았다. 
리눅스, OS, 네트워크, 인프라 등에도 지식이 빠삭하셔서 디버깅을 할 때도 나와는 다른 방식으로 접근을 
하시는 모습들을 보여주셨다. 
이래서 컴퓨터를 잘 알아야 한다는구나 하고 느끼는 순간들이 많았다.
Next.js나 Redux Toolkit 등 비교적 최신 기술들에 대해서는 경험이 없으셨지만 그래도 근본이 있다보니까 금방 이해하시고 금방 적응하시는 모습들이 아주 인상깊었다.
앞으로도 계속 큰 도움을 받을 수 있을 것 같아 만족스럽다!
 
<h2 id="6월-nextjs-ssr-페이지-로딩속도-개선하기">6월. Next.js SSR 페이지 로딩속도 개선하기</h2>
기존에 <a href="https://nextjs.org/docs/routing/dynamic-routes">Dynamic Routes</a>를 사용하는 페이지들에 <a href="https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props">getServerSideProps</a>가 적용된 페이지들이 있었다. 
유저가 페이지의 데이터를 요청하는 시점에 HTML 파일을 생성하는 방식인데, Next.js 공식문서에서는 권하지 않는 방식이다. 
속도가 <a href="https://nextjs.org/docs/basic-features/data-fetching/get-static-props">getStaticProps</a>에 비해 현저히 느리기 때문이다.
이 문제를 어떻게 해결할 수 있을까 고민하고 끊임없이 서치해 보았지만, 쉽게 찾을 수가 없었다. 
어드바이저 분은 시니어 프론트엔드 개발자분이 오시면서 계약이 해지되었고, 
시니어 프론트엔드 개발자분은 Next.js에 대한 경험이 없으셨고, 다른 Task 때문에 바빠서 도와줄 여력이 없으셨다.🥲
그러다가 친구의 공식문서를 정독하라는 답변에서 힌트를 얻었다. 
"내가 말하는 공식문서 정독의 의미는 숨겨져있는 링크 하나하나까지 다 정독하라는 의미야"
그 말을 듣고 그대로 실행했고, 결국 공식문서 안에서 답을 찾아냈다. 
예전에 보긴 했던 내용이었는데, 그 때 당시에는 눈에 제대로 들어오지 않았다.
답은 Link 컴포넌트와 <code>getStaticProps</code>와 <code>getStaticPaths</code> 그리고 또 다른 여러가지 옵션들에 있었다.
쉽게 요약해서 말하자면 유저가 글의 리스트를 보고있는 시점에 스크롤 위치에 따라 <code>Dynamic Routes</code> 가 적용된 페이지들을 미리 prefetch 하는 방식이었다.
그러면 유저가 글의 상세 페이지를 클릭했을 때 이미 prefetch되었던 데이터가 있으니, SSR 방식처럼 로딩이 딜레이될 일이 적어진다.
이렇게 바꾸고 나서 페이지 속도가 약 72%나 개선되었다. 
기존에는 얼마나 쓰레기였다는 것인가...🤦‍♂️
아무튼 만족스러운 결과를 이끌어냈던 6월이었다!
<h2 id="-회사생활">+ 회사생활</h2>
<img src="https://velog.velcdn.com/images/devmoonsh/post/ad73fb02-d901-4285-90e4-4a700637507f/image.jpg"><h2 id="-고양이-키우기-시작ㅋ">+ 고양이 키우기 시작ㅋ</h2>
<img src="https://velog.velcdn.com/images/devmoonsh/post/32459443-19c4-47b8-9066-30286bd7874f/image.jpg"></div></div>

devmoon.log

1월. 커뮤니티탭 개발
우리 회사의 앱은 온라인 수의사 상담 플랫폼이다.
그렇다보니 유저들이 필요할 때만 찾고(펫이 아파서 수의사분들의 도움이 필요할 때) 이후로 시간이 지날수록 리텐션율이 떨어지는 형태가 자연스웠다.
리텐션율을 어떻게 끌어올려볼 수 있을까 팀원들과 함께 고민하다가, 앱에 상담 말고도 유저들의 흥미를 이끌어 낼 수 있는 재미 요소가 필요하다는 결론이 나왔다.
그래서 앱에 커뮤니티 탭을 새로 하나 추가하게 되었다.
프론트엔드는 나 혼자서 개발을 진행했는데, 개발 목록은 다음과 같다.
커뮤니티 탭 메인페이지 (게시글 리스트)
게시물 상세 페이지 (좋아요, 댓글 작성 포함)
게시물 작성 페이지 (사진 업로드 포함)
게시물 수정 페이지
게시물 댓글 수정 기능
커뮤니티에 노출되는 사용자 닉네임 변경 기능(프로필 탭 상에서)
아직 초기 버전이니 아주 기본적인 기능들부터 개발을 빠르게 진행했고, 이후 세세한 기능들은 유저들의 반응을 살핀 후 천천히 고도화를 해나가기로 했다.
그런데 결과는 참담했다..
개발하고 배포한 지 일주일이 지나도 커뮤니티 탭에 글을 쓰는 유저가 없었다..
그러던 어느날 밤 카톡이 왔는데 커뮤니티에 찐 유저가 글을 처음으로 썼다는 내용이었다ㅎㅎ
대표님도 기분이 좋았는지 케이크까지 보내주셨다ㅋㅋㅋ
이후로 드문드문 글을 작성하는 유저들이 있었으나, 커뮤니티 탭의 성격이 우리의 의도와는 다르게 흘러갔다.
애초에 만성질환 커뮤니티라는 컨셉을 표방했으나, 유저들은 이와 상관없이 펫과 관련된 다양한 내용의 글들을 작성했다. 
(만성질환이라는 컨셉은 대표님의 의견이 강하게 반영된 결과물이었다.)
이 컨셉을 버려야 한다는 의견이 여기저기서 흘러나왔으나(나 포함) 커뮤니티 탭은 점점 시간이 흐르면서 방치되어가고 있었다. (우리의 KPI는 상담 수였기 때문에..)
2월. 다시 웹으로! (😀)
이전에 날 뽑아주셨던 15년차 개발자 분이 퇴사하시면서 그 분이 맡아 하시던 웹 개발을 내가 맡게 되었다.
React Native 개발을 하면서 답답했던 순간들이 많이 있었다. 웹에서는 쉽게 처리할 수 있는 부분들이 React Native에는 어느정도 러닝커브가 있고 까다로운 사항들도 많다는 점이었다. (애니메이션, React Navigation 등)
우리 웹은 기존에 Pure React로 개발되어 있었다. 그런데 SEO에 대한 니즈가 생기면서 15년차 개발자 분이 Next.js로 마이그레이션을 진행해주셨다.
그런데 개선해야 할 점들이 수두룩했다. ESLint 세팅, CI/CD 구축, SSR 페이지 로딩속도 개선 등..
웹을 전담하게 되면서 가장 처음 작업했던 부분은 CI/CD 구축이었다.
기존에는 로컬환경에서 프로젝트를 production 모드로 설정해준 뒤, s3에 직접 정적배포를 진행해야 하는 번거로움이 있었다.
이전에 Amplify Console에 랜딩페이지를 한 번 올려본 경험이 있었는데, 쉽고 빠르게 CI/CD를 구축할 수 있었던 기억이 있어서 이번에도 동일하게 진행했다.
그러나 Next.js는 달랐다. 
Next.js 버전 때문에 발생했던 문제도 있었고, 모노레포에서 겪었던 환경변수 관련 문제, Amplify와 Next.js의 ISR 페이지 지원에 대한 문제 등 처음 겪어보는 문제들 때문에 예정 due date을 넘겨버렸다.
그러다가 우여곡절 끝에 결국 빌드를 성공했다..!
이제 push, merge만으로 자동 배포가 가능해졌다. 👏
다만 Next.js에서 getServerSideProps를 사용하는 페이지들의 로딩 속도가 기존 웹(CSR)과 비교해서 상당히 느렸다. (약 70% 이상 차이.. 심각..🤦‍♂️)
하지만 앞에 개발 Queue가 쌓여 있어서 최적화 작업은 후순위로 미뤄둘 수 밖에 없었다. 🥲
이후 B2B 페이지를 개발했는데, React Native에 손이 익었던 탓인지 웹 개발이 낯설게 느껴졌다. 
(이 때 다시 React Native 하고 싶다는 생각까지 들었던..)
하지만 금방 극복하고 다시 웹에 적응할 수 있었다. 😀
3월. 이직 각..? + Front-end Advisor 합류!
프론트엔드에 주니어들만 모여있다 보니, 경험이 부족한 우리들은 항상 처음 접하는 것들 투성이었다.
그렇다보니 항상 Due date을 넘기기 일쑤였고(Due date을 항상 빡세게 잡은 이유도 있지만)
매일매일 돛단배를 타고 지도 없는 항해를 하는 느낌이었다. 
자연스럽게 퇴근도 늦어졌다. 11시, 12시, 1시..
처음에는 뭔가 뽕맞은 것처럼 다들 의지에 불타올라서 자발적으로 야근하고, 늦게 일어나고 또 야근하고 반복..
이런 문화가 자연스러웠다.
하지만 이게 지속 가능한 문화일까, 시간이 길어질수록 몸도 지치고 답답한 느낌이 들었다. 또 이 때 KPI가 한참 떨어지던 시기여서 더 암담하다고 느꼈던 것 같다.
그런데 마침 이 시기에 이직 제안을 받았다.
하지만 딱 가고싶다는 느낌이 드는 회사가 아니였다.
모회사 덕분에 네임 밸류는 어느정도 있었지만, 커리어를 전환하고 1년 사이에 회사를 이미 3번이나 경험해서인지 또 이직을 한다는 것에 부담감이 드는 것 때문도 있었다.
특별한 준비나 기대 없이 면접을 진행했는데 합격을 해버렸다.
많은 고민이 되었으나 결국 이직을 하기로 마음먹었다.
지금 다니고 있는 회사에서 대표님과의 1on1 시간에 이직을 하겠다고 말씀드렸다.
1시간이 넘는 시간동안 많은 설득이 있었지만 거절했고, 그 뒤로 PM님과 또 한번 1on1을 가졌다.
이 때도 많은 얘기들을 했는데, PM님은 현재 우리가 겪고 있는 문제들을 해결하기 위해서 앞으로 더 노력하겠다고 하셨다. 그 모습들이 마음을 조금 움직였던 것 같다.
그리고 몇일 후 다시 대표님과 1on1을 가졌다.
결론은 연봉 약 20% 정도를 올리고, 회사에 남기로 했다. 
PM님과의 1on1이 없었으면 아마 나는 지금 다른 회사에 있었을 것이다.
아무튼 위에서 말했던 우리들의 고충이 잘 전달되어 회사에서 프론트엔드 어드바이저 한 분을 섭외해줬다. 🙌
(사실 이 전에 시니어 프론트엔드 개발자를 뽑으려고 여러 번 면접을 보았으나 뜻대로 잘 되지 않았다..)
처음엔 온라인으로 미팅을 했고 이후 슬랙에서 계속 질의응답을 하는 방식으로 진행했는데 결과는 만족스러웠다!
Best practice, 트렌드, 인사이트 등을 얻고 다양한 문제들을 해결하는 데 큰 도움이 되어주셨다.
덩달아 KPI도 다시 회복하기 시작했다!
4월. Sentry + Amplify = ❌ ❓
기존에 Amplify Console로 웹의 CI/CD를 구축해두었던 상태였다.
이 위에 에러 트래킹 툴인 Sentry를 올리고 Amplify에서 빌드를 돌리던 중 webpack error가 발생했다.
응..? 로컬에서는 잘 빌드되는데..?
구글링을 하던 중 Amplify 상에서 특정 환경변수를 하나 넣어주면 된다는 글을 발견했다.
빌드는 성공했다.
그런데 Next.js의 getServerSideProps를 사용하는 페이지들에서 503 에러를 띄웠다.. 😱
다시 구글링을 했다.
온갖 방법들을 다 찾아보고 시도해보고 했지만 결국 해결하지 못했다. 이것 때문에 거의 2주는 까먹은듯 싶다.
어드바이저분께도 조언을 구했으나 Amplify 경험이 없다고 하셔서 큰 도움을 얻진 못했다.
커뮤니티에도 여러번 질문을 올려봤는데, 도움이 될만한 답변을 얻지 못했다.
AWS 측에 직접 문의를 해보기도 했는데, 중요한 정보들을 빼고 똑같은 환경을 만들어 패키지를 보내달라고 했다.
음.. 모노레포 환경에 여러 패키지들이 있는데 이것들을 다 포함시켜야 하는건가.. 어디서부터 어디까지 빼고 넣어야되는지 감이 안잡혔다.
또 Amplify가 CI/CD 구축에 필요한 설정 경로들을 다 숨겨놓고, 그 경로들이 어디에 있는지 가이드라인을 명확히 주지 않아서 많이 헤맸었던 기억도 있다. 
(어떤 서비스들이 조합되어 구축되는건지. ex. CloudFront, S3, Lambda 등)
인프라 뉴비의 입장에서 참 어려웠었다. 🥲
그러다가 혹시나 해서 Next.js + Sentry 조합을 같은 버전으로 Vercel에 올려봤는데 빌드가 너무 잘되는 것이었다..
Sentry와 Amplify에서 뭔가 내부적으로 아다리가 안맞았나보다.
결국은 우선 Vercel로 갈아타기로 했다.. 역시 넘나 스무스하게 잘되는것..
심지어 빌드 속도도 2배 이상 빨랐다.
그런데 또 걱정되는 부분은 Vercel이 Amplify보다 CI/CD 구축에 필요한 서비스들을 더 꽁꽁 숨겨놓았다는 사실..
우선 현재까지 문제없이 만족하며 사용하고 있지만, 또 비슷한 문제가 생긴다면 다시 다른 방법을 찾아야 될 수도 있다는 점이다. 
아무튼, Sentry 하나 도입시켜보겠다고 시작했던 길고 긴 삽질의 여정이 드디어 끝났다. 🤪
5월. 시니어 프론트엔드 개발자분 합류!
PM님의 우리들의 고충을 덜어내주고자 하는 노력의 일환으로 시니어 프론트엔드 개발자 1분 모셔왔다.
원래 게임쪽부터 시작해서 다방면으로 경험이 많으신 분이라고 하셨다.
또 소프트웨어 마에스트로 출신이시라 그런지, 컴퓨터에 대해서 정말 잘 아시는 분 같았다.
리눅스, OS, 네트워크, 인프라 등에도 지식이 빠삭하셔서 디버깅을 할 때도 나와는 다른 방식으로 접근을
하시는 모습들을 보여주셨다.
이래서 컴퓨터를 잘 알아야 한다는구나 하고 느끼는 순간들이 많았다.
Next.js나 Redux Toolkit 등 비교적 최신 기술들에 대해서는 경험이 없으셨지만 그래도 근본이 있다보니까 금방 이해하시고 금방 적응하시는 모습들이 아주 인상깊었다.
앞으로도 계속 큰 도움을 받을 수 있을 것 같아 만족스럽다!
6월. Next.js SSR 페이지 로딩속도 개선하기
기존에 Dynamic Routes를 사용하는 페이지들에 getServerSideProps가 적용된 페이지들이 있었다.
유저가 페이지의 데이터를 요청하는 시점에 HTML 파일을 생성하는 방식인데, Next.js 공식문서에서는 권하지 않는 방식이다.
속도가 getStaticProps에 비해 현저히 느리기 때문이다.
이 문제를 어떻게 해결할 수 있을까 고민하고 끊임없이 서치해 보았지만, 쉽게 찾을 수가 없었다.
어드바이저 분은 시니어 프론트엔드 개발자분이 오시면서 계약이 해지되었고,
시니어 프론트엔드 개발자분은 Next.js에 대한 경험이 없으셨고, 다른 Task 때문에 바빠서 도와줄 여력이 없으셨다.🥲
그러다가 친구의 공식문서를 정독하라는 답변에서 힌트를 얻었다.
"내가 말하는 공식문서 정독의 의미는 숨겨져있는 링크 하나하나까지 다 정독하라는 의미야"
그 말을 듣고 그대로 실행했고, 결국 공식문서 안에서 답을 찾아냈다.
예전에 보긴 했던 내용이었는데, 그 때 당시에는 눈에 제대로 들어오지 않았다.
답은 Link 컴포넌트와 getStaticProps와 getStaticPaths 그리고 또 다른 여러가지 옵션들에 있었다.
쉽게 요약해서 말하자면 유저가 글의 리스트를 보고있는 시점에 스크롤 위치에 따라 Dynamic Routes 가 적용된 페이지들을 미리 prefetch 하는 방식이었다.
그러면 유저가 글의 상세 페이지를 클릭했을 때 이미 prefetch되었던 데이터가 있으니, SSR 방식처럼 로딩이 딜레이될 일이 적어진다.
이렇게 바꾸고 나서 페이지 속도가 약 72%나 개선되었다.
기존에는 얼마나 쓰레기였다는 것인가...🤦‍♂️
아무튼 만족스러운 결과를 이끌어냈던 6월이었다!
+ 회사생활
+ 고양이 키우기 시작ㅋ

2022 상반기 회고

댓글