📜

2021년 9월, 회고 + 새롭게 보고 배운 것들

태그
회고
최종 편집
Dec 30, 2022 2:31 AM
발행일
September 30, 2021

9월 회고

프론트엔드 엔지니어로서 나의 부족함을 많이 느꼈고, 그래서 공부가 아주 재미있었던 보람찬 한 달이었다.

  • 만 34세 생일과 KCD 입사 3주년을 기해 인생 계획을 다시 세워봤다(기회가 되면 공개해보자).
  • 회사에서 프론트엔드 팀 빌딩 과정을 정리해서 공유했다. 이건 블로그 글 두 편 정도로 다시 정리해볼 생각이다.
  • 블로그를 다시 시작했고, 회사에서도 팀 블로그 개설을 준비하고 있다. 열심히 설득해서 super.so 를 써보기로 했다.
  • 이 글 포함해서 이번 달에 블로그 글 8개를 썼다. (월간회고 2개, 생각 정리 3개, 기술 글 2개, 공개 안한 인생 계획 글 1개) 좀 버닝한듯 싶은데 그만큼 재밌었다. 남은 글감도 많다. 기술 글 중 하나는 GeekNews에도 직접 올렸는데 upvote를 꽤 받아서 기분 좋았다.
  • 리콘랩스에서 간단한 컨설팅도 했는데, 이 준비 과정에서도 많은 공부를 했다.

공부와 경험을 글로 공개할 생각을 하니까 하나하나 철저하게 파보게 되고, 글 쓰는 것 자체도 재미있었다. 이런 상태가 오래 지속되길 바란다.

새로운 개발 유튜브 채널 구독

  • 개발바닥: 개발 블로그로 유명하신 향로님과 호돌맨님이 개발 썰 푸는 채널인데 재미도 있고 쉬엄쉬엄 듣기에 좋았다. 영상이 아주 자주 올라오는 건 아니다보니 열심히 본 게 아닌데도 거의 다 본듯하다. 영상 중 하나에서 배달의민족 신입 개발자 이력서가 공개되었는데 진짜 최상급이어서 자극이 많이 됐다. KCD 입사 후 3년간 이력서를 안 건드렸는데 정리 좀 해야겠다.
  • FE재남: NextJS로 만든 작은 신규 프로젝트에 우리 디자인 시스템을 써보려고 하니 모듈 관련 에러가 났다. 이쪽 지식이 많이 부족했다는 걸 깨닫고 공부하는 과정에서 알게 된 채널이다. 주로 강의나 스터디하신 영상을 올리는 것 같았는데, ES2015+ 제대로 알아보기 - 3. 비표준 모듈 시스템들 (CommonJS, AMD) 영상이 이해 잘 되게 설명을 잘하셔서 처음 개념 잡는 데 도움이 됐다. 리팩토링 JS 에디션, Effective Typescript, JavasScript Deep Dive 등 그동안 사놓고 아직 다 못읽은 책들의 스터디 영상도 있길래 틈틈이(주로 설거지하면서) 보고 있다.
  • LeadDev: 존경하는 멘토인 김정훈님을 오랜만에 만나서 소개받았다. https://leaddev.com/ 라는 웹사이트도 운영하고 있는 곳인데, 주로 시니어 또는 리드 포지션의 개발자들이 관심있을 만한 주제로 패널 톡을 한다. 엔지니어 커리어 사다리를 운영하는 방법에 대한 영상이 재미있었다.

