211222_수

Updated date 2020.01.09 현재 원문의 1c0b20a 까지 반영되어 있습니다. 이 글은 소프트웨어 방법론에 관한 책들 중 Robert C. Martin's의 책인 에 있는 내용을 JavaScript 언어에 적용시켜 적은 글 입니다. 이 글은 단순히 Style Guide가 아니라 JavaScript로 코드를 작성할때 읽기 쉽고, 재사용 가능하며 리팩토링 가능하게끔 작성하도록 도와줍니다.

자바스크립트는 특이하게도 값이 할당되지 않은 변수에 undefined를 할당합니다. 그래서 자바스크립트 객체에 포함되지 않는 키를 통해 객체 프로퍼티에 접근하면 undefined를 뿜습니다. 뭔가가 할당되어 있긴 하기 때문에 이 변수에 접근했다는 것 자체로 에러를 내지 않고 돌아는 갑니다. 막상 그 프로퍼티나 변수를 가지고 무언가를 할 때 undefined로는 할 수 없어 에러가 납니다.

export와 import 지시자는 다양한 방식으로 활용됩니다. 이전 챕터에서는 export와 import 의 기본적인 사용법을 알아보았는데, 이번 챕터에선 좀 더 다양한 사용법을 배워보겠습니다. 변수나 함수, 클래스를 선언할 때 맨 앞에 export 를 붙이면 내보내기가 가능합니다. 아래 내보내기는 모두 유효합니다. 선언부와 export 가 떨어져 있어도 내보내기가 가능합니다. 아래 예시에선 함수를 먼저 선언한 후, 마지막 줄에서 내보냅니다.

이번주에는 자동차경주게임 미션을 진행했는데, mvc패턴으로 디자인하는 것과 모든 로직에 단위 테스트를 구현 하는 것이 중심의 미션이었다. 이번 미션부터는 vanillaJS가 아닌 리액트와 타입스크립트로 진행해보았다. UI테스트는 아직 하기가 까다로워서 이번 미션에서는 제외하였고 단위테스트를 하기 위해서 뷰단의 코드(컴포넌트)와 로직부분의 코드(모듈)을 분리해서 코드를 작성해보았다. 이번 포스팅에서는 여러디자인패턴을 비교해보고, 내가 작성한 코드를 리뷰해보며, 코드를 어떤 식으로 짜야할 지, 생각해보았다.

Writing Resilient Components (이 글은 React의 코어 컨트리뷰터인 Dan Abramov 의 Writing Resilient Components 를 번역한 글입니다.) React를 배우기 시작하는 사람들은 보통 스타일 가이드를 찾아본다. 프로젝트 전반에 적용되는 일관적인 규칙을 가지려는 자세는 좋으나 대부분은 각자가 정한 임의의 규칙에 따르게 된다. 그래서 React는 어떤 규칙을 지키라고 특별히 강요하지 않고 있다.

지금까지 다룬 내용이 컴포넌트에 대한 부분이라면 이번에는 실제 컴포넌트 디자인 패턴에 대해서 다뤄보겠습니다. 디자인 패턴은 일반적으로 아래와 같은 목적을 위해 고안되었습니다. DRY (Don't Repeat Yourself)를 유지한다. 재사용 가능한 컴포넌트를 만든다. 컴포넌트가 무엇을 하는지 명확하게 이해할 수 있다. 기본 컴포넌트는 개발자가 컴포넌트에 일일이 를 작성해야 하는 것을 위와 같이 일반화하여 DRY를 유지하게 도와줍니다.

facebook이 제안한 디자인 패턴인 flux에 관해 알아봅시다 들어가며 지금은 react에서 데이터 관리를 할 때 redux를 쓰는 게 당연시되고 있는데요. redux가 허공에서 뚝 떨어진 패키지는 아닙니다. 2014년 facebook이 개발자 컨퍼런스에서 flux 디자인 패턴과 그 패턴을 실제로 적용한 같은 이름의 패키지를 발표했고, 그 후 댄 아브라모브Dan Abramov라는 개발자가 flux 패턴을 이용한 새로운 패키지인 redux를 발표하게 된 것이죠.