<div id="readability-page-1" class="page"><div x-data="{ sidebar: false }">
        <main id="main">
          
          
                
          
  
    <div id="permalink">
      <header>
        
          <p><img src="https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fbx24NG%2FbtsASGex4GI%2FnMVNDXkmxS4i5ymNQjKPO0%2Fimg.jpg" alt=""></p>
        
        <div><p><a href="/category/Web%20Frontend%20Developer">Web Frontend Developer</a></p>
          <p><time>2023. 11. 25. 19:37</time><span>
              
            </span></p>
        </div>
      </header>
      <div>
        <article id="content" x-ref="content">
          <div x-data="content">
            <template x-if="$data.headings.length > 0">
                <div class="rounded-md p-5 mb-8 box-border bg-h-200 text-h-500 dark:bg-h-700 dark:text-h-200" id="TOC"><strong class="flex items-center justify-between text-overflow-hidden text-sm pb-2 mb-4 border-b border-solid border-h-400 dark:border-h-200"><span class="text-base">목차</span><i class="fas fa-bars"></i></strong>
                  <ol class="flex flex-col gap-y-3"><template x-for="heading in $data.headings" :key="heading.id">
                      <li :class="{ &quot;pl-0&quot;: heading.tagName === &quot;H2&quot;, &quot;pl-4&quot;: heading.tagName === &quot;H3&quot; }"><a class="flex items-center justify-between text-sm duration-200 text-h-400 hover:text-h-600 dark:hover:text-h-200" :href="heading.href">
                          <div class="text-overflow-hidden" x-text="heading.text"></div><i class="fas fa-arrow-right scale-75"></i>
                        </a></li>
                    </template></ol>
                </div>
              </template>
            
            <template x-if="$data.headings.length > 0">
                <div class="2xl:absolute 2xl:top-0 2xl:h-full 2xl:ml-[calc(((1100px+theme(spacing.pem))/2)+theme(spacing.5))]" id="scrollspy" x-data="scrollspy" @scroll.window="scrollspy" x-transition:enter="transition ease-linear duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-linear duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" x-show="show">
                  <div class="2xl:sticky 2xl:top-20"><button class="fixed top-20 right-0 w-8 h-8 z-30 rounded-md bg-h-300 text-h-500 dark:bg-h-700 dark:text-h-200 2xl:hidden" x-show="! open" @click="toggle"><span class="text-[0]">목차</span><i class="fa-solid fa-list-check"></i></button>
                    <div class="w-56 text-sm box-border max-2xl:transition-[right] max-2xl:duration-200 max-2xl:rounded-xl max-2xl:p-6 max-2xl:pr-8 max-2xl:fixed max-2xl:top-20 max-2xl:right-4 max-2xl:z-40 max-2xl:bg-h-200 max-2xl:dark:bg-h-700 2xl:px-6 2xl:block" :class="open ? &quot;max-2xl:right-4&quot; : &quot;max-2xl:-right-60&quot;"><button class="absolute text-base top-2 right-4 text-h-500 dark:text-h-200 2xl:hidden" @click="toggle"><span class="text-[0]">목차 닫기</span><i class="fa-solid fa-xmark"></i></button>
                      <ul class="flex flex-col gap-y-3" x-ref="spy"><template x-for="heading in $data.headings" :key="heading.id">
                          <li class="text-h-400" :class="{ &quot;pl-0&quot;: heading.tagName === &quot;H2&quot;, &quot;pl-4&quot;: heading.tagName === &quot;H3&quot; }"><a class="duration-200 text-h-400 hover:text-h-600 dark:hover:text-h-200" :href="heading.href" x-text="heading.text" :class="{ &quot;text-h-600 dark:text-h-200&quot;: heading.active }"></a></li>
                        </template></ul>
                    </div>
                  </div>
                </div>
              </template>
          </div>
        </article>
        
      </div>
      <div x-show="shown" x-data="{ shown: false }" x-intersect.once="shown = true" id="entry490Comment">
            <form method="post" action="/comment/add/490" onsubmit="return false">
    
  <div><p><label for="text">댓글</label></p><div>
        
          
            <div>
              <p><label for="name">이름</label></p>
              <p><label for="password">암호</label></p>
            </div>
          
        
        <div x-data="{ secret: false }"><p><label id="secret-label" for="secret" @click="secret = ! secret"><span>비밀글</span><i :class="{ &quot;fa-lock&quot;: secret, &quot;fa-unlock&quot;: ! secret }"></i></label><a href="#" onclick="addComment(this, 490); return false;"><span>댓글쓰기</span><i></i></a></p></div>
      </div>
    </div>

