개발자 취업 그 이후의 일상

끝이 없는 배움의 길..

프론트엔드 개발자로 일을 시작한 지 어느덧 3개월을 채워가고 있다. 개발자로 취업해서 행복하게 잘 살고 있습니다!!라고 하고 싶지만 새로운 커리어를 시작한다는 건 역시나 쉽지 않은 일이었다. 그간 부트캠프의 과제들도 어려웠다고 생각했지만 월급을 받는 개발자로서 내가 마주해야 하는 문제들에 비한다면 그냥 학습지 푼 수준에 불과했던 것.... 근무 환경 자체는 재택근무인 데다 정해진 근무시간도 없어서 그냥 내가 일 하고 싶은 시간대에 일하고 결과물만 내면 되는 아주 자유로운 환경이라 마음에 든다. 그렇지만 나는 프론트엔드 개발자로 고용된건데 어느새 정신을 차려보니 혼자 모든 걸 다 하고 있고요..? 백엔드 구축하는 건 CTO가 할 거니까 나는 프론트엔드단의 UI 요소와 데이터 처리 로직만 신경써주면 된다고 하더니 내가 어느정도 파이어베이스를 다룰 줄 알아 보인다 싶으니 파일 스토리지, 데이터베이스, 로그인 프로세스까지 모조리 다 만들고 배포까지 해달라고 해서 결국은 혼자서 프로덕트 전체를 개발하고 있다. 혼자 제품의 모든 부분을 개발한다는 게 쉽지는 않지만 그만큼 정말 많은 걸 배우고 느꼈다.

기초는 정말 중요하다

부트캠프에서는 일단 빨리빨리 뭐라도 동작하는 제품을 만들어내기 급급했어서 HTML 시맨틱태그나 CSS 선택자 네이밍 규칙들을 신경써가며 코딩하기가 어려웠었는데, 이것들을 차근차근 프로젝트 초반에 정리해두지 않으면 나중에 생성하는 페이지의 양이 늘어나면 늘어날수록 다른 페이지의 CSS 코드가 다른 페이지의 레이아웃을 박살내버리는 헬파티가 벌어진다는 걸 깨달았다...ㅎ 그리고 제대로 바닐라 자바스크립트 동작 원리를 이해하지 않은 채 프레임워크들에만 의존했었다 보니 내 코드가 어떻게 브라우저를 컨트롤하고 있는지를 정확히 이해하기가 어려워서 디자이너가 요청하는 디테일한 요소들을 구현하기가 어려웠다. 그래서 유저가 브라우저에서 발생시키는 다양한 이벤트가 HTML 요소에 바인딩되는지, 자바스크립트가 DOM을 어떻게 컨트롤하는지를 정확히 이해하는 게 중요하다는 걸 깨달았다.

그래프, 체크박스, 표 텍스트 색깔 맞추려고 Dom 트리를 샅샅이 훑어야 했다^_ㅠ

커스터마이징의 신세계, SVG와 Canvas

이 회사의 프로젝트 매니저이자 UX 디자이너님은 때로는 다소 창의적인 요구사항들을 주시곤 한다.. 우측 상단의 버튼이 클릭되면 그 버튼이 점점 확장되면서 다음 페이지로 넘어가는 트랜지션을 넣어달라고 하거나, 기존에 사용하던 라이브러리에 없는 차트를 만들어달라고 하는 등의 까다로운 커스터마이징을 요구하셔서 이번 프로젝트를 하면서 처음으로 Canvas element를 제대로 써봤다. 지금까지는 canvas나 svg 코드를 마주칠때면 암호같이 느껴져서 대충 지나치곤 했는데 이번에 한번 이리저리 뜯어보며 써 보고 나니 이것들을 잘 활용하면 커스텀하지 못할 디자인은 없겠다는 생각이 들었다. 이걸 계기로 이미지 렌더링 작업에 조금 흥미를 느끼게 되어서 WebGL쪽도 좀 더 공부해봐야겠다는 의욕이 생겼다.

모든 트랜지션과 도넛차트들을 캔버스로 한땀한땀 만들었당..ㅎ

