1. 우아한테크코스에서의 기술 성장 기록

시리즈

0. 우아한테크코스 회고
1. 우아한테크코스에서의 기술 성장 기록
2. 우아한테크코스에서의 자기 성장 기록
3. 우아한테크코스에서 후회되는 점

1. 우아한테크코스에서의 기술 성장 기록

우아한테크코스를 진행하며 기술적으로 정말 많이 성장했다고 생각한다. 어떤 부분이 부족했었고, 어떤 노력을 통해 얼마나 성장할 수 있었는지 서술하고자 한다.

1. JavaScript 성장

우테코 이전에 자바스크립트를 정말 못 했던 것 같다. 리액트 개발자로서 자바스크립트의 중요성은 익히 들어 알고 있었다만, 왜 중요한지 어떤 점을 잘 해야 하는지 알지 못 했다. spread operator, 불변성, Promise, nullish coalescing 등의 개념을 알고 사용할 줄 안다면 자바스크립트를 잘 하는 것이라고 생각했다. 그래서 스스로 문제점을 파악하지 못 했었다. 추후에 “자바스크립트가 중요하다는 말은 어떤 의미일까?” 를 주제로 하나의 글을 쓰려고 생각 중인데, 지금은 간단하게 언급해보겠다. 실행 컨텍스트, 프로토타입, 생성자 함수, 이벤트 루프와 큐를 잘 알아야 자바스크립트를 잘 하는 것이다. 이들은 실제로 개발하면서 직접적으로 사용해본 적이 없는 것일 가능성이 높다. 이들은 자바스크립트의 철학, 평가 및 실행 과정을 이해하는 데 중요한 요소들이다. 이들을 알아야 에러가 났을 때 문제점을 정확히 파악하여 디버깅을 할 수 있다. 예시를 하나 들어보자. 아래 코드에서 에러가 catch 되지 않는다. 실행 컨텍스트를 알아야 이를 완전히 이해할 수 있다.

try {
  setTimeout(() => {
    throw new Error('error')
  });
} catch (e) {
  console.log(e);
}

우테코를 하면서 이런 자바스크립트의 핵심적인 개념들을 채워나갔다. 공부한 방법은 주로 “모던 자바스크립트 Deep Dive”, “ECMAScript spec” 이었다. 딥다이브 책은 1000페이지 정도의 분량이고, 개념을 깊이 있게 서술해두어서 정독하면 매우 도움이 된다. 한 2달 동안 매일 아침 1시간씩 이 책을 읽었다. 실행 컨텍스트 개념을 이해하면서 hoisting, closure, async/await 등의 개념을 완전히 이해할 수 있었다. 생성자 함수와 프로토타입을 이해하면서 class, 정적 프로퍼티/멤버변수/메서드의 차이 등을 이해할 수 있었다. 하지만 이 책도 한계가 있다. 실행컨텍스트를 ES3 기반으로 서술하고 있다. 그래서 블록 스코프 개념이 서술되어 있지 않다. 하지만 실행 컨텍스트는 자바스크립트에서 정말 중요한 개념이기 때문에 이를 이해할 필요가 있었다. 이를 위해서 ECMAScript 2023 spec을 읽으며 이해했다. 또한 generator 도 실행 컨텍스트를 어떻게 관리하는지 공부하기 위해 spec을 읽어보았다. 이렇게 공부하여 이제 자바스크립트 디버깅에 자신감이 생겼다.

2. 타입스크립트 성장

우테코 활동 초기부터 나는 타입스크립트를 썼다. 타입스크립트가 너무 재밌었다. 타입 에러를 해결하고, 정확히 타입을 맞춰나가는 과정이 흥미로웠다. typescript-exercises 를 11 레벨까지 풀었다. 또한 redux 타이핑을 하면서 많이 성장했다. 이때 useThunkFetch 라는 훅을 만들었다. 서버 통신을 하고, 그 값을 redux store에 저장한 후, data, isLoading, error 를 반환하는 훅이었다. 여기서 redux-thunk를 쓰려다보니 타이핑이 너무 어려웠다. 3개의 generic을 뚫었던 것으로 기억하는데, 이를 타입추론만으로 해결했었다. 3개의 타입변수가 있었는데, 함수 호출시에 제네릭을 사용하지 않아도 되는 마법같은 경험을 했었다.

