velopert님, 예제로 학습 로드맵 짜보기

velopert 님의 arc 형태의 프론트엔드 작성 샘플 예제

보고 도움이 많이 된다.

https://github.com/velopert/bitimulate/tree/master/bitimulate-frontend/src/components

열정 다해 작성해주신 강의들도 사이트에 있지만

만든 결과물을 리버싱엔지니어링을 통해서 학습하고 싶어서 이렇게 해보았다.

<당시 상태>

먼저 본인은 PHP 기반의 서비스 개발 이후, Node+Express+Pug+Angular 1.x 개발 방식에 익숙해져서

Scope개념이 머리에 짱박혀 개발하다,

Webpack 기반으로 개발 방식을 선회하여 개발하기로 마음먹고 전향한 사람이라

엄청나게 햇갈렸다. 

<로드맵>

1. FrontEnd와 BackEnd의 분리를 먼저 받아 들이기.

- 이점이 나를 너무 힘들게 했다. 기존 MVC패턴과 달라진 Component식 개발환경은 자바개발자들에게는 익숙하다.(안드로이드 특히)

- 물론 후에 나오는 styled-component의 역할 덕분에 그나마 한숨 돌린다.

2. Backend 를 개발하는 단계에서는 반드시 2가지 패턴을 고려할 것

2-1. Rest API 형태로 구성할 것인가. 

- 가장 보급이 많이 된 백엔드 개발 패턴(Express or Koa)

2-2. GraphQL 형태로 구성할 것인가.

- Facebook OpenAPI 대로 개발하여 구성할 것인지 고려하기

(2-2는 Relay와 함께 쓰는것이 좋다 합니다. 허나 우리는 2-1부터, Passport, Auth2.0 규격, JWT, ACL 등 다양한 것을 함께 맛보십시요.)

3. velopert bitimulate 의 BackEnd 와 비교해보기

bitimulate는 Koa를 사용하여서 구성하였습니다만, ctx로 묶인 인자보다 직관성이 있는 req, res 가 저는 편하다보니 express를 사용하였습니다. 비교하여 Api Router 배치와 차후 만날 React ServerSideRender 의 구조를 미리 살폈습니다.

4. FrontEnd 언어 학습하기

1. ES6, Eslint, Babel 순으로 학습

새 문법을 학습하고, ES7(11월에 리엑트 서울 발표자료 등을 확인할 것) http://seoul.reactjs.kr/

html5 태그 주기율표 : http://zqsmm.qiniucdn.com/data/20110511083224/index.html

2. Webpack 학습

3. 여기서 다시 WebAPI DOM Interfaces, HTTP 규격를 학습하는 것이 좋다.

- Window, History, Location, Storages(Local, Session), Cookie

- Http Headers, Http2, Compression 정도면 되겠다.

4. React

- JSX

- ServerSide-Render

- Babel-React

5. React-Router : 3에서 왜 인터페이스들과 HTTP규약을 학습해야하는지 어느정도 이해가 될 것

- React-Server-Side-Render

6. Redux 순으로 학습하고, 다시 React-Router, React 순으로 복습하면 된다.

7. velopert bitimulate 를 보고 구성된 트리를 살펴본다. 내가 연습한 디렉토리 구조와 매우 다르다.

- 버전이 Webpack3, Create-React-app이 최신버전과 상이하게 문법적으로 다른부분을 감안해서.

- 그래서 여기서부터 시작이다 ARC를 학습한다.

- ARC : Atomic Design Pattern with React

8. Directory 구조점을 이해

- Node 를 다시 학습할 필요성이 있고, Webpack 의 명령어를 다시 재학습해야하는 수가 생긴다.

  (import 규격, 컴포넌트 배치 등에 대해서 문법적으로 재학습 접근해야하는 부분이 생긴다)

9. Styled-Components 학습

원래는 바로 ReactStrap 또는 Semantic쪽으로 빠지려 했는데, Arc형태에 알맞지 않다보니

이점을 최대한 섞어보려한다.

+ 원하는대로 particle components 들을 재정의해서 쓸수 있다는 점이 매우 좋고

+ Bootstrap 스킨이 필요하다면 섞어버릴 수 있다.

Styled.Component <- ReactStrap Compnent Style 를 전달해버리면 그만.

10. React 로 짜여진 Component 가져오기 최대한 jquery 없는 것들 기준으로.

빠진 로드맵일정이 있다.

- Sass

- Sass-Lint

- Jest

- Gulp

- Storybook

위 부분들을 좀더 보강하면서 3개월은 증발시켜야 전향이 가능하겠다.

상당히 많은 시간을 소비할 수 있지만

개발 전체적인 틀과 흐름이 전환 될 것이다.

React의 최고의 장점은 React-Native 쪽을 진입하는데 좀더 패턴에 익숙함을 지속시킬 수 있고.

React+Electron의 조화가 멋들어지게 어울리는 바람에 전향했다.

최대한 학습해보자.

2018년에는 Typescript를 통해서 React를 더 손쉽게 짜는 방향으로 내 스스로가 변화될 것 같다.

Typescript + ES7도!