Javascript Fatigue현상을 해결해 줄 스터디 플랜

원글 : A Study Plan To Cure JavaScript Fatigue

원작자 : Sacha Greif

다른사람과 마찬가지로 나 역시 Jose Aguinaga의 2016에 Javascript를 공부하는 건 어떤 느낌인가 라는 포스팅을 우연찮게 마주쳐 읽어 보았다.

그리고 이 포스팅이 사람들의 관심을 제대로 끌고 있는 건 확실해 보였다. 한번이 아니라 두번이나 Hacker News 상위를 장식했으니 말이다. 그리고 Medium 페이지에서도 내 전체 포스팅 좋아요 수를 합친거보다 더 많은 10k 이상의 좋아요를 기록했다.

하지만 해당 포스팅의 주제가 전혀 새로운 일은 아니다. Javascript ecosystem이 혼란스러울 수 있다고 생각한지도 상당히 됐으니 말이다. 사실 내가 Javascript의 현 시점이 라는 설문조사를 한 이유가 바로 어떠한 Libraries가 실제로 인기있고 실제로 중요한 것들이 무엇이지 찾아 내기 위해서 였다.

하지만 오늘 나는 한발짝 더 나아가 그저 무엇이 지금은 어떻고 라고 말하고 끝내기 보다는 이 Javascript ecosystem을 정복할 수 있는 보다 명확하고 한 단계씩 시행할 수 있는 공부계획을 제시하고자 한다.

이런 분에게 추천드리고 싶다.

• 변수나 함수와 같은 기본적인 컨셉을 숙지하고 있는 사람.
• PHP나 Pythons같은 언어로 백앤드도 조금씩 만져보고 jQeury같은 라이브러리에 대한 경험이 있다면 더 좋다.
• 프론트 엔드에 대해 좀 더 깊이있게 공부하고 싶은데 넘쳐나는 라이브러리와 프레임워크에 빠져 죽을 것 같은 느낌이 드는 사람.

다루고자 하는 내용들.

• 모던 자바스크립트 웹 애플리케이션은 어떻게 구축되는가.
• jQuery만 막무가내로 쓸 수 없는 이유
• 어째서 React가 가장 안전한 선택인가
• 처음부터 Javascript를 ‘제대로’ 배우지 않아도 되는 이유
• ES6 문법 배우기
• Redux는 왜 사용하고 어떻게 배우는가.
• GraphQL이 도대체 뭐고 왜 다들 이렇게 유난을 떠는건가
• 이 다음은 어디를 향해 가야 하는가

JavaScript vs JavaScript

본격적으로 이야기하기에 앞서, 서로 혼란이 없도록 하자. 구글에서 Javascript 배우기 혹은 Javascrpt 공부 계획이라고 검색하면 Javascript라는 언어롤 알려주는 정보가 수도 없이 많을 것이다.

하지만 그건 그저 쉬운 부분이 불과하다, 물론 그러한 과정을 통해 Javascript를 깊이있게 배울 수 도 있겠지만 사실 대부분의 web 애플리케이션은 상대적으로 간단한 코드를 사용한다. 다시말해 web 애플리케이션을 제작하는데 필요한 80%의 사항들이 어느 흔한 Javascript 책의 초, 중반 부분에서 모두 배울 수 있는 사항들이다.

진짜 문제는 수 많은 라이브러리와 프레임워크가 넘쳐나는 Javascript ecosystem을 마스터 하는게 진짜 어려운 점이다. 좋은 소식은 지금부터 소개할 스터디 플랜이 바로 이를 위한 것이라는 점이다.

Javascript 애플리케이션 블록 만들기

어째서 모던 Javascript apps이 복잡하게 느껴지는지 이해하려면 실제로 어떻게 동작하는지도 이해해야 한다. 입문자를 위해 2008년쯤 사용되던 옛날방식으로 짜인 Web apps을 보도록 하자.

1. 데이터 베이스가 백엔드로 데이터를 보낸다.
2. 백엔드에서 그 데이터를 읽어 HTML을 출력한다.
3. 그리고 그 HTML을 브라우저로 보내 화면에 표시한다.