또한 프로젝트를 진행하면서는 타입스크립트 설계에 신경을 썼다. 아무리 타이핑을 잘 해도, 실질적으로 프로젝트에 중요한 것은 전체적인 타입설계였다. DTO 타입을 어떻게 분리할 것인가, 어떻게 재사용할 것인가, 타입을 어디에 응집/분리 시킬 것인가 고민했다. 그리고 Effective TypeScript 책을 읽었다. 구조적 타입 시스템이라는 개념을 알게 되었다. 서브 타이핑, 잉여속성체크 등을 이해했고, 타입스크립트의 design goals를 이해할 수 있었다. 이 과정에서 타입스크립트 도약하기 테코톡 영상을 통해 사람들에게 설명하는 시간을 가졌다. 마지막으로 공변/반공변/이변/불변성을 이해했다. react에서 bivarianceHack 을 사용하는데 이런 개념들을 이해할 수 있었다.
이런 과정을 거쳐서 타입스크립트에서는 신입 개발자가 할 수 있는 최고 수준으로 성장할 수 있었던 것 같다.

3. React 성장

자바스크립트, 클린코드, 타입스크립트를 잘 할 수 있다면, 리액트는 사실 그냥 따라오는 기술 같다. 우테코 초창기에 나의 문제점은 기초 없이 React를 이해하려고 노력했던 점이다. class 컴포넌트와 함수 컴포넌트의 동작 방식을 자바스크립트 기반 없이, 리액트만으로 해석하려고 했었다. setState를 props으로 내려주는 것이 안티패턴이라는 것도 리액트만으로 해석하려고 했었다. 자바스크립트, 클린코드를 이해한다면, React에서 정말 많은 것이 그냥 잡히게 되는 것 같다. 컴포넌트 분리, 훅 분리, 파일 구조 설계, API 레이어 분리 등. 그렇다면 이외에 React 라이브러리를 추가로 학습해주기만 하면 된다. 함수 컴포넌트는 어떻게 상태를 기억하는가, 이벤트 위임은 어떻게 처리하는가, concurrent 는 무엇인가, 여러 훅들의 기능 등을 학습했다.

초반에 hook을 통한 비즈니스 로직 분리에 대해서 정말 많이 고민했었다. 잡히지 않을 것 같았는데, 계속 고민하다 보니 어떻게 훅을 나누는 것이 잘 나눈 것인지 어느 정도 기준을 수립할 수 있었다.

4. http & network 공부

9월부터 네트워크 스터디를 했다. 그림으로 배우는 HTTP & Network를 읽고, 김영한님의 network 기본 강의를 보면서 학습했다. CORS, http 프로토콜, http 1.1/2.0/3.0, 쿠키 및 세션, DNS, 프록시 등의 개념을 학습할 수 있었다. 이를 통해 웹을 더 큰 그림에서 바라볼 수 있었다. 면접에서 뜨거운 토픽이 검색창에 www.google.com을 쳤을 때 어떤 일이 발생하는가? 였는데, 이것을 더 풍부하게 생각해볼 수 있었다. 아쉽게도 어떤 면접에서도 네트워크 지식을 질문 받지 않았다만, CS 지식을 처음 접한 것이 매우 귀중한 경험이었다.

5. 점점 원본에 가까운 자료를 찾게 되었다.

