웹 개발(프론트 엔드 개발)에서 알아야 할 것들 (ver 0.1)

레이아웃 잡기 

 flex에 대한 설명 

http://www.beautifulcss.com/archives/2812

box display, float 간의 관계 

http://blog.wystan.net/2009/01/12/relationships-between-position-float-display

알아놓을 속성들 

https://webdesign.tutsplus.com/ko/articles/7-css-units-you-might-not-know-about--cms-22573

 동적 레이아웃 (미디어 쿼리)

 -

CSS3 

 치트 시트 https://nanati.me/css-code-skill/

 Form 레이아웃 예제 : https://colorlib.com/wp/free-html5-contact-form-templates/ 

 table 예제 : https://nanati.me/html_css_table_design/

 

css 로 만든 멋있는 디자인 https://github.com/comehope/front-end-daily-challenges

 https://colorlib.com/wp/free-html5-admin-dashboard-templates/

DOM 에 대한 이해, 랜더링 과정

https://janghanboram.github.io/2018/06/06/browser-rendering/

http://www.3daysofprogramming.com/frontend/2017/08/07/critical-rendering-path-optimization.html

Browser 엔진의 이해와 다루기 

 $scope : 데이터 바인딩을 위해 사용 

 $argument :  

웹 기반 지식 잘 정리된 곳 

 - https://github.com/haeungun/WebBasic

 

프론트 엔드 post 를 위한 폼 데이터 관리 

 - https://blooom.co.kr/angular-2-forms-%EB%8D%B0%EC%9D%B4%ED%83%80-%EA%B8%B0%EB%B0%98%EC%9D%98-%ED%8F%BC-reactive-form/

프론트 엔드 환경 구축 

 web-pack, babel 설정

  - https://beomi.github.io/2017/10/18/Setup-Babel-with-webpack/

  # dist/bundle과 web-pack, package.json 에 대해 이해함

웹 디자인 terminal로 

 https://webdesign.tutsplus.com/series/the-command-line-for-web-design--cms-777

웹 라이브러리 

 egjs (naver) 

엥귤러 

 엥귤러 matarial desgin 레퍼런스 

 - https://alligator.io/angular/material-design-angular-reference/

 

 form 데이터 처리 

 -> ngModel   혹은 RelactForm

비동기 처리 

promise : http://programmingsummaries.tistory.com/325

이미지 로딩 

lazy loading : http://www.3daysofprogramming.com/frontend/2017/12/18/image-lazy-load.html

엥규러에서 css 임포트 성능 

https://coryrylan.com/blog/sass-and-css-import-performance-in-angular