비록 지금도 tabs과 modal과 같이 클라이언트와의 상호작용성을 늘리기 위해 이러한 코드를 상당 수 찾아볼 수 있는게 사실이다.

자, 이제 옛날방식과 보다 현대적인 Javascript apps ( Single page app 이라고도 한다 ) 과 비교해도록하자.

차이점이 눈에 보이는가? 서버에서 Data를 보내고 그리고 그 Data가 HTML으로 보내진다. 전환과정이 이제 클라이언트 측에서 일어나는 것이다.

이러한 방식은 여러가지 영향이 있는데, 우선 좋은 점부터 보자면.

• 특정 컨텐츠에서 Data만 보내는게 전체 HTML 페이지를 보내는 것 보다 빠르다.
• 클라이언트는 페이지 리로딩 없이 곧바로 컨텐츠를 새로운 변경하거나 확인할 수 있다.

하지만 역시 단점 또한 있다.

• 처음 로딩이 조금 더 길어 질 수도 있는데 이는 data에서 HTML로 보내는 코드가 상당히 커질 수도 있기 때문이다.
• 이러한 방식은 클라이언트 측에서도 데이터를 보관하고 관리할 수 있는 방법이 필요하다

그리고 끔찍하다고 할 수 있는 점은.

• 축하드린다, 당신이 백엔드 개발자라면 이제 클라이언트 쪽 일도 손을 봐야 할 수도 있다. 물론 백엔드 만큼이나 복잡해 질 수 있는 일 말이다.

클라이언트-서버 스펙트럼.

그렇다면 이렇게나 문제가 많은데 왜 굳이 기존 php를 쓰던 옛날방식에서 벗어나 이 고생을 해야 하는걸까?

그렇게 생각하고 있다면, 계산기를 하나 만들고 있다고 생각해보자, 사용자가 2+2가 뭔지 알고자 한다면 굳이 브라우저가 해결할 수 있는 사항을 서버까지 가서 해당 연산을 처리해야 할 이유가 있을까?

반대로 블로그와 같이 전혀 변동이 없는 정적 페이지를 만들고자 한다면 서버측에서 최종 HTML를 출력해도 상관없다. 사실 수 많은 웹 애플리케이션이 이러한 스펙트럼 중간에 존재한다.

허나 문제는 서버에서 돌아가는 app을 만들었다면 그걸 클라이언트 측에서 돌아가는 app으로 변경하기가 매우 힘들다, 왜냐하면 변경하다보면 어떠한 지점에서 분명히 멈춰서서 기존에 있던 모든사항을 수정해야하는 지점이 있고 이런식으로 진행되다 보면 그 코드는 결국 유지보수하기 극히 까다로운 코드가 되어 버리고 만다.

그리고 이게 바로 무작정 jQuery만 써댈 수 없는 이유이기도 하다. 쉽게 생각해 jQuery를 테이프로 생각해보라, 사사로운 부분을 고치고, 붙이는데 정말로 유용하다. 하지만 여기 저기 계속해서 붙여대기 시작한다면 결국 외관상으로 보기좋지는 않을 것이다.

반면에 Javascript framework는 3D 프린터로 대체품을 찍어내는 것과 같다. 시간은 더 걸릴 수 있지만 결과는 보다 깔끔하고 견고한 완제품을 얻을 수 있다.

1번째 주 : 기초 Javascript

당신이 정말 순수히 백엔드만 할 수 있는게 아니라면 아마도 기본적인 Javascript는 알고 있을 것이다. 그렇지 않다고 해도 PHP나 Java와 같은 언어와 어느정도 닮은 구석이 있으니 걱정마시라.

혹시나 Javascript를 전혀 모른다고 해도 정말하지 마시라, 당신을 기본수준으로 끌어 올려줄 학습 컨텐츠는 인터넷상에 넘쳐난다. 예를들어 아래의 사이트가 시작하기 좋은 사이트일 것이다. Codecademy’s JavaScript lessons.

2번째 주 : React 시작하기

이제 기본적인 Jaavascript는 알았으니 왜 Javascript app이 복잡해 보일 수 있는지도 이해했을 것이다. 좀 더 자세히 얘기해 보도록 하자, 무엇부터 시작을 해야 할까?

이에 대한 대답은 개인적으로 React라고 믿는다.

