끝나지 않은 성장의 늪 (feat.연말회고)

올해의 나를 한마디로 정의를 한다면 성장무새였다.

프론트엔드로 첫 프로젝트에 투입되어 올해 초에 드디어 리버스쿨을 오픈하였다. 서비스를 개발하면서 이런 서비스를 오픈하기 위해서 정말 많은 것들이 고려되고 신경 쓸게 많다고 생각이 들었는데 그중에서 나는 CSR(Client Side Rendering)의 한계를 많이 느꼈다.

내가 생각 했을 때 우리 서비스는 교육 서비스이기 때문에 SEO(Search Engine Optimization)가 중요하다고 생각했다. (중요한 것 중 하나이지만 기술적으로 생각 했을 때) 컴퓨팅 파워가 좋아지고 CSR의 단점을 보완해주는 여러 서비스가 존재 하긴 하지만 작은 회사에서 비용을 최대한 줄이기 위해서는 도입하기가 쉽지 않았고(내가 잘 알지도 못해 어필도 못했다.) 내가 아는 선에서 최대한 SEO작업을 해놓았지만 이걸로 부족하다 생각이 들었고 단적인 예로 이 부분뿐만 아니라 전체적인 서비스를 보는 안목이 부족했던 것 같다.

그러다보니 성장무새가 될 수 밖에 없었다.

성장! 성장! 성장!

1. 기존 서비스에 특성 맞게 마이그레이션 하기 위한 예행 연습 Next.js로 블로그 만들기

첫번째 성장은 CSR의 단점을 보완하기 위해서 Next.js 완전 정복: 확장성 높은 커머스 서비스 구축하기와 드림코딩 엘리님의 Next.js 강의를 먼저 수강하고 나의 블로그도 만들어 보면서 SEO를 어떻게 잘 구성해야 하는지도 미리 공부해보았다.

한달에 걸려 강의를 보면서 블로그를 완성하고 (엘리님의 강의를 많이 참고) 이정도면 만족하고 잘 했다고 생각이 들었다.

하지만 기존 블로그 특성상 패키지에 직접 md파일을 생성해야 한다는 것과 md파일을 작성 후에는 해당 패키지를 다시 빌드해야 하는 번거로움이 존재하다보니 블로그에 글을 작성하는게 처음에는 신나서 작성했지만 번거로움을 핑계로 글 작성을 자주 하지는 못했다.

화면에 대한 개선도 필요했다.

이전 블로그 화면

화면의 여백이 없고 반응형으로 제작을 하긴 했지만 전체적으로 부담스러운 레이아웃이라고 생각이 들었다.

그래서 7개월 정도 쓰다가 사용성 개선을 해야겠다는 판단을 내리고 에디터 기능을 추가하고 supabase를 도입해서 블로그 글을 db에 저장하고 이미지는 storage를 활용해 보기로 하였다.

이것도 거의 한달 정도 걸려서 내가 필요한 기능은 얼추 도입해서 사용성 개선을 완료했다.(추가할 게 너무 많다...)

현재 블로그 화면

전체적으로 화면의 크기에 관계없이 한눈에 들어오는 레이아웃으로 변경하였다.(만족)

참고

• 이전 버전 블로그

2. 메가테라와의 만남

두번째 성장은 메라테라와의 만남이다.

서비스를 개발하면서 서비스의 안정성에 대해서 많이 고민을 했었다. 회사에서 혼자 프론트엔드이지만 영향력은 적은 주니어였던 내가 기존의 프로젝트에 무턱대고 테스트 코드를 작성해서 서비스를 견고하게 하자고 얘기를 하기에는 내 코도 석자였고, 내가 준비 되어있지 않은 상태였었다.

그러던 중에 팀원분의 소개로 알게 된 메가테라 웨비나를 듣고 프론트엔드 생존코스 3기를 시작하였다.

3개월간 정말 많은 부분을 느끼게 했던 코스였다.

내가 사용하는 React에 대해서 너무도 모르는 부분이 많았고(아직도 배울거 투성이다.), 스케줄에 맞춰서 기능 구현에만 급급해 큰 부분을 놓치고 있었던 것 같다.

나를 돌아볼 수 있는 계기도 되면서 시야를 넓게 볼 수 있는 안목도 키울 수 있었다.

메가테라를 통해서 React의 기본 및 테스트 코드 작성, 회고 작성 등등 많은 것을 배울 수 있었고 덕분에 최근에 한 프로젝트에서 E2E테스트를 도입해 안정성있는 서비스를 구축할 수 있었다.

3. 첫 스터디를 해보다

세번째 성장은 스터디를 한 것이다.

아직 진행중이긴 하지만 혼자서만 작업하고, 공부하는 부분을 탈피해보고자 용기내서 지원한 스터디에 선택이 되어서 이제 마지막 회차만 남겨둔 상태이다.(고마워요 메가테라!)