자료의 신뢰성을 순서로 매기자면, 블로그 → 책 → 공식문서 → 코드 이다. 가령 React를 공부한다고 하면, 블로그 → React 책 → reactjs.org → react repository 순서이다. 자바스크립트로 보자면, 블로그 → JS 책 → ecma spec → javascript engine(ex, V8) 순서이다. v8은 c++ 코드이므로 현실적으로 자바스크립트 개발자가 읽기는 어렵다. 이벤트 루프도 블로그와 책 보다는 html spec 을 보거나, blink나 node 에 가면 코드를 볼 수 있을 것이다. 블로그는 신뢰성이 떨어지거나, 짜깁기 된 경우가 많기 때문에 모든 내용을 파악하기는 어렵다. 책은 최신성이 보장되지 않으므로 특정 부분에 대하여 구식 자료일 것이다. 공식문서가 잘 나와있는 경우 공식문서로 충분할 것이다. 라이브러리 공식문서는 이것만으로 100% 이해하기 어려운 경우가 있고, javascript나 react로 개발된 코드는 읽을만 하므로 원본 코드를 읽으며 이해하는 것도 좋다. react-query, react, react-error-boundary, redux-thunk, jotai 등은 경우에 따라 원본 코드를 읽으며 이해하려고 했다. 이 과정에서 오픈소스에 contribute 할 수도 있다. 현재 react-query에 1개의 contribute 했고, 자신감이 생겨 앞으로 더 해나갈 수 있을 것 같다.

6. 분리/응집(co-location)에 대한 고민

여러 코드 조각을 함께 위치(co-locate) 시켜야할지 분리 시켜야할지 고민을 많이 했다. 함께 위치 시키는 것도, 한 파일 내부에 시켜야 할지, 같은 폴더에 넣어야할지, 같은 파일이라면 바로 아래에 두어야할지, 위에 두어야할지 등을 고민해볼 수 있다. Snackbar 코드를 예시로 들어보자. 사용처에서 message 상태, isShow 상태를 정의하고 isShow 상태에 따라서 <Snackbar /> 를 렌더링 시킨다. 그러면 그 컴포넌트 내부에서 다양한 로직들과 Snackbar 로직이 공존하게 된다. 그리고 Snackbar 로직은 상태, 컴포넌트 등 넓은 커버리지를 가진다. 상태 로직을 useSnackbar로 분리한다고 하더라도, 커버리지가 넓어지고 응집되지 않는 것은 변하지 않는다. 이를 어떻게 응집시킬 것인가? Context API를 통해 전역으로 컴포넌트를 렌더링하고, 전역으로 상태를 보관함으로써 하나의 Provider에 모든 로직을 응집시킬 수 있다.

두 번째 예시는 API 로직들이다. react-query를 활용한다고 했을 때, fetcher, Query/Mutation hook, DTO type 등을 정의해야 한다. 이를 응집 시킬지 분리 시킬지, 한 폴더에 넣을지, 한 파일에 넣을지, 그 파일/폴더 이름은 무엇으로 해야할지 등의 고민을 할 수 있다. 분리해보기도 하면서 불편함을 느껴보고, 응집해보기도 하면서 장점을 느껴보고 있다. 아직 확정된 방식은 없지만, 어떤 것을 택하더라도 논리적인 이유를 가지고 택할 수 있을 것 같다.

7. 도구로서의 기술 사용

우테코 이전에는 기술 하나하나를 배우는 것이 벅차고 힘든 일이었다. storybook 을 처음 해보려고 할 때, 두려워서 시도조차 못 했던 기억이 난다. 하나의 기술을 학습할 때 각 잡고 정리하며 완벽하게 학습하려다 보니 그런 두려움이 생겼다고 생각한다. 이제는 필요한 기술이 있으면 바로 채택해서 사용할 수 있는 자신감/능력이 생겼다. docs 읽으면서 하나하나 따라해보는 미니 프로젝트를 만들어보면 그만이다. 기술은 도구이고, 필요 시에 도입해서 적용하면 된다. 이를 위한 오픈소스는 넘쳐난다. 이 방식으로 react-query, storybook, react-testing-library, msw, webpack, yarn berry 등을 학습하고 적용해볼 수 있었다.

시리즈

0. 우아한테크코스 회고
1. 우아한테크코스에서의 기술 성장 기록
2. 우아한테크코스에서의 자기 성장 기록
3. 우아한테크코스에서 후회되는 점