React는 페이스북에서 만들어 진 UI 라이브러리다. 다시말해, data에서 HTML로 가는 과정을 관리한다.

하지만 오해는 없기를 바란다, 나는 React가 가장 좋은 라이브러리니까 React를 선택해야 한다고 말하는 게 아니다. ( 뭐가 가장 좋은지는 객관적인 문제이므로 )

• React가 가장 인기있는 라이브러리라고 단언할 수 있는 건 아니지만 인기있는 라이브러리라는건 아무도 부정하지 못할 것이다.
• React가 가장 가벼운 라이브러리라고 단언할 수 없지만 상당히 가벼운 라이브러리라는데는 의문점이 없다.
• React가 가장 쉬운 라이어브러리고 단언할 수 없지만 배우기 상당히 쉽다라고 말할 수 있다.
• 그리고 React가 가장 아름답게 짜여진 코드라고 할 수는 없을지도 모른다, 하지만 사용해보면 알 것이다. 상당히 고급스럽게 짜여져있음을.

다시말해 React가 모든 상황에서 최고의 선택이 될 수는 없다, 하지만 가장 안정한 선택이 될 수는 있다. 그리고 당신이 이제 막 프레임워크를 배우려고 한다면 이런저런 기술적인 것들을 너무 따지기에 좋은 시기는 아니다.

React를 통해 향후 무슨 프레임워크나 라이브러리를 쓰던 유용하게 쓰일 components, application state, 그리고 stateless functions와 같은 개념들을 소개해준다.

마지막으로 React는수 많은 패키지와 라이브러리로 넘쳐나는 생태계를 조성하고 있다. 그리고 순전히 인기가 있기에 Stackoverflow같은 사이트를 통해 많은 도움을 얻을 수 있을 것이다.

개인적으론 Wes Bos의 React 입문자 코스를 추천한다. 나도 이 코스를 통해 공부했다. 그리고 언제나 최신버젼에 맞게 업데이트 되고 있기도 하다.

Javascrpt를 처음부터 “제대로” 배워야 할까?

당신이 정말 체계적으로 배우는 걸 좋아하는 사람이라면 아마 무언가를 만들어 보기전에 Javascript의 가장 기본적인 사항들을 모두 파악해보는게 더 좋을 수도 있다.

하지만 그렇지 않은 사람들에겐 위와 같은 방법이 수영을 하기위해 인간 신체의 해부학과 파도의 유동역학을 배우는 것과 비슷하게 느껴질 수 있다. 물론 둘다 수영을 하는데 많은 영향을 미친다, 하지만 단순히 풀장에 뛰어드는게 더 즐겁지 않을까?

여기서 옳고 그른 답은 없다, 각 개인의 공부성향에 따라 달라지는 일이다. 사실 대부분의 기초 리액트 강좌에서는 Javascript의 일부만을 쓸 뿐이라 크게 걱정하지 않아도 된다. 그렇기에 지금 필요한 것에 집중하고 나머지는 추후에 공부해도 문제없다.

그리고 크게 보면 이런 방법이 Javascript ecosystem 전체에 해당되는 이야기일 것이다. 당신이 초급자라면 지금 당장 Webpack이나 Babel등에 대해서 너무 걱정하지 않아도 된다. 그리고 요즘 React는 다른 환경설정없이 바로 React app을 만들 수 있는 방법도 제공해 주고 있으니 더더욱이 그렇다.

3번째 주 : React 프로젝트를 시작해보자.

당신이 React 기본강좌를 모두 끝마쳤다고 가정해보자, 당신이 나와 비슷하다면 아래의 두가지 사항이 모두 당신에게 해당되는 사항일 것이다.

1. 배운거 절반은 벌써 까먹었다.
2. 아직 기억하고 있는 거로 뭐라도 한번 만들어 보고 싶다.

나는 프레임워크나 특정한 언어를 가장 효율적으로 배우는 방법은 실제로 사용해보는 것이라고 믿는다 그리고 개인 프로젝트가 새로운 기술을 시도해보는데 더할나위 없이 완벽하다.

개인 프로젝트는 그저 싱글페이지에서 복잡한 웹 앱이 될 수도있다. 하지만 당신이 이미 만들어 놓은 사이트를 다시 제작해보는 것이 좋은 시작점이 될 수 있다.

