diff --git a/sumin020/Week1/Week1.md b/sumin020/Week1/Week1.md
new file mode 100644
index 0000000..ef18df6
--- /dev/null
+++ b/sumin020/Week1/Week1.md
@@ -0,0 +1,590 @@
+# 1주차 정리
+
+# Git 정리
+
+# 1장
+
+# GIT이란?
+
+- 코드 버전 관리와 동시 협업을 할 수 있는 프로그램이다.
+- 버전 관리란 파일의 변화를 시간에 따라 기록했다 나중에 특정 시점의 버전을 다시 꺼내올 수 있는 시스템을 말한다.
+- Git은 매번 작성했던 버전을 하나의 버전으로 저장할 수 있게 해준다.
+- Git은 여러 개발자들이 협업 할 수 있게 해주는 기능도 있다. Git을 이용하면 여러 개발자가 동시에 작성한 코드를 합칠 수 있다.
+
+## Git의 장점
+
+1. 지난 과정을 확인 할 수 있다.
+2. 잘못된 부분이 생기면 이전 버전으로 돌아갈 수 있다.
+
+# Git의 역사
+
+- 리누스 토발즈라는 사람이 만들었다.
+- 리누스 토발즈는 리눅스를 만든 사람으로 리눅스를 만든 이후 BitKeeper라고 하는 툴로 리눅스의 각 버전들을 관리하고 있었다. 그런데 어떤 일을 계기로 사이가 틀어지게 되었고 BitKeeper를 대신할 다른 버전관리 시스템을 찾아보게 되었다. 하지만 맘에 드는 버전관리 툴을 찾지 못했고 Git을 직접 만들게 되었다.
+- Git은 당시에 빠른 속도, 단순한 디자인, 비선형적 개발 지원, 완전 분산형 시스템, 리눅스와 같은 거대한 프로젝트도 속도 저하의 문제없이 관리할 수 있는 시스템이라는 목표를 갖고 설계 제작되었다.
+
+# GitHub란?
+
+- 원격저장소를 대신 제공해주는 서비스다.
+- GitHub는 외부 컴퓨터를 따로 마련하지 않아도 작업물을 본인의 컴퓨터가 아닌 다른 곳에 저장할 수 있게 한다.
+- GitHub는 Git으로 만든 작업물을 올려놓을 수 있는 사이트이다.
+- 다른 사람과의 협업이 가능해졌다.
+
+- 추가
+    
+    Git은 다른 컴퓨터에 작업물을 보낼수도 있다. 
+    
+    외부 컴퓨터에 작업물을 보낸다는 건 백업본을 만들 수 있다는 것이다. 
+    
+    다른 컴퓨터에 작업물을 보내는 것의 또 다른 장점은 다른 사람과의 협업이 가능해진다는 것이다. 
+    
+- 
+
+# 2장
+
+# Git의 repository(저장소)
+
+- 우리가 어떤 프로젝트를 할 때 프로젝트에 필요한 것을 담는 프로젝트 디렉토리를 만든다.
+- 이때 Git으로 프로젝트 디렉토리 버전을 관리하기 시작하면 원하는 시점마다 디렉토리에 무엇이 있는지 내용이 어떻게 변해가는지 관리할 수 있다.
+- .git 디렉토리가 레포지토리다!
+
+# Git의 commit
+
+- 프로젝트 디렉토리의 특정 모습을 하나의 버전으로 남기는 것이다.
+- 커밋하면 커밋하는 당시의 프로젝트 디렉토리의 모습이 사진처럼 레포지토리에 저장된다.
+- 고정된 결과물 자체도 커밋이라고 한다.
+- 커밋을 하기 전에 Git에게 커밋하는 사람이 누구인지 알려줘야 한다.
+- 커밋하기 전에는 커밋할 파일들을 미리 지정해 줘야 한다. (add 커맨드)
+
+## commit 주의 사항
+
+1. 처음으로 커밋을 하기 전 사용자의 이름과 이메일 주소를 설정해야 한다.
+2. 커밋 메시지 남기기
+3. 커밋 하기 전 커밋할 파일을 git add로 지정해줘야 한다.
+
+- 🌟git init
+    
+    현재 디렉토리를 Git이 관리하는 프로젝트 디렉토리(=working directory)로 설정하고 그 안에 레포지토리 생성
+    
+
+- 🌟git config [user.name](http://user.name/) “아이디”
+    
+     사용자의 아이디를 “아이디”로 설정
+    
+
+- 🌟git config [user](http://user.name/).email “이메일”
+    
+     사용자의 이메일를 “이메일”로 설정
+    
+
+- 🌟git commit –m “커밋 메세지”
+    
+     커밋할 때 메모를 남기는 것으로 어떤 변화가 있었는지 알려준다.
+    
+
+- 🌟git add “파일” / .
+    
+     파일을 커밋한다고 지정하는 것
+    
+    ++ “파일” 대신 .을 쓰면 변경사항이 생긴 모든 파일들이 모두 지정된다.
+    
+
+- 🌟git status
+    
+     Git이 인식하고 있는 프로젝트 디렉토리의 현재 상태를 보여줌
+    
+
+- 🌟git reset “파일”
+    
+     staging area에서 파일 제거
+    
+    하지만 변경된 내용은 working directory애 그대로 남아있다!
+    
+
+- 🌟git help “커맨드”
+    
+     사용법이 궁금한 Git 커맨드의 공식 메뉴얼 내용 출력
+    
+
+# Git의 3가지 작업 영역
+
+### 1. working directory (= working tree)
+
+- working directory는 작업을 하는 프로젝트 디렉토리를 말한다.
+
+### 2. staging area (= index)
+
+- git add를 한 파일들이 존재하는 영역이다.
+- 커밋을 하면 staging area에 있는 파일들만 커밋에 반영된다.
+- 이 단계를 통해 선별적인 커밋 가능
+
+### 3. repository
+
+- working directory의 변경 이력들이 저장되어 있는 영역이다.
+
+<aside>
+💡 즉, 1번에서 작업하고 git add로 2번에 가게 되고 커밋을 하면 2번에 있던 파일들이 스냅샷처럼 3번에 저장된다!
+
+</aside>
+
+# Git의 4가지 파일 상태
+
+### Untracked
+
+파일이 Git에  의해서 변동 사항이 추적 되지 않고 있는 상태
+
+### Tracked
+
+파일이 Git에  의해서 변동 사항이 추적 되고 있는 상태
+
+- Staged
+    
+    파일의 내용이 수정된 후 staging area에 올라와 있는 상태
+    
+- Unmodified
+    
+    현재 파일의 내용이 최신 커밋의 모습과 비교했을 때 전혀 바뀐 게 없는 상태
+    
+- Modified
+    
+    현재 파일의 내용이 최신 커밋의 모습과 비교했을 때 조금이라도 바뀐 게 있는 상태
+    
+
+# 3장
+
+# GitHub에 관해서…
+
+작업하던 내용을 전송한다는 건 레포지토리를 전송하는 것이다. 레포지토리에는 프로젝트 디렉토리의 모든 변경이력이 있다. 이걸 외부 컴퓨터에 전송하면 외부 컴퓨터에서 내 컴퓨터처럼 작업 가능하고 버전관리도 가능하다. 
+
+ ⇒ GitHub가 이런 기능을 제공한다.
+
+### git push/ pull
+
+- 로컬 레포지토리의 내용을 리모트 레포지토리에 보내고 로컬 레포지토리에 새로운 커밋을 하면 리모트 레포지토리에 반영되지 않는다.
+- 만약 새로운 커밋을 리모트 레포지토리에도 반영하고 싶다면 새로운 작업을 해야하는데 이는 git push다.
+- 리모트 레포지토리의 새로운 커밋을 로컬 레포지토리에 반영하려면 git pull을 사용하면 된다.
+- git push는 원래 리모트 레포지토리의 주인만 할 수 있다. 다른 사람도 할 수 있게 하려면 그 사람을 collaborator로 초대하면 된다.
+
+### 🌟 git push
+
+로컬 레포지토리 내용을 그대로 리모트 레포지토리에 반영한다.
+
+### 🌟 git pull
+
+리모트 레포지토리의 새로운 내용을 가져와서 로컬 레포지토리에 반영한다.
+
+### 로컬 레포지토리와 똑같은 내용의 리모트 레포지토리를 만드는 이유?
+
+1. 안전성(복원/백업)
+2. 다른 개발자들과 협업 가능
+    - 각각의 개발자가 리모트 레포지토리의 내용을 가져와 새로운 커밋을 하고 리모트 레포지토리에 push를 하는 식으로 협업이 가능하다.
+
+# 오픈 소스 프로젝트
+
+- 소스 코드가 공개되어 있는 프로젝트
+- ‘오픈 소스’란 프로그램의 소스 코드가 대중에 공개된 상태를 뜻한다.
+- 오픈 소스라고 해서 아무런 제약이 없는 것은 아니다. (오픈 소스에도 다양한 종류의 라이센스가 있기 때문이다.)
+
+### 🌟 git clone “주소”
+
+깃허브 프로젝트의 레포지토리를 그대로 복제한다. 
+
+# README.md
+
+- 프로젝트에 대한 설명과 주요 사용법, 실행시키기 위해 어떤 사전 작업이 필요한지 알려주는 내용이 적혀 있다.
+- .md는 markdown의 줄임말로 이 파일에 마크다운으로 내용을 작성할 수 있다.
+
+# 4장
+
+# commit history
+
+- 커밋 히스토리란 이때까지 한 커밋들을 말한다.
+- 커밋 아이디( = 커밋 해시)로 각 커밋을 구별해 관리한다.
+
+### 🌟 git log
+
+커밋 히스토리를 출력한다.
+
+### 🌟 git log —pretty=oneline
+
+커밋 히스토리를 한 줄로 깔끔하게 보여준다.
+
+### 🌟 git show “커밋 아이디”
+
+커밋할 때 이전과의 차이를 출력한다.
+
+### 🌟 git commit —amend
+
+최신 커밋을 수정할 수 있다.
+
+### commit은 -m 커맨더를 쓰지 않고도 커밋 메세지를 쓸 수 있다!
+
+- git commit만 치면 창이 뜬다. 거기에 커밋 메세지를 입력하면 된다.
+
+# commit에 관해서…
+
+- 커밋은 staging area의 현 상태를 그대로 하나의 버전으로 남기는 작업, 또는 그 결과물을 가리키는 말이다.
+- 커밋에는 크게 3가지 정보가 있다.
+    1. 커밋을 한 사용자 아이디
+    2. 커밋한 날짜, 시간
+    3. 커밋 메시지
+
+### 커밋 메시지 가이드라인
+
+1. 커밋 메시지의 제목과 상세 설명 사이에는 한 줄을 비워둔다.
+2. 커밋 메시지의 제목 뒤에 온점 붙이지 말기
+3. 커밋 메시지 제목의 첫 번째 알파벳은 대문자다.
+4. 커밋 메시지의 제목은 명령조로 작성한다.
+5. 커밋의 상세 내용에는 왜 커밋을 했는지/ 어떤 문제가 있었고 적용한 해결책이 어떤 효과를 가지는지 적어두면 좋다.
+6. 최대한 친절하게 작성한다.
+
+### 커밋할 때 알아야 할 가이드라인
+
+1. 하나의 커밋에는 하나의 수정 사항, 하나의 이슈를 해결한 내용만 남긴다.
+2. 현재 프로젝트 디렉토리의 상태가 그 내부의 전체 코드를 실행했을 때 에러가 발생하지 않는 상태인 경우에만 커밋을 해야 한다.
+
+# 커맨드에 alias 설정하기
+
+- Git에는 길이가 긴 경우의 커맨드 전체에 별명을 붙여서 그 별명을 사용할 수 있도록 해주는 기능이 있다.
+- 붙이는 별명을 **alias**라고 하고, 별명을 붙이는 행위를 **aliasing**이라고 한다.
+
+### 🌟 git config alias.”별명” “커맨드”
+
+길이가 긴 커맨드에 별명을 붙여서 이후로는 별명으로도 해당 커맨드를 실행할 수 있게 설정한다.
+
+# 두 커밋 간의 차이 보기
+
+### 🌟 git diff “이전 커밋 아이디” “이후 커밋 아이디”
+
+두 커밋 간의 차이 비교한다.
+
+# HEAD란?
+
+- 보통 가장 최근에 한 커밋을 가리킨다.
+- 매번 더 새로운 커밋을 가리킨다.
+- working directory는 HEAD 가 가리키는 커밋에 따라 구성된다. 즉, HEAD 가 가리키는 commit에 따라 working directory는 그걸 따라 변한다.
+
+# git reset에 대하여…
+
+- 헤드가 과거의 커밋을 가리키게 할 수 있다.
+- working directory의 내용도 과거 커밋 모습으로 돌아가게 한다.
+- 과거 커밋으로 아예 돌아가고 싶을때 사용한다.
+
+## git reset의 3가지 옵션
+
+### 1.  soft
+
+<aside>
+🌟 git reset —soft “커밋 아이디”
+
+</aside>
+
+- HEAD가 특정 커밋을 가리키도록 이동시킨다.
+- staging area와 working directory는 그대로이다.
+
+### 2.  mixed
+
+<aside>
+🌟 git reset —mixed “커밋 아이디”
+
+</aside>
+
+- HEAD가 특정 커밋을 가리키도록 이동시킨다.
+- staging area도 특정 커밋처럼 리셋된다.
+- working directory는 그대로이다.
+
+### 3.  hard
+
+<aside>
+🌟 git reset —hard “커밋 아이디”
+
+</aside>
+
+- HEAD가 특정 커밋을 가리키도록 이동시킨다.
+- staging area도 특정 커밋처럼 리셋된다.
+- working directory도 특정 커밋처럼 리셋된다.
+
+## HEAD를 기준으로 reset 하기
+
+### 🌟 git reset --hard HEAD^
+
+이전 커밋으로 reset 된다.
+
+### 🌟 git reset --hard HEAD~2
+
+HEAD가 가리키는 커밋보다 2단계 이전 커밋으로 reset 된다.
+
+# Tag
+
+- 프로젝트에서 주요 버전의 시작점이 되는 커밋에 태그를 단다.
+
+### 🌟 git tag “태그 이름”  “ 커밋 아이디”
+
+특정 커밋에 태그를 붙인다.
+
+### 🌟 git tag
+
+모든 태그를 출력한다.
+
+### 🌟 git show “태그 이름”
+
+태그와 연결된 커밋을 출력한다.
+
+# 5장
+
+# Branch란?
+
+- branch는 하나의 코드 관리 흐름이다.
+- branch는 어떤 커밋을 가리키는 존재다.(포인터)
+- main branch는 레포지토리를 만들고 커밋을 하면 자동으로 생기는 브랜치이다. (기본 브랜치)
+
+### 🌟 git branch “브랜치 이름”
+
+브랜치 만든다.
+
+### 🌟 git checkout “브랜치 이름”
+
+해당 브랜치로 이동한다.
+
+### 🌟 git branch
+
+브랜치 목록을 출력한다.
+
+### 🌟 git branch –d “브랜치 이름”
+
+브랜치를 삭제한다.
+
+### 🌟 git checkout –b “브랜치 이름”
+
+브랜치를 만들고 바로 해당 브랜치로 이동한다.
+
+# Branch merge하기
+
+- merge는 헤드가 가리키던 커밋에 다른 브랜치가 가리키던 커밋을 합쳐서 새로운 커밋을 만드는 작업이다.
+- merge를 통해서 생겨난 커밋을 merge commit이라 한다.
+
+### 🌟 git merge “브랜치 이름”
+
+현재 브랜치에  “브랜치 이름” 브랜치를 합친다.
+
+## Conflict
+
+- merge할 때 conflict가 발생할 수 있다.
+
+### 해결 방안
+
+1. conflict가 발생한 파일을 연다
+2. merge의 결과가 되었으면 하는 모습대로 코드를 수정한다.
+3. 커밋하기
+
+또는 merge 자체를 취소해도 된다.
+
+### 🌟 git merge --abort
+
+머지 작업을 취소한다.
+
+### 파일 여러개가 conflict
+
+1. 파일 하나씩 conflict를 해결하고 git add “파일 이름” 커맨드로 하나씩 staging area에 올리거나(중간중간에 git status 커맨드로 현재 상태 확인하면서)
+2. 모든 파일들의 conflict를 다 해결하고, git add . 커맨드로 한번에 staging area에 올리고
+3. 커밋한다.
+
+# 리모트 레포지토리에 대한 추가 설명
+
+### 🌟 **git remote add origin “깃 주소”**
+
+- “깃 주소” 리모트 레포지토리를 **origin**이라는 이름으로 등록하겠다는 뜻이다.
+- origin 대신 다른 단어를 쓸 수 있으나 origin을 쓰는 것이 관습이다.
+
+### 🌟 **git push -u origin master**
+
+- 현재 로컬 레포지토리에 있는 main 브랜치의 내용을 origin이라는 리모트 레포지토리로 보낸다는 뜻이다.
+- 이때 같은 이름의 브랜치로 전송하게 되는데 만약 origin이라는 리모트 레포지토리에 main 브랜치가 없으면 브랜치를 새로 생성하고 푸시합니다.
+- 이때 -u는 --set-upstream이라는 옵션의 약자로 사용하면 로컬 레포지토리에 있는 master 브랜치가 origin에 있는 main 브랜치를 tracking하는 걸로 설정된다.
+- tracking connection이 한번 설정되고 나면, 자동으로 git pull, push등이 작동한다.
+
+# HEAD 추가 내용
+
+- 사실 브랜치는 커밋을 가리키는 존재(포인터)이고, HEAD는 이런 브랜치를 통해 커밋을 간접적으로 가리키는 존재(포인터)이다.
+- 즉, 헤드는 커밋을 직접적으로 가리키는 게 아니라 브랜치를 가리킨다.
+
+# git reset과 checkout
+
+## reset 주의 사항
+
+- 과거의 커밋으로 git reset을 한다고 그 이후의 커밋이 사라지는 건 아니다.
+- 현재 HEAD가 가리키고 있는 커밋 이후의 커밋으로도 리셋할 수 있다.
+
+## git reset과 checkout 차이
+
+- checkout은  HEAD가 직접적으로 가리키는 것을 바꿀 수 있는데 헤드가 직접 커밋을 가리키도록 할 수 있다. 이게 바로 Detached HEAD다.
+- 위의 경우는 브랜치의 특정 시점으로 돌아가서 새로운 브랜치를 만들 때 주로 사용 된다.
+
+reset
+
+checkout
+
+- 헤드가 가리키던 브랜치가 다른 커밋을 가리키기도 한다.
+
+- 헤드 자체가 커밋이나 브랜치를 가리키도록 한다.
+- 헤드도 결국 간접적으로 다른 커밋을 가리키게 된다.
+
+# 6장
+
+# Git 실무 지식 1️⃣
+
+## **git push 전에 보통 git pull을 해야하는 이유**
+
+- 내가 로컬 레포지토리에서 수정하고 커밋하려고 할 때 리모트 레포지토리에 변화가 있다면 git push는 실패한다. 이 경우 git pull을 먼저 해 merge한다.
+- 이때 conflict가 발생할 수도 있는데 전에 배운 내용처럼 해결 후 다시 push하면 된다.
+- 리모트 레포지토리에 있는 커밋이 로컬 레포지토리보다 한 단계 앞서 있을 때는 어차피 git pull을 해야만 git push를 할 수 있다.
+- 여러 개발자가 협업을 할 때는 리모트 레포지토리가 가장 중심이자 우선이 된다.
+
+## Fetch
+
+- git pull은 리모트 레포지토리에 있는 브랜치를 가져 와 현재 브랜치에 자동으로 머지한다.
+- git fetch는 리모트 레포지토리에 있는 브랜치를  머지는 하지 않고 가져오기만 한다.
+- fetch는 브랜치 레포지토리에 있는 브랜치의 내용을 일단 가져와서 살펴본 후에 머지하고 싶을 때 사용한다.
+- 이후 git diff로 차이점을 보고 해결한다.
+- (브랜치를 가져온다는 것은 브랜치가 가리키고 있는 커밋 이전에 이루어진 모든 커밋들을 가져온다는 것이다.)
+
+### 🌟 git fetch
+
+로컬 레포지토리에서 현재 HEAD가 가리키는 브랜치의 업스트림(upstream) 브랜치로부터 최신 커밋들을 가져온다.
+
+## 코드 작성자 찾기
+
+- git blame은 어떤 파일의 특정 코드를 누가 작성했는지 찾아내기 위한 커맨드다.
+
+### 🌟 git blame
+
+어떤 파일의 특정 코드를 누가 작성했는지 찾아내기 위한 커맨드이다.
+
+특정 파일의 내용이 어떤 커밋에 의해 생긴 것인지 출력한다.
+
+## 커밋 취소하기
+
+- git revert를 이용해 커밋에서 이루어진 작업을 취소할 수 있다.
+
+### 🌟 git revert “커밋 아이디”
+
+특정 커밋에서 이루어진 작업을 되돌리는(취소하는) 커밋을 새로 생성한다.
+
+### 🌟 git revert “시작 전 줄 커밋 아이디”..”지우고 싶은 마지막 커밋 아이디”
+
+위와 같으나 여러 커밋을 취소할 수 있다.
+
+첫번째 커밋 아이디는 지워지지 않는다.
+
+### 왜 reset이 아닌 revert를 쓸까?
+
+- reset는 HEAD가 간접적으로 가리키던 커밋이 바로 직전 커밋으로 이동하게 된다.
+- 이때 리모트 레포지토리에 더 최신 커밋이 있기에 이 상태에서는 git push를 할 수 없다.
+- revert는 특정 커밋에서 이루어진 작업을 되돌리는(취소하는) 커밋을 새로 생성하기 때문에 최신 커밋이 생기는 것이다.
+- 따라서 revert를 쓰면 git push를 할 수 있다.
+- 하지만 전 커밋과 새로운 커밋이 똑같기 때문에 낭비다. 따라서 커밋은 신중하게 해야 한다.
+
+# 7장
+
+# Git 실무 지식 2️⃣
+
+## git reset 후 돌아오기
+
+- git reset을 해도 그 이후의 커밋들이 사라지는 것은 아니다.
+- 만약 이후의 커밋의 아이디를 안다면 git reset 명령어로 다시 돌아올 수 있다.
+- 만약 이후의 커밋 아이디를 모른다면 git reflog로 커밋 아이디를 확인 할 수 있다.
+- reflog란 reference log의 줄임말로 헤드가 이때까지 가리켜왔던 커밋들을 기록한 정보를 출력한다.
+
+### 🌟 git reflog
+
+헤드가 이때까지 가리켜왔던 커밋들을 기록한 정보를 출력한다.
+
+## 커밋 히스토리 보는 다른 방법
+
+### 🌟 git log —pretty=oneline --all
+
+모든 브랜치의 커밋들을 보여준다.
+
+### 🌟 git log —pretty=oneline --all --graph
+
+커밋 히스토리가 각 브랜치와의 관계가 잘 드러나도록 그래프 형식으로 출력된다.
+
+## Rebase (커밋 재배치)
+
+- 커밋을 재배치한다.
+- 머지와 거의 동일하다.
+- 리베이스나 머지나 결과물은 같다.
+- 하지만 머지는 머지 커밋이 생기지만 리베이스는 같은 선 상으로 옮겨가는 것이다.
+
+### 🌟 git rebase “브랜치”
+
+커밋을 재배치한다.
+
+### 🌟 git rebase continue
+
+git rebase로 conflict 발생 시 해결하고 커밋 대신 사용한다.
+
+컴플릭트가 발생해서 제대로 진행되지 못한 리베이스를 계속 진행하라는 뜻이다.
+
+### 머지와 리베이스 차이
+
+1. 리베이스는 새로운 커밋을 만들지 않는다.
+2. 리베이스로 만들어진 커밋 히스토리는 머지로 만들어진 커밋 히스토리보다 좀 더 깔끔하다.
+
+<aside>
+💡 즉, 두 브랜치를 합쳤다는 정보가 커밋 히스토리에 꼭 남아야하는 경우라면 커밋을, 커밋 히스토리를 깔끔하게 유지하는 게 중요한 경우 리베이스를 쓴다.
+
+</aside>
+
+## 작업 내용 임시 저장하기
+
+- 어떤 브랜치에서 하던 작업을 아직 커밋 하지 않았는데 다른 브랜치로 가야하는 상황에 작업 내용을 잠깐저장하고 싶을때 git stash를 사용한다.
+- git stash를 사용하면 working directory에서 작업하던 내용을 Git이 stack에 보관해준다.
+- 즉, 최근 커밋 이후로 작업했던 내용은 모두 스택에 옮겨지고 working directory 내부는 다시 최근 커밋 상태로 초기화된다.
+- 
+
+### 🌟 git stash
+
+현재 작업 내용을 스택 영역에 저장한다.
+
+### 🌟 git stash list
+
+stash한 내역을 보여준다.
+
+### 🌟 git stash apply “커밋 아이디”
+
+스택에 있는 내용을 다시 working directory로 가져와서 적용한다.
+
+### 🌟 git stash drop “커밋 아이디”
+
+스택 내용을 삭제한다.
+
+### 🌟 git stash pop “커밋 아이디”
+
+특정 작업 내용을 적용함과 동시에 그것을 스택에서 제거한다.
+
+### 잘못된 브랜치에서 작업한 경우?
+
+- 이때도 git stash를 사용한다.
+    1.  git stash로 스택에 작업 내용을 저장한다.
+    2. 올바른 브랜치로 가서 다시 git stash apply를 한다.
+    
+
+## 필요한 커밋만 가져오기
+
+### 🌟 git cherry-pick “커밋 아이디”
+
+자신이 원하는 작업이 들어있는 커밋들만 가져와서 현재 브랜치에 추가한다.
+
+## 여러 커밋을 하나의 커밋으로 만들기
+
+- git reset의 3가지 옵션 중 soft와 mixed는 working directory의 내용이 변하지 않는다.
+- 따라서 reset 사용 후 다 시 커밋을 하면 이전의 커밋들이 하나의 커밋이 된다.
+
+## git이 무시하는 파일들
+
+- working directory 안에 있음에도 불구하고 Git에 의해 그 존재 자체가 무시되는 파일들이다.
+- 버전 관리를 할 정도의 가치가 없고, 오히려 버전 관리를 하면 용량만 더 차지하고, 나중에 각 버전을 살펴볼 때 가독성을 떨어뜨리기만 하기 때문에 Git이 무시하도록 설정했다.
+
+### **.gitignore 파일이란?**
+
+- working directory 내에 존재하는 파일들 중에서 마치 존재하지 않는 것처럼 Git이 인식 해야 할 파일들의 목록이 적힌 파일이다.
\ No newline at end of file
diff --git a/sumin020/Week2/Week2.md b/sumin020/Week2/Week2.md
new file mode 100644
index 0000000..8ba8b93
--- /dev/null
+++ b/sumin020/Week2/Week2.md
@@ -0,0 +1,1114 @@
+# 2주차 정리
+
+# 유닉스 커맨드 정리
+
+# 1강
+
+## 유닉스란?
+
+- 1970년대 초반에 개발된 운영 체제
+- 소프트웨어를 개발하고 실행할 수 있는 편리한 플랫폼
+- 쉽게 수정해서 다른 컴퓨터에 적용할 수 있었다.
+- 유닉스에서 파생된 다양한 언어들이 존재 한다. (유닉스 운영체제)
+- 유닉스 커맨드란 유닉스 운영 체제에서 사용하는 커맨드이다.
+- POSIX라는 유닉스의 표준이 있고 이 표준에 부합해서 공식적으로 인증을 받으면 Unix-certified, 만약 이 표준을 인증받지 않았지만, 사용하기에 기능적으로 거의 차이가 없는 정도라면 Unix-like라고 부른다.
+
+## 리눅스란?
+
+- 유닉스를 사용하거나 변형할 때 라이센스 비용을 지불해야 했다.
+- '자유 소프트웨어 재단’이라는 곳에서, 유닉스의 코드를 하나도 사용하지 않고, 유닉스와 유사한 운영 체제를 직접 만들기 시작했고 이렇게 시작한 것이 GNU다.
+- GNU라는 운영 체제는 이렇게 시작되었는데, 그중에 커널이라고 하는, 운영 체제의 핵심 부분이 잘 완성되지 않고 있었다.
+- 이때 리누스 토발즈라는 학생이 커널 하나를 완성했고 리눅스(Linux)라는 이름으로 공개했다.
+- GNU에 리눅스 커널을 합쳐서 만들었기 때문에, 이 운영 체제의 이름을 GNU/Linux라고 불렀다.
+
+## 터미널이란?
+
+- 인풋을 받고, 아웃풋을 출력해주는 프로그램을 뜻한다.
+
+## shell이란?
+
+- shell은 커맨드를 해석해주는 프로그램이다.
+- 즉, 커맨드들을 컴퓨터가 이해할 수 있는 형태로 바꿔준다.
+- shell 종류 중 하나가 bash(Bourne again shell)다. 가장 보편적이고, 많은 유닉스 운영 체제에서 기본 shell로 사용된다.
+
+## 터미널 사용해보기
+
+- argument : 커맨드의 대상 ex. 월 / 년도
+- option : 커맨드를 어떻게 실행할지 정한다. ex. -j, -y
+
+### 🌟 date
+
+현재 날짜와 시간 출력
+
+### 🌟 cal (월) (년도)
+
+캘린더 출력, 월과 년도는 선택사항
+
+### 🌟 cal -j (월) (년도)
+
+그해에서 몇번째 날인지 출력해준다.
+
+### 🌟 cal -y (년도)
+
+해의 달력을 출력해준다.
+
+### 🌟 cal -yj (년도)
+
+해의 달력을 몇 번째 날인지 출력해준다.
+
+## man 설명
+
+### 1. NAME
+
+- 커맨드 이름과 커맨드의 역할을 쓴다.
+
+### 2. SYNOPSIS
+
+- 커맨드 문법, 쓸 수 있는 argument, option을 정리해준다.
+- [  ] 는 필수가 아니고 선택적이다.
+- - 가 붙으면 option이다.
+- argument를 받는 option들도 있다.
+
+### 3. DESCRIPTION
+
+- 커맨드에 대한 일반적인 설명이 쓰여 있다.
+- 하단에는 옵션에 대한 설명들이 적혀 있다.
+
+## 커맨드 꿀팁
+
+- 위쪽 방향키를 누르면 이전 실행 커맨드가 입력된다.
+- Ctrl + A : 커서를 맨 왼쪽으로 이동
+- Ctrl + E : 커서를 맨 오른쪽으로 이동
+- Ctrl + C : 작업 취소, 실행 취소
+- Alt + →, ← : 단어 단위 이동
+- clear : 터미널 내용을 지운다. 이전 커맨드 히스토리는 남아 있다.
+- tab : 지금 작성하는 커맨드나 아규먼트들을 자동 완성 해준다.
+
+# 2강
+
+## 파일과 디렉토리(=폴더)를 다루는 커맨드
+
+### 유닉스 디렉토리 구조
+
+- 거꾸로 된 나무 같다.
+- 맨 위에 root 또는 최상위 디렉토리가 하나 있고 그 안에 여러 디렉토리와 파일이 있고 각 디렉토리 안에 여러 디렉토리와 파일이 있다.
+- 안에 있는 디렉토리는 하위/자식 디렉토리라 하고 밖에 있는 디렉토리를 상위/부모 디렉토리라고 한다.
+- 사용자의 개인 파일들은 home 디렉토리 안에 있고 컴퓨터에 일반적으로 필요한 파일들은 밖에 있다.
+
+## 파일 경로
+
+- root는 /로 쓴다.
+- 디렉토리 안으로 들어갈 때 /를 쓴다.
+- 현재 사용자의 홈 디렉토리는 ~로 표현할 수 있다.
+
+## 파일 둘러보기
+
+### 🌟 pwd (= print working directory)
+
+현재 위치에 있는 디렉토리 경로가 출력된다.
+
+### 🌟 cd (= change directory)
+
+- 다른 디렉토리로 이동한다.
+- cd 뒤에 argument가 없으면 홈으로 이동한다.
+- cd - 는 이전 디렉토리로 이동한다.
+
+### 🌟 ls
+
+- 현재 디렉토리의 내용을 리스트해서 보여준다.
+- 경로를 argument로 주면 경로에 해당하는 내용을 리스트해서 준다.
+
+### 🌟 ls  -a
+
+- 모든 파일과 디렉토리의 내용을 리스트해서 보여준다.
+- .파일처럼 안 보이던 파일들도 보여준다.
+
+### 🌟 ls  -l
+
+파일에 대한 정보를 출력한다.
+
+### 절대 경로
+
+- 루트 디렉토리를 기준으로 어떤 파일이나 디렉토리의 고유한 경로를 표기하는 것
+- 경로가 길어질수록 복잡하다
+- 멀리 떨어진 위치로 움직일 때 유리하다
+
+### 상대 경로
+
+- 현재 자신이 위치해 있는 디렉토리 기준으로 경로를 나타내는 것
+- 현재 디렉토리를 .으로 표시한다.
+- 상위 디렉토리를 ..으로 표시한다.
+
+ ++ 경로를 argument로 받는 모든 커맨드에 절대 경로, 상대 경로 둘 다 사용 가능하다
+
+### 파일 디렉토리에 공백이 있을 경우
+
+1. ‘ ‘ 사용
+2. “ ” 사용
+3. \ 사용
+
+### root 디렉토리엔 무엇이 있을까?
+
+- **`/bin`**
+    - 커맨드 프로그램의 일부가 있다.
+- **`/sbin`**
+    - 관리자 전용 프로그램들이 있다.
+- **`/etc`**
+    - 컴퓨터 설정 파일들이 있다.
+    - 각종 프로그램의 설정 파일, 관리자 권한 설정 파일 같은 것들이 있다.
+- **`/home` 또는 `/Users`**
+    - 이 디렉토리에는 사용자들의 홈 디렉토리가 있다.
+- **`/usr`**
+    - 사용자(user)에게 필요한 파일들을 저장하고 있다.
+    - `/usr/bin`에는 컴퓨터가 필요하기보다는 사용자가 필요한 커맨드들이 있다.
+    - `local`이라는 디렉토리에는 사용자가 직접 설치한 프로그램과 관련된 파일들이 있다.
+
+## 디렉토리 만들기
+
+### 🌟 mkdir ‘디렉토리 이름’ (경로 포함 / ~/test)
+
+- 여러 개를 한 번에 만들 수 있다. ex. mkdir jul aug
+
+## 파일 만들기
+
+### 🌟 touch ‘파일 이름’ (경로 포함 / ~/test)
+
+- touch는 파일의 마지막 접근 시간이나 수정시간을 업데이트 한다.
+- 만약 파일이 없다면 새로 생성한다.
+- 여러 개를 한 번에 만들 수 있다. ex. touch jul/finance.txt jul/performance.txt
+
+## Vim 사용하기
+
+- **`vim`**만 치면 새로운 파일 작성, 경로를 argument로 주면 파일 수정이다. (**`vim path/to/file`** )
+
+### Vim의 4가지 사용 모드
+
+1.  일반 모드(Normal Mode)
+    - 커서 이동, 텍스트 붙여 넣기, 작업 취소
+    - 처음 열면 실행되는 모드다.
+    - **`esc`** 를 누르면 실행된다.
+    - **`yy`**를 누르면 줄 단위 복사, **`dd`**를 누르면 줄 단위 잘라내기, **`p`**를 붙이면 다음 줄에 붙여 넣어 진다.
+2.  입력 모드(Insert Mode)
+    - 텍스트 입력
+    - **`i`** 를 누르면 실행된다.
+3. 비주얼 모드(Visual Mode)
+    - 텍스트 블록 지정, 텍스트 복사
+    - **`v`**(글자 단위 복사), **`V`**(줄 단위) 를 누르면 실행된다.
+    - **`y`** 를 누르면 복사, **`p`** 를 누르면 커서 아래 줄에 붙여 넣기가 된다.
+    - **`d`** 를 누르면 잘라내기가 되고 **`p`** 를 누르면 붙여 넣기가 된다.
+4. 명령 모드(Command Mode)
+    - 내용 저장, Vim 종료
+    - **`:`** 를 누르면 실행된다.
+    - **`w`**는 파일을 저장하고, **`q`**는 vim을 종료한다.
+    - **`:w`** “파일 이름” 이 파일 이름으로 저장된다.
+
+## 파일 내용 살펴보기
+
+### 🌟 cat
+
+파일의 내용을 한꺼번에 화면에 출력하는 명령어다.
+
+### 🌟 less
+
+파일의 내용을 페이지 단위로 화면에 출력하는 명령어다.
+
+### 🌟 head / tail (-n ‘숫자’)
+
+- 파일의 시작 부분이나 끝 부분을 확인할 때 명령어다.
+- (-n ‘숫자’)를 붙이면 숫자만큼의 줄이 출력된다.
+
+## 파일과 디렉토리 옮기기 & 이름 변경하기
+
+### 🌟 mv ‘작업할 대상의 경로’ ‘이동할 목적지 또는 변경할 이름’
+
+- 파일과 디렉토리 옮기고 이름을 변경하는 명령어다.
+- 만약 두 번째 경로가 이미 존재하는 디렉토리일 경우 디렉토리 안으로 이동되고 아니면 이름이 변경된다.
+
+## 파일과 디렉토리 복사 붙여넣기
+
+### 🌟 cp (-r) ‘복사할 대상의 경로’ ‘복사할 위치’
+
+- 파일과 디렉토리(-r 옵션)를 복사 붙여 넣기 하는 명령어다.
+- 만약 두 번째 argument가 이미 존재하는 디렉토리일 경우 디렉토리 안으로 복사 되고 아니면 두 번째 argument의 이름을 가진 파일이나 디렉토리가 생성된다.
+
+### mv/cp 커맨드 주의할 점
+
+- 같은 이름의 파일이 목적지에 있을 경우 덮어쓴다.
+- **`-i`**  옵션은 충돌 발생 시 사용자에게 어떻게 할 지를 물어본다.
+
+## 파일과 디렉토리 삭제하기
+
+### 🌟 rm (-r) ‘삭제할 파일 또는 디렉토리 경로’
+
+- 파일과 디렉토리(-r 옵션) 삭제하는 명령어다.
+- 지우고 싶은 파일이나 디렉토리 여러 개를 argument로 줄 수 있다.
+- **`-i`**  옵션은 각 파일을 지우기 전에 확실히 지울지 물어본다.
+- **`-f`**  옵션은 어떤 상황에서도 파일을 지울지 물어보지 않는다.
+
+# 3강
+
+## 외부 프로그램 설치하기 (Window)
+
+- apt는 우분투에서 외부프로그램을 설치하고 관리하는데 사용하는 툴이다.
+- `apt update` 를 프로그램을 설치하기 전 해줘야 하는데 이 커맨드는 apt로 설치할 수 있는 프로그램들에 대한 최신정보를 인터넷에서 가져와 컴퓨터에 저장해준다.
+- `sudo`는 관리자 권한을 임시로 갖게 해준다.
+
+### 🌟 sudo apt install ‘다운 받을 프로그램 이름’
+
+외부 프로그램을 다운로드 한다.
+
+### 🌟 sudo apt remove ‘제거 할 프로그램 이름’
+
+외부 프로그램을 삭제 한다.
+
+## 외부 프로그램 설치하기 (macOS)
+
+- homebrew는 CLI 환경에서 편하게 외부 프로그램을 설치하고 관리할 수 있는 프로그램이다.
+
+### 🌟 brew install ‘다운 받을 프로그램 이름’
+
+외부 프로그램을 다운로드 한다.
+
+### 🌟 brew uninstall ‘제거 할 프로그램 이름’
+
+외부 프로그램을 삭제 한다.
+
+## Sudo란?
+
+- 잠시 관리자 권한을 획득할 수 있는 커맨드다.
+- 즉, 일시적으로 일반 유저에게 관리자 권한을 부여하는 커맨드다.
+
+### 🌟 sudo command
+
+관리자 권한을 가지고 command가 실행 된다.
+
+# 4강
+
+## WSL로 윈도우에 있는 파일 접근하기
+
+- WSL을 사용하면 듀얼 부팅이나 가상 머신을 사용하는 것보다 더 가볍게 리눅스 환경을 이용할 수 있다.
+- 또 윈도우에 있는 파일에 쉽게 접근할 수 있다.
+
+### 예시
+
+- 윈도우 파일은 `/mnt/c` 경로에 있다. (`/mnt/c` 가 윈도우의 `C:` 드라이브다.)
+- 사용자의 홈 디렉토리는 `C:` 드라이브의 `Users` 디렉토리 안에 있다. `Users` 뒤에 윈도우 사용자 이름을 붙이면 된다.
+
+## **PowerShell이란?**
+
+- 윈도우 전용 커맨드라인 툴 중 하나이다.
+- 시스템 관리, 자동화, 개발 등 다양한 작업을 할 수 있고 기본 유닉스 커맨드도 지원한다.
+- cmd보다 기능이 많고 cmd에서 할 수 있는 건 다 할 수 있다.
+- PowerShell은 기본 유닉스 커맨드를 지원한다.
+- PowerShell에서는 기본적으로 cmdlet이라고 하는 커맨드들을 사용한다. (하고 싶은 동작과 대상 사이에 - 를 넣는다.)
+
+### 🌟 Update-Help
+
+도움말을 업데이트 한다.
+
+## **실제 유닉스 커맨드와 차이점**
+
+1. **경로**
+    
+    윈도우에서는 경로를 표시할 때 `/` 대신 `\`(한국 키보드는 `₩`)를 사용한다.
+    
+2. **옵션**
+    
+    cmdlet 옵션은 한 글자가 아닌 전체 단어다. 
+    
+
+### 유닉스 환경과 PowerShell 환경에서 실행했을 때 차이가 있는 커맨드
+
+- man
+    - aliasing 하고 있는 cmdlet에 대한 도움말을 보여준다.
+    - 더 자세한 정보를 보고 싶다면 `-Full` 옵션을 사용하면 된다.
+- ls
+    - 파일/폴더 이름뿐만이 아닌 다양한 정보가 나온다.
+    - 유닉스의 `ls -al` 과 유사하다.
+- touch
+    - `touch`라는 alias는 없다.
+    - `$null > filename` 과 같은 방법을 사용해야 한다.
+- cat
+    - 아규먼트를 하나만 받는다.
+- mv / cp
+    - 목적지에 똑같은 이름의 파일/폴더가 있으면 파일이 이미 존재한다는 오류가 난다.
+    - 만약 파일을 덮어쓰고 싶다면 `-Force` 옵션을 사용하면 된다.
+    - 폴더를 복사할 때는 `-Recurse` 옵션을 사용해야 한다.
+- rm
+    - 폴더를 삭제할 때는 `-Recurse` 옵션을 사용해야 한다.
+    - `-Recurse` 안 주면 안에 있는 파일을 지울 것인지 물어본다.
+
+# Java Script 정리
+
+# JavaScript 기초
+
+## Java Script란?
+
+- 웹 개발 뿐만이 아니라 모바일 앱이나, pc전용 프로그램, VR과 AR 같은 3D 컨텐츠,  블록체인을 만드는 데도 활용된다.
+
+## 세미콜론
+
+- 문장을 구분한다.
+- 자바스크립트는 한 줄에 한 문장씩 작성될 때 자동으로 세미콜론을 추가해주는 기능이 있다.
+
+## 코멘트
+
+- 중간에 메모를 할 수 있다.
+- 어떤 의도로 코드가 작성되었는지 설명할 때
+- 구현한 코드가 어떤 동작을 하는지 기록할 때 사용한다.
+- //(한 줄 코멘트), /* */ (여러 줄 코멘트)
+
+# 자료형(Data type)이란?
+
+## 숫자형(Number)
+
+### 정수(Integer)
+
+- ex. 0, 1, -10 …
+
+### 소수(Floating point)
+
+- 3.14, -1.47 …
+
+## 문자열(String)
+
+- “ “, ‘ ‘을 사용한다.
+- + 로 문자열을 더할 수 있다. “a” + “b”  →”ab”
+
+## 불린(Boolean)
+
+- 참(true)과 거짓(false)을 나타낸다.
+- 주로 어떤 조건에 의한 결과값으로 사용된다.
+
+# 추상화(Abstraction)란?
+
+- 구체적인 정보들은 숨기고 꼭 필요한 핵심만 꺼내서 표현하는 방식이다.
+- 즉, 복잡한 것들을 목적에 맞게 단순화하는 것이다.
+- 목적은 명확하게 / 불필요한 것들은 숨기기 / 핵심만 드러내기
+
+# 변수(variable)
+
+- 값을 저장하기 위한 상자
+- 변수명으로 무엇을 의미하는지 설명할 수 있다.
+
+## 변수 선언하기
+
+<aside>
+🌟 let ‘변수명’;
+
+</aside>
+
+<aside>
+🌟 let ‘변수명’ = ‘변수값’; (선언과 동시에 값 할당)
+
+</aside>
+
+## 변수 이름 가이드
+
+### 꼭 지켜야 하는 규칙
+
+1.  JavaScript 식별자는 '문자(`a`-`z`, `A`-`Z`)', '밑줄(`_`)' 혹은 '달러 기호(`$`)'로 시작해야 한다. 두 번째 글자부터는 숫자도 가능하다.
+2. '대문자'와 '소문자'는 구별한다.
+3. '예약어(JavaScript가 찜해놓은 단어)'는 사용하면 안 된다.
+
+### 지키면 좋은 규칙
+
+1. 의미 없는 이름은 좋지 않다.
+2. 추상적인 이름은 좋지 않다.
+3. 모든 변수 이름은 'camelCase'로 쓰는 것이 좋다.
+
+# 함수(function)
+
+- 함수는 간단한 명령들을 저장한다.
+- `console.log()`도 함수다.
+
+## 함수 선언하기
+
+<aside>
+🌟 function ‘함수 이름’(파라미터) { 명령; 명령; };
+
+</aside>
+
+## 함수 호출
+
+<aside>
+🌟 ‘함수 이름’();
+
+</aside>
+
+## 매개변수(Parameter)
+
+- 함수를 호출할 때 소괄호 안에 들어가는 값이다.
+- 함수 내에서 변수처럼 사용할 수 있다.
+- 함수 내부에서 파라미터를 변수처럼 사용하면 함수 호출할 때 소괄호 내부의 값이 파라미터에 전달된다.
+- `,` 파라미터를 구분하면 여러 개를 입력할 수 있다.
+
+## return문
+
+- 함수 내부에서 정해진 일을 수행한 후 다시 돌려준다.
+- 함수를 호출한 자리에 리턴 값이 전달된다.
+
+<aside>
+🌟 return ‘리턴값’;
+
+</aside>
+
+# JavaScript 핵심 개념
+
+## 숫자형 (Number)
+
+- 사칙연산 (+, -, *,  /) 가능
+- `%`는 나머지를 계산한다.
+- `**` 은 제곱을 할 때 쓴다.
+- 사칙연산의 우선순위 규칙을 따른다.
+
+## 문자열 (String)
+
+- `“ “`, `‘ ‘` 로 감싸면 문자열이다.
+- 작은 따옴표로 열었으면 작은 따옴표로 큰 따옴표로 열었으면 큰 따옴표로 닫아야 한다.
+- 만약 문자열을 감싸는 따옴표 말고도 문자열 내부에서 작은 따옴표나 큰 따옴표를 사용하면 에러가 날 수 있다.
+- 가장 쉬운 해결 방법은 문자열 내부에서 작은 따옴표 사용 시 큰 따옴표로 감싸고 큰 따옴표 사용 시 작은 따옴표를 사용하는 것이다.
+- 다른 방법으로는 `\` 를 중복되는 따옴표 앞에 써주면 문자열 안의 기호라고 이해한다. ex. `“He said \”I’m an Iron man\””`
+- `` `` 을 따옴표 대신 써줘도 된다.
+- 믄자열 덧셈은 문자열을 연결한다.
+
+## 불 대수 (Boolean)
+
+- 일상적인 논리를 수학적으로 표현한 것이다.
+- 진리값(true, false)을 사용한다.
+- 불 대수의 연산에는 AND, OR, NOT이 있다.
+- 명제는 참, 거짓이 확실한 문장이다.
+
+### 불 대수의 연산
+
+- 1. AND
+    - x와 y가 모두 참일 때만 참이 된다.
+    - `&&` 로 나타낸다.
+- 2. OR
+    - x와 y 중 하나라도 참일 때 참이 된다.
+    - `||` 로 나타낸다.
+- 3. NOT
+    - 참이면 거짓으로, 거짓이면 참으로 만들어준다.
+    - 중첩이 가능하다.
+    - `!` 로 나타낸다.
+
+## null과 undefined
+
+### null
+
+- 의도적으로 값이 없다는 것을 표현할 때 사용하는 값이다.
+- `변수 = null` 처럼 의도적으로 값이 없음을 표현할 때 사용한다.
+
+### undefined
+
+- 값이 없다는 것을 확인하는 값이다.
+- 선언 후 값이 주어지지 않은 변수는 undefined 값을 갖는다.
+- `변수 = undefined` 도 가능하나 null과 혼란을 일으킬 수 있기에 사용하지 않는 것을 추천한다.
+
+## typeof
+
+<aside>
+🌟 typeof ‘값’
+
+</aside>
+
+- 값을 평가해 해당하는 자료형을 문자열로 돌려준다.
+- typeof는 기본적으로 연산자보다 우선순위가 높다.
+- `typeof ‘hello’ + ‘world’ → stringhello`
+- `typeof 8 - 3 → string - 3이 되기에 NaN (Not a Number)이 출력된다.`
+- 이런 경우 ()로 우선순위를 높여주면 된다.
+
+## 연산자 우선 순위
+
+- 하나의 연산식에 둘 이상의 연산자가 있는 경우, 실행 순서는 연산자의 우선순위(precedence)에 따라 결정된다.
+- 우선순위 숫자가 클수록 먼저 실행된다.
+- 순위가 같으면 대부분은 왼쪽부터 시작해서 오른쪽으로 연산이 수행된다.
+- 괄호 > 논리 NOT > typeof > 거듭제곱> 곱셈, 나눗셈 > 덧셈, 뺄셈 > 크기 비교 > 등호 비교 > 논리 AND > OR > 할당
+
+## 형 변환 1️⃣
+
+- 문자로 바꾸고 싶을 땐 String을 사용하면 된다.
+- `Number(’2’) + Number(’6’) → 8`
+- 숫자로 바꾸고 싶을 땐 Number를 사용하면 된다.
+- `String(2) + String(6) → 26`
+- 불린으로 바꾸고 싶을 땐 Boolean을 사용하면 된다.
+
+### 주의 사항
+
+- 문자 → 숫자로 변환 시 문자가 숫자 형태가 아니라면 NaN으로 뜨고 숫자형이라면 Number로 변환된다.
+- 불린 → 숫자로 변환 시 true면 1, false면 0으로 변환된다.
+- 숫자/ 문자 → 불린으로 변환 시 일반적으로 1로 변환되나 없거나 빈 느낌을 주면( ex. ’ ‘, 0, NaN = falsey 값 ) 0으로 변환된다.
+
+## 형 변환 2️⃣
+
+### 산술연산자
+
+- 산술 연산자(+, -, …)들은 연산 되어지는 두 값을 모두 숫자로 바꿔서 계산한다.
+- 하지만 `+`는 양쪽 중 하나가 문자열이면 나머지 하나도 문자열로 바꾸어 문자열 덧셈을 한다.
+- NaN 값은 어떤 값이랑 연산을 해도 NaN이 출력된다.
+
+### 관계 비교 연산자
+
+- 관계 비교 연산자(<, ≤, …)들은 연산 되어지는 두 값을 모두 숫자로 바꿔서 계산한다.
+- 두 값이 비교가 불가능한 경우 false가 출력된다. ex. NaN
+
+### 같음 비교 연산자
+
+- `===, !==` 일치, 불일치 연산자
+- `==, !=` 동등, 부등 연산자
+- 일치 비교는 형 변환이 일어나지 않지만 동등 비교는 숫자로 형 변환이 일어난다.
+
+## 템플릿 문자열
+
+- 템플릿은 일정한 틀, 형식이다.
+- `` ${변수/ 연산식/함수 ...} `` 을 사용하면 `+` 없이 템플릿 문자열을 만들어 문자열을 만들 수 있다.
+
+## 할당 연산자 **(assignment operators)**
+
+- `=`는 오른쪽에 있는 피연산자를 왼쪽에 있는 피연산자에 할당한다는 의미이다.
+- 할당 연산자의 오른쪽부터 계산 후 왼쪽 변수에 할당한다.
+
+## 복합 할당 연산자 **(Compound assignment operators)**
+
+- 할당 연산자와 결합해서, 자주 쓰이는 표현을 더 간략하게 쓸 수 있게 하는 연산자이다.
+- `+=, -=, *=, %=`  …
+
+## **증가(increment), 감소(decrement) 연산자**
+
+- `++, --`
+
+## return
+
+- 함수의 실행을 중지한다.
+- 함수의 결과값을 되돌려준다.
+- return문이 없는 함수를 호출하면 undefined가 리턴된다.
+
+## 옵셔널 파라미터
+
+- 파라미터에서 미리 값을 할당해 놓아 만약 값을 전달하지 않으면 미리 할당해 놓은 파라미터가 할당된다.
+- 옵셔널 파라미터는 순서가 밀릴 수 있기에 가장 뒤 쪽으로 선언해야 한다.
+
+## 변수의 scope
+
+- 블록문 내부에서만 사용할 수 있는 변수를 로컬 변수, 지역 변수라고 한다.
+- 블록문 밖에서 선언한 변수는 전역 변수라고 하며, 블록문 내부에서도 사용할 수 있으며 코드 전체에서 사용 가능하다.
+
+## 상수(Constant)
+
+- 변하지 않고 일정한 값을 유지하는 값이다.
+- 상수를 값을 재할당하려고 하면 오류가 난다.
+- 선언할 때 값을 할당하지 않아도 재할당하려고 하면 오류가 난다.
+- 이름에 들어가는 모든 알파벳을 대문자로 쓰고 두 단어 이상이면 `_`로 이어준다.
+
+<aside>
+🌟 const ‘상수명’ = ‘값’
+
+</aside>
+
+## if문
+
+```jsx
+if (조건부분) {
+	동작부분
+}
+else {
+	동작부분
+}
+```
+
+- 조건 부분이 참이면 동작부분을 수행한다.
+- else문은 if문 외의 경우일 경우 동작부분을 수행한다.
+
+## else if문
+
+```jsx
+if (조건부분) {
+	동작부분
+}
+else if (조건부분) {
+	동작부분
+}
+else {
+	동작부분
+}
+```
+
+- 두 가지 이상의 옵션이 필요한 경우 사용한다.
+
+## switch문
+
+```jsx
+switch (비교할_값) {
+	case 조건값_1:
+		동작부분;
+		break;
+	case 조건값_2:
+		동작부분;
+		break;
+	default:
+		동작부분;
+}
+```
+
+- break는 switch문을 탈출한다.
+- switch문은 break를 만나기 전까지 아래의 모든 동작들을 실행한다.
+- default에는 비교할 값이 모든 조건값과 일치하지 않을 때 동작할 동작부분을 작성한다.
+- switch문은 값들을 비교할 때 자료형을 엄격하게 구분하기에 if문으로 대체 시 반드시 `===`를 사용해 비교를 해야 한다.
+
+## for 반복문
+
+```jsx
+for (초기화부분; 조건부분; 추가동작부분;) {
+	동작부분
+}
+```
+
+- 조건이 충족되면 동작 부분을 반복한다.
+- 초기화 부분은 for문이 시작할 때 가장 먼저 한 번만 실행되는 부분이다. 주로 반복의 횟수를 저장할 변수를 생성하는데 활용한다.
+- 조건 부분은 boolean으로 바꿔 true면 동작을 실행하는 부분이다. false가 될 때까지 반복한다.
+- 추가 동작 부분은 조건 부분이 true일 때 동작을 반복하고 추가로 실행하는 부분이다.
+
+### tip
+
+- 추가 동작 부분은 꼭 채울 필요는 없다.
+- 초기화 부분에서 생성한 변수는 for문 안에서의 로컬 변수가 된다.
+- 따라서 반복문이 종료되고 나서 for문 밖에서 변수를 사용하려고 하면 오류가 발생한다.
+- 초기화 부분도 꼭 채울 필요는 없다.
+- 반복문 밖에 있는 글로벌 변수를 활용해도 아무런 문제없이 같은 결과를 출력한다.
+- 단, 소괄호 안쪽 가장 첫 번째 세미콜론은 생략할 수 없다.
+
+## while 반복문
+
+```jsx
+while (조건부분) {
+	동작부분
+}
+```
+
+- 조건 부분을 만족하지 않을 때까지 반복한다.
+- while문과 for문은 대체 가능하다.
+- 전역 변수를 조건문 내부에 사용하고, 반복문이 종료된 후에도 변수를 사용해야 할 때 사용하기 좋다.
+
+## break와 continue
+
+- break를 반복문에 사용하면 조건문에 상관없이 실행되는 도중 빠져나올 수 있다.
+- continue는 동작 부분을 한 번 건너 뛰는 것이다.
+
+# JavaScript와 데이터
+
+## 객체 (Object)
+
+```jsx
+let objectName = {
+	값 이름: 값,
+	key: value,
+	property name: property value,
+	...
+}
+```
+
+- 여러 가지 값을 한 번에 저장할 때 사용한다.
+- key, value 한 쌍을 속성(property)라고 부른다.
+- property name은 string이다.
+- 객체의 property 값으로 무엇이든 가능하다.
+
+### property name 주의 사항
+
+1. 첫 글자는 반드시 문자, 밑줄(_), 달러 기호($) 중 하나로 시작해야 한다.
+2. 띄어쓰기 금지다.
+3. 하이픈(-) 금지다.
+4. 위의 경우 ‘ ‘로 감싸줘야 한다.
+
+### 객체에서 데이터 접근하기
+
+1. 점 표기법
+
+<aside>
+🌟 objectName.propertyName
+
+</aside>
+
+- 가장 간단하고 많이 쓰이는 방법이다.
+- 하지만 따옴표를 생략할 수 없는 propertyName에는 접근할 수 없다.
+1. 대괄호 표기법
+
+<aside>
+🌟 objectName[’propertyName’]
+
+</aside>
+
+- propertyName을 유연하게 구성할 수 있다.
+- propertyName을 문자열로 만들 수 있는 어떤 방법이든 사용 가능하다.
+
+## 객체 다루기
+
+- 존재 하지 않는 property에 새로운 값을 할당하면 새로운 property가 생성된다.
+- preperty에 새로운 값을 할당하면 값이 변한다.
+
+<aside>
+🌟 objectName.propertyName = 새로운 값
+
+</aside>
+
+- preperty를 삭제한다.
+
+<aside>
+🌟 delete objectName.propertyName
+
+</aside>
+
+### 객체의 preperty 존재 여부 확인
+
+<aside>
+🌟 objectName.propertyName !== undefined
+
+</aside>
+
+<aside>
+🌟 ‘propertyName’ in object
+
+</aside>
+
+- boolean 형태로 리턴 된다.
+
+## 메소드(Method)
+
+```jsx
+let objectName = {
+	'함수 이름': function(파라미터){
+		함수 내용
+		},
+		...
+}
+```
+
+- 연관성 있는 함수들을 하나로 묶을 때 사용한다.
+- 어떤 객체의 고유한 동작으로써, 함수에 의미를 부여할 수 있다.
+- 객체의 property 값으로 함수를 넣어주면 된다.
+- 이런 함수를 객체의 메소드라고 한다.
+- 대괄호 표기법 사용시 `objectName['함수 이름'] (파라미터)` 형태로 쓴다.
+
+## for..in 반복문
+
+```jsx
+for (변수 in 객체) {
+	동작부분
+}
+```
+
+- 객체 안의 property를 가지고 반복적인 동작을 수행할 때 사용한다.
+- 객체의 프로퍼티 네임이 변수에 할당되고 객체의 프로퍼티 개수만큼 반복 동작을 하게 된다.
+
+### 주의 사항
+
+- 프로퍼티 네임에는 숫자형(양수)을 작성해서 사용할 수도 있다.
+- 다만 실제로 사용될 때는 문자열로 형 변환이 되어 사용된다.
+- 객체는 정수형 프로퍼티 네임을 오름차순으로 먼저 정렬하고,나머지 프로퍼티들은 추가한 순서대로 정렬하는 특징이 있다.
+
+## 내장 객체
+
+- 자바스크립트가 미리 가지고 있는 객체이다.
+
+### Date 객체
+
+```jsx
+let myDate = new Date();
+let myDate = new Date(특정한 값/ 밀리 초 단위);
+let myDate = new Date(문자열);
+new Date(YYYY, MM, DD, hh, mm, ss, ms);
+```
+
+- 이 객체를 생성한 시각이 출력된다.
+- 요일, 월, 일, 년도, 시간, 시간대 순
+- 특정한 값을 넣으면 UTC 기준 1970.1.1 00:00을 기준으로 특정한 값의 밀리 초만큼 지난 객체가 만들어진다.
+- 날짜로 해석 가능한 문자열 사용 가능하다.
+- month는 0부터 시작한다.
+
+```jsx
+myDate.getTime()
+```
+
+- myDate 객체가 1970.1.1 00:00:00 부터 몇 밀리초 지났는지 알려준다.
+- 이를 타임스탬프라고 부른다.
+
+## 배열 (Array)
+
+```jsx
+let arrayName = [elements, ...]
+```
+
+- 배열 안의 값은 요소(elements)라고 부른다.
+- 배열 내의 순서를 index라고 한다.
+- 순서가 있는 값을 처리할 때 사용하기 좋다.
+- 여러 값의 묶음에도 사용한다.
+- 배열도 객체다.
+
+### indexing (0부터 시작)
+
+```jsx
+배열이름[index]
+```
+
+## 배열 다루기
+
+```jsx
+배열이름.length
+배열이름['length']
+```
+
+- 배열이 가지고 있는 요소의 총 개수를 알려준다.
+
+```jsx
+배열이름[index] = 배열 값
+```
+
+- 배열의 요소를 추가하거나 수정한다.
+- 인덱스의 순서를 뛰어넘으며 추가하게 되면, undefined 값이 들어간 요소가 자동으로 추가된다.
+
+## 배열 메소드
+
+```jsx
+배열이름.splice(index, 삭제할 개수, 값)
+```
+
+- 해당 인덱스의 요소를 삭제한다.
+- splice에 요소를 하나만 주면 그 인덱스 뒤 모든 요소를 삭제한다.
+- 세 번째 파라미터의 값은 삭제하고 이 값을 추가하겠다는 뜻이다.
+- 삭제할 개수를 0으로 하면 삭제 없이 요소를 추가할 수 있다.
+- 1이면 수정할 수 있다.
+
+```jsx
+배열이름.shift();
+```
+
+- 배열의 첫 요소를 삭제하고 나머지 요소들은 앞으로 밀어준다.
+
+```jsx
+배열이름.pop();
+```
+
+- 배열의 마지막 요소를 삭제한다.
+
+```jsx
+배열이름.unshift(value);
+```
+
+- 배열의 첫 요소로 값을 추가하고 나머지 요소들은 뒤로 밀어준다.
+
+```jsx
+배열이름.push(value);
+```
+
+- 배열의 끝 부분에 값을 추가한다.
+
+```jsx
+배열이름.indexOf(item);
+배열이름.lastIndexOf(item);
+```
+
+- 배열에 `item`이 포함되어 있는지 확인할 수 있다.
+- 만약 포함되어 있다면, `item`이 있는 인덱스가 리턴된다.
+- 포함되어 있지 않다면, `-1`이 리턴된다.
+- 여러 번 포함되어 있으면, 처음 발견된 인덱스가 리턴된다.
+- `lastIndexOf` 는 탐색을 뒤에서 부터 한다.
+
+```jsx
+배열이름.includes(item);
+```
+
+- 배열에 `item`이 있을 경우 `true`를, 없을 경우 `false`를 리턴한다.
+
+```jsx
+배열이름.reverse();
+```
+
+- 배열의 순서를 뒤집는다.
+
+## for..of 반복문
+
+```jsx
+for (변수 of 배열) {
+	동작부분
+}
+```
+
+- 변수에 배열의 요소가 할당 된다.
+
+## 다차원 배열 (multidimensional array)
+
+```jsx
+배열이름 = [[값, 값], [값, 값]...]
+배열이름.[index][index]
+```
+
+## 숫자 표기법
+
+```jsx
+let number = 1000000000;
+let number = 1e9;
+```
+
+- 알파벳 e를 사용하여 표기하는 방식을 지수 표기법이라고 한다.
+- 알파벳 왼쪽에 있는 수에 오른쪽 수만큼 10의 거듭제곱을 곱하는 의미가 담겨 있다.
+
+```jsx
+hex -> 16진법 (0x)
+octal -> 8진법 (0o)
+binary -> 2진법 (0b)
+```
+
+## 숫자형 메소드
+
+```jsx
+변수.toFixed(값)
+정수..toFixed(값)
+(정수).toFixed(값)
+```
+
+- 값만큼 소숫점 아래 자릿수를 고정해준다.
+- 범위는 100까지 이다.
+- 반올림 / 부족하면 0으로 채운다.
+- 계산 값이 문자열이다.
+
+```jsx
+변수.toString(진법)
+```
+
+- 파라미터로 전달하는 숫자의 진법으로 계산해준다.
+- 범위는 2 ~ 36이다.
+- 계산 값이 문자열이다.
+
+## **Math객체**
+
+### 절대값
+
+```jsx
+Math.abs(값)
+```
+
+### **최댓값 (Maximum)**
+
+```jsx
+Math.max(값, 값, 값, 값, 값, ...)
+```
+
+- 이 중 가장 큰 값이 리턴된다.
+
+### **최솟값 (Minimum)**
+
+```jsx
+Math.min(값, 값, 값, 값, 값, ...)
+```
+
+- 이 중 가장 작은 값이 리턴된다.
+
+### 거듭제곱 **(Exponentiation)**
+
+```jsx
+Math.pow(값, 값)
+```
+
+## **제곱근 (Square Root)**
+
+```jsx
+Math.sqrt(값)
+```
+
+## **반올림 (Round)**
+
+```jsx
+Math.round(값, 값)
+```
+
+## **버림과 올림 (Floor and Ceil)**
+
+```jsx
+Math.floor(값) - 버림
+Math.ceil(값)  - 올림
+```
+
+## **난수 (Random)**
+
+```jsx
+Math.random()
+```
+
+- 0 이상 1 미만의 값이 랜덤으로 리턴된다.
+
+## 문자열 심화
+
+```jsx
+//문자열 길이
+String 변수 이름.length
+```
+
+```jsx
+//요소 접근
+String 변수 이름.charAt(index)
+String 변수 이름[index]
+```
+
+```jsx
+//요소 탐색
+String 변수 이름.indexOf(탐색할 요소)
+String 변수 이름.lastIndexOf(탐색할 요소)
+// 문자열에 없는 문자를 찾으면 -1이 출력된다.
+```
+
+```jsx
+//대소문자 변환
+String 변수 이름.toUpperCase()
+String 변수 이름.toLowerCase()
+```
+
+```jsx
+//양 끝 공백 제거 
+String 변수 이름.trim()
+```
+
+```jsx
+//부분 문자열 접근
+String 변수 이름.slice(start, end)
+//start부터 end - 1까지
+```
+
+## 기본형 (Primitive type)
+
+- 객체를 제외한 다른 자료형들이다.
+- 변수 이름을 가진 상자에 기본형 값을 넣어준다고 생각할 수 있다.
+
+## 참조형 (Reference type)
+
+- 어딘가에서 객체가 만들어지고 변수에는 객체값으로 가는 주소가 저장된다.
+- 즉, 변수 == 주소값이다.
+- 주소가 복사된다.
+
+### 참조형 복사하기
+
+```jsx
+배열이름.slice() //원래 값 그대로 리턴
+Object.assign({}, 객체 이름) //객체 복사
+for (let key in 객체 이름) {
+	빈 객체[key] = 복사할 객체[key];
+}
+```
+
+## const
+
+- const로 할당한 변수는 재할당 되지 않는다.
+- 코드에 변수여도 변하지 않는 것들이 있다.
+- 코드를 일관되고 안전하게 유지하기 위해 사용한다.
+- 객체는 변수의 주소값이 저장되기에 const로 선언해도 변할 수 있다.
+
+## var
+
+- `let` 이나 `const` 처럼 똑같이 키워드 다음에 변수이름을 써서 선언할 수 있고, 키워드와 변수이름, 그리고 할당연산자와 값으로 선언과 동시에 값을 할당해 줄 수도 있다.
+
+```
+var 변수명;
+변수명 = 변수값;
+```
+
+- 중복 선언이 가능하다. 기존의 변수를 덮어써 버린다.
+- `var` 키워드로 선언한 변수는 scope가 `function`에서만 구분되어 있다.
+- `var` 변수는 함수 스코프를 기준으로 선언되기 이전에도 변수에 접근이 가능하다.
\ No newline at end of file
diff --git a/sumin020/Week3/Week 3.md b/sumin020/Week3/Week 3.md
new file mode 100644
index 0000000..da99c94
--- /dev/null
+++ b/sumin020/Week3/Week 3.md	
@@ -0,0 +1,1536 @@
+# 3주차 정리
+
+# 인터랙티브 JavaScript
+
+## id로 태그 선택하기
+
+```jsx
+document.getElementById('id');
+```
+
+```jsx
+const myTag1 = document.getElementById('myNumber');
+console.log(myTag1);
+```
+
+- id 속성은 코드 전체에서 봤을 때 다른 태그들과 구분하기 위해 붙여주는 고유한 값
+- id 속성을 통해서 어떤 요소를 가져오겠다는 의미
+- 이 메소드의 파라미터로 접근하고자 하는 태그의 id 값을 문자열로 전달해주면 해당되는 태그가 선택된다.
+- 해당 태그 내부의 모든 내용들이 표시된다.
+- 존재하지 않는 태그는 null이 뜬다.
+
+## class로 태그 선택하기
+
+```jsx
+document.getElementsByClassName('class');
+```
+
+```jsx
+const myTags = document.getElementsByClassName('color-btn');
+console.log(myTags);
+```
+
+- id는 고유한 값이기에 여러 elements를 선택하기엔 좋지 않다. 이때 class를 사용한다.
+- 배열의 형태로 나오지만 완벽한 배열은 아니다. (유사배열) (splice, push 등 사용불가)
+- `myTags[1], length, for문` 사용 가능
+- 하나밖에 업는 class를 선택해도 요소 한 개가 들어있는 html 컬렉션이 출력된다.
+- 존재하지 않는 class 값을 찾으면 `null`이 아니라 빈 html 컬렉션이 출력 된다.
+
+## 유사 배열**(Array-Like Object)**이란?
+
+- 배열과 모양은 같지만, 완벽히 배열은 아닌 형태이다.
+- 유사 배열에도 최소한 갖춰야 할 조건과 특징들이 있다.
+1. 숫자 형태의 indexing이 가능하다.
+2. length 프로퍼티가 있다.
+3. 배열의 기본 메소드를 사용할 수 없다.
+4. Array.isArray(유사 배열)은 false다. (파라미터로 전달한 값이 배열인지 아닌지를 평가해서 그 결과를 불린 형태의 값으로 리턴해주는 메소드다.)
+
+## 태그 이름으로 태그 선택하기
+
+```jsx
+document.getElementsByTagName('button');
+```
+
+```jsx
+const btns = document.getElementsByClassName('color-btn');
+const allTags = document.getElementsByTagName('*');
+console.log(btns);
+```
+
+- HTML 문서 내에 있는 모든 `button` 태그를 선택하게 된다.
+- 실행 결과로 class처럼 HTMLCollection을 리턴 한다.
+- css 선택자처럼 `'*'` 값을 전달하게 되면 모든 태그를 선택할 수도 있다.
+
+## css 선택자로 태그 선택하기
+
+```jsx
+document.querySelector('css');
+```
+
+```jsx
+const myTag = document.querySelector('#myNumber');
+console.log(myTag);
+
+const myTag1 = document.querySelectorAll('.color-btn');
+console.log(myTag1);
+```
+
+- css 선택자로 id를 선택할때는 #을 붙여 준다.
+- All은 class처럼 여러 개를 선택하고 싶을때 사용한다.
+
+## 이벤트와 버튼 클릭
+
+```jsx
+const btn = document.querySelector('#myBtn');
+btn.onclick = function () {
+  console.log("Hello Codeit!");
+}
+```
+
+- 웹 페이지에서 일어날 수 있는 대부분의 일들을 이벤트라고 한다.
+- 마우스를 움직이거나 페이지 스크롤, 마우스 클릭도 이벤트다.
+- 이벤트가 발생했을 때 어떤 특정한 동작을 하도록 이벤트를 다루는 것을 이벤트 핸들링이라고 하고, 구체적인 동작을 코드로 표현한 함수 부분을 이벤트 핸들러라고 한다.
+- html에서 직접 작성하기도 가능 (가독성 떨어지고, 코드의 일관성을 유지하기 어려워져서 잘 안 쓴다.)
+
+## 브라우저도 객체인가?
+
+- 자바스크립트는 원래 웹 브라우저를 다루기 위해 등장한 언어다.
+- 자바스크립트는 모든 것이 객체다.
+- 웹브라우저를 자바스크립트의 윈도우 객체로 다룰 수 있다.
+- 윈도우 객체는 말 그대로 브라우저의 창을 대변한다. 객체 안의 프로퍼티를 활용하면 자바스크립트로 브라우저가 가지고 있는 다양한 정보를 얻거나 관리할 수 있다.
+- 윈도우 객체는 브라우저의 창을 대변하면서 자바스크립트에서는 최상단에 존재하는 객체이다.
+- 윈도우 객체는 자바스크립트의 어디서나 항상 접근할 수 있다. → 전역 객체
+
+```jsx
+console.log(window);
+console.log(window.innerWidth); 
+console.log(window.innerHeight);
+-> 탭 내부의 너비와 높이를 얻을 수 있다.
+```
+
+```jsx
+window.open ->새 창 열기
+window.close -> 창 닫기
+```
+
+## DOM(Document Object Model / 문서 객체 모델)
+
+- 웹 브라우저 안에 나타나는 컨텐츠 부분을 웹 페이지, 웹 문서라고도 표현한다.
+- DOM은 웹 페이지에 나타나는 HTML 문서 전체를 객체로 표현한 것이다.
+- Document 객체를 이용하면 웹페이지 내부를 맘대로 수정할 수 있고, 새로운 컨텐츠를 만들어 낼 수도 있다.
+
+```jsx
+console.log(document);
+console.log(typeof document); // object
+```
+
+- DOM은 직접적으로 접근하게 되면 객체가 아니라 DOM에 해당하는 HTML이 출력된다.
+- DOM을 태그가 아니라 객체로 보고 싶다면 아래를 사용하면 된다.
+
+```jsx
+console.dir(document);
+```
+
+- DOM 개념에 따르면 문서 내의 모든 태그들은 다 각각의 객체다.
+- DOM을 사용하면 HTML 태그를 객체처럼 자유롭게 다룰 수 있다.
+
+## `console.log`와 `console.dir` 차이?
+
+### **1. 출력하는 자료형이 다르다.**
+
+- dir 메소드는 문자열 표시 형식으로 콘솔에 출력한다.
+
+### **2. log는 값 자체에, dir은 객체의 속성에!**
+
+- `log` 메소드는 파라미터로 전달받은 값을 위주로 출력하는 반면, `dir` 메소드는 객체의 속성을 좀 더 자세하게 출력한다.
+
+### **3. log는 여러 개, dir은 하나만!**
+
+- `log` 메소드는 여러 값을 쉼표로 구분해서 전달하면 전달받은 모든 값을 출력하는 반면, `dir` 메소드는 여러 값을 전달하더라도 첫 번째 값만 ****출력한다.
+
+### **4. DOM 객체를 다룰 때..**
+
+- 값에 좀 더 중점을 둔 log 메소드는 대상을 HTML 형태로 출력하고, 객체의 속성에 좀 더 중점을 둔 dir 메소드는 대상을 객체 형태로 출력한다.
+
+## DOM 트리
+
+- DOM은 HTML문서를 객체화 한 것이기에 document 객체를 최상위로 해서 계층 구조를 이룬다.
+- DOM 트리에서 각  개체를 노드라고 한다.
+- 태그를 표현하는 노드를 요소 노드(element node)라고 한다.
+- 문자를 표현하는 노드를 텍스트 노드(text node)라고 한다.
+- 일반적으로 텍스트 노드들은 요소 노드의 자식 노드가 되고 스스로 자식을 가질 수 없다.
+
+## DOM 트리에서 태그 선택하기
+
+### **요소 노드에 대한 이동 프로퍼티**
+
+```jsx
+const myTag = document.querySelector('#list-1');
+console.log(myTag);
+```
+
+```jsx
+// 자식 요소 노드
+console.log(myTag.children[1]);
+console.log(myTag.firstElementChild); //자식들 중 첫번째 요소
+console.log(myTag.lastElementChild);  //자식들 중 마지막 요소
+```
+
+```jsx
+// 부모 요소 노드
+console.log(myTag.parentElement)
+```
+
+```jsx
+// 형제 요소 노드
+console.log(myTag.previousElementSibling); //이전 혹은 좌측에 있는 요소
+console.log(myTag.nextElementSibling);     // 다음 혹은 우측에 있는 요소
+```
+
+### **모든 노드에 대한 이동 프로퍼티**
+
+```jsx
+const myTag = document.querySelector('#list-1');
+console.log(myTag);
+```
+
+```jsx
+// 자식 요소 노드
+node.childNodes
+node.firstChild
+node.lastChild	
+```
+
+```jsx
+// 부모 요소 노드
+node.parentNode	
+```
+
+```jsx
+// 형제 요소 노드
+node.previousSibling //이전 혹은 좌측에 있는 요소
+node.nextSibling     // 다음 혹은 우측에 있는 요소
+```
+
+## 요소 노드 프로퍼티
+
+```jsx
+node.innerHTML;
+node.innerHTML = '<li>Exotic</li>'; //해당 태그가 저걸로 완전히 변한다.
+```
+
+- 요소 안에 있는 문자열 HTML 자체를 문자열로 리턴해준다.
+- 요소 안의 정보를 확인할 수도 있지만, 내부의 HTML 자체를 수정할 때 좀 더 자주 활용된다.
+- 수정 시 내부에 있던 값을 완전히 새로운 값으로 교체한다.
+- 줄바꿈이나 들여 쓰기도 다 표시된다.
+
+```jsx
+node.outerHTML;
+node.outerHTML = '<li>Exotic</li>'; //요소 자체가 새로운 요소로 교체된다. (기존 요소는 사라진다.))
+```
+
+- 해당 요소를 포함한 전체 HTML 코드를 문자열로 리턴해준다.
+- 줄바꿈이나 들여 쓰기도 다 표시된다.
+- 새로운 값을 할당할 경우 요소 자체가 교체된다.
+
+```jsx
+node.textContent;
+node.textContent = 'Exotic'; //해당 텍스트가 저걸로 완전히 변한다.
+```
+
+- 요소 안에 있는 내용들 중 HTML 태그 부분은 제외한 텍스트만 가져온다.
+- 줄바꿈이나 들여 쓰기도 다 표시된다.
+- 새로운 값을 할당하면 내부의 값을 완전히 새로운 값으로 교체 한다.
+- 텍스트만 다루기 때문에, 특수문자도 그냥 텍스트로 처리한다.
+
+### 요소 노드 추가하기
+
+```jsx
+// 1. 요소 노드 만들기 : document.creatElement('태그 이름')
+const first = document.creatElement('li');
+
+// 2. 요소 노드 꾸미기 : textContent, node.innerHTML
+first.textContent = '처음';
+
+// 3. 요소 노드 추가하기 : NODE.prepend, append, after, before
+tomorrow.prepend(first);  // 메소드를 호출한 노드의 제일 첫번쨰 노드로 파라미터로 전달한 값을 맨 앞에  추가할 수 있다.
+```
+
+## 노드 삭제와 이동하기
+
+```jsx
+//  노드 삭제하기: Node.remove();
+tomorrow.remove();
+today.children[2].remove();
+```
+
+```jsx
+// 노드 이동하기: prepend, append, before, after
+today.append(tomorrow.children[1]);
+tomorrow.children[1].after(today.children[1]);
+```
+
+## **HTML 속성 다루기**
+
+- 대부분의 HTML 속성은 DOM 객체의 프로퍼티로 변환이 된다.
+- 하지만, 표준 속성이 아닌 경우에는 프로퍼티로 변환이 안 되는데, 아래 메소드를 활용하면 표준이 아닌 HTML 속성들도 다룰 수 있다.
+
+```jsx
+// 1. 속성에 접근하기: 
+element.getAttribute('속성')
+
+// 2. 속성 추가(수정)하기:
+element.setAttribute('속성', '값')
+ 
+//3. 속성 제거하기: 
+element.removeAttribute('속성')
+```
+
+## **스타일 다루기**
+
+- 자바스크립트로 태그의 스타일을 다루는 방법에는 크게 두 가지가 있습니다.
+1. style 프로퍼티 활용하기: 
+
+`element.style.styleName = 'value';`
+
+1. class 변경을 통해 간접적으로 스타일 적용하기:
+
+ `element.className`, `element.classList`
+
+### **classList의 유용한 메소드**
+
+| 메소드 | 내용 | 참고사항 |
+| --- | --- | --- |
+| classList.add | 클래스 추가하기 | 여러 개의 값을 전달하면 여러 클래스 추가 가능 |
+| classList.remove | 클래스 삭제하기 | 여러 개의 값을 전달하면 여러 클래스 삭제 가능 |
+| classList.toggle | 클래스 없으면 추가, 있으면 삭제하기 | 하나의 값만 적용 가능하고,두 번째 파라미터로 추가 또는 삭제 기능을 강제할 수 있음 |
+
+## 이벤트 핸들러 등록하기
+
+```jsx
+// 이벤트 등록하기
+let btn = document.querySelector('#myBtn');
+
+// btn.onclick = function () {
+// 	console.log('Hi Codeit!');
+// };
+```
+
+```jsx
+function event1() {
+	console.log('Hi Codeit!');
+}
+
+function event2() {
+	console.log('Hi again!');
+}
+
+// elem.addEventListener(event 타입, handler)
+btn.addEventListener('click', event1);
+btn.addEventListener('click', event2);
+
+// elem.removeEventListener(event 타입, handler(등록할 떄 저장했던 이벤트 핸들러))
+btn.removeEventListener('click', event2);
+```
+
+- 이벤트 핸들러에 접근하는 2 가지 방법은 첫 번째는 DOM요소 에 접근한 다음 onclick 프로퍼티를 활용하는 방법이고, 두 번째는 HTML 태그에 onclick 속성을 활용하는 일이다.
+- onclick방식도 새로운 이벤트 핸들러를 할당하면 기존의 값은 사라진다.
+
+## 이벤트 객체
+
+```jsx
+// 이벤트 객체 (Event Object)
+const myInput = document.querySelector('#myInput');
+const myBtn = document.querySelector('#myBtn');
+
+function printEvent(event) {
+  console.log(event);
+	event.target.style.color = 'red';
+}
+
+myInput.addEventListener('keydown', printEvent);
+myBtn.addEventListener('click', printEvent);
+```
+
+- 이벤트와 관련된 다양한 정보를 담고 있는 이벤트 객체
+- 이벤트 핸들러의 첫 번째 파라미터에는 이벤트 객체가 들어간다.
+
+### **1. 공통 프로퍼티**
+
+아래의 프로퍼티들은 이벤트 타입과 상관없이 모든 이벤트 객체들이 공통적으로 가지고 있는 프로퍼티다.
+
+| 프로퍼티 | 설명 |
+| --- | --- |
+| type | 이벤트 이름 ('click', 'mouseup', 'keydown' 등) |
+| target | 이벤트가 발생한 요소 |
+| currentTarget | 이벤트 핸들러가 등록된 요소 |
+| timeStamp | 이벤트 발생 시각(페이지가 로드된 이후부터 경과한 밀리초) |
+| bubbles | 버블링 단계인지를 판단하는 값 |
+
+### **2. 마우스 이벤트**
+
+| 프로퍼티 | 설명 |
+| --- | --- |
+| button | 누른 마우스의 버튼 (0: 왼쪽, 1: 가운데(휠), 2: 오른쪽) |
+| clientX, clientY | 마우스 커서의 브라우저 표시 영역에서의 위치 |
+| pageX, pageY | 마우스 커서의 문서 영역에서의 위치 |
+| offsetX, offsetY | 마우스 커서의 이벤트 발생한 요소에서의 위치 |
+| screenX, screenY | 마우스 커서의 모니터 화면 영역에서의 위치 |
+| altKey | 이벤트가 발생할 때 alt키를 눌렀는지 |
+| ctrlKey | 이벤트가 발생할 때 ctrl키를 눌렀는지 |
+| shiftKey | 이벤트가 발생할 때 shift키를 눌렀는지 |
+| metaKey | 이벤트가 발생할 때 meta키를 눌렀는지 (window는 window키, mac은 cmd키) |
+
+### **3. 키보드 이벤트**
+
+| 프로퍼티 | 설명 |
+| --- | --- |
+| key | 누른 키가 가지고 있는 값 |
+| code | 누른 키의 물리적인 위치 |
+| altKey | 이벤트가 발생할 때 alt키를 눌렀는지 |
+| ctrlKey | 이벤트가 발생할 때 ctrl키를 눌렀는지 |
+| shiftKey | 이벤트가 발생할 때 shift키를 눌렀는지 |
+| metaKey | 이벤트가 발생할 때 meta키를 눌렀는지 (window는 window키, mac은 cmd키) |
+
+## **이벤트 버블링 (Event Bubbling)**
+
+- 이벤트는 전파가 된다.
+- 어떤 요소에서 이벤트가 발생하면 해당 요소에 등록된 이벤트 핸들러가 동작하는 것뿐만 아니라 부모 요소로 이벤트가 계속해서 전파되면서 각 요소에도 등록된 이벤트 핸들러가 있다면 차례로 이벤트 핸들러가 동작한다.
+- 자식 요소에서 부모 요소로 이벤트가 전파되는 것을 이벤트 버블링(Event Bubbling)이라고 부릅니다.
+- 참고로 이벤트 버블링은 **이벤트 객체**의 `stopPropagation` 메소드로 전파를 막을 수 있다.
+
+ ****
+
+## **이벤트 위임 (Event Delegation)**
+
+- 버블링 개념을 활용하면 훨씬 효과적인 이벤트 관리를 할 수 있다.
+- 부모 요소에서 한 번에 자식 요소들에 발생한 이벤트를 관리할 수도 있다.
+- 자식 요소의 이벤트를 부모 요소에 위임한다고 해서 **이벤트 위임(Event Delegation)**이라고 부른다.
+
+## **브라우저의 기본 동작**
+
+- 브라우저에는 각 태그별 혹은 상황별로 기본적으로 약속된 동작들이 있다.
+- 이러한 동작들을 막고 싶다면 **이벤트 객체**의 `preventDefault` 메소드를 통해 막을 수가 있다.
+
+## 마우스 버튼 이벤트
+
+```jsx
+MouseEvent.button
+```
+
+| 값 | 내용 |
+| --- | --- |
+| 0 | 마우스 왼쪽 버튼 |
+| 1 | 마우스 휠 |
+| 2 | 마우스 오른쪽 버튼 |
+| 3 | X1 (일반적으로 브라우저 뒤로 가기 버튼) |
+| 4 | X2 (일반적으로 브라우저 앞으로 가기 버튼) |
+
+```jsx
+MouseEvent.type
+```
+
+| 이벤트 타입 | 설명 |
+| --- | --- |
+| mousedown | 마우스 버튼을 누르는 순간 |
+| mouseup | 마우스 버튼을 눌렀다 떼는 순간 |
+| click | 왼쪽 버튼을 클릭한 순간 |
+| dblclick | 왼쪽 버튼을 빠르게 두 번 클릭한 순간 |
+| contextmenu | 오른쪽 버튼을 클릭한 순간 |
+| mousemove | 마우스를 움직이는 순간 |
+| mouseover | 마우스 포인터가 요소 위로 올라온 순간 |
+| mouseout | 마우스 포인터가 요소에서 벗어나는 순간 |
+| mouseenter | 마우스 포인터가 요소 위로 올라온 순간 (버블링이 일어나지 않음) |
+| mouseleave | 마우스 포인터가 요소에서 벗어나는 순간 (버블링이 일어나지 않음) |
+
+## **MouseEvent.위치프로퍼티**
+
+| 프로퍼티 | 설명 |
+| --- | --- |
+| clientX, clientY | 마우스 포인터의 브라우저 표시 영역에서의 위치 |
+| pageX, pageY | 마우스 커서의 문서 영역에서의 위치 |
+| offsetX, offsetY | 마우스 포인터의 이벤트 발생한 요소에서의 위치 |
+| screenX, screenY | 마우스 포인터의 모니터 화면 영역에서의 위치 |
+
+## **MouseEvent.relatedTarget**
+
+- `mouseenter, mouseleave, mouseover, mouseout` 이벤트에는 `relatedTarget`이라는 프로퍼티가 존재한다.
+- `relatedTarget` 프로퍼티는 이벤트가 발생하기 직전(또는 직후)에 마우스가 위치해 있던 요소를 담고 있다.
+
+## **KeyboardEvent.type**
+
+| 이벤트 타입 | 설명 |
+| --- | --- |
+| keydown | 키보드의 버튼을 누르는 순간 |
+| keypress | 키보드의 버튼을 누르는 순간 ('a', '5' 등 출력이 가능한 키에서만 동작하며, Shift, Esc 등의 키에는 반응하지 않음) |
+| keyup | 키보드의 버튼을 눌렀다 떼는 순간 |
+
+++ `key`는 사용자가 누른 키가 가지고 있는 값을 나타내고 `code`는 누른 키의 물리적인 위치를 나타낸다.
+
+## **input태그 다루기**
+
+| 이벤트 타입 | 설명 |
+| --- | --- |
+| focusin | 요소에 포커스가 되는 순간 |
+| focusout | 요소에 포커스가 빠져나가는 순간 |
+| focus | 요소에 포커스가 되는 순간 (버블링이 일어나지 않음) |
+| blur | 요소에 포커스가 빠져나가는 순간 (버블링이 일어나지 않음) |
+| change | 입력된 값이 바뀌는 순간 |
+| input | 값이 입력되는 순간 |
+| select | 입력 양식의 하나가 선택되는 순간 |
+| submit | 폼을 전송하는 순간 |
+
+## **스크롤 이벤트**
+
+- `scroll` 이벤트는 보통 `window` 객체에 이벤트 핸들러를 등록하고 `window` 객체의 프로퍼티와 함께 자주 활용된다.
+- `scrollY` 프로퍼티를 활용하면 스크롤된 특정한 위치를 기준으로 이벤트 핸들러가 동작하게 하거나 혹은 스크롤 방향(위로 스크롤 중인지/아래로 스크롤 중인지)을 기준으로 이벤트 핸들러가 동작하게끔 활용할 수도 있다.
+
+# 모던 자바스크립트
+
+## 모던 자바스크립트란?
+
+- 현 시점에서 사용하기 적합한 범위 내에서 최신 버전의 표준을 준수하는 자바 스크립트다.
+
+### ECMAScript
+
+- 자바 스크립트의 표준 명세서다.
+- ecma라는 국제 표준화 기구에서 자바 스크립트 버전 관리를 한다.
+- 자바 스크립트를 사용할 떄 준수해야 하는 규칙이나 세부 사항들을 ECMA - 262에 저장하는 데 이 문서가 ECMAScrip다.
+- 1997년에 만들어져서 업데이트 될 때마다 ECMAScript1,  ECMAScript2, ECMAScript3, …처럼 이름을 붙였다.
+- ES6 이후로는 1년마다 업데이트 하기로 결정했다. (ES6+/ ES6 이후의 문서들)
+
+### **JavaScript vs ECMAScript**
+
+- JavaScript는 프로그래밍 언어이고, ECMAScript는 프로그래밍 언어의 표준이다.
+- ECMAScript는 JavaScript가 갖추어야 할 내용을 정리해둔 '설명서'이고, JavaScript는 ECMAScript를 준수해서 만들어낸 '결과물' 이다.
+- ECMAScript는 JavaScript 뿐만아니라 모든 스크립트 언어(scripting languages)가 지켜야 하는 표준이다.
+- JavaScript는 ECMAScript를 기반으로 하지만 ECMAScript에 정의된 내용뿐만 아니라, 다른 부가적인 기능도 있다
+
+## 자바스크립트의 데이터 타입
+
+- 자바스크립트는 데이터 타입이 유연한 프로그래밍 언어다.
+1. number
+2. string
+3. boolean
+4. undefined
+5. null
+6. object
+7. symbol
+8. bigint
+
+## **Truthy 값과 Falsy 값**
+
+- false 처럼 평가되는 값을 falsy 값, true 처럼 평가되는 값을 truthy값이라고 부른다.
+- falsy값에는 false, null, undefined, 0, NaN,” “이 있다.
+- truthy값은 falsy값을 제외한 모든 값이다.
+
+## 논리 연산자
+
+- AND와 OR연산자는 무조건 불린 값을 리턴하는게 아니라, 왼쪽 피연산자 값의 유형에 따라서 두 피연산자 중 하나를 리턴하는 방식으로 동작한다.
+- AND 연산자는 왼쪽 피연산자가 falsy값일 때 왼쪽 피연산자를, 왼쪽 피연산자가 truthy값일 때 오른쪽 피연산자를 리턴한다.
+- OR 연산자는 왼쪽 피연산자가 falsy 일 때 오른쪽 피연산자를, 왼쪽 피연산자가 truthy 일 때 왼쪽 피연산자를 리턴한다.
+
+## **자바스크립트의 변수 선언 방식**
+
+### var  특징
+
+1. 변수 이름 중복선언 가능하다
+2. 변수 선언 전에 사용 가능하다(호이스팅),
+3. 함수 스코프 (함수를 기준으로 스코프를 구분한다)
+
+### let과 const
+
+1. 변수 이름 중복선언 불가 (SyntaxError 발생)
+2. 변수 선언 전에 사용 불가 (ReferenceError 발생)
+3. 블록 스코프 (중괄호로 감싸진 코드 블록에 따라 유효 범위를 구분한다)
+4. const는 값을 재할당 할 수 없다.
+
+## **함수 선언(function declaration)하기**
+
+```jsx
+// 함수 선언
+function 함수이름() {
+  내용;
+}
+```
+
+## **함수 표현식(function expression)**
+
+```jsx
+// 함수 표현식
+const 변수명 = function () {
+  내용;
+};
+```
+
+- 함수는 값으로 취급될 수도 있기 때문에 변수에 할당해서 함수를 선언할 수도 있다.
+
+## **함수의 형태**
+
+```jsx
+// 변수에 할당해서 활용
+const 변수명 = function () {
+  내용;
+};
+
+// 객체의 메소드로 활용
+const 객체명 = {
+  printTitle: function () {
+    내용;
+  }
+}
+
+// 콜백 함수로 활용
+myBtn.addEventListener('click', function () {
+  console.log('button is clicked!');
+});
+
+// 고차 함수로 활용
+function 합수명() {
+  return function () {
+    내용;
+  };
+};
+```
+
+## **파라미터의 기본값**
+
+- 함수의 파라미터는 기본값을 가질 수가 있다.
+- 기본값이 있는 파라미터는 함수를 호출할 때 아규먼트를 전달하지 않으면, 함수 내부의 동작은 이 파라미터의 기본값을 가지고 동작한다.
+
+```jsx
+function simple(name = 'World') {
+  console.log(`Hello! ${name}`);
+}
+
+simple('sum'); // Hello! sum
+simple(); // Hello! World
+```
+
+## **arguments 객체**
+
+- `arguments` 객체는 함수를 호출할 때 전달한 아규먼트들을 배열의 형태로 모아둔 유사 배열 객체다.
+
+```jsx
+function printArguments() {
+  // arguments 객체의 요소들을 하나씩 출력
+  for (const arg of arguments) {
+    console.log(arg); 
+  }
+}
+
+printArguments('Young', 'Mark', 'Koby');
+```
+
+## **Rest Parameter**
+
+- 파라미터 앞에 마침표 세 개를 붙여주면, 여러 개로 전달되는 아규먼트들을 배열로 다룰 수가 있게 된다.
+- `arguments`객체는 유사 배열이기 때문에 배열의 메소드를 활용할 수 없는 반면, rest parameter는 배열이기 때문에 배열의 메소드를 자유롭게 사용할 수 있다.
+
+```jsx
+function printRankingList(first, second, ...others) {
+  console.log('코드잇 레이스 최종 결과');
+  console.log(`우승: ${first}`);
+  console.log(`준우승: ${second}`);
+  for (const arg of others) {
+    console.log(`참가자: ${arg}`);
+  }
+}
+
+printRankingList('Tommy', 'Jerry', 'Suri', 'Sunny', 'Jack');
+```
+
+- 위의 사례처럼 다른 일반 파라미터들과 함께 사용될 수도 있다.
+- 앞에 정의된 파라미터에 argument를 먼저 할당하고 나머지 argument를 배열로 묶는 역할을 하기 때문에  가장 마지막에 작성해야 한다.
+
+## **Arrow Function**
+
+- 익명 함수를 좀 더 간결하게 표현할 수 있도록 한다.
+- 함수를 정의할 때 활용될 수도 있고 콜백 함수로 전달할 때 활용할 수도 있다.
+- arguments 객체가 없고, this가 가리키는 값이 일반 함수와 다르다.
+
+```jsx
+// 화살표 함수 정의
+const getTwice = (number) => {
+  return number * 2;
+};
+
+// 콜백 함수로 활용
+myBtn.addEventListener('click', () => {
+  console.log('button is clicked!');
+});
+```
+
+```jsx
+축약형!!
+// 1. 함수의 파라미터가 하나 뿐일 때
+const getTwice = (number) => {
+  return number * 2;
+};
+
+// 파라미터를 감싸는 소괄호 생략 가능
+const getTwice = number => {
+  return number * 2;
+};
+
+// 2. 함수 동작 부분이 return문만 있을 때
+const sum = (a, b) => {
+  return a + b;
+};
+
+// return문과 중괄호 생략 가능
+const sum = (a, b) => a + b;
+```
+
+## this
+
+- 웹 브라우저에서 this가 사용될 때는 전역 객체, Window 객체를 가지게 된다.
+- 객체의 메소드를 정의하기 위한 함수 안에선 메소드를 호출한 객체를 가리키게 된다.
+
+## 문장과 표현식
+
+### 문장 **(statements)**
+
+- 문장은 어떤 동작이 일어나도록 작성된 최소한의 코드 덩어리를 말한다.
+- 표현식이 아닌 문장은 문장 자체의 코드 블록(중괄호)로 그 문장의 범위가 구분된다.
+
+### **표현식 (expressions)**
+
+- 표현식은 길이와는 상관없이 결과적으로 하나의 값이 되는 모든 코드를 말한다.
+- 표현식인 문장은 세미콜론으로 범위가 구분된다.
+
+++ 표현식은 보통 문장의 일부로 쓰이지만, 그 자체로 문장일 수도 있다. ex) 할당식, 함수 호출
+
+## **조건부 연산자 (Conditional operator)**
+
+- 자바스크립트에서 세 개의 피연산자를 가지는 유일한 연산자로 조건에 따라 값을 결정할 때 활용된다.
+- 삼항 연산자 (Ternary operator)라고도 불린다.
+- 간결하지만 표현식이 아닌 문장은 작성할 수 없다.
+
+```jsx
+const 변수명 = (아규먼트) => 비교1 > 비교2 ? true일 때 : false일 때;
+
+const passChecker = (score) => score > cutOff ? '합격입니다!' : '불합격입니다!';
+```
+
+## **Spread 구문**
+
+- 여러 개의 값을 묶어놓은 배열이나 객체와 같은 값은 바로 앞에 마침표 세 개를 붙여서 펼칠 수가 있다.
+- 배열은 객체로 펼칠 수 있지만 객체는 배열로 펼칠 수 없다.
+
+```jsx
+const webPublishing = ['HTML', 'CSS'];
+const interactiveWeb = [...webPublishing, 'JavaScript'];
+
+const arr1 = [1, 2, 3];
+const arr2 = [4, 5, 6];
+const arr3 = [...arr1, ...arr2];
+```
+
+```jsx
+const members = ['태호', '종훈', '우재'];
+const newObject = { ...members };  -> 가능
+
+const topic = {
+  name: '모던 자바스크립트'
+}
+const newArray = [...topic]; -> 불가
+```
+
+## **모던한 프로퍼티 표기법**
+
+- ES2015 이후부터는 자바스크립트에서 변수나 함수룰 활용해서 프로퍼티를 만들 때 프로퍼티 네임과 변수나 함수 이름이 같다면 다음과 같이 축약해서 사용할 수 있다.
+
+```jsx
+function sayHi() {
+  console.log('Hi!');
+}
+
+const title = 'codeit';
+const birth = 2017;
+const job = '프로그래밍 강사';
+
+const user = {
+  title, 
+  birth, 
+  job, 
+  sayHi,
+};
+
+console.log(user); // {title: "codeit", birth: 2017, job: "프로그래밍 강사", sayHi: ƒ}
+```
+
+```jsx
+const user = {
+  firstName: 'Tess',
+  lastName: 'Jang',
+  getFullName() {
+    return `${this.firstName} ${this.lastName}`;
+  },
+};
+
+console.log(user.getFullName()); // Tess Jang
+```
+
+## **구조 분해 (Destructuring)**
+
+- 내부에 여러 값을 담고 있는 데이터 타입을 다룰 때 Destructuring 문법을 활용하면, 배열의 요소나 객체의 프로퍼티 값들을 개별적인 변수에 따로 따로 할당해서 다룰 수가 있다.
+- 기본값과 rest 문법을 활용할 수 있다.
+
+```jsx
+// Array Destructuring
+const members = ['코딩하는효준', '글쓰는유나', '편집하는민환'];
+const [macbook, ipad, coupon] = members;
+
+console.log(macbook); // 코딩하는효준
+console.log(ipad); // 글쓰는유나
+console.log(coupon); // 편집하는민환
+
+// Object Destructuring
+const macbookPro = {
+  title: '맥북 프로 16형',
+  price: 3690000,
+};
+
+const { title, price } = macbookPro;
+
+console.log(title); // 맥북 프로 16형
+console.log(price); // 3690000
+```
+
+## **에러와 에러 객체**
+
+- 에러가 발생하면 에러에 대한 정보를 `name`과 `message`라는 프로퍼티로 담고 있는 에러 객체가 만들어진다.
+- 대표적인 에러 객체는 SyntaxError, ReferenceError, TypeError 다.
+- `new` 키워드와 에러 객체 이름을 딴 함수를 통해 에러 객체를 만들 수 있고, `throw` 키워드로 에러를 발생시킬 수 있다.
+
+```jsx
+throw new TypeError('타입 에러가 발생했습니다.');
+```
+
+## **try...catch문**
+
+```jsx
+try {
+  // 실행할 코드
+} catch (error) {
+  // 에러 발생 시 동작할 코드
+}finally {
+  // 항상 실행할 코드
+}
+```
+
+- 대표적인 에러 처리 방법이다.
+- `try`문에서 발생한 에러 객체가 `catch`문의 첫 번째 파라미터로 전달된다.
+- `try...catch`문에서 에러의 유무와 상관없이 항상 동작해야 할 코드가 필요하다면 `finally`문을 활용할 수 있다.
+
+## **forEach 메소드**
+
+- 배열의 요소를 하나씩 살펴보면서 반복 작업을 하는 메소드다.
+- `forEach` 메소드는 첫 번째 아규먼트로 콜백 함수를 전달받는다.
+- 콜백 함수의 파라미터에는 각각 배열의 요소, index, 메소드를 호출한 배열이 전달된다. (index와 array는 생략가능)
+
+```jsx
+const numbers = [1, 2, 3];
+
+numbers.forEach((element, index, array) => {
+  console.log(element); // 순서대로 콘솔에 1, 2, 3이 한 줄씩 출력됨.
+});
+```
+
+## **map 메소드**
+
+- 배열의 요소를 하나씩 살펴보면서 반복 작업을 하는 메소드다.
+- 첫 번째 아규먼트로 전달하는 콜백 함수가 매번 리턴하는 값들을 모아서 새로운 배열을 만들어 리턴하는 특징이 있다.
+
+```jsx
+const numbers = [1, 2, 3];
+const twiceNumbers = numbers.map((element, index, array) => {
+  return element * 2;
+});
+
+console.log(twiceNumbers); // (3) [2, 4, 6]
+```
+
+## **filter 메소드**
+
+- 배열의 요소를 하나씩 살펴보면서 콜백함수가 리턴하는 조건과 일치하는 요소만 모아서 새로운 배열을 리턴하는 메소드다.
+
+```jsx
+const devices = [
+  {name: 'GalaxyNote', brand: 'Samsung'},
+  {name: 'MacbookPro', brand: 'Apple'},
+  {name: 'Gram', brand: 'LG'},
+  {name: 'SurfacePro', brand: 'Microsoft'},
+  {name: 'ZenBook', brand: 'Asus'},
+  {name: 'MacbookAir', brand: 'Apple'},
+];
+
+const apples = devices.filter((element, index, array) => {
+  return element.brand === 'Apple';
+});
+
+console.log(apples); // (2) [{name: "MacbookPro", brand: "Apple"}, {name: "MacbookAir", brand: "Apple"}]
+```
+
+## **find 메소드**
+
+- 배열의 요소들을 반복하는 중에 콜백함수가 리턴하는 조건과 일치하는 가장 첫번째 요소를 리턴하고 반복을 종료하는 메소드다.
+
+```jsx
+const devices = [
+  {name: 'GalaxyNote', brand: 'Samsung'},
+  {name: 'MacbookPro', brand: 'Apple'},
+  {name: 'Gram', brand: 'LG'},
+  {name: 'SurfacePro', brand: 'Microsoft'},
+  {name: 'ZenBook', brand: 'Asus'},
+  {name: 'MacbookAir', brand: 'Apple'},
+];
+
+const myLaptop = devices.find((element, index, array) => {
+  console.log(index); // 콘솔에는 0, 1, 2까지만 출력됨.
+  return element.name === 'Gram';
+});
+
+console.log(myLaptop); // {name: "Gram", brand: "LG"}
+```
+
+## **some 메소드**
+
+- 배열 안에 콜백함수가 리턴하는 조건을 만족하는 요소가 1개 이상 있는지를 확인하는 메소드다.
+- 배열을 반복하면서 모든 요소가 콜백함수가 리턴하는 조건을 만족하지 않는다면 `false`를 리턴하고, 배열을 반복하면서 콜백함수가 리턴하는 조건을 만족하는 요소가 등장한다면 바로 `true`를 리턴하고 반복을 종료한다.
+
+```jsx
+const numbers = [1, 3, 5, 7, 9];
+
+// some: 조건을 만족하는 요소가 1개 이상 있는지
+const someReturn = numbers.some((element, index, array) => {
+  console.log(index); // 콘솔에는 0, 1, 2, 3까지만 출력됨.
+  return element > 5;
+});
+
+console.log(someReturn); // true;
+
+```
+
+## **every 메소드**
+
+- 배열 안에 콜백 함수가 리턴하는 조건을 만족하지 않는 요소가 1개 이상 있는지를 확인하는 메소드다.
+- 배열을 반복하면서 모든 요소가 콜백함수가 리턴하는 조건을 만족한다면 `true`를 리턴하고, 배열을 반복하면서 콜백함수가 리턴하는 조건을 만족하지 않는 요소가 등장한다면 바로 `false`를 리턴하고 반복을 종료한다.
+
+```jsx
+const numbers = [1, 3, 5, 7, 9];
+
+// every: 조건을 만족하지 않는 요소가 1개 이상 있는지
+const everyReturn = numbers.every((element, index, array) => {
+  console.log(index); // 콘솔에는 0까지만 출력됨.
+  return element > 5;
+});
+
+console.log(everyReturn); // false;
+```
+
+## **reduce 메소드**
+
+- 누적값을 계산할 때 활용하는 메소드다.
+- `reduce` 메소드는 일반적으로 두 개의 파라미터를 활용한다.
+- 첫 번째는 반복 동작할 콜백함수다. 매번 실행되는 콜백함수의 리턴값이 다음에 동작할 콜백함수의 첫번째 파라미터로 전달되는데 결과적으로 마지막 콜백함수가 리턴하는 값이 `reduce` 메소드의 최종 리턴값이 된다.
+- 메소드의 두 번째 파라미터로 전달한 초기값이 첫 번째로 실행될 콜백함수의 가장 첫 번째 파라미터로 전달된다.
+
+```jsx
+const numbers = [1, 2, 3, 4];
+
+// reduce
+const sumAll = numbers.reduce((accumulator, element, index, array) => {
+  return accumulator + element;
+}, 0);
+
+console.log(sumAll); // 10
+```
+
+## sort 메소드
+
+- 배열을 정렬할 수 있다.
+- 아무런 아규먼트도 전달하지 않을 때는 기본적으로 [유니코드](https://ko.wikipedia.org/wiki/%EC%9C%A0%EB%8B%88%EC%BD%94%EB%93%9C)에 정의된 문자열 순서에 따라 정렬된다.
+
+```jsx
+const letters = ['D', 'C', 'E', 'B', 'A'];
+const numbers = [1, 10, 4, 21, 36000];
+
+letters.sort();
+numbers.sort();
+
+console.log(letters); // (5) ["A", "B", "C", "D", "E"]
+console.log(numbers); // (5) [1, 10, 21, 36000, 4]
+```
+
+## **reverse 메소드**
+
+- 배열의 순서를 뒤집어 주는 메소드다.
+
+```jsx
+const letters = ['a', 'c', 'b'];
+const numbers = [421, 721, 353];
+
+letters.reverse();
+numbers.reverse();
+
+console.log(letters); // (3) ["b", "c", "a"]
+console.log(numbers); // (3) [353, 721, 421]
+```
+
+## **Map**
+
+- 이름이 있는 데이터를 저장한다는 점에서 객체와 비슷하다.
+- Map은 메소드를 통해서 값을 추가하거나 접근할 수 있다.
+- `new` 키워드를 통해서 Map을 만들 수 있고 아래와 같은 메소드를 통해 Map 안의 여러 값들을 다룰 수 있다.
+
+- map.set(key, value): key를 이용해 value를 추가하는 메소드.
+- map.get(key): key에 해당하는 값을 얻는 메소드. key가 존재하지 않으면 undefined를 반환.
+- map.has(key): key가 존재하면 true, 존재하지 않으면 false를 반환하는 메소드.
+- map.delete(key): key에 해당하는 값을 삭제하는 메소드.
+- map.clear(): Map 안의 모든 요소를 제거하는 메소드.
+- map.size: 요소의 개수를 반환하는 프로퍼티. (메소드가 아닌 점 주의! 배열의 length 프로퍼티와 같은 역할)
+
+## **Set**
+
+- 여러 개의 값을 순서대로 저장한다.
+- 배열의 메소드는 활용할 수 없고 Map과 비슷하게 Set만의 메소드를 통해서 값을 다루는 특징이 있다.
+- `new` 키워드로 Set을 만들 수 있고 아래와 같은 메소드를 통해 Set 안의 여러 값들을 다룰 수 있다.
+- set.add(value): 값을 추가하는 메소드. (메소드를 호출한 자리에는 추가된 값을 가진 Set 자신을 반환.)
+- set.has(value): Set 안에 값이 존재하면 true, 아니면 false를 반환하는 메소드.
+- set.delete(value): 값을 제거하는 메소드. (메소드를 호출한 자리에는 셋 내에 값이 있어서 제거에 성공하면 true, 아니면 false를 반환.)
+- set.clear(): Set 안의 모든 요소를 제거하는 메소드.
+- set.size: 요소의 개수를 반환하는 프로퍼티. (메소드가 아닌 점 주의! 배열의 length 프로퍼티와 같은 역할)
+
+## 모듈이란?
+
+- 많은 코드가 필요한 프로그램은 하나의 파일로 관리하는 것이 아니라 각 기능 별로 여러 개의 파일로 분리하는 것이 좋다.
+- 공통된 기능이나 특별한 목적에 따라 각각의 파일로 구분하는 과정을 모듈화라 그러고 각각의 파일을 모듈이라고 한다.
+- 모듈화는 코드를 효율적으로 관리할 수 있고 다른 프로그램에서 재활용 할 수 있다는 장점이 있다.
+
+### 모듈 파일의 조건
+
+- 파일만의 독립적인 스코프를 가져야 하는데 이를 모듈 스코프라고 부른다.
+- 즉, 모듈 파일 내부에서 선언한 변수나 함수는 모듈 안에서만 사용 가능하다.
+
+```html
+// 모듈 속성을 가지려면 HTML 파일에서 이렇게 type을 module로 지정해야 한다.
+<script type = "module" src="printer.js"></script>
+```
+
+## 모듈 문법
+
+- export를 통해 다른 모듈에서도 변수와 함수를 사용하게 만들 수 있다.
+- export를 선언 앞에 붙이기
+- 변수나 함수를 사용하고자 하는 파일에서 import를 이용해 불러와야 쓸 수 있다.
+
+```jsx
+export const 변수명/함수명 = 값;
+
+// 그 변수를 쓸 다른 파일
+import { title, print } from './export가 쓰여진 파일 이름'
+```
+
+## 이름 바꾸기
+
+- import 한 변수의 이름이 모듈에서 쓰고자 한 이름과 같을 때 import 한 변수의 이름을 바꿔줘야 한다.
+
+```jsx
+import { title, print } from './export가 쓰여진 파일 이름'
+
+const title = '바꿀 이름';
+
+//또는 import { title as 바꿀 이름, print } from './export가 쓰여진 파일 이름'
+```
+
+## 한꺼번에 다루기
+
+```jsx
+import * as 새로운 이름 from './export가 쓰여진 파일 이름'
+
+//사용할 때는 객체 형식으로
+새로운 이름.print(이름)
+
+//한꺼번에 export 가능
+코드 맨 밑에 export {할 것들}
+```
+
+- `*` 를 와일드 카드 문자라고 한다.
+
+## default export
+
+- `export default` 는 반드시 하나의 대상만 내보낼 수 있다.
+- 모듈 파일 내에서 딱 하나만 사용할 수 있다.
+
+```jsx
+export default '값';
+
+//사용할 때 이름을 붙여줘야 한다.
+
+default as 이름;
+
+// 또는 디폴트 에스를 생략하고 중괄호 밖으로 빼낼 수 있다.
+import 이름, {
+...
+}
+
+// 여러 개 export
+export default {title, print };
+// == export default {title: title, print: print };
+```
+
+# 자바스크립트 객체 지향 기본기
+
+## 객체와 class
+
+### 객체 지향 프로그래밍이란?
+
+- ‘객체’ 간의 상호작용을 중심으로 하는 프로그래밍이다.
+- 프로퍼티와 메소드로 이루어진 각 객체들의 상호 작용을 중심으로 코드를 작성하는 것이다.
+
+### 객체란?
+
+- 객체의 상태를 나타내는 변수 → 프로퍼티
+- 객체의 행동을 나타내는 함수로 이루어져 있다. →메소드
+
+++ Object Literal →객체를 나타내는 문자열
+
+### Object Literal
+
+- 객체를 나타내는 문자열
+
+```jsx
+const user = {
+    email,
+    birthdate,
+    buy(item) {
+      console.log(`${this.email} buys ${item.name}`);
+    },
+  };
+```
+
+### **Factory function**
+
+```jsx
+function createUser(email, birthdate) {
+  const user = {
+    email,
+    birthdate,
+    buy(item) {
+      console.log(`${this.email} buys ${item.name}`);
+    },
+  };
+  return user;
+}
+
+const user1 = createUser('chris123@google.com', '19920321');
+const user2 = createUser('jerry99@google.com', '19950719');
+```
+
+- 함수 안에  Object Literal을 포함해 만들어 객체를 만들어낼 수 있다.
+- 객체를 생성해서 return 한다.
+
+### **Constructor function**
+
+```jsx
+function User(email, birthdate) {
+  this.email = email;
+  this.birthdate = birthdate;
+  this.buy = function (item) {
+    console.log(`${this.email} buys ${item.name}`);
+  };
+}
+
+const user1 = new User('chris123@google.com', '1992-03-21');
+const user2 = new User('jerry99@google.com', '1995-07-19');
+```
+
+- 객체를 생성하는 용도로 사용하는 Constructor function을 정의하고, 그 안에서 this 키워드를 사용하여 생성될 객체의 프로퍼티와 메소드를 설정하는 방법이다.
+- `this` 는 현재 객체인 user 객체 자체를 의미한다.
+- Constructor function으로 객체를 생성하려면 그 앞에 new를 붙여서 실행해야 한다.
+
+## class
+
+```jsx
+class User {
+  constructor(email, birthdate) {
+    this.email = email;
+    this.birthdate = birthdate;
+  }
+
+  buy(item) {
+    console.log(`${this.email} buys ${item.name}`);
+  }
+}
+
+const user1 = new User('chris123@google.com', '1992-03-21');
+const user2 = new User('jerry99@google.com', '1995-07-19');
+```
+
+- class 키워드를 사용해서 객체의 틀을 정의한다.
+- class를 사용할 때는 보통 프로퍼티의 경우 constructor 안에 정의하고, 메소드의 경우 constructor 밖에 정의한다.
+- new를 붙여서 객체를 생성한다.
+
+## 객체 지향 프로그래밍 핵심 개념 4가지
+
+1. 추상화
+2. 캡슐화
+3. 상속
+4. 다형성
+
+## 추상화**(Abstraction)**란?
+
+- 어떤 구체적인 존재를 원하는 방향으로 간략화해서 나타내는 것이다.
+
+## **캡슐화(Encapsulation)**란?
+
+- 객체 외부에서 함부로 접근하면 안되는 프로퍼티나 메소드에 직접 접근할 수 없도록 하고, 필요한 경우 공개된 다른 메소드를 통해서만 접근할 수 있도록 하는 것을 의미한다.
+- 즉, 객체의 특정 프로퍼티에 직접 접근하지 못하도록 막는 것이다.
+- `_email`에 접근할 수 있기에 완벽한 추상화는 아니다. (클로저 이용시 완벽한 추상화 가능)
+- 객체도 캡슐화할 수 있다.
+
+```jsx
+class User {
+  constructor(email, birthdate) {
+    this.email = email;
+    this.birthdate = birthdate;
+  }
+
+  buy(item) {
+    console.log(`${this.email} buys ${item.name}`);
+  }
+  
+  // getter 함수 , ._email 대신 email만 써도 된다.
+  get email() {
+    return this._email;
+  }
+  
+  // setter 함수, email 프로퍼티에 값을 설정하려고 할때마다 실행된다. (함수가 실행되는 것)
+  set email(address) {
+    if (address.includes('@')) {
+      this._email = address;
+    } else {
+      throw new Error('invalid email address');
+    }
+  }
+}
+// ._email에 접근 가능
+console.log(user1._email);
+user1._email = 'chris robert';
+```
+
+## 상속**(Inheritance)이란?**
+
+- 하나의 객체가 다른 객체의 프로퍼티와 메소드를 받을 `때` 상속이라고 한다.
+- 즉, 부모 클래스의 프로퍼티와 메소드를 자식 클래스가 그대로 물려받는 것이다.
+- 상속을 이용하면 코드의 재사용성이 좋아진다.
+
+```jsx
+class User {
+  constructor(email, birthdate) {
+    this.email = email;
+    this.birthdate = birthdate;
+  }
+
+  buy(item) {
+    console.log(`${this.email} buys ${item.name}`);
+  }
+} 
+
+class PremiumUser extends User {
+  constructor(email, birthdate, level) {
+    super(email, birthdate);             // 필수!!
+    this.level = level;
+  }
+
+  streamMusicForFree() {
+    console.log(`Free music streaming for ${this.email}`);
+  }
+}
+
+++ //만약 자식 매소드에서 부모 매소드와 동일한 부분이 있으면
+super.buy(item);
+// 이런 식으로 쓰면 된다. 
+```
+
+## **다형성(Polymorphism)이란?**
+
+- 많은 형태를 가지고 있는 성질을 의미한다.
+- 하나의 변수가 다양한 종류의 클래스로 만든 여러 객체를 가리킬 수 있음을 의미한다.
+- 자식 클래스에서 부모 클래스의 메소드와 동일한 이름의 다른 매소드를 정의하고 내용을 다르게 만드는 것을 오버라이딩(overriding)이라고 한다.
+
+```jsx
+class User {
+  constructor(email, birthdate) {
+    this.email = email;
+    this.birthdate = birthdate;
+  }
+
+  buy(item) {
+    console.log(`${this.email} buys ${item.name}`);
+  }
+} 
+
+class PremiumUser extends User {
+  constructor(email, birthdate, level) {
+    super(email, birthdate);
+    this.level = level;
+  }
+
+  buy(item) {
+    console.log(`${this.email} buys ${item.name} with a 5% discount`);
+  }
+
+  streamMusicForFree() {
+    console.log(`Free music streaming for ${this.email}`);
+  }
+}
+
+const item = { 
+  name: '스웨터', 
+  price: 30000, 
+};
+
+const user1 = new User('chris123@google.com', '19920321');
+const user2 = new User('rachel@google.com', '19880516');
+const user3 = new User('brian@google.com', '20051125');
+const pUser1 = new PremiumUser('niceguy@google.com', '19891207', 3);
+const pUser2 = new PremiumUser('helloMike@google.com', '19900915', 2);
+const pUser3 = new PremiumUser('aliceKim@google.com', '20010722', 5);
+
+const users = [user1, pUser1, user2, pUser2, user3, pUser3];
+
+users.forEach((user) => {
+  user.buy(item);
+});
+```
+
+## instanceof 연산자
+
+- 현재 변수가 가리키는 객체가 정확히 어느 클래스로 만든 객체인지 확인할 수 있다.
+
+```jsx
+users.forEach((user) => {
+	// PremiumUser로 만든 객체면 true, 아니면 false 출력
+	console.log(user instanceof PremiumUser);
+});
+```
+
+```jsx
+users.forEach((user) => {
+	// 자식 클래스로 만든 객체는 부모 클래스로도 인정되기에 전부 true가 출력
+	console.log(user instanceof User);
+});
+```
+
+## static 프로퍼티와 static 메소드
+
+- 클래스에 직접적으로 딸려 있는 프로퍼티와 메소드다.
+- 객체가 아닌 클래스 자체로 접근하고 싶을 때 사용 한다.
+- static을 붙이면 이 클래스로 객체를 생성하지 않아도 프로퍼티와 메소드를 사용할 수 있다.
+- 기존 값 수정이나 새로운 값 생성 가능하다.
+
+# 자바스크립트 웹 개발 기본기
+
+## fetch 함수
+
+```jsx
+fetch('URL')
+	.then((response) => response.text()) //return 이 생략되어 있다.
+	.then((result) => {console.log(result); }); //response.text()가 result로 넘어간다.
+```
+
+- 패치는 서버로 원하는 내용을 요구하는 request를 보내고 response를 받는 함수다.
+- 파라미터로 넘어온 URL로 request를 보낸다.
+- 서버가 보낸 response는 하나의 객체가 되어 파라미터로 넘어온다.
+- 두번째 줄은 서버로 리스폰스가 온 후에야 실행된다.
+- 나중에 어떤 조건이 만족되었을 때 실행되는 함수를 콜백 함수라고 한다.
+- then은 콜백을 등록해주는 매소드다. then은 패치 함수가 리턴하는 어떤 객체의 매소드다.
+
+정리하면,
+
+1. fetch 함수는 어떤 객체를 리턴하는데(Promise 객체)
+2. 이 객체의 then 메소드로, '리스폰스가 왔을 때 실행할 콜백'을 등록할 수 있습니다.
+3. 이렇게 등록된 콜백들은 then 메소드로 등록한 순서대로 실행되고, 이때 이전 콜백의 리턴값을 이후 콜백이 넘겨받아서 사용할 수 있다.
+
+## **개발자 도구란?**
+
+- 웹 브라우저가 내부적으로 어떤 동작을 하고 있는지 살펴보게 해주는 도구다.
+- 개발자 도구를 사용해서 자신이 작성한 코드를 브라우저가 어떻게 해석하고 실행하는지 자세하게 살펴볼 수 있다.
+- Ctrl 키 + Shift 키 + 알파벳 i 키 가 단축키다.
+
+## URL(Uniform Resource Locator)이란?
+
+- 웹에 존재하는 특정 데이터를 나타내기 위한 문자열이다.
+- 화면에서 클릭하는 버튼 등에 어느 URL로 새로운 리퀘스트를 보낼지, HTML 코드 또는 Javascript 코드로 다 작성이 되어있기 때문에 호스트 부분만 입력해도 페이지로 진입한다.
+
+### URL 구성
+
+- 스킴(Scheme)
+    - 프로토콜의 이름
+    - http = HyperText Transfer Protocol
+- 호스트 (Host)
+    - 전 세계 서버 중 하나의 서버를 특정한다.
+- 경로 (Path)
+    - 서버에 있는 데이터 중 원하는 데이터를 특정한다.
+    - 설계하는 개발자에 따라 다르다.
+- 쿼리 (Query)
+    - 존재할 때도, 존재하지 않을 때도 있다.
+    - 데이터에 관한 세부적인 요구 사항이 있을 때 사용한다.
+    - 설계하는 개발자에 따라 다르다.
+
+## JSON이란?
+
+- Java Script Object Notation
+- JSON에서는 각 프로퍼티의 이름을 반드시 큰따옴표(")로 감싸줘야 한다.
+- JSON에서는 값이 문자열인 경우 큰따옴표(")를 사용해야 한다.
+- JSON에서는 표현할 수 없는 값들이 있습니다. (undefined, NaN, Infinity)
+- JSON에는 주석을 추가할 수 없다.
+
+```jsx
+fetch('URL')
+	.then((response) => response.text()) 
+	.then((result) => { const users = JSON.parse(result) }); 
+```
+
+## 메소드의 의미
+
+| 메소드 | 데이터 처리 |
+| --- | --- |
+| GET | READ (데이터 조회) |
+| POST | CREATE (데이터 추가) |
+| PUT | UPDATE (데이터 수정) |
+| DELETE | DELETE (데이터 삭제) |
+
+## Request
+
+- Head는 Request에 대한 부가 정보 (메소드)
+- Body는 실제 데이터를 담는 부분이다.
+
+```jsx
+...
+:method: GET
+:path: /men/shirts
+...
+헤더 1: 값
+헤더 2: 값
+헤더 3: 값
+...
+```
+
+## POST request
+
+- Request Payload라고 쓰인 부분이 바로 리퀘스트의 바디 부분이다.
+
+```jsx
+fetch('URL'), {
+	method: 'POST',
+	body: JSON.stringify(newMember),
+})  
+	.then((response) => response.text()) 
+	.then((result) => { console.log(result) }); 
+```
+
+## PUT request
+
+```jsx
+fetch('URL'), {
+	method: 'PUT',
+	body: JSON.stringify(newMember),
+})  
+	.then((response) => response.text()) 
+	.then((result) => { console.log(result) }); 
+```
+
+## DELETE request
+
+```jsx
+fetch('URL'), {
+	method: 'DELETE',
+})  
+	.then((response) => response.text()) 
+	.then((result) => { console.log(result) }); 
+```
+
+## API?
+
+- Application Programming Interface의 약자다.
+- ‘개발할 때 사용할 수 있도록 특정 라이브러리나 플랫폼 등이 제공하는 데이터나 함수 등'을 의미한다.
+- 웹 개발에서는 어느 URL로 어떤 리퀘스트를 보냈을 때, 무슨 처리가 수행되고 어떤 리스폰스가 오는지에 관해 미리 정해진 규격을 **Web API**라고도 한다.
+- Web API를 설계한다는 것은 서비스에서 사용될 모든 URL들을 나열하고, 각각의 URL에 관한 예상 리퀘스트와 리스폰스의 내용을 정리한다는 뜻이다.
+
+## **REST API?**
+
+- Web API 설계를 할 때, 준수하기 위해 노력하는 일종의 가이드라인이다.
+- Representational State Transfer(표현적인 상태 이전)의 줄임말이다.
+- REST architecture가 되기 위한 조건
+- Client-Server
+    
+    Client-Server 구조를 통해 양측의 관심사를 분리해야 한다.
+    
+- Stateless
+    
+    Client가 보낸 각 리퀘스트에 관해서 Server는 그 어떤 맥락(context)도 저장하지 않는다.
+    
+- Cache
+    
+    Cache를 활용해서 네트워크 비용을 절감해야 한다.
+    
+- Uniform Interface
+    
+    Client가 Server와 통신하는 인터페이스는 다음과 같은 하위 조건 4가지를 준수해야 한다.
+    
+- Layered System
+- Code on Demand
+
+## status code
+
+- 모든 상태 코드(Status Code)는 각각 그에 대응되는 상태 메시지(Status Message)를 갖고 있다.
+
+### **100번대**
+
+서버가 클라이언트에게 **정보성 응답**(Informational response)을 줄 때 사용되는 상태 코드들이다.
+
+- **100 Continue** : 클라이언트가 서버에게 계속 리퀘스트를 보내도 괜찮은지 물어봤을 때, 계속 리퀘스트를 보내도 괜찮다고 알려주는 상태 코드다.
+- **101 Switching Protocols** : 클라이언트가 프로토콜을 바꾸자는 리퀘스트를 보냈을 때, 서버가 '그래요, 그 프로토콜로 전환하겠습니다'라는 뜻을 나타낼 때 쓰이는 상태 코드다.
+
+### **200번대**
+
+클라이언트의 리퀘스트가 성공 처리되었음을 의미하는 상태 코드들이다.
+
+- **200 OK** : 리퀘스트가 성공적으로 처리되었음을 포괄적으로 의미하는 상태 코드다. GET 리퀘스트의 경우 리소스가 잘 조회되었다는 뜻이고, POST 리퀘스트의 경우 새 리소스가 잘 생성되었다, PUT 리퀘스트의 경우 기존 리소스가 잘 수정되었다, DELETE 리퀘스트의 경우 기존 리소스가 잘 삭제되었다는 뜻이다.
+- **201 Created** : 리퀘스트의 내용대로 리소스가 잘 생성되었다는 뜻이다. POST 리퀘스트가 성공한 경우에 200번 대신 201번이 올 수도 있다.
+- **202 Accepted** : 리퀘스트의 내용이 일단은 잘 접수되었다는 뜻이다. 즉, 당장 리퀘스트의 내용이 처리된 것은 아니지만 언젠가 처리할 것이라는 뜻이다.
+
+### **300번대**
+
+클라이언트의 리퀘스트가 아직 처리되지 않았고, 리퀘스트 처리를 원하면 클라이언트 측의 추가적인 작업이 필요함을 의미하는 상태 코드들이다.
+
+- **301 Moved Permanently** : 리소스의 위치가 바뀌었음을 나타낸다.
+- **302 Found** : 리소스의 위치가 일시적으로 바뀌었음을 나타낸다. 이 말은 지금 당장은 아니지만 나중에는 현재 요청한 URL이 정상적으로 인식될 것이라는 뜻이다.
+- **304 Not Modified** : 브라우저들은 보통 한번 리스폰스로 받았던 이미지 같은 리소스들을 그대로 내부에 저장하고 있다. 그리고 서버는 해당 리소스가 바뀌지 않았다면, 리스폰스에 그 리소스를 보내지 않고 304번 상태 코드만 헤드에 담아서 보냄으로써 '네트워크 비용'을 절약하고 브라우저가 저장된 리소스를 재활용하도록 한다.
+
+### **400번대**
+
+리퀘스트를 보내는 클라이언트 쪽에 문제가 있음을 의미하는 상태 코드들이다.
+
+- **400 Bad Request** : 말그대로 리퀘스트에 문제가 있음을 나타낸다. 리퀘스트 내부 내용의 문법에 오류가 존재하는 등의 이유로 인해 발생한다.
+- **401 Unauthorized** : 아직 신원이 확인되지 않은(unauthenticated) 사용자로부터 온 리퀘스트를 처리할 수 없다는 뜻이다.
+- **403 Forbidden** : 사용자의 신원은 확인되었지만 해당 리소스에 대한 접근 권한이 없는 사용자라서 리퀘스트를 처리할 수 없다는 뜻이다.
+- **404 Not Found** : 해당 URL이 나타내는 리소스를 찾을 수 없다는 뜻이다.
+- **405 Method Not Allowed** : 해당 리소스에 대해서 요구한 처리는 허용되지 않는다는 뜻이다.
+- **413 Payload Too Large** : 현재 리퀘스트의 바디에 들어있는 데이터의 용량이 지나치게 커서 서버가 거부한다는 뜻이다.
+- **429 Too Many Requests** : 일정 시간 동안 클라이언트가 지나치게 많은 리퀘스트를 보냈다는 뜻이다.
+
+### **500번대**
+
+서버 쪽의 문제로 인해 리퀘스트를 정상적으로 처리할 수 없음을 의미하는 상태 코드들이다.
+
+- **500 Internal Server Error** : 현재 알 수 없는 서버 내의 에러로 인해 리퀘스트를 처리할 수 없다는 뜻이다.
+- **503 Service Unavailable** : 현재 서버 점검 중이거나, 트래픽 폭주 등으로 인해 서비스를 제공할 수 없다는 뜻이다.
+
+## **Content-Type 헤더**
+
+- 현재 리퀘스트 또는 리스폰스의 바디에 들어 있는 데이터가 어떤 타입인지를 나타낸다.
+- Content-Type 헤더의 값은 '주 타입(main type)/서브 타입(sub type)'의 형식으로 나타난다.
\ No newline at end of file