코드 디자인 패턴의 중요성

나에게 할당된 프로젝트 범위가 갑자기 늘어나게 되면서 프로젝트 관리 페이지들도 만들어야 했다. 디자이너가 요구한 구현 사항은 유저가 데이터베이스에 저장해둔 프로젝트 정보를 불러옴과 동시에 같은 셀렉트 박스 선택 옵션에 따라 수정 모드로 변환되는 페이지를 만들어주길 원했다. 한 페이지에서 아예 프로젝트를 생성할 수 있도록만 만들거나 수정할 수 있게만 만들면 훨씬 간단했겠지만, 두 개의 모드를 오가도록 페이지를 구현하는 건 정말 어려웠다. 게다가 클라이언트 이름을 선택해야만 프로젝트 셀렉트 박스를 볼 수 있고, 프로젝트를 선택해야만 프로젝트 상세 내용을 입력하는 박스를 보여달라는 렌더링 조건도 걸려있었어서 데이터를 처리하는 로직과 페이지의 뷰를 처리하는 로직이 정확하게 동기화되도록 코드를 구조화하는 게 너무 어려웠다. 이에 덧붙여서 유저의 로그인 정보는 vuex store에 따로 저장해서 전역적으로 접근할 수 있도록 만들어두었는데, 파이어베이스 데이터베이스와 vuex의 상태까지 정확하게 동기화시켜줘야 하는 대환장파티를 겪어야만 했다....처음에 내가 짰던 코드는 내가 생각했던 몇가지의 유저 흐름에 따라 콜백함수를 호출하는 방식으로 짜여진 좋게 말하면 절차지향적(사실 스파게티)인 코드였는데 유저 흐름이 내가 예측할 수 없을 만큼 다양하게 발생할 수 있는 시나리오다보니 한 케이스에 맞는 코드를 만들어두면 다른 케이스에서 오류가 나는 상황이 반복됐다. 결국 이 한 페이지를 만드느라 일주일을 끙끙댔는데, 옆에서 삽질을 지켜보던 남자친구가 이건 FSM (aka Flyng spagetti Monster)패턴을 이용하면 해결할 수 있겠다며 조언해주었다. 어플리케이션에서 렌더링해야 하는 모든 가능한 조건의 상태들을 스위치문으로 규정해두고, 선택된 셀렉트박스 옵션이 변경될 때마다 어떤 상태로 이행되어야 하는지를 정의하는 함수를 분리하여 작성해 셀렉트박스 옵션 변경 시에 발생하는 이벤트에 바인딩해주는 방법으로 코드를 아예 새로 짰는데, 훨씬 이해하기 쉬운 코드로 리팩토링할 수 있었다. 그리고 리팩토링하면서 깨달은 건데, 지금까지 내가 짜는 코드들은 한 콜백함수 안에서 모든 데이터 처리 사항들을 때려넣는 매우 지저분한 코드라는 것이었다.. 최대한 한 함수 안에서는 하나의 로직만 처리할 수 있도록 함수를 분리하는 게 좋은 것 같다. 이 난리를 한번 겪고 나니 복잡한 문제들을 논리적으로 정의할 수 있는 코드 패턴을 더 공부하고, 좀 더 확장성을 고려한 코드를 짜기 위한 고민들을 해야겠다는 생각을 했다.

이렇게 스파게티같이 꼬인 상태들을 오가는 코드를 만들어야 했다....

파이어베이스의 유용함