</form>
            
              <div id="comments">
                <ol>
                              

            
                </ol>
              </div>
            
          </div>


    </div>
  
  
  

          
      
          
          
          
          
        </main>
        
        <div x-data="top" @scroll.window="toggle" x-show="open" x-transition:enter="transition ease-linear duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-linear duration-300" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0">
          <p><img @click="sidebar = ! sidebar" data-src="https://tistory1.daumcdn.net/tistory/2738522/attach/418608a299c6427e86eaf3e174103ec8" data-sizes="auto" alt="DevOwen" width="36" height="36"></p>
          <div>
            <p>[FE] 도서 &lt;우아한 타입 스크립트 with 리액트&gt; 솔직 리뷰</p>
          </div>
          
        </div>
        <div id="bottom">
          <p><a href="#hELLO"><span>상단으로</span><i></i></a></p>
        </div>
      </div></div>

DevOwen

나는 평소에 개발 관련 서적을 많이 읽는 편이다. 서점에 가서 보기도 하고 지인들에게 추천을 받아 읽기도 한다. 그러던 중 최근에 눈길을 끄는 제목의 프론트엔드 개발 서적 한 권을 우연히 만나게 되었다.
 
바로 이 책이다.
나는 현재 회사에서 타입스크립트와 리액트로 웹 프론트엔드 개발을 하고 있다. 사실 이 스택은 나 뿐만 아니라, 굉장히 많은 회사에서 이미 표준으로 자리잡고 있는 스택이라 웹 프론트엔드 개발자로 취업을 하길 희망하는 취준생에게는 필수적이라고 보아도 과언이 아닐 것이다.
 
하지만 시중에 많은 리액트, 타입스크립트 책을 봐온 나로서는 아쉬운 점이 있었다. 크게 두 가지인데 첫 번째는 책이 너무 두꺼웠고, 두 번째는 책이 너무 어려웠다. 대부분 아쉬운 점은 1번 아니면 2번, 아니면 둘 다였다.
 
물론 깊이가 얕고 쉬운 내용의 책을 내가 바라는 건 아니다. 실무에서 일을 할 때 필요한 내용들이 충분하게 담겨 있으면서, 불필요한 내용이 적어서 학습을 효율적으로 할 수 있는 그러한 책을 원했다. 사실 리액트나 타입스크립트나 둘 다 오픈소스라서, 공식 문서도 잘 되어 있고 필요한 정보는 온라인에서 찾아볼 수가 있는데 우리가 책을 통해서 기대하는 건 족집게 노트 같은 내용이다.
 
일단 이 책은 첫 표지가 알록달록하고 예뻤다. 그래서 눈길이 더 갔다. 그리고 두께가 380쪽으로, 엄청 얇다고 볼 수는 없지만 내가 그간 봐왔던 5~600 페이지 이상의 두꺼운 책들에 비해서는 얇았다. 그래서 첫 인상이 되게 좋았던 책이다.
 
이 책의 프롤로그와 목차를 보니 이 책은 "주니어 웹 프론트엔드 개발자"들을 대상으로 쓰여졌다. 타입스크립트를 써본 적은 있지만, 깊게 공부해 보고 싶고 실무 예제를 많이 보고 싶은 분들이라면 얻어갈 수 있는 포인트가 많다고 느껴졌다. 우아한형제들이라는 국내의 대표적인 IT 회사의 현업 웹 프론트엔드 개발자 분들이 쓰셨다는 점도 인상적이었다. 목차는 총 13장까지 있는데 6장까지는 주로 타입스크립트에 대한 내용, 7장부터 11장까지는 웹 프론트엔드 개발에서 필요한 내용들을 리액트를 중심으로 다루었다. 그리고 12~13장은 다시 타입스크립트에 대한 내용들로 돌아온다.
 
책을 본격적으로 읽어보기 시작했다. 
 
웹 프론트엔드 개발자가 모두 사용한다고 볼 수 있는 자바스크립트라는 언어가 어떤 배경으로 만들어졌고, 어떻게 발전했는지 간단한 역사를 설명해 주어서 좋았다. 넷스케이프라는 회사는 나는 잘 알지 못했는데, 이 회사의 직원(브랜든 아이크)이 자바스크립트를 만들었다는 사실을 새롭게 알게 되었다. 그리고 기존에 정적인 웹사이트에서 동적인 웹 어플리케이션으로 패러다임이 바뀌게 된 계기중 하나가 구글 지도 서비스라는 점도 흥미로웠다. 
 