팀 관리, 협업, 생산성

  • CEO를 위한 운영 및 내부 커뮤니케이션 전략: GeekNews Ask에 어떤 분이 "코더에서 CEO가 되는 것에 대한 리소스가 뭐가 있을까요?" 라는 질문을 올렸다. 거기에 xguru님이 달아주신 답글에 있는 링크였는데 요약만 봐도 내용이 너무 좋았다. 내가 CEO는 아니지만 조직의 리더라면 생각해볼 만한 질문들이 많았다.
  • Product vs Feather Teams: 개발팀 동료인 Will에게 추천받았다. 팀의 종류를 'Delivery Team'과 'Product Team', 'Feature Team'으로 나누고, '제대로 위임받은 프로덕 팀'이 얼마나 강력한지 그리고 그렇지 않으면 협업하면서 유의미한 결과를 만들어내는 게 얼마나 어려운지 굉장히 직설적으로 말하는 글이었다. 내가 속한 조직이 이렇게 운영되게 하려면 어떻게 해야 할까? 도 고민이 많이 됐고, 이직한다면 이런 조건에 맞는 팀으로 가고 싶다는 (그러니 이 기준에 맞춰 그 회사를 잘 탐색해야겠다는) 생각도 들었다.
  • 엔지니어링 생산성은 어떻게 측정하나: "생산성"이라는 주제는 예전부터 관심있었지만, 예전에는 나 개인의 생산성이었다고 한다면 팀 리드가 되고 나서부터는 팀 생산성을 위주로 생각하게 되었다. 이 글은 Software Engineering at Google에서 Measuring Engineering Productivity 챕터를 소개하는데 무릎을 탁 치게 만들었다. KCD 프론트엔드 팀이 생산성 향상을 위해 어떤 노력을 하고 있는지에 대한 글을 준비하고 있는데, 이것도 써먹어볼 생각이다. 글에 소개된 '개발 생산성 목표의 5가지 축'은 다음과 같다.
    • Quality of the code(코드의 품질) 이 작업을 통해서 코드의 품질이 개선되는지를 의미한다.
    • Attention from engineers(엔지니어의 집중) 엔지니어들의 집중도를 향상시키는지 혹은 산만하게 만드는지를 의미한다.
    • Intellectual complexity(지적 복잡성) 업무를 완수하는데 있어서 어느 정도의 인지적 부하를 발생시키는지, 문제를 해결하기 위해 불필요한 처리를 하거나 내재되어 있는 복잡도를 얼마나 이해해야 하는지에 대한 상태를 의미한다.
    • Tempo and velocity(주기와 속도) 개발을 완료하는데 드는 속도와 주기의 측면을 의미한다.
    • Satisfaction(만족) 자신의 작업이나 제품에 대해 얼마나 만족감을 느끼는지에 대한 부분을 의미한다.

JavaScript, TypeScript, React

  • Children types are broken: TypeScript Weekly에서 봤다.
    • React.ReactNode 는 내부적으로 {} , null ,undefined 타입을 모두 허용한다. 특히 {} 때문에, 사실상 모든 오브젝트를 children으로 넣을 수 있다. 실제로 렌더링할 때는 에러가 나는데도 불구하고.
    • 하위호환 때문에 못 고치고 있다고 하는데 우리가 내부에서 쓸 때는 ReactNode 대신 {} 를 제거한 타입을 쓰는 게 좋겠다.
  • Virtualize large lists with react-window: web.dev 훑어보다가 발견했던 것으로 기억한다.
    • Virtualized list라는 개념을 이용해서, 긴 아이템 목록에서 뷰포트 윈도우 내에 있는 아이템만 렌더링하고 나머지는 지연 로드하는 기법.
    • 캐시노트의 "리뷰 관리" 프로젝트에서 무한스크롤을 직접 구현했는데, react-window를 써보는 것도 괜찮아 보인다. 시도해봐야지.
  • File-based routing with React Router: bytes.dev 뉴스레터에서 읽었다.
    • NextJS처럼 파일시스템 기반으로 라우팅하는 걸 직접 구현한 예제다.
    • 캐시노트 웹 프론트엔드에서도 이와 살짝 유사한 어프로치를 취하고 있어서 흥미롭게 읽었다. 우리가 이 구조를 어떻게 잡았는지는 조만간 블로그 글로 써볼 생각이다.
  • 양방향 데이터 바인딩: 개발바닥 유튜브에서 프론트엔드 개발자 면접 질문으로 언급되길래 찾아봤다.
    • 나는 Angular와 Vue를 안 써봤는데, parent → child로만 데이터가 전달되는 (그래서 다시 위로 올리려면 Context API든 상태관리 도구든 써야 하는) React와 달리 이 둘은 프레임워크 단에서 children이 parent로 데이터를 전달할 수 있도록 지원한다.
    • 확실히 코드 양은 감소하겠으나 데이터 흐름을 파악하고 디버깅하기 어렵겠다고 생각했다.
  • JavaScript의 모듈에 대한 여러 공부들. NextJS에서 esm 모듈을 사용하지 못하는 문제를 해결하기 위해 시작했다. CommonJS/AMD/ESM에 대해 더 잘 이해했고, 번들러들이 tree shaking을 어떻게 하는지도 어느정도 파악했다. 좀 더 정리가 되면 블로그 글로 남길 생각이다.

Testing

  • Screenshot testing with ViteShot: ViteShot이라는 도구를 이용해 빠른 속도로 코드 스크린샷을 찍어서 UI 상태를 테스트하는 방법을 가이드해준다.
    • 렌더링된 HTML을 저장해두는 스냅샷 테스팅은 익히 들어왔고, 별 효용을 못 느끼고 있었지만, UI 상태를 이미지로 저장해서 확인한다는 건 생각을 못했었다.
    • 이런 걸 쓰면 Jest만을 이용한 컴포넌트 테스트가 CSS나 UI 상태를 잘 드러내지 못한다는 걸 상당히 커버할 수 있겠다는 생각이 들었다.
    • https://reactpreview.com/ 라는 괜찮아 보이는 VSCode 플러그인도 알게 됐다.
  • 10 Rules of Front-End TDD to Abide By: bytes.dev 뉴스레터에서 봤다.
    • 아직 우리 팀에서 TDD를 하고 있지는 않지만, 올 4분기에는 테스트와 SLA에 대해 훨씬 더 신경써보려고 하기 때문에 눈길이 갔다. 일반적인 프론트엔드 테스트에 대해서도 좋은 조언이 많았다.