앞서 말했다 싶이 정적인 컨텐츠에 단일 페이지 앱을 적용시키는건 조금 과할 수 도 있다. 하지만 React에는 React의 특성을 모두 간직한 채 정적인 페이지를 만드는 걸 도와주는 Gatsby라는 비밀병기가 있다.

Gatsby가 React프로젝트를 시작하기 좋은 방법인 이유는 다음과 같다.

• 미리 설정되어 있는 Webpack, 이는 고로 Webpack설정하는라 머리아픈 일은 없다는 이야기다.
• 당신이 작업하고 있는 폴더 구조에 따라 자동 라우팅.
• HTML 컨텐츠 모두 서버 측에서 생성되므로 클라이언트, 서버측의 모든 장점을 활용.

State Of Javascript라는 사이트를 Gatsby를 이용해서 만들었는데 위에 거론한 문제를 따로 걱정할 필요가 없어서 작업시간이 굉장히 줄었다.

4번째 주 :ES6 마스터하기.

그렇게 React를 공부하며 어느 순간부터는 예제 코드를 그저 복사 붙여넣기를 하며 뭔가를 만들기 시작했지만, 아직도 이해하지 못하는 것들은 많았다.

특히 아래와 같이 ES6에 새로 소개된 특징들은 너무나도 낯설었다.

• Arrow Function
• Object Destructing
• Classes
• The Spread Operator.

만약 당신도 이와 같다면, 지금이 바로 ES6를 보다 전문적으로 공부해야 할 때 일지도 모른다. 초급자를 위한 React과정을 끝마쳤다면 Wes의 모두를위한 ES6영상을 추천한다

물론 ES6를 훈련하기 위해 가장 좋은 방법은 기존에 많든 사이트를 다시 ES6형태로 변해보는 것이다.

5번째 주 : State Management 맛보기.

이쯤되면 React로 간단한 Front-end작업은 가능할 것이다. 하지만 실제 웹 애플리케이션은 정적이지 않다. 항상 데이터베이스 같은 곳에서 데이터를 가지고 온다.

우리는 배운 내용을 토대로 각각의 컴포넌트에 데이터를 보낼 수 있을 것이다, 하지만 이런 방식으로는 얼마 못가 코드나 애플리케이션 운용이 너무 복잡하게 될 것이다. 예를 들어 두개의 컴포넌트가 같은 데이터를 요하고 그 컴포넌트가 서로 상호작용해야 한다면 어떻게 할 것이가?

바로 여기가 State Management가 필요한 구간이다. 데이터를 각 컴포넌트에 찔끔찔끔 저장해 두는 것이 아닌 전역으로 쓸 수 있는 공간에 저장해 각 React Components에 보낼 수 있는 방식으로 저장해 두는 것이다.

React에서 가장 인기있는 state management 라이브러리는 Redux이다. Redux는 데이터를 한 곳에 모아줄 뿐만이 아니라 이 데이터를 조작하기 위해 보다 엄격한 프로토콜을 쓰게끔 한다.

Redux를 은행이라고 생각하면 된다. 당신이 이용하는 은행으로 가서 마음대로 당신의 계좌에 있는 금액을 고칠 수는 없을 것이다. 계좌정보를 변경하기 위해선 관련 서류를 작성하고 은행원에게 해당 요청사항을 정식적으로 요청해야 한다.

이와같이 Redux는 당신이 곧바로 전역 State를 변경하지 못하게 한다. 대신 해당 State결과 값을 반환하는 함수에 새로운 값을 전달하여 새로운 State값을 산출하도록 한다. 그리고 Redux Devtools 같은 도구들이 이러한 작업을 시각적으로 보며 처리할 수있게 도움을 준다.

보너스 6번째 주 : GraphQL로 APIs만들기.

지금까지 우리는 클라이언트측에 대해서만 이야기를 나누어 보았다. 전체 Node ecosystem에 대해서 세세하게 알아 볼 순 없더라도 웹 애플리케이션의 중요한 한 축을 담당하는 다음의 사항은 짚고넘어가야 한다. “어떻게 서버에서 데이터를 가져와 클라이언트에게 전달하는가?”

