개발자로 1년 일하고 난후의 늦은 회고
스타트업에서 1년동안 했던 것 🏢
2022년 2월에 프론트엔드 개발자로 일을 하게 되었다. 기존에 하던 일을 그만두고 개발자라는 커리어로 일을 시작 하게 되었다는게 놀라웠다. 이제 부터 개발자 커리어를 시작할 수 있다는 사실에 설랬고 내가 나름 자랑스러웠다.
회사는 개발팀이 만들어진지 얼마 되지 않았었고, 이제 막 서비스를 런칭했던 찰나에 웹 프론트엔드 개발자를 채용한 것이었다. 나는 신입이었지만, 회사 개발팀에서 웹 프론트엔드 개발 포지션을 모두 담당하게 되었다.
회사에 들어가자마자 시작했던 프로젝트는 현재 플러터로 만들어진 모바일 앱에 들어가는 모바일 웹뷰 개발을 맡아서 진행했다. 항상 크롬 웹 브라우저환경에서 개발을 하다가 웹뷰 개발을 하다보니 환경이 조금 다른 탓에 어려움을 겪었던 기억이 있다.
사실상 첫 프로젝트는 회사에서의 그리고 내 커리어에서의 첫 프로젝트 였기 때문에 부담도 되었고, 잘 만들어서 증명해내고 싶었다. 결론적으로 심적으로 약 20%아쉽게 프로젝트를 마무리 하였다. 사실 기능들을 구현해 내는 것만으로도 온 힘을 쏟았다. 최적화, 컴포넌트 구조 설계 등에 대해서는 고민을 하지 못했다.
그래도 의미가 있었던 것은 모바일 웹뷰 개발을 경험했고, 프론트엔드 개발 환경 셋팅부터 시작해서 프로덕트 배포까지 한 싸이클을 돌았다는 것 이었다. 이것이 첫 프로젝트가 되어 그다음 랜딩 페이지, 어드민 페이지, 1대1 문의 게시판 웹뷰, CRM, 모바일 신규 웹뷰 개발 런칭을 해왔다.
기존에 있던 코드를 보고 개선하거나 기존에 있던 프로젝트를 바탕으로 기능을 추가하는 케이스가 아니라 모든 개발이 신규 개발이었다.
장점으로는 프론트엔드 개발의 시작부터 끝까지에 대한 경험은 많이 해봤다라는 것, 단점으로는 상대방의 코드를 볼 기회가 많이 없었다는 것.
아 그리고 디자인 시스템을 작게나마 도입해보려고 작년말부터 조금씩 컴포넌트 코드를 작성하고 있는데 자꾸 우선순위를 뒤로 보내게 된다. (뭔가 같이 할 사람이 있었으면 좋겠다….)
1년동안 프론트엔드 영역에서 할 수 있는 많은 영역을 했다. “웹뷰 개발”, “백 오피스 개발”, “랜딩 페이지개발” 등등.
-회사내의 자리-
-회사 초반엔 집에서도 일을 했다는..-
스타트업에서 1년동안 느낀점 💭
나는 첫번째 프로젝트 제외하고, 모든 프로젝트에서 무조건 하나라도 배울것을 찾고 적용하다는 생각으로 작업했다.어떻게 보면 프론트엔드 사수가 없다보니, 나 혼자 기술을 고민하고 선택해서 적용해야 했다. 나는 이 부분이 정말 좋은 기회이지 않았나 라고 생각이 든다. 더 나아가서 해당 솔루션?기술이 어쩌다 나오게 되었는지 이전의 무슨 불편함이 있어 출시하게 되었는지도 공부를 할 수 있었다. 예를들어 scss는 기존 css의 무슨 한계 때문에 출현하게 되었는지? 왜 scss를 쓰는건지? 이런 흐름으로 공부를 한다면 웹 개발의 과거 부터 지금까지의 전체적인 흐름을 익힐 수 있다는 부수효과도 얻을 수 있었다.
물론 일은 당연히 하고 돈을 받는 것이지만, 공부를 하면서 돈을 받는 느낌이랄까? 모든게 처음이었기 때문에 일===공부 였고 내가 주체적으로 공부하고 적용하고 하는 프로세스가 마음에 들었다. (물론 내가 욕심이 있다보니 더 주체적으로 했던 것 같다.)
스타트업이다 보니 순수 개발말고도 다른일을 할때도 있다. 예를들어 개발자 채용면접에 면접관으로 들어간다 거나, 새로운 개발 문화를 만드는 것, 기획에 참여해서 설득하고 협의?하는 것등. 모든 경험들은 앞으로 내 개발 인생에 도움이 될만한 것들이었다.
특히 면접관 경험은 어디가서 쉽게 못할 경험이지 않을까?ㅎㅎ
하지만 기술적으로 다양한 시도를 하면서 기술적인 인덱싱(경험 해본 기술 스택)은 늘어나고 있었지만, 어느순간 그 기술들의 근간인 자바스크립트, 자료구조, 혹은 리액트에 대한 근본지식에 대한 부족함을 느끼게 되었다. 무언가 만들어내고는 있지만, 왜 되는거지?, 어떻게 돌아가는건지에 대한 궁금증을 항상 pass하고 지나왔다.
그래서 다음 1년동안에는 라이브러리, 프레임워크, 새로운 기술들을 접한다기 보단 내가 알고 있는 범위내의 기술들과 언어를 좀 더 깊게 파고 있다.
추가로 프론트엔드 사수가 있었으면 좋겠다는 생각이 1년이 지나자마자 들기 시작했다. 회사 프로덕트의 웹 프론트엔드 영역을 같이 고민하고 나보다 더 나은 사람과 같이 일하고 싶다는 생각의 들었다. 혼자 무언가를 계속하다보면 고이기 마련이고, 같은 시간동안 성장 할 수 있는 폭이 상대적으로 작다고 생각을 한다.
현재의 목표 🏋🏻
-
디자인 시스템을 NPM에 배포 : 현재 비슷한 UI를 쓰는 프로젝트(레포)가 4개 정도 존재한다. 비슷한 UI이지만 그 비슷한 컴포넌트들이 각 프로젝트들에 묶여있다. 비슷한 컴포넌트들이 프로젝트 레벨에 존재한다. 정말 비효율적이다. 비슷한 UI들을 프로젝트에서 코드 복붙을해서 가져오거나 아니면 새로만들거나.. 이 비효율을 해결하기 위해, 만들고 있는 스토리북기반 디자인 UI 컴포넌트를 서비스 레벨로 한 단계 끌어올려야만 한다. 즉 NPM에 라이브러리화 시켜 따로 관리해야된다는 말이다.
각 프로젝트를 하면서도 이건 좀 비효율적이지 않나?라고 생각은 들었지만, 생각에서 그쳤다.. 사실 이 작업을 혼자 할 수 있을지 모르겠다;; 하지만 꼭 필요한 작업이라고 생각든다. -
웹뷰 프로젝트들을 모노레포로 관리 : 현재 모바일 웹뷰로 이루어진 레포지토리가 4개 존재한다. 각자의 기술 스택은 다르지만 “웹뷰”라는 비슷한 성격을 가지고 있기 때문에 모노레포로 관리 할 수 있다고 생각한다. “웹뷰”라는 비슷한 성격을 조금더 기술적으로 살펴 본다면 “네이티브 앱” <=> “웹뷰”와의 채널은 어느 레포지토리나 똑같이 사용하고 있기 때문에, 이 채널 기능을 라이브러리화 시켜 하나의 레포지토리에 관리를 하고 나머지 웹뷰 레포지토리들은 이 채널 라이브러리를 import해서 사용한다면, 코드 관리가 효과적일 것이라고 생각이든다. 아무리 생각해도 이상적인 방법임에 틀림없다. 하지만…. 할 수 있을까?;;
현재 내가 약하다고 생각하는 것 🙇🏼
-
성능 최적화 : 랜딩 페이지 말고는 성능 최적화를 위해 무언가를 해본적이 없다. 리액트에서 useMemo나 useCallback등으로 랜더링 성능 최적화 정도만 진행해 보았다. 아 추가로 코드 스플리팅으로 필요한 코드만 먼저 불러와서 최초 다운로드 받는 속도를 단축시켜 로딩 속도를 줄이는 것? 이미지 리사이징 작업은 아직 해본적이 없다. Next.js로 진행한 프로젝트는 next/Image 컴포넌트를 사용해서 next.js 서버가 자체적으로 이미지 포맷, 사이즈 등을 최적화 해주는 기능 정도를 사용해보았다.
사실 웹 프론트엔드에서 제대로된 최적화를 한다고하면 lighthouse 탭에서 LCP, FID, CLS들을 체크 받고 개선하는 작업, 그리고 performance 탭에서 각각의 그래프를 측정후에 어디서 라이브러리, 이미지 사이즈가 큰지, 자바스크립트 코드 병목 현상은 어디서 일어나는지 파악을하고 개선해 나가야된다고 생각한다. 언제 하지??;;; -
해당 라이브러리, 프레임워크의 깊은 이해 : 내가 대표적으로 겉핧기 식으로만 아는 큰 기술들은 recoil, react-query, Next.js 정도가 있는 것 같다. 그나마 React는 사용한지 제일 오래되었고, 어떤 식으로 돌아가는지에 대해는 100%는 아니지만, 반복 숙달을 통해 익숙해 졌고, Next.js도 사실 70%정도 이해를 하고 사용하는 것 같다. SSR지원의 대표적인 프레임워크인 Next.js는 내가 순수 React + Express.js로 SSR을 만들어본후 다시 마스터 해보려고한다.
-
더 나은 코드 고민 : 아까도 말했다시피, 모든 개발이 신규 개발이고 혼자 개발하다보니 남의 코드를 볼 케이스가 많이 없었다. 사실 큰 회사를 들어갈 수록 내가 새로작성하는 코드보다는 남이 작성한 코드를 이해하고 개선하는 업무에 시간을 더 많이 할애한다고 했다.
이 부분이 나름 큰 걱정이고, 이 부분을 해소하고자 잘 만들어진 오픈소스 라이브러리 github을 보고 코드 분석하는 경험이 대안일 것이라고 생각하여, 작은 잘만들어진 라이브러리부터 열어보려고한다. -
동작원리 : 자바스크립트의 동작원리는 알고있다. 하지만 이것을 내가 프로젝트를 작성하면서는 생각을 못한다. 동작원리 따로 코드 작성따로 이렇게 머리속에서 구분되어져있다.. 결국은 동작원리 기반으로 프로젝트가 돌아가고 있는 것인데 두개 영역의지식이 하나로 연결이 안된 상태이다. 무지성으로 프로젝트 코드를 작성하는 것보다 이제는 사이즈가 작을때 부터 어떻게 자바스크립트 코드가 동작을 하고 있는지 날잡고 파악을 해보려고한다.
-
알고리즘, CS : 언제한담?…
현재 내가 강하다고 생각하는 것 💪🏻
-
기술 영역의 인덱싱 : 내가 여러가지 기술들을 적용해본 다른 이유는 다른 개발자들이 개발 이야기를 할때 알아 듣기 위해서이기도 하다. 예를들어 “라이브러리를 번들작업할때는 webpack보다 rollup이 더 낫더라” 라는 이야기를 알아 들으려면 번들링이 뭔지? webpack은 뭔지, rollup은 뭔지? rollup이 왜 더 나은지? 단어랑 의미는 검색하면 바로 나오겠지만, 왜 빠르다고하는지 번들링하는 이유는 뭔지는 한번은 직접해봐야하는 게 아닌가?라는 생각으로 기술을 체험해보고 내 노션이나 머리속에 indexing 작업을 해놓았다. 다음에 실제 프로젝트에서 쓰게될때 그때 깊게 이해하면서 쓰면 될 것 같다.
-
웹 개발의 전반적인 사이클 : 나는 현재 이 회사에 다니면서 프론트엔드 영역 뿐만아니라 Express 기반 API 개발, 프론트엔드 레포들을 배포하고 nginx 설정하는 것, gitlab-runner를 사용한 CI-CD 구축, 약간의 쿼리문 작성등을 해보았다. 물론 웹 개발은 너무나 광 범위하다, 하지만 웹 개발이라 칭하는 보통의 프로세스들 프론트엔드 개발, 백엔드는 정말 살짝..(DB는 다뤄보지 않았기 때문), 빌드, 배포 까지 경험해 보았다. 웹 개발은 너무 광범위 하기 때문에 나무가 아닌 숲의 범위에서 바라보아야 할때도 있다. 그래야 다른 스택의 개발자들과도 이야기를 할 수 있고, 백엔드 개발자가 무엇을 말하는지 이해하고 내 의견을 전달 할 수 있다고 생각한다.
-
모바일 웹뷰 개발 능력 : 요즘에는 모바일 앱이 굉장히 많이 출시된다. 네이티브 앱 개발말고도 웹뷰 개발도 회사들이 많이 선택하는 개발이다. 네이티브 앱 기술로만 컨텐츠들을 구성한앱은 없다.(이유는 블로그 참고) 그렇다면 앱 개발자들과 웹 프론트엔드 개발자들도 소통을 하게 될텐데, 웹 개발자가 앱 개발자에게 뭐가 필요한지 요청을 해야만 앱 개발자들이 네이티브의 웹뷰 컴포넌트의 옵션들을 config할 수 있다. 요즘 앱 서비스들도 only 네이티브 만으로 개발을 하는 경우는 없기 때문에 웹뷰 컨텐츠가 들어간다. 이 작업에 대해서는 자신감이 생겼다.
기타 💼
회사업무 개발 공부 이외에도 외부 활동들을 조금씩 하고 있다.
- 항해 99 기술 매니저 : 여유가 있다면 지원해서 기술 매니징 및 멘토링을 하고 있다.
- 한빛 Previewer : 올해 초에 선정이 되서 시작을 하게 되었는데, 아직은 본격적인 작업은 시작하지 않았다. 해외 개발 문서들을 검토하고 더 나아가 번역까지 참여할 수 있다고 한다.
- 오프라인 직무 교육 : 5월 25일에 송파구에서 진행하는 직무 교육에서 IT분야로 직무 강의를 하게 되었다. 오프라인에서 강의 형식으로 하는 경험은 태어나서 처음인데, 앞으로도 좋은 경험이 될 것 같다.
- 스파르타 코딩클럽 강의 촬영 보조 튜터 : 이번에 4월말에 ChatGPT를 활용하여 클론코딩 하기 라는 강의를 출시했는데, 강의는 메인 튜터가 담당을 했고, 나는 수강생들이 보는 수업 강의 자료를 만들어 같이 출시를 했었다.
올해의 전체적인 목표 📚
테니스를 시작하려고한다. 인생이 개발이다 보니, 몸이 허약해 졌다. 활동적인 운동을 하나 해서 몸을 다시 young하게 만들 예정이다. 글쓰기를 제대로 진행해보려고한다. 기존에도 브런치에서 글을 연재하고 있지만, 사람들이 읽고 싶어하는 글은 아닌 것 같다는 생각이 들었다.손으로 글을 쓰는게 아닌 머리로 글을 쓰려고 노력할 것이다. 6월에 부모님께서 만들어 달라고 하시는 서비스?가 있는데 그것을 조금씩 시작하려고한다. 프로젝트 셋팅부터 공통화 작업을 해놓고 개발을 시작하려고한다.
올해 사고 싶은 것 💵
- 아이폰 15 : c타입으로 바뀐다고 한다.. 🥹
- 맥북 : 집에 오래된 맥북을 처분하고 새로운 맥북으로 바꾸고싶다!! 16inch VS 13inch
댓글남기기