CSS, UX

  • https://web.dev/learn/css/: 구글의 CSS 학습 자료. 내용이 상당히 괜찮았다. 쓱 훑어보면서 내가 정확하게 몰랐던 내용을 정리해서 짧은 블로그 글로 써볼 생각이다.
  • 무한스크롤의 장단점: 캐시노트의 "리뷰 관리" 프로젝트에 무한스크롤을 적용하면서, '프로젝트 간 일관성을 위해 기존에 페이지네이션으로 구현된 것들도 무한스크롤로 바꿔야 하는가? 어떤 기준으로 무엇을 선택할까?' 에 답하기 위해 리서치하던 도중 디자인 팀에서 전달해주신 자료. 전반적으로 공감가는 내용이었고, 그래서 무한스크롤은 전체 적용은 안 하고 필요한 곳에만 하기로 결정했다.
  • Thinking on ways to solve SPLIT BUTTONS: Google Chrome Developers 유튜브 채널의 GUI Challenge 시리즈. 코드가 여러 브라우저에서 어떻게 보이는지 영상에서 바로 보여줘서 좋다. text-shadow 는 다크 테마에서는 빼는 게 더 시인성이 좋다는 식의 구체적 조언도 얻을 수 있었다. 캐시노트의 디자인 시스템이 다크 테마로 확장하는 걸 염두에 두고 개발했긴 했는데, 실제로 적용은 안해봐서 해보고 싶다.

DevOps

리콘랩스에서 CI/CD와 DevOps에 대해서 질문해왔는데, 너무 겉핧기로만 알고 있었어서 이 기회에 개념을 잡으려고 자료를 많이 찾아봤다. 그리고 내가 (우리 팀이) 얼마나 부족했는지도 잘 실감하게 됐다. 😅

공부하면서 든 생각 몇 개.

  • 좋은 CI/CD 파이프라인이 프로덕의 성공을 담보하지는 않으며, 제대로 파이프라인을 구축하려면 많은 시간과 노력이 들기 때문에, 트레이드오프를 고려하여 조직에 도입해야 한다. 프로덕 마켓 핏을 찾을 때까지는 이런 절차 중 일부만 적용한 채 가설 설정과 실험을 제대로 빨리 돌리는 게 좋을수도 있다.
  • 그러나 조직 구성원들이 더 중요한 일에 더 많은 시간을 쓸 수 있게 도와주고, 개선된 프로덕을 더 빠른 속도로 내보낼 수 있게 도와주기 때문에 제대로 할수록 장기적으로 더 이득이 될 것이다. 또한 스타트업 입장에서 대부분을 신경 안써도 되게 github에 통합해서 쓸 수 있는 도구도 많으니, '시작'하는 데는 충분할 것이다.
  • CI/CD의 목적을 마음 속 싶이 이해한 채, 제대로 된 “지속적 통합/배포"를 실천하는 팀이 (한국 스타트업 중에는) 그리 많지 않을 것 같다. CI/CD의 엄밀한 정의와, 구글 DevOps 가이드에 있는 기준을 생각해보면 KCD에도 부족한 점이 무척 많다.

