🔎 스터디 소개

내용 보기

📌 Introduction

한줄요약 : 자바스크립트 개념을 깃허브에 정리하고 질의응답하기

'FE재남'님이 진행하시는 Javascript Deep Dive 줌스터디(이하 줌스터디)에 속한 복습스터디입니다.

Deep Dive책을 다시 살펴보는 목적을 가지며,

종종 줌스터디에서 언급된 내용에 대해 토의하는 시간을 가질 예정입니다.

📌 When, Where

• 매주 월요일 7시~8시, Discord

  줌스터디(월 8시반)시작 전에 미리 만나서 한정적인 시간 안에 질의응답을 하는 컨셉입니다.

• 기간 : 9월 13일 월요일부터 두 달간 예정.

  (진도에 따라 변동이 생길 수 있습니다.)

📌 Why

Javascript의 작동원리를 근본적으로 이해하고, 코드를 작성할 때 도움이 되기 위함입니다.

줌스터디에서 진도가 나간 부분을 다시금 복습합니다.

굳이 스터디의 성격을 정하자면 면접스터디입니다.

📌 What

일주일간 대주제 하나를 공부합니다.

소주제를 1/n로 분배하고, 각자 맡은 파트를 정리합니다.

맡은 소주제와 연관된 질문 2가지를 정합니다.

예시

대주제 : 스코프

소주제 : 스코프의 종류, 스코프 체인, 함수레벨 스코프, 렉시컬 스코프

질문 : 변수를 참조할 때 자바스크립트 엔진이 작동하는 과정은?

📌 How

• Github Repository에 마크다운으로 작성한 글을 올립니다.

  예시) https://github.com/baeharam/Must-Know-About-Frontend/blob/main/Notes/javascript/scope.md

  “스터디 repository를 fork떠서 맡으신 파트 작성하시고 PR 날려주세요”

  PR 날리기~~

  https://wayhome25.github.io/git/2017/07/08/git-first-pull-request-story/

• checklist 질문을 각자 2개씩 만듭니다.

  예시)checklist 부분만 참고해주세요

  https://github.com/Knowre-Dev/WebDevCurriculum/tree/master/Quest03

• Discord에서 월요일 7시에 만나 질의응답 시간을 가집니다.

  • 화상은 켜지 않고 음성으로 진행하며, 필요한 경우 화면공유는 자유롭게 합니다.

  • 4명*질문 2개 = 총 8개의 질문으로 구성된 리스트에서

  • 사다리타기로 질문에 대답할 사람을 정합니다.

  • 즉, 1인당 2개의 질문에 답변하게 됩니다.

    (따라서 소주제를 맡아서 작성하더라도 대주제 전체를 공부하게 됩니다.)

  • 답변이 끝나면 약간의 토의시간을 가집니다.

📖 진행 방식 및 커밋 컨벤션

내용 보기

진행 방식

• 매주 월요일 오후 7시에 스터디를 진행한다.
• 매주 토요일까지 각자 맡은 파트를 정리해서 PR을 보낸다.
• 스터디 시작 전까지 다른 사람의 PR을 읽고 코멘트를 남긴다.
• 자신의 PR에 모두 리뷰가 달리면 PR을 스스로 머지한다.(Squash and Merge)
• README.md 파일에 매 주차 진행사항을 정리한다.
• 매주 일요일까지 자신이 맡은 파트에 대한 질문 2가지를 issue에 올린다.

커밋 컨벤션

• 커밋 메세지는 한글로 작성한다.
• 커밋의 의도에 따라 아래 prefix를 붙인다.
  • create: 글을 새로 추가하는 경우
  • update: 기존에 작성한 글을 수정하는 경우
  • delete: 기존에 작성한 글을 삭제하는 경우
  • docs: README.md 파일을 수정하는 경우
  • chore: 그 외의 경우

📚 진행 상황

1주차 변수

내용 보기

• 상민: 4장 변수
• 진주: 13장 스코프
• 윤호: 14장 전역변수의 문제점
• 태은: 15장 let, const 키워드와 블록 레벨 스코프

2주차 타입, 실행 컨텍스트

내용 보기

• 진주: 6장 데이터 타입
• 윤호: 9장 타입 변환과 단축 평가
• 상민: 11장 원시 값과 객체의 비교
• 태은: 23장 실행 컨텍스트

3주차 JavaScript 기초 ,함수

내용 보기

• 진주: 5장 표현식과 문 + 16장 프로퍼티 어트리뷰트
• 윤호: 7장 연산자 + 12장 함수
• 태은: 8장 제어문 + 10장 객체 리터럴
• 상민: 17장 생성자 함수에 의한 객체 생성 + 18장 함수와 일급 객체

4주차 빌트인 객체, strict mode, 프로토타입, this

내용 보기

• 윤호: 19장 프로토타입 전반부 ( ~ 19.7)
• 진주: 19장 프로토타입 후반부 (19.8 ~ )
• 상민: 20장 strict mode + 21장 빌트인 객체
• 태은: 22장 this

5주차 클로저, 클래스, 함수

내용 보기

• 윤호: 24장 클로저
• 진주: 25장 클래스(25.1 ~ 25.6)
• 상민: 25장 클래스(25.7 ~ 25.8)
• 태은: 26장 ES6 함수의 추가 기능

6주차 Symbol, 이터러블, 스프레드, 디스트럭처링, Set, Map

내용 보기

• 태은: 33장 Symbol, 34장 이터러블
• 윤호: 35장 스프레드 문법, 36장 디스트럭처링 할당
• 진주: 37장 Set과 Map

7주차 브라우저의 렌더링 과정, DOM, 이벤트

내용 보기

• 진주: 38장 브라우저의 렌더링 과정
• 태은: 39장 DOM(39.1 ~ 39.4)
• 상민: 39장 DOM(39.5 ~ 39.9)
• 윤호: 40장 이벤트

8주차 비동기 프로그래밍

내용 보기

• 윤호: 41장 타이머
• 상민: 42장 비동기 프로그래밍
• 태은: 43장 AJAX
• 진주: 44장 REST API

9주차 프로미스, 제네레이터, async/await, 모듈

내용 보기

• 윤호: 45장 프로미스
• 진주: 46장 제네레이터와 async/await
• 상민: 47장 에러 처리
• 태은: 48장 모듈, 49장 Babel과 Webpack을 이용한 ES6+/ES.NEXT 개발 환경 구축