일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
- kotlinc
- 코틀린
- react
- 시플플은영원하구나
- vscode 수동업데이트
- ERR_CERT_AUTHORITY_INVALID
- ReactRouter withRouter
- ubuntu_rg_cpu_100%
- 자바스크립트
- VSCode
- 야근은결국승리
- 복붙하기좋은
- 날이새도록
- 무과금살아남기
- 공부할시간이
- 편하게쓰자
- ReactRouter 4
- 리엑트라우터 구버전 살리기
- 선택했을까
- 해볼게
- ReactRouter6 다운그레이드
- 모던디자인테마
- 나의야근
- checkupdates
- 신기술은
- HTML 자바스크립트 태그제거
- 안할수가없네
- 정규식
- 리엑트
- 반갑지는않아
- Today
- Total
필사(筆寫)
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도!