위 사항도 최근 기존의 Rest방식에서 GraphQL를 이용한 개발로 급격하게 변하고 있다.(GraphOL 역시 Facebook의 오픈소스 프로젝트임)

RestAPI가 이미 지정된 데이터셋으로 연결시켜주는 여러개의 라우팅 형식으로 운영되었다면 GraphQL는 하나의 endpoint에서 사용자가 필요한 데이터를 찾게해준다.

이렇게 생가해보자, 식재료를 사기위해 정육점과 베이커리, 슈퍼마켓을 모두 따로 따로 들리는 것과 누군가에게 쇼핑 리스트를 주고 가는 길에 필요한 곳을 한꺼번에 들리게 하는 것.

이러한 방식은 특히 여러개의 소스에서 데이터를 다뤄야 할 때 그 빛을 발한다. 위의 쇼핑 리스트 예제와 같이 단 한번의 Request로 여러 소스에서 데이터를 받을 수 있는 것이다.

그외의 사항들.

나는 react가 안전한 선택지라 판단해서 framework를 배우려면 react로 시작할 것을 추천한다. 하지만 react가 유일한 선택사항이라고 말하는건 아니다. 다른 framework도 맛보고 싶다면 아래 두 가지를 추천하고 싶다.

Vue

Vue는 비교적 새로운 라이브러리지만 엄청난 속도로 성장중이며 이미 Baidu 와 Alibaba와 같은 중국의 대기업들이 채택하여 사용하고 있다. 그리고 PHP 라이브러리인 Laravel의 공식 Front-end 레이어이기도 하다.

React와 비교해서 장점은 다음과 같다.

• 공식적으로 유지되고 있는 라우팅과 state-management 라이브러리
• Performance에 집중한 Framework.
• 기본 HTML형식의 코딩방법으로 진입장벽이 낮다.

그래도 현재 React가 Vue 보다 우위를 점하고 있는 사이라면 아무래도 eco system의 크기와 React Native가 될 것이다. 하지만 Vue가 조만간 이 인기를 따라잡는다고 해도 놀랄 일은 아니다.

Elm

vue가 보다 시작하기 쉬운 선택지였다면 Elm은 보다 최신 기술이라고 할 수 있겠다. Elm은 framework가 아니라 Javascript로 컴파일 되는 새로운 언어다. 그리고 이를통해 퍼포먼스 향상 및 버전관리, 런타임문제 개선등과 같은 이점을 함께 누릴 수 있다.

개인적으로는 사용해본 적은 없지만 이미 사용해본 사람들은 대체적으로 만족하고 있는 분위기다. ( State Of Javascript Survey에서 84%가량의 이용자들이 Elm에 만족한다고 답했다 )

이 다음은 무엇인가.

지금까지 React front-end 스택에 대해 알아보았고 실제로 React로 생산성있게 작업 할 수 있기를 바란다.

하지만 지금까지 배운게 다는 아니다 ! 지금까지 살펴본 사항은 전체Javascript ecosystem을 살펴보는데 시작점일 뿐이다. 계속해서 공부를 하다 보면 다음과 같은 기술들을 마주칠 것이다.

• 서버에서의 Javascript ( Node, Express... )
• Javascript 테스팅 ( Jest, Enzyme… )
• 빌드 툴 ( Webpack … )
• 타입시스템 ( TypeScript, Flow… )
• Javascript 애플리케이션에서 CSS 처리 ( CSS Modules, Styled Components )
• 모바일 앱을 위한 Javascript ( React Native …)
• 데스크탑 앱을 위한 Javascript ( Electron … )

기타 등등, 지금 여기서 모든 것일 나열할 순 없지만 그렇다고 절망하진 말자 ! 항상 첫 걸음이 가장 힘겨운 법이니까, 그리고 중요한 사항은 여러분은 이미 그 첫 걸음을 위의 스터디 플랜을 이행하면서 이미 떼셨다 !

이제 ecosystem의 다양한 부분, 부분들이 어떻게 서로 맞춰지는지 이해하셨으리라 믿는다, 이제는 정말 당신이 다음에 배우고자 하는게 무엇인지 정하고 하나씩 정복해 나가는 일만 남았다.