관심이 가는 도구들

  • stylex: 페이스북에서 제안한 방식의 CSS-in-JS 툴. (소개영상)
    • 영상 볼 때 괜찮아 보인다고 생각하고 메모해 뒀는데, 실제로 사용을 안한 채 n주가 지나고 나서 다시 보니 왜 좋다고 생각했는지는 기억이 안 난다...;
  • jq: a lightweight and flexible command-line JSON processor.
    • CLI에서 JSON 형태의 데이터를 접근해서 다루기 편하다고 한다. 고유 문법이 있는데 아주 직관적이진 않았다.
    • 팀 동료 Chris가 AWS CLI로 작업할 때 결과물 확인할 때 쓰는 걸 보고 나도 설치.
  • Bit: 컴포넌트, 타입 정의, 유틸리티 코드 스니펫 등을 npm에 패키지 올리듯이 올려서 공유할 수 있게 해주는 도구.
  • Relate SaaS 리스트: GeekNews Show에서 발견. 괜찮은 SaaS 툴들을 큐레이션해준다.
    • 개발 관련 도구는 별로 없고 대부분 조직 내 협업을 돕거나 생산성 향상을 위한 도구들로 보였는데, 현재 정리된 목록이 나쁘지 않아서 구독했다. 써볼까 싶은 것들도 종종 보였는데 아직 시도해보진 않았다.
  • NoteGarden: GeekNews Show에서 발견. 프로그래머/의학/법학/언어 공부/각종 시험 준비등 학습자를 위한 노트테이킹 도구.
    • Spaced Repitition 알고리즘 기반으로 최적의 복습주기를 계산해서 학습을 도와준다. 이쪽으로는 Anki가 대표적이었다. 나도 이전에 Anki를 쓰다가 지금은 안 쓰고 있는데, Anki를 써서 공부할 만한 주제가 다시 생기면 대신 이걸 써봐야겠다.
  • zero: GeekNews에서 발견. 스타트업이 첫날부터 개발 & 배포 가능하게 해주는 부트스트래핑 도구.
    • SaaS 개발을 위한 기초 인프라를 웬만한 건 다 셋업해준다. 월 $150쯤 된다는데, 스타트업 입장에서 부담이 되는 돈이라고 생각할 수도 있고 최대한 빨리 핵심에만 집중할 수 있게 해준다는 측면에서는 괜찮은 비용이라고 생각할 수도 있겠다. 또는, "SaaS 프로덕 운영하려면 이런 것들은 필요하다"라는 지식을 얻을 수 있는 도구로도 볼 수도 있을듯.

그 외 재미있게 읽은 링크들

  • 컴퓨터에 파일을 보관하는 방식과 세대 차이: 페북에서 봤다.
    • 디렉토리의 시대는 끝났다. 이제는 검색의 시대다. 물론 나는 구세대(?)라 아직 이 시대를 완전히 받아들이진 못한 것 같지만.. 파일이나 컨텐츠의 적절한 위치를 고민하면서 "찾기 쉬운 위치에 두기"보다는 "찾기 쉬운 키워드를 태깅"해두는 게 더 편리하다는 것은 잘 느끼고 있다.
  • 내수용 감각(interoception) - 행복감을 주는 숨겨진 감각: 위 링크 보고 오랜만에 뉴스페퍼민트에서 다른 글 올라온 거 없나 보다가 찾았다.
    • 명상, 일기쓰기, 운동 등을 할 때 왜 정신건강이 좋아지는가, 가 좀 더 잘 이해됐다. 내 몸의 신호를 잘 인지하는 훈련이 곧 감정을 잘 통제하는 훈련이 될 수도 있겠다는 생각도 했다.
  • 10분 만에 훑어보는 TCP와 UDP, HTTP/3는 왜 UDP를 선택한 것일까?: 전자는 페북에서 우연히 봤고 후자는 전자에 링크되어 있었다. OSI 7 layers에 대해서는 학부 때 이후로 생각해본 적 없었는데 재밌게 읽었다.
    • TCP는 신뢰성이 높은 대신 느린데, 신뢰성을 높이기 위해 규약을 아주 빡빡하게 만들어둬서 속도를 개선하기 위한 시도를 많이 할 수 없다.
    • UDP는 TCP가 신뢰를 보장하기 위한 방법들을 다 빼버려서 빠르게 한 대신, 개발자가 신뢰성 보장을 위해 여러 꼼수를 더할 수 있는 여지를 많이 남겨뒀다. 이를 이용해서 구글이 만든 QUIC은 신뢰성과 속도를 다 잡았다고 한다.
    • 이걸 내 개발자 삶에서 어떻게 활용할지는 아직 모르겠다. HTTP/3를 의도적으로 선택하거나, 인지한 채 웹개발하기에는 내 내공이 부족하거나, 그런 게 필요한 도메인에 있지 않았던 것 같다.
  • 달러 예금을 이용한 자산 증식: 유튜브에서 이게 왜 나에게 떴는지 모르겠지만 흥미롭게 시청했다.
    • 난 지금은 대출 갚고 남는 돈은 모두 (워렌 버핏의 말을 따라) KODEX 미국 S&P 500선물(H) 하나에만 넣어뒀고, 적금 붓듯 매달 조금씩 더 사고 있다. 외환 시장에 대한 지식이 없기 때문에 일부러 SPY라든가 미국 시장에서 파는 인덱스펀드를 달러로 사는 대신 그냥 한국 걸 샀다. 이 영상을 보고 나니 달러 쪽으로 조금 분산해둬도 좋겠다는 생각이 든다.
  • 2020년 주요 스타트업 실적, 업종별 정리: 페북에서 본 아웃스탠딩 기사. 4월 기사인데 지금 봤다. 코로나가 시장에 어떤 영향을 미치는지, 누가 잘하고 있는지 보여서 재밌었다.