docs: Level 2 관련 내용 정리

.gitignore

@@ -102,3 +102,8 @@ dist
 
 # TernJS port file
 .tern-port
+
+# idea
+.idea
+*.iml
+.DS_Store

README.md

@@ -1,2 +1,97 @@
 # js-study-lv2
-단국대학교 자바스크립트 스터디 Level 2 과정을 위한 저장소
+
+## 목적
+
+- 프레임워크의 구조를 파악한다.
+- 프레임워크에 사용된 객체지향 패러다임을 이해한다.
+- MVVM에 대해 이해한다.
+
+## 스터디 과정
+
+- [1주차: React, Vue로 TodoList 만들기](./step1)
+- [2주차: Web Component 구성](./step2)
+- [3주차: 옵저버 패턴 적용](./step3)
+- [4주차: Store 구성](./step4)
+
+## 들어가기 전에
+
+### Editor 혹은 IDE
+
+- [VSCode](https://code.visualstudio.com/)
+  - 대부분의 프론트엔드 개발자가 사용하는 **무료** `에디터`
+  - 장점
+    - 강력한 플러그인 지원
+    - 직관적인 UI
+    - 빠름
+  - 단점
+    - 설치 직후 다운 받아야 하는 것들이 너무 많음
+    - 즉, 커스텀이 힘듦
+- [Intellij](https://www.jetbrains.com/ko-kr/idea/)
+  - 대부분의 개발자가 사용하는 **유료** `IDE`
+  - 장점
+    - 학생 이메일이 있을 경우 무료로 `Ultimate` 사용 가능
+    - 필요한 모든 기능이 탑재되어 있음
+  - 단점
+    - 기본적으로 기능이 너무 많아서 헷갈림
+    - 고사양 PC가 아닐 경우 버벅임
+
+
+### git
+
+> git 명령어에 대해 이해해야 합니다.
+
+- [git download](https://git-scm.com/)
+- [git 간편 안내서](https://rogerdudler.github.io/git-guide/index.ko.html)
+
+### git 명령어 요약
+
+`git` 설치가 완료되었다면
+
+- `mac`의 경우 terminal을 열어서 `git`을 입력하여 설치 되었음을 확인
+- `window`의 경우 폴더 혹은 바탕화면에서 마우스 우클릭으로 `git bash` 존재 여부 확인
+
+```bash
+
+########## 설치한 직후에 email, name 설정 ##########
+$ git config --global user.name "junilhwang"          # 본인의 github id 입력
+$ git config --global user.email "junil.h@kakao.com"  # 본인의 github email 입력
+#################################################
+
+# 프로젝트 코드 가져오기
+$ git clone https://github.com/DKU-STUDY/js-study-lv1
+
+# 프로젝트 폴더로 이동하기
+$ cd js-study-lv
+
+# 원격 저장소 존재 여부 확인
+$ git remote  
+> origin # origin은 `https://github.com/DKU-STUDY/js-study-lv1`의 별칭으로 등록된 원격 저장소
+
+# 테스트 파일 추가 
+$ echo "테스트 파일 추가" > test.txt
+
+# git 파일 추가 
+$ git add test.txt
+
+# 파일에 대한 커밋 로그 작성
+$ git commit -m "테스트 파일 추가"
+
+# 커밋 로그를 원격 저장소에 업로드
+$ git push origin main
+
+# 위의 명령어는 다음 명령어와 똑같음
+$ git push https://github.com/DKU-STUDY/js-study-lv1 main
+```
+
+* 잘 이해가 되지 않을 경우 디스코드 채널에 질문 남겨주세요!
+
+### Github
+
+- Github Pull Request에 대해 이해해야 합니다.
+- 이 [동영상](https://youtu.be/pR5SNFyzdg8)을 보면서 튜토리얼을 진행해주세요.
+
+## Reference
+- [객체지향의 기본 이론](https://junilhwang.github.io/TIL/CodeSpitz/Object-Oriented-Javascript/01-Intro/)
+- [MVVM System 만들기](https://junilhwang.github.io/TIL/CodeSpitz/Object-Oriented-Javascript/02-MVVM/)
+- [Vanilla Javascript로 웹 컴포넌트 만들기](https://junilhwang.github.io/TIL/Javascript/Design/Vanilla-JS-Component/)
+- [Vanilla Javascript로 상태관리 시스템 만들기](https://junilhwang.github.io/TIL/Javascript/Design/Vanilla-JS-Store/)

step1/README.md

@@ -0,0 +1,26 @@
+# 1주차: TodoList 만들기
+
+- [ ] Javascript Framework가 등장한 배경에 대해 조사하기 (5문장 요약)
+- [ ] Vue와 React의 장단점에 대해 비교하기 (5가지)
+- [ ] Vue로 TodoList 만들기
+  - [ ] Vue CLI로 프로젝트 구성
+  - [ ] TodoList 만들기
+    - [ ] 목록
+    - [ ] 추가
+    - [ ] 수정
+    - [ ] 삭제
+    - [ ] 토글
+- [ ] React로 TodoList 만들기
+  - [ ] CRA(Create React App)로 프로젝트 구성
+  - [ ] TodoList 만들기
+    - [ ] 목록
+    - [ ] 추가
+    - [ ] 수정
+    - [ ] 삭제
+    - [ ] 토글
+- [ ] Vanilla Javascript로 TodoList 만들기
+  - [ ] 목록
+  - [ ] 추가
+  - [ ] 수정
+  - [ ] 삭제
+  - [ ] 토글

step2/README.md

@@ -0,0 +1,12 @@
+# 2주차: Web Component 구성
+
+- [ ] 이론
+  - [ ] ES5의 Class와 ES6의 Class의 차이점에 대해 조사하기 (5가지)
+  - [ ] ES6의 Class만이 가지고 있는 특징과 장점에 대해 조사하기 (3가지)
+- [ ] 실습
+  - [ ] Component Class 만들기
+    - [ ] Vue와 React를 참고하여 자유롭게 구성해보기
+    - [ ] DOM 사용 최소화화기
+      - [ ] State(혹은 data)가 변할 때 만 렌더링이 되도록 구성
+  - [ ] TodoList 리팩토링
+

step3/README.md

@@ -0,0 +1,7 @@
+# 3주차: 옵저버 패턴 적용
+
+- [ ] 이론
+  - [ ] 옵저버 패턴에 대해 조사하기
+  - [ ] Flux 패턴에 대해 조사하기
+- [ ] 실습
+  - [ ] Class Component에 옵저버 패턴 적용하기 

step4/README.md

@@ -0,0 +1,4 @@
+# 4주차: Store 구성
+
+- [ ] Vuex 혹은 Redux 같은 중앙집중저장소 만들어서 적용하기
+- [ ] 렌더링 최적화하기