배경 지식 학습

디미고인 프론트를 개발에 참여하기 위해서 사용된 기술에 대한 배경 지식이 요구됩니다.

ES6+ 자바스크립트 활용

자바스크립트는 ECMA에서 발행하는 ECMAScript라는 표준이 있습니다. 매년 새로운 표준이 나오고 있습니다. 예를 들어 2019년의 표준은 ECMAScript 2019 라고 연도와 함께 부르기도 하고, 줄여서 10번째 표준이라는 뜻으로 ES10 이라고 부르기도 합니다.

디미고인에서는 효율적이고 가독성 높은 코드를 작성하기 위해 ES6 이상의 자바스크립트의 최신 문법들을 사용하고 있습니다. 이러한 최신 문법을 사용하기 위해서 Babel이라는 자바스크립트 Preprocessor를 사용하고 있고, 자바스크립트 번들러인 Webpack을 사용하고 있습니다.

관련 링크들

최신 문법에 대한 정보는 대부분 구글링을 통해서 습득할 수 있습니다. 도움이 될만한 링크를 아래에 남겨두겠습니다. 최소한 아래 내용은 모두 숙지해야 프로젝트를 이해하는데 무리가 없을 것이라고 생각합니다.

• Vue.js 개발을 위한 주요 ES6 문법 4가지

• ES6 문법으로 다시 시작하는 자바스크립트

• 자바스크립트 Promise 쉽게 이해하기

• 바보들을 위한 Promise 강의

• async/await 를 사용하기 전에 promise를 이해하기

• ES2017(ES8) async/await

• 자바스크립트의 Async/Await 가 Promises를 사라지게 만들 수 있는 6가지 이유

• async, await를 사용하여 비동기 javascript를 동기식으로 만들자

Babel

프로젝트 루트에 위치하는 .babelrc 파일에서 바벨 설정을 관리합니다.

프레임워크 / 라이브러리

디미고인 프론트는 개발 효율성을 위해 다양한 프레임워크를 사용하고 있습니다. 대표적으로 리액티브 UI 프레임워크인 Vue.js 를 사용하고 있고, 상태 관리를 위해 Vuex를 쓰고 있으며 SPA(Single Page Application) 라우팅을 위해 vue-router를 사용하고 있습니다. 또한 코드 번들링(분할되어 있는 소스코드들을 배포할 수 있게 하나로 모아주는 행위) 및 최적화를 돕는 Webpack과 관련 플러그인들을 함께 활용하고 있습니다. 이 외에도 수많은 외부 의존성을 프로젝트에 도입하고 있으며, 특히 위에 나열한 라이브러리/프레임워크에 대해서는 수준 높은 이해가 요구됩니다. 학습은 공식 문서를 통해 진행하는 것을 권장합니다. 아래는 그 목록입니다.

• Vue.js 공식 문서

• Vuex 공식 문서

• Vue Router 공식 문서

• 웹팩 공식 문서

아키텍쳐 / 디자인 패턴

함수형 프로그래밍

• 왜 JavaScript로 함수형 프로그래밍을 배우는가?

• 자바스크립트로 함수형 프로그래밍 아주 살짝 맛보기

• 함수형 프로그래밍(Functional Programming)

디미고인 프론트에서는 함수형 프로그래밍을 지향합니다. Vue.js 가 상태 변경을 추적해서 UI를 업데이트하기 때문에 함수형 프로그래밍의 이념과 충돌하는 부분이 분명 존재하나 함수형 프로그래밍을 프로젝트에 적절하게 도입해서 생산성, 가독성과 재사용성의 균형을 이룰 수 있도록 합시다.

디자인 패턴

• Javascript Pattern 요약