자바스크립트가 가진 한계를 해결하기 위해 바로 마술처럼 타입스크립트가 바로 뿅! 하고 나온 것이 아니라, 그 전에 정말 다양한 시도들을 했었다는 점이 기억에 남는다. JSDoc과 같은 문서를 생성할 수 있는 도구부터, 다트(Dart)같은 구글이 만든 언어까지... 이러한 시도들이 정말 많았고, 결국 지금은 타입스크립트가 평정(?)했지만 나는 이러한 시도들을 의미 있게 보는 것이 중요하고, 한국 개발 생태계에서도 이러한 시도를 하는 개발자들이 점점 더 많아졌으면 좋겠다는 바람이 들었다.
 
2장에서 타입에 대한 이야기를 하면서 어떤 내용을 설명하는 방식이 소제목 - 설명 - 예제코드 방식인 점이 타입스크립트를 잘 모르는 개발자가 읽더라도 이해가 잘 될 수 있게 배려했다는 느낌을 많이 받았다. 예를 들면 구조적 서브타이핑에 대한 설명을 한다고 했을 때 소제목으로 "구조적 서브 타이핑" 이라고 명시해서, 이 섹션이 어떤 주제의 섹션인지를 먼저 짚고 갈 수 있게 해 주었다. 그리고 이에 대한 배경 설명 및 정의를 서술하고, 그 다음 실제 구조적 서브타이핑이 적용이 된 인터페이스 예제 코드를 보여주어서 이 개념을 바로 코드로 사용해 보고 싶은 독자도 어렵지 않게 적용을 해볼 수 있다는 생각이 들었다.
 
실제 실무에서 어떤 개념을 쓰는지 안 쓰는지, 쓴다면 왜 쓰고, 안 쓴다면 왜 안쓰는지에 대해서도 우아한형제들의 사례가 중간중간 들어 있어서 재미있었다. 특히 enum과 유니온 타입을 사용하는지에 대한 글이 인상적이었는데, 실제로 우아한형제들 기술블로그에서도 이 주제에 대해 꽤 깊게 비교한 글을 보았던 기억이 있었다. 주니어 개발자의 입장에서 enum과 유니온 타입을 사용한다면 왜 사용하고, 사용하지 않는다면 왜 사용하지 않는지 찬성과 반대의 의견을 모두 들어볼 수 있어서 이러한 기술적인 의사결정이 너무 어렵게만 다가오는 독자들에게 꽤 친숙하게 접근을 했다고 생각한다.
 
책의 중간 중간에 트리 쉐이킹(tree-shaking), 호출 시그니처(call signiture) 등 주니어 개발자에게는 조금 생소할 수도 있는 용어들에 대해서도 콜아웃 형태로 짧은 설명을 달아 준 점도 배려가 많이 느껴졌다. 이런 사소한 용어 하나가 막히고 이해가 잘 안 되면 책의 뒷부분을 이해하는 데까지 영향을 줄 수 있고 그러면 학습 속도가 느려지는데, 그러한 학습의 방해 요소들을 잘 처리해 준 점이 좋았다. 아무래도 주니어 개발자 분들이 쓰다보니 본인들이 읽었을 때 조금이나마 이해가 잘 안 될 수 있는 어려운 부분들을 최대한 쉽게 설명하려고 공을 많이 들인 흔적이 보였다.
 
이 책을 전체적으로 쭉 읽고나서 느낀 이 책의 장점은 크게 3가지 정도 있었다.
주니어 개발자분들이나 학생, 취업준비생 분들도 의지를 가지면 내용을 이해할 수 있게 굉장히 친절하게 설명을 하려고 노력함
실제 현업에서의 사례들을 중간중간 많이 보여주어, 개념을 단순히 공부하는 것에서 끝나지 않고 실제 적용까지 해볼 수 있도록 도움
단순한 개념 나열식의 기본서가 아닌, 실제로 많이 사용하고 있고 또 중요한 개념들을 선별해서 모아두어 학습자의 시간을 절약할 수 있음
 
반면에 이 책에서 다소 아쉬운 부분도 있었다.
미드 레벨이나 시니어 레벨의 개발자가 보기에는 다소 내용이 쉬울 수 있음
혹시 이 책에서 기술적으로 트러블슈팅을 하거나 성능을 튜닝하는 등의 조금 더 깊고 차별적인 주제를 원했다면 적합한 책은 아님
 
결론적으로, 내 주변에 웹 프론트엔드 개발자로 진로를 희망하는 학생이나 취준생, 또는 이제 막 이 직군으로 사회생활을 시작한 3년차 이하의 웹 프론트엔드 개발자가 있다면 이 책을 추천해 주고 싶다!
 
(위 글은 한빛미디어로부터 도서와 소정의 원고료를 지급받고 작성하였습니다.)