JavaScript 스터디

🏆 목표: JavaScript 기본 및 Frontend 지식 습득, 면접 대비

문서 목록
진행 방식
참여팀원

문서 목록

자바스크립트 스터디, 모던 JavaScript 튜토리얼 문서를 기반으로 진행

STEP 1

const와 let의 차이
스코프(함수 스코프, 블록 스코프), 스코프 체인(Scope chain)
호이스팅(Hoisting)
렉시컬 스코핑(lexical scoping)

STEP 2

전역 객체 window
원시타입, 참조타입
불변성
래퍼 객체

STEP 3

자바스크립트에서의 this
bind(), apply(), call()
화살표 함수(Arrow Function)

STEP 4

자바스크립트의 함수형 프로그래밍
클로저
객체 더 알아보기
Symbol

STEP 5

Iteration protocol
Iterable의 사용
Generator 함수

STEP 6

Class

STEP 7

비동기 프로그래밍

STEP 8

STEP 9, 10

자바스크립트 모듈의 역사(commonJS, ESM 등) (STEP 9)
자바스크립트 모듈 문법 (STEP 10)

STEP 11, 12

객체 (STEP 11)
프로토타입 (STEP 12)

STEP 13, 14, 15, 16, 17, 18

BOM (STEP 13)
DOM, DOM tree (STEP 14)
DOM API (STEP 15)
DOM reflow, repaint (STEP 16)
이벤트 등록 방식 (STEP 17)
이벤트 버블링, 캡처링 (STEP 18)

STEP 19

이벤트 위임

STEP 20

브라우저 기본 동작 이벤트

STEP 21

이벤트 디스패치, 커스텀 이벤트

STEP 22

마우스 이벤트

STEP 23

마우스 이벤트 > mouseover/out, mouseenter/leave

STEP 24

CORS

STEP 25

드래그 앤 드롭

STEP 26

포인터 이벤트

STEP 27

키보드 이벤트 - keydown, keyup

STEP 28

스크롤

STEP 29

Danfo.js

코드스피츠 - 객체지향 자바스크립트

STEP 30 1회차 객체지향 기본 이론

STEP 31 2회차 MVVM 시스템 만들기

STEP 32 3회차 MVVM 시스템 개선(1)

STEP 33 4회차 MVVM 시스템 개선(2)

STEP 34 5회차 MVVM 시스템 개선(3)

STEP 35

naver/fe-news 2021 4월호의 관심있는 주제 아티클 - JavaScript: What is the meaning of this?, 번역 정리

코드스피츠76 - CSS Rendering

STEP 36 [1회차 강의] 1/2 그래픽 시스템, CSS 스펙, Normal Flow, BFC/IFC

STEP 37 [1회차 강의] 2/2 Float

STEP 38 [2회차 강의] 모던 박스 모델

STEP 39 [2회차 강의] 포지션 모델

STEP 40 [3회차 강의] CSSOM & Vendor Prefix

STEP 41 [3회차 강의] 자바스크립트로 CSS 동적 조작하는 프레임워크 만들기

STEP 42 [3회차 강의] Keyframe rules, Typed CSSOM

STEP 43 [4회차 강의] Post Process, Transform 3D

진행 방식

공부한 내용을 Github, 블로그 등을 통해 정리하여 디스코드 채널에 공유한다. Javascript의 경우 구글링시 되도록 2년 이내의 자료를 참고하고 도서, 강의와 같이 다양한 자료도 참고하는 것이 좋다.

❗ 조사한 내용의 출처를 꼭 남길 것

❗ 리뷰일에 팀원들의 결과물에 꼭 리뷰하기(스스로 궁금증을 해결하는 것도 좋지만 서로의 결과물을 보고 질문, 리뷰하는 것이 더욱더 도움이 됨)

토요일 ~ 화요일: 주어진 범위 공부 및 정리
수요일: 팀원 서로의 결과물에 대해 질의응답
목요일: 자신의 결과물 보충
금요일: 쉬는 날

참여팀원

박은영(@eyabc) - 스터디 개설
박유림(@pul8219)
김형욱(@khw970421)
신정웅(@JeongShin)
이노원(@quavious)