개발자 프론트엔드 스터디 커리큘럼

I.  브라우저에서 Web의 구현방법

II.  자바스크립트 소스 구현 위치

III.  HTML, CSS, JS 구현 순서

IV.  HTML, CSS, JS 구동 순서

V.  브라우저별 구현/구동 차이

I.  block과 inilne-block의 개념과 활용법

II.  block 요소 정렬

III.  엘리먼트의 부모/자식/형제 관계와 텍스트

IV.  각종 웹 폰트 사용법 및 폰트사이즈
[한글/영어/타이틀 폰트 따로따로]
[폰트가 잘 먹히고 있는지는 어떻게 확인할까?]
[px, pt, em, rem의 차이는?]

V.  POSITION 속성
[Absolute와 TOP, LEFT, RIGHT, BOTTOM, RELATIVE의 개념과 활용법]

VI.  Display 속성
[display로 풀지 못하는 문제는 position 속성으로 해결하자.]

VII.  젠코딩과 자식/후손 선택자 그리고 text-align

VIII.  margin, padding과 inline vs inline-block

VIIII.  border-radius와 inherit 그리고 a의 노말라이즈

X.  text-shadow, box-shadow, 시멘틱 태그

XI.  생산성을 좌우하는 Grid와 Flex

XII.  CSS 프레임워크 알아보기

XIII.  SASS와 CSS 차이 및 간단히 알아보기

I.  자바스크립트 데이터 타입
[Number, BigInt, string, boolean, object, symbol, undefined, null]

II.  자바스크립트 변구 var, const, let
[var의 문제점]

III.  스크립트 내 Array 배우기

IV.  DOM 다루기

V.  스크립트 내 OOP (객체지향) 프로그래밍

VI.  Object Literal 알아보기

VII.  반복문 map, filter, reduce

VIII.  조건문과 Function

VIIII.  this 키워드

X.  Scope?

XI.  자바스크립트 타 API 사용방법

XII.  내장함수
[String, Number, Boolean, Array, Date, Math]

XIII.  객체
[JSON, Window]

 

?1.  만능 reduce?
[reduce + 복잡한함수 + acc < map + 간단한함수 + reduce]

?2.  reduce 하나보다 map + filter+reduce

?3.  forEach, map, filter, reduce 메서드 작동원리

?4.  L.filter, L.map, L.range, take 의 평가순서 및 써보기

?5.  range, map, filter, take, reduce 중첩사용 및 함수들이 가지는 결합법칙

I.  Vue.js 소개
– MVVM 모델에서의 Vue
– 기존 웹 개발 방식 (HTML, Javascript)

II.  Reactivity 구현 및 코드 라이브러리화 하는 법

III.  뷰 개발자도구 보기

IV.  컴포넌트
– 전역 컴포넌트 등록
– 지역 컴포넌트 등록
– 전역과 지역 컴포넌트의 차이
– 컴포넌트와 인스턴스의 관계

V.  컴포넌트의 통신방법
– 컴포넌트 통신
– 컴포넌트 통신규칙이 필요한 이유
– 같은 컴포넌트 레벨 간의 통신 방법 및 구현
– 웹 서비스에서의 클라이언트와 서버와의 HTTP 통신 구조

VI.  HTTP 라이브러리와 Ajax 그리고 Vue Resource

VI.  axios 소개 및 오픈 소스를 사용하기 전에 알아야 할 것들

VI.  Props 속성

VII.  event emit
– event emit 으로 콘솔 출력하기

VIII.  뷰 인스턴스에서의 this

VIIII. 데이터 바인딩과 computed 속성

X.  뷰 디렉티브와 v-bind

XI.  클래스 바인딩, v-if, v-show

XII.  속성 및 처리방법
– methods 속성과 v-on 디렉티브를 이용한 키보드, 마우스 이벤트 처리 방법
– watch 속성
– watch 속성 vs computed 속성
– computed 속성을 이용한 클래스 코드 작성 방법

 

?1.  모르는 문법이 나왔을 때 공식 문서를 보고 해결하는 방법

?2.  오류가 났을 때 구글 검색 및 답변 선택법

?3.  크롬 개발자 도구 네트워크 패널 보는 방법