마케터 시절의 나에게 파이어베이스란 앱 트래커였었는데, 사실 트래커는 수많은 파이어베이스 기능 중 하나일 뿐이었던 것이었다.. 파이어베이스를 사용하면 따로 서버를 구축하지 않고도 로그인, 데이터베이스, 클라우드 저장소, 호스팅까지 한 번에 관리할 수 있어 나같이 온갖 일을 혼자 다해야 하는 개발자에게 적합한 플랫폼이었다. 부트캠프 그룹 프로젝트에서 Passport를 이용해서 로그인 인증 모듈을 만들었을 땐 뭔가 엄청 복잡하게 해야 할 일들이 많았는데 파이어베이스로는 로그인 인증은 물론 비밀번호 찾기 같은 기능들까지 쉽게 구현할 수 있었다. 그리고 유저 관련 정보를 저장하고 파일 업로드 모듈을 구현하기 위해서 실시간 데이터베이스와 클라우드도 함께 사용했는데, 클라우드 CRUD를 제어하는 명령어가 직관적이라 금방 이해할 수 있었고, 실시간 데이터베이스는 NoSQL 기반이라 MongoDB를 주로 써온 나는 그다지 어렵지 않게 사용할 수 있었다. 노드로 백엔드를 전부 구현하는 것에 비해 훨씬 개발기간이 짧다는 게 장점이긴 하지만, NoSQL만 적용 가능하고, 쿼리를 디테일하게 날릴 수가 없어 많은 데이터를 요청하게 되는 경우 반응속도가 느리다는 평이 많아서 데이터 처리량이 많은 서비스에 적합한지는 잘 모르겠다. 트래픽이 늘어나게 되면 비용이 비싸지기도 하고..

Vue vs React vs Angular?

이번 프로젝트를 하면서 Vue에 완전히 익숙해졌는데, 이로서 리액트, 앵귤러, 뷰 프런트엔드 프레임워크, 라이브러리 삼대장을 모두 접해보게 되었다. 각각의 선호도를 매기자면 리액트>뷰>>>>>>>>>앵귤러 쯤이랄까.. 아무래도 앵귤러는 타입스크립트를 강제로 써야 하기 때문에 다른 툴들에 비해 개발할 때 신경 써야 할게 많고 시간도 조금 더 걸릴 수 있겠지만, 만약에 여러 개발자들과 규모 있는 프로젝트를 해야 한다면 앵귤러가 좀 더 안정적으로 체계적인 프로젝트를 진행하는데 적합할 것 같다. 뷰는 셋 중에 가장 배우기 쉬웠던 프레임워크였지만 리액트와 비교하자면 넘사벽으로 아직 커뮤니티가 좁은 것 같고, 사용할 수 있는 패키지들도 리액트에 비교해서 많지 않다는 단점이 있다. 개인적으로는 Vue 보다는 JSX 문법을 사용하는 리액트가 유연하게 DOM을 컨트롤 하기에 더 편하다는 느낌이 들었다. 그리고 타입스크립트를 적용하는 것도 리액트에서 아직은 더 안정적이라고 들었고, 무엇보다 나는 ❤️그래프큐엘❤️ 을 사랑하기때문엨ㅋㅋㅋ 앞으로는 리액트를 더 많이 다루는 프로젝트를 해보고 싶다.

사실 취업하고 나서 그동안 엄청난 슬럼프의 시간을 겪었다. 매일 마주하는 문제들은 너무 어려운데 도움을 줄 수 있는 사수는 없고, 내가 마음먹은 만큼 프로젝트는 진전되고 있는 것 같지가 않아서 극도의 우울감과 불안감에 시달렸다. 그토록 바라고 꿈꾸던 프로그래머로서의 취직이라는 목표는 이루었지만 아직도 인정받는 개발자가 되는 길은 멀어보이기만 해서 그냥 다 내려놓고 쉬고 싶었다. 결국 몇 주 전부터 우울증 약의 도움을 받기 시작했는데, 두통이 엄청 심했던 몇 주 간의 적응기를 거쳐 지금은 좀 안정되었다. 왜 나는 상위 5%의 개발자들처럼 문제를 척척 해결할 수 없는걸까 자괴감에 시달리면서 스스로를 다그치기만 했었는데, 일단 조급하게 생각하지 말고 오늘 내가 목표한 만큼의 문제들만큼은 꼭 해결해보겠다는 마음으로 하루하루를 보내기로 했다. 아직 내가 좋은 개발자인지 아닌지는 모르겠지만 포기하지 않고 주어진 문제에 최선을 다하다 보면 언젠가 훌쩍 성장한 나를 마주할 수 있으리라 믿어본다.