스터디는 그림으로 배우는 HTTP & Network Basic 책으로 매주 정해진 분량을 읽어오고 해당 회차에 궁금한 내용을 토대로 질문하고 비슷한 경험이 있으면 공유하는 형태로 진행이 된다.

1회차는 건강상 이슈로 참여하지 못하고 나머지는 올참여 하였다.

처음으로 해본 스터디였지만 여러 사람들과 비슷한 문제를 가지고 고민해보는 시간이 정말 재밌었던 것 같다.

그리고 내가 프로젝트를 하면서 경험해본 부분이 내가 생각 했을 때는 별게 아니라고 생각을 했었다. (모두가 당연히 경험 했을 거라 생각)

하지만 스터디를 진행하면서 내 경험을 꽤 많이 스터디원들에게 공유를 하였는데 그러면서 느낀건 정말 쓸모 없는 경험은 없다고 생각을 하였다. 추가로 경험을 글로도 잘 작성해보는 연습을 해야겠다고 생각이 들었다.

나의 경험을 공유하는 부분도 좋았고 스터디원들의 다른 경험을 듣는 부분도 너무 좋았다.

이게 퍼실리테이터분들의 말끔한 진행과 스터디원들의 높은 열정이 이 스터디가 매주 기대되는 이유인 것 같다.(이제 마지막라는게 아쉬울 따름)

memory

느낀점

1. 사용성 개선의 중요성
   • 유저는 나 혼자이지만 유저가 불편을 겪고 불편사항을 접수해서 개선해보는 일련의 과정을 통해서 사용성 개선이 왜 중요한지 알게 되었다.
   • 그리고 무엇보다 유저인 내가 사용성 개선 이후에 블로그 글 작성이 기본에 비해서 시간 단축이 많이 되서 부담을 느끼지 않고 정리해야 할 부분들을 잘 정리해서 기록할 수 있게 되었다.
2. 쉽지 않은 FullStack
   • Next.js에서 제공하는 api기능을 활용해서 supabase를 연동하고 CRUD(UD는 아직...)를 할 수 있게 구성하는 부분이 쉽지 않았다.
   • supabase를 처음 써보기도 했고 프론트엔드 작업을 할 때는 이미 구성되어있는 api를 호출해서 사용하기만 했었는데 이번에 모든 부분을 혼자서 처리하는 거에 있어서 시행착오를 많이했다.
3. 나는 정말 개발을 좋아한다.
   • 올해 개인적인 생각이 엄청 많았는데 블로그 개선작업을 통해서 내가 개발을 엄청 좋아한다고 느꼈던 것 같다.
   • 내 것을 만드는 거여서 그럴수도 있지만 블로그 작업할때 1-2시간만 해야지 했는데 시간보면 3-4시간이 지나있던 걸 생각하면 완전 빠져서 작업했던 것 같다.
4. 의구심이 만들어 낸 성장
   • 항상 내가 성장하고 있나? 라는 의구심을 가지고 있었다.
   • 이 의구심이 어느 순간 돌이켜보니 이미 나는 성장을 하고 있었던 것 같다.
   • 위의 일련의 과정들이 나의 의구심이 없었다면 진행되지 않았을 행동들이라고 생각한다.

24년 계획

끝나지 않은 성장의 늪

계속해서 성장을 멈추지 않기 위해서 공부는 계속 된다.

1. 인프런에서 수강한 실무에 바로 적용하는 프런트엔드 테스트 - 1부. 테스트 기초: 단위・통합 테스트를 마무리하고 실무에 바로 적용하는 프런트엔드 테스트 - 2부. 테스트 심화: 시각적 회귀・E2E 테스트를 추가로 수강하고 블로그에 해당 강의 내용을 적용해봄으로써 앞으로 있을 서비스 개선에 조금씩 도입을 해보자
2. 미뤄두었던 CS(Computer Science)강의를 완강하자

다음의 여정

1. 지금 회사에서 혼자서 프론트를 하다보니 같은 프론트 팀원과의 협업 경험이 없어서 이 부분을 해소하기 위한 사이드 프로젝트를 경험해보자.
2. 이력서는 꾸준히 업데이트 하자.

올해도 정말 나 자신이 너무 부족하다고 생각했는데 한해를 돌아보니 나름 잘 한 것 같다는 생각이 들었다.

내가 나 자신에게 가혹한 건 아닌가라는 생각이 든 한해였다.

그렇다고 내년에 느슨하게 풀어라 이렇게 바뀌지는 않겠지만 쉬어갈 때는 쉬어가는 것도 방법이라는 것을 명심하자!

올해 정말 수고한 나 자신 정말 대견해!

내년도 화이팅!