diff --git "a/\354\240\225\353\257\274\354\243\274/Notes/image-1.png" "b/\354\240\225\353\257\274\354\243\274/1\354\243\274\354\260\250 \354\213\244\354\212\265/Notes/image-1.png"
similarity index 100%
rename from "\354\240\225\353\257\274\354\243\274/Notes/image-1.png"
rename to "\354\240\225\353\257\274\354\243\274/1\354\243\274\354\260\250 \354\213\244\354\212\265/Notes/image-1.png"
diff --git "a/\354\240\225\353\257\274\354\243\274/Notes/image.png" "b/\354\240\225\353\257\274\354\243\274/1\354\243\274\354\260\250 \354\213\244\354\212\265/Notes/image.png"
similarity index 100%
rename from "\354\240\225\353\257\274\354\243\274/Notes/image.png"
rename to "\354\240\225\353\257\274\354\243\274/1\354\243\274\354\260\250 \354\213\244\354\212\265/Notes/image.png"
diff --git "a/\354\240\225\353\257\274\354\243\274/Notes/week1.md" "b/\354\240\225\353\257\274\354\243\274/1\354\243\274\354\260\250 \354\213\244\354\212\265/Notes/week1.md"
similarity index 100%
rename from "\354\240\225\353\257\274\354\243\274/Notes/week1.md"
rename to "\354\240\225\353\257\274\354\243\274/1\354\243\274\354\260\250 \354\213\244\354\212\265/Notes/week1.md"
diff --git "a/\354\240\225\353\257\274\354\243\274/Notes/week2.md" "b/\354\240\225\353\257\274\354\243\274/1\354\243\274\354\260\250 \354\213\244\354\212\265/Notes/week2.md"
similarity index 100%
rename from "\354\240\225\353\257\274\354\243\274/Notes/week2.md"
rename to "\354\240\225\353\257\274\354\243\274/1\354\243\274\354\260\250 \354\213\244\354\212\265/Notes/week2.md"
diff --git "a/\354\240\225\353\257\274\354\243\274/Notes/week3.md" "b/\354\240\225\353\257\274\354\243\274/1\354\243\274\354\260\250 \354\213\244\354\212\265/Notes/week3.md"
similarity index 100%
rename from "\354\240\225\353\257\274\354\243\274/Notes/week3.md"
rename to "\354\240\225\353\257\274\354\243\274/1\354\243\274\354\260\250 \354\213\244\354\212\265/Notes/week3.md"
diff --git "a/\354\240\225\353\257\274\354\243\274/4\354\243\274\354\260\250 \354\213\244\354\212\265/Notes/image-1.png" "b/\354\240\225\353\257\274\354\243\274/4\354\243\274\354\260\250 \354\213\244\354\212\265/Notes/image-1.png"
new file mode 100644
index 0000000..36a5dde
Binary files /dev/null and "b/\354\240\225\353\257\274\354\243\274/4\354\243\274\354\260\250 \354\213\244\354\212\265/Notes/image-1.png" differ
diff --git "a/\354\240\225\353\257\274\354\243\274/4\354\243\274\354\260\250 \354\213\244\354\212\265/Notes/image-10.png" "b/\354\240\225\353\257\274\354\243\274/4\354\243\274\354\260\250 \354\213\244\354\212\265/Notes/image-10.png"
new file mode 100644
index 0000000..b8efdbe
Binary files /dev/null and "b/\354\240\225\353\257\274\354\243\274/4\354\243\274\354\260\250 \354\213\244\354\212\265/Notes/image-10.png" differ
diff --git "a/\354\240\225\353\257\274\354\243\274/4\354\243\274\354\260\250 \354\213\244\354\212\265/Notes/image-11.png" "b/\354\240\225\353\257\274\354\243\274/4\354\243\274\354\260\250 \354\213\244\354\212\265/Notes/image-11.png"
new file mode 100644
index 0000000..1030c7a
Binary files /dev/null and "b/\354\240\225\353\257\274\354\243\274/4\354\243\274\354\260\250 \354\213\244\354\212\265/Notes/image-11.png" differ
diff --git "a/\354\240\225\353\257\274\354\243\274/4\354\243\274\354\260\250 \354\213\244\354\212\265/Notes/image-12.png" "b/\354\240\225\353\257\274\354\243\274/4\354\243\274\354\260\250 \354\213\244\354\212\265/Notes/image-12.png"
new file mode 100644
index 0000000..cab0c38
Binary files /dev/null and "b/\354\240\225\353\257\274\354\243\274/4\354\243\274\354\260\250 \354\213\244\354\212\265/Notes/image-12.png" differ
diff --git "a/\354\240\225\353\257\274\354\243\274/4\354\243\274\354\260\250 \354\213\244\354\212\265/Notes/image-13.png" "b/\354\240\225\353\257\274\354\243\274/4\354\243\274\354\260\250 \354\213\244\354\212\265/Notes/image-13.png"
new file mode 100644
index 0000000..4e859e4
Binary files /dev/null and "b/\354\240\225\353\257\274\354\243\274/4\354\243\274\354\260\250 \354\213\244\354\212\265/Notes/image-13.png" differ
diff --git "a/\354\240\225\353\257\274\354\243\274/4\354\243\274\354\260\250 \354\213\244\354\212\265/Notes/image-14.png" "b/\354\240\225\353\257\274\354\243\274/4\354\243\274\354\260\250 \354\213\244\354\212\265/Notes/image-14.png"
new file mode 100644
index 0000000..a4d820a
Binary files /dev/null and "b/\354\240\225\353\257\274\354\243\274/4\354\243\274\354\260\250 \354\213\244\354\212\265/Notes/image-14.png" differ
diff --git "a/\354\240\225\353\257\274\354\243\274/4\354\243\274\354\260\250 \354\213\244\354\212\265/Notes/image-15.png" "b/\354\240\225\353\257\274\354\243\274/4\354\243\274\354\260\250 \354\213\244\354\212\265/Notes/image-15.png"
new file mode 100644
index 0000000..9ad12a0
Binary files /dev/null and "b/\354\240\225\353\257\274\354\243\274/4\354\243\274\354\260\250 \354\213\244\354\212\265/Notes/image-15.png" differ
diff --git "a/\354\240\225\353\257\274\354\243\274/4\354\243\274\354\260\250 \354\213\244\354\212\265/Notes/image-16.png" "b/\354\240\225\353\257\274\354\243\274/4\354\243\274\354\260\250 \354\213\244\354\212\265/Notes/image-16.png"
new file mode 100644
index 0000000..a66ba20
Binary files /dev/null and "b/\354\240\225\353\257\274\354\243\274/4\354\243\274\354\260\250 \354\213\244\354\212\265/Notes/image-16.png" differ
diff --git "a/\354\240\225\353\257\274\354\243\274/4\354\243\274\354\260\250 \354\213\244\354\212\265/Notes/image-17.png" "b/\354\240\225\353\257\274\354\243\274/4\354\243\274\354\260\250 \354\213\244\354\212\265/Notes/image-17.png"
new file mode 100644
index 0000000..eb39384
Binary files /dev/null and "b/\354\240\225\353\257\274\354\243\274/4\354\243\274\354\260\250 \354\213\244\354\212\265/Notes/image-17.png" differ
diff --git "a/\354\240\225\353\257\274\354\243\274/4\354\243\274\354\260\250 \354\213\244\354\212\265/Notes/image-18.png" "b/\354\240\225\353\257\274\354\243\274/4\354\243\274\354\260\250 \354\213\244\354\212\265/Notes/image-18.png"
new file mode 100644
index 0000000..121320a
Binary files /dev/null and "b/\354\240\225\353\257\274\354\243\274/4\354\243\274\354\260\250 \354\213\244\354\212\265/Notes/image-18.png" differ
diff --git "a/\354\240\225\353\257\274\354\243\274/4\354\243\274\354\260\250 \354\213\244\354\212\265/Notes/image-2.png" "b/\354\240\225\353\257\274\354\243\274/4\354\243\274\354\260\250 \354\213\244\354\212\265/Notes/image-2.png"
new file mode 100644
index 0000000..604a8c2
Binary files /dev/null and "b/\354\240\225\353\257\274\354\243\274/4\354\243\274\354\260\250 \354\213\244\354\212\265/Notes/image-2.png" differ
diff --git "a/\354\240\225\353\257\274\354\243\274/4\354\243\274\354\260\250 \354\213\244\354\212\265/Notes/image-3.png" "b/\354\240\225\353\257\274\354\243\274/4\354\243\274\354\260\250 \354\213\244\354\212\265/Notes/image-3.png"
new file mode 100644
index 0000000..269b358
Binary files /dev/null and "b/\354\240\225\353\257\274\354\243\274/4\354\243\274\354\260\250 \354\213\244\354\212\265/Notes/image-3.png" differ
diff --git "a/\354\240\225\353\257\274\354\243\274/4\354\243\274\354\260\250 \354\213\244\354\212\265/Notes/image-4.png" "b/\354\240\225\353\257\274\354\243\274/4\354\243\274\354\260\250 \354\213\244\354\212\265/Notes/image-4.png"
new file mode 100644
index 0000000..d0f066c
Binary files /dev/null and "b/\354\240\225\353\257\274\354\243\274/4\354\243\274\354\260\250 \354\213\244\354\212\265/Notes/image-4.png" differ
diff --git "a/\354\240\225\353\257\274\354\243\274/4\354\243\274\354\260\250 \354\213\244\354\212\265/Notes/image-5.png" "b/\354\240\225\353\257\274\354\243\274/4\354\243\274\354\260\250 \354\213\244\354\212\265/Notes/image-5.png"
new file mode 100644
index 0000000..c289b6a
Binary files /dev/null and "b/\354\240\225\353\257\274\354\243\274/4\354\243\274\354\260\250 \354\213\244\354\212\265/Notes/image-5.png" differ
diff --git "a/\354\240\225\353\257\274\354\243\274/4\354\243\274\354\260\250 \354\213\244\354\212\265/Notes/image-6.png" "b/\354\240\225\353\257\274\354\243\274/4\354\243\274\354\260\250 \354\213\244\354\212\265/Notes/image-6.png"
new file mode 100644
index 0000000..638057b
Binary files /dev/null and "b/\354\240\225\353\257\274\354\243\274/4\354\243\274\354\260\250 \354\213\244\354\212\265/Notes/image-6.png" differ
diff --git "a/\354\240\225\353\257\274\354\243\274/4\354\243\274\354\260\250 \354\213\244\354\212\265/Notes/image-7.png" "b/\354\240\225\353\257\274\354\243\274/4\354\243\274\354\260\250 \354\213\244\354\212\265/Notes/image-7.png"
new file mode 100644
index 0000000..2048046
Binary files /dev/null and "b/\354\240\225\353\257\274\354\243\274/4\354\243\274\354\260\250 \354\213\244\354\212\265/Notes/image-7.png" differ
diff --git "a/\354\240\225\353\257\274\354\243\274/4\354\243\274\354\260\250 \354\213\244\354\212\265/Notes/image-8.png" "b/\354\240\225\353\257\274\354\243\274/4\354\243\274\354\260\250 \354\213\244\354\212\265/Notes/image-8.png"
new file mode 100644
index 0000000..367341a
Binary files /dev/null and "b/\354\240\225\353\257\274\354\243\274/4\354\243\274\354\260\250 \354\213\244\354\212\265/Notes/image-8.png" differ
diff --git "a/\354\240\225\353\257\274\354\243\274/4\354\243\274\354\260\250 \354\213\244\354\212\265/Notes/image-9.png" "b/\354\240\225\353\257\274\354\243\274/4\354\243\274\354\260\250 \354\213\244\354\212\265/Notes/image-9.png"
new file mode 100644
index 0000000..cbd3102
Binary files /dev/null and "b/\354\240\225\353\257\274\354\243\274/4\354\243\274\354\260\250 \354\213\244\354\212\265/Notes/image-9.png" differ
diff --git "a/\354\240\225\353\257\274\354\243\274/4\354\243\274\354\260\250 \354\213\244\354\212\265/Notes/image.png" "b/\354\240\225\353\257\274\354\243\274/4\354\243\274\354\260\250 \354\213\244\354\212\265/Notes/image.png"
new file mode 100644
index 0000000..1e8b958
Binary files /dev/null and "b/\354\240\225\353\257\274\354\243\274/4\354\243\274\354\260\250 \354\213\244\354\212\265/Notes/image.png" differ
diff --git "a/\354\240\225\353\257\274\354\243\274/4\354\243\274\354\260\250 \354\213\244\354\212\265/Notes/week4.md" "b/\354\240\225\353\257\274\354\243\274/4\354\243\274\354\260\250 \354\213\244\354\212\265/Notes/week4.md"
new file mode 100644
index 0000000..09ee61f
--- /dev/null
+++ "b/\354\240\225\353\257\274\354\243\274/4\354\243\274\354\260\250 \354\213\244\354\212\265/Notes/week4.md"	
@@ -0,0 +1,250 @@
+성공적인 프로그래밍
+- 사용성, 성능, 확장성, 기획 변경에 대한 대응력 등이 좋다.
+- 이것들을 효율적이고 생산적으로 이루는 일이 성공적인 프로그래밍이다.
+
+함수형 프로그래밍
+- 성공적인 프로그래밍을 위해 부수효과를 미워하고 (**순수함수를 만든다**) 조합성을 강조하는 프로그래밍 패러다임
+- 조합성을 강조 -> 모듈화 수준을 높임
+- 모듈화 수준이 높으면 생산성이 높아짐
+
+**순수함수**: 
+![Alt text](image.png)
+- 부수효과(함수가 리턴값으로 결과를 만드는 것 외에 외부상태에 영향을 끼치는 것)가 없는 함수, 수학적 함수
+- ⭐들어오는 인자가 같으면 항상 동일한 결과를 리턴
+    -> 보다시피 add를 console.log했을때 계속 같은 결과가 나옴
+- 함수가 받은 인자 외에 다른 외부 상태에 영향을 끼치지 않음
+- ⭐리턴값 외에는 외부와 소통하지 않음
+- 오류를 줄이고 안정성을 높임
+- 평가 시점이 중요하지 않음 (-> 함수형 프로그래밍이 중요한 이유), 조합성이 매우 뛰어남
+- 평가 시점을 개발자가 조절할 수 있음. 다른 함수에 인자로 넘기거나, 다른 thread에 넣기 (안 바뀌어서 매우 안전함)
+
+객체를 주로 다루게 되는데, 
+순수함수는 객체 상태를 바꿀수 없는가
+순수함수로 하는 함수형 프로그래밍은 객체를 다룰 수 없는것인가?
+-> 조금 다른 방법으로 객체를 다룸
+원래 있던 값은 그대로 두고, 새로운 값을 만들면서 복사해서, 원하는 값이 변형됨
+
+**일급함수**
+- JS에서는 함수가 "일급함수"이다. 
+- 일급함수: 함수를 값으로 다룰 수 있음 (함수를 변수에 담을 수 있음)
+- 함수를 언어에서 값으로 다룰 수 있다. 언제나 들고 다닐 수 있고 인자로 들고 다닐 수 있다. 
+- 함수가 함수를 인자로 받을 수 있음
+
+요즘 개발 이야기
+재미/실시간성: 메신저, 댓글, 라이브 방송, 실시간 댓글, 협업
+독창성/완성도: 애니메이션, 무한 스크롤, 벽돌(Pinterest)
+더 많아져야하는 동시성: 엄청 많은 사람들을 동시에 hold해줘야함, 비동기 I/O, CSP, Actor, STM, Software transition memory
+더 빨라야하는 반응성/고가용성: 절대 죽지 않는 서비스 (새벽에 점검 안됨, 새로운 기능을 넣어도 원래 서비스를 멈추지 않기), ELB, Auto Scaling(사용자가 급증하면 반응하기), OTP Supervisor
+대용량/정확성/병령성: 이런 사용자는 이런 것을 좋아할 것 같다! MapReduce, Clojure Reducers
+복잡도/MSA: 예전에는 하나의 프레임워크가 모든 것을 다 동작시켰는데 요즘은 세밀하게 다양한 도구들을 다뤄야 함
+
+스멀스멀 다가오는 FP 
+- 좋아지는 하드웨어 성능
+- 좋아지는 컴파일러
+- 함수형 프로그래밍 기술
+- 좋아지는 분산/리액티브 환경
+- 동시성 + 병렬성 관련 기술
+- 성공적인 적용 사례와 영향
+
+함수형 프로그래밍:
+애플리케이션, 함수의 구성요소, 언어 자체를 함수처럼 여기도록 만들고,
+이러한 함수 개념을 가장 우선순위에 놓는다.
+문제의 해결 방법을 동사(함수)들로 구성(조합)하는 것
+```js
+//데이터 (객체) 기준 -> 객체지향 프로그래밍
+//데이터를 먼저 디자인하고 그 데이터에 맞는 메서드를 만들어줌
+duck.moveLeft();
+duck.moveRight();
+duck.moveLeft();
+duck.moveRight();
+
+//함수 기준 -> 함수형 프로그래밍
+//함수를 만들고 그 함수에 맞게 데이터를 구성하기
+moveLeft(dog);
+moveRight(duck);
+moveLeft({x:5, y:2});
+moveRight(dog);
+```
+
+---
+
+<style>
+img{
+    width:400px;
+}
+</style>
+
+## 모든 개발자를 위한 HTTP 웹 기본지식
+모든 것이 HTTP 기반 위에서 동작한다.
+HTML, 이미지, 파일, 영상, 앱과 서버, 서버와 서버
+그래서 모바일, 웹프런트, 백엔드는 모두 HTTP를 필수로 알고 있어야 함    
+![Alt text](image-1.png )      
+-HTTP를 사용하는 모든 기술들
+
+그래서 HTTP를 잘 이해해야지 이 기술들을 쓸 수 있음
+(이미 HTTP 알고 있다고 가정하고 기능 사용법 위주로 설명함)
+
+- API URL을 어떻게 설계할까
+- POST(새로 만들기) or PUT(수정하기)
+- HTTP 상대 코드는 어떻게 할까
+
+=> 개발자는 평생 HTTP 기반 위에서 개발하기에, 언젠가 한번은 정리해야함
+
+1. HTTP의 전체 흐름 이해
+2. 실무에 꼭 필요한 핵심 내용
+3. 수많은 예시와 그림으로 설명
+강의대상: HTTP 기술을 사용하는 모든 개발자 (모바일 앱, 웹 프론트엔드, 백엔드)
+
+<u><강의 순서></u>   
+
+인터넷 네트워크(HTTP는 TCP IP나 UCP위에서 작동함) ->    
+URI와 웹 브라우저 요청 흐름 (URI? URL? URN?) ->    
+HTTP의 기본 ->    
+HTTP 메서드 ->    
+HTTP 메서드 활용 ->    
+HTTP 상태코드 ->    
+HTTP 헤더 ->    
+HTTP 캐쉬     
+
+---
+## 인터넷 네트워크
+> 인터넷 통신 (인터넷이 어떤식으로 인터넷 상에서 통신이 일어나는지 보기)   
+> IP (Internet Protocol)    
+> TCP, UDP    
+> PORT    
+> DNS    
+웹이나 HTTP 모두 인터넷 기반에서 동작을 함. 
+
+인터넷 통신:
+인터넷에서 컴퓨터 둘은 어떻게 통신할까?    
+![Alt text](image-2.png)    
+![Alt text](image-3.png)    
+케이블로 연결되어 있으면 이런식으로 하면 됨
+
+근데 클라이언트와 서버가 멀리에 있으면?
+인터넷 망을 통해서 메세지를 보내야하는데
+인터넷이 단순하지 않음 (인공위성, 해서광케이블, 등 수많은 중간 노드가 존재함)
+=> 그러면 어떤 방식으로, 어떤 규칙으로, 목적지까지 안전하게 도착할까?
+
+## IP (인터넷 프로토콜):
+데이터를 인터넷 망을 통해서 전달하기 위한 최소한의 규칙
+- 지정한 IP 주소 (IP Address)에 데이터 전달
+- 패킷 (Packet)이라는 통신 단위로 데이터 전달    
+![Alt text](image-4.png)    
+1. 클라이언트가 IP 주소를 부여받음 (100.100.100.1)
+2. 메세지를 받는 친구도 서버에 IP 주소를 부여받아야 함 (200.200.200.2)
+3. IP 패킷에 전달하고 싶은 메세지를 넣기
+     -> 출발지 IP, 목적지 IP, 기타, 메세지
+4. 출발지, 목적지를 확인하고 노드끼리 패킷을 던진다(도착지의 IP주소는 어디로 가야해!?)    
+![Alt text](image-5.png)     
+5. 도착하면 친구가 잘 받았다는 ok 사인 전달     
+![Alt text](image-6.png)     
+
+가는길의 경로와 돌아오는 길의 경로는 다를 수 있음
+
+단점- IP 프로토콜의 한계:
+- 비연결성: 패킷을 받을 대상이 없거나 서비스 불능 상태여도 패킷 전송    
+![Alt text](image-7.png)    
+- 비신뢰성: 중간에 패킷이 사라지면? 패킷이 순서대로 안오면?    
+![Alt text](image-8.png)    
+![Alt text](image-9.png)    
+메세지가 1500바이트가 넘으면 끊어서 보냄 (Hellow world!가 3000바이트이라고 치자. Hello 1500바이트, world! 1500바이트 이렇게 나눠서 보내게 되는데, 서로가 탄 경로가 달라서 두번째로 보낸 world가 먼저 도착할 수도 있음)
+- 프로그램 구분: 같은 IP를 사용하는 서버에서 통신하는 애플리케이션이 둘 이상이면? (게임서버에서 쓰는 IP와 음악서버에서 쓰는 IP가 같다면?)
+
+해결책: TCP
+
+## TCP
+![Alt text](image-10.png)    
+IP라는 것을 TCP라는 것을 살짝 올려서 보완하는 것.    
+![Alt text](image-11.png)    
+애플리케이션: 브라우저, 게임, 체팅 프로그램
+OS: window, linux, macos
+네트워크 인터페이스: (실제 네트워크와 관련된 장비들)
+
+1. 프로그램이 Hello world 메시지 생성
+2. SOCKET 라이브러리를 통해 OS 계층에 메세지전달
+3. TCP 정보를 씌움 (메시지 데이터 포함)
+4. IP 관련된 정보를 씌움 => IP 패킷 생성 (IP 정보 - "출발지 IP, 목적지 IP, 기타..", TCP 정보, 메시지 모두 포함)
+5. LAN 카드를 통해서 나갈떄, Ethernet frame이라는 것을 쓰고 나간다    
+![Alt text](image-12.png)    
+=> IP 만으로 해결 못했던 문제들이 해결됨
+
+- 전송 제어 프로토콜 (Transmission Control Protocol)
+- 연결지향 - TCP 3 way handshake (먼저 연결을 하고 메세지를 보낸다, 비연결성 문제 해결)
+- 데이터 전달 보증 (메세지 누락 파악 가능, 비신뢰성 문제 해결)
+- 순서 보장 (비신뢰성 문제 해결)
+- 신뢰할 수 있는 프로토콜
+- 현재는 대부분 TCP 사용
+
+TCP 3 way Handshake
+1. Synchronize: 클라이언트에서 서버로 connect, 연결해줌 (접속 요청)
+2. Synchronize + Acknowledge: 서버가 클라이언트의 syn 요청을 수락하고, 자기 자신도 클라이언트와 연결해달라고 요청을 한다.
+3. Acknowledge: 클라이언트가 서버의 Sync 요청을 수락한다.
+4. 데이터 전송
+
+참고: 3. ACK와 **함께** 데이터 전송 가능
+-> 클라이언트도 서버를 믿을 수 있고, 서버도 클라이언트를 믿을 수 있다. 
+
+e. 만약 서버가 중간에 꺼진다면, 1번 과정에서 클라이언트는 서버가 문제가 있다는 것을 알고, 메세지를 보내지 않는다. 
+
+ps. 나를 위한 전용 LAN선이 주어지는 것이 아니다. 그냥 논리적으로만 연결 된 것이다.
+
+### 데이터 전달 보증    
+![Alt text](image-13.png)    
+
+### 순서 보장    
+![Alt text](image-14.png)    
+(TCP 정보에 검증 정보가 포함되어 있어서 확인 가능함)
+
+## UDP
+- 기능이 없음
+- 하얀 도화지에 비유 
+- 연결지향 - TCP 3 way handshake같은게 일어나지는 않는다. 
+- 데이터 전달 보증이 안됨
+- 순서도 보장이 안됨
+- 그치만, 단순하고 빠르다. 
+- PORT라는 것이 추가된다. 하나의 PC에 여러 패킷이 오는데, 다른 애플리케이션에서 같은 숫자의 IP가 오면 곤란하니 확인하는 것이다.
+- 체크섬 추가
+
+장점
+* Syn, Ack과정이 없어서 빠르다.
+* 최적화할 수 있음 -> 더 최적화 싶으면 TCP 고대로 두고 UDP를 추가하면 좋음
+TCP는 건들 수 없음
+=> 최근에 각광이 받고 있음
+웹 브라우저에서 HTTP3에서 UDP 프로토콜을 도입해서 더 최적화려고 해서...
+
+## PORT(항구)
+한번에 둘 이상의 서버와 연결해야 한다면?
+화상통화, 게임, 음악을 동시에 요청하면?    
+![Alt text](image-15.png)    
+
+TCP에는 출발지 PORT와 목적지 PORT 정보가 포함되어 있다. 
+
+IP는 목적지 서버를 찾는 것. (아파트)
+PORT는 애플리케이션(서버)를 구분하는 것 (몇동 몇호)
+
+    
+![Alt text](image-16.png)    
+e. 웹 브라우저에서
+클라이언트->웹브라우저: IP 200.200.200.3이고 PORT 80인 서버에 전송/ IP 100.100.100.1이고 PORT 10010인 클라이언트에서 전송됨
+웹브라우저->클라이언트: IP 100.100.100.1이고 PORT 10010인 클라이언트에 전송/ IP 200.200.200.3이고 PORT 80인 서버에서 전송됨
+=> 패킷 보낼때 출발지 IP와 PORT까지 보내서 응답이 가능함
+
+- 0~65535 할당 가능
+- 0~1023: 잘 알려진 포트, 사용하지 않는 것이 좋다.
+FTP - 20,21
+TELNET - 23
+HTTP - 80
+HTTPS - 443
+
+## DNS
+- IP는 기억하기 어렵다. 
+- IP는 변경될 수 있다.     
+![Alt text](image-17.png)    
+
+DNS 도메인 네임 시스템 (Domain Name System)
+- 전화번호부 (IP주소에 tangeble한 이름을 부과 "google.com")
+- 도메인-IP주소 한 쌍을 저장하는 표 같은 느낌
+- IP 주소가 바뀐다면 DNS에서만 바꾸면 됨
+- 도메인 명을 IP 주소로 변환    
+![Alt text](image-18.png)    
\ No newline at end of file
diff --git "a/\354\240\225\353\257\274\354\243\274/4\354\243\274\354\260\250 \354\213\244\354\212\265/Notes/week5.md" "b/\354\240\225\353\257\274\354\243\274/4\354\243\274\354\260\250 \354\213\244\354\212\265/Notes/week5.md"
new file mode 100644
index 0000000..1c17313
--- /dev/null
+++ "b/\354\240\225\353\257\274\354\243\274/4\354\243\274\354\260\250 \354\213\244\354\212\265/Notes/week5.md"	
@@ -0,0 +1,3 @@
+문제에 대해서 명령형 코드를 작성하고
+함수형 프로그래밍으로 리팩터링 하면서
+함수형 프로그래밍에 대해서 알아보는 시간 가지기
\ No newline at end of file
diff --git "a/\354\240\225\353\257\274\354\243\274/4\354\243\274\354\260\250 \354\213\244\354\212\265/src/week4.html" "b/\354\240\225\353\257\274\354\243\274/4\354\243\274\354\260\250 \354\213\244\354\212\265/src/week4.html"
new file mode 100644
index 0000000..b95a44f
--- /dev/null
+++ "b/\354\240\225\353\257\274\354\243\274/4\354\243\274\354\260\250 \354\213\244\354\212\265/src/week4.html"	
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <script>
+        //1. 순수 함수
+        function add(a,b){
+            return a + b;
+        }
+        console.log(add(10,5))
+        console.log(add(10,5))
+        console.log(add(10,5))
+
+        var c =10;
+        function add2(a,b){
+            return a+b+c;
+        }
+
+        //c가 안 변하는 상수로 존재하면 순수함수 -> 같은 입력, 같은 출력
+        add2(1,2);
+        add2(1,2);
+        //c가 프로그래밍하는 동안 변하면 순수함수 아님 -> 같은 입력, 다른 출력
+        add2(1,2);
+        c = 2;
+        add2(1,2);
+        //c가 변경된 후에 측정했나, 전에 측정했나 -> 평가 시점이 매우 중요
+        //평가 시점에 따라서 로직이 바꾸고 결과가 달라짐
+
+        //부수효과를 일으키는 함수 ->외부의 상태를 변경, 들어온 인자의 상태를 직접 변경
+        var c = 20;
+        function add3(a,b){
+            c = b; //얘 때문에
+            return a+b;
+        }
+
+        var obj1 = { val:10 };
+        function add4(obj, b){
+            obj1.val += b; //얘 때문에
+        }
+
+        //다시 순수함수
+        var obj1 = {val:10};
+        function add5(obj,b){
+            return {val: obj.val + b}
+            //obj안에 있는 val을 참조를 할 뿐 값을 직접 연결하지 않음
+            //obj와 동일하게 생긴 새로운 객체를 만들어서 리턴 (값은 +b하게 만듦)
+        }
+        var obj = {val:10}
+        function add(obj,b){
+            return {val: obj.val + b}
+        }
+        console.log(obj1.val);
+        //새로운 객체 obj2
+        var obj2 = add5(obj1,20);
+        console.log(obj1.val);
+        console.log(obj2.val);
+        //=> 원래 초기화되어 있는 값을 바꾸지 않고 모든 값들을 다뤄나감
+
+
+        //2. 일급 함수
+        var f1 = function(a) {return a*a;};
+        console.log(f1);
+
+        var f2 = add;
+        console.log(f2);
+
+        function f3(f){
+            return f();
+        }
+        f3(function(){return 10});
+        f3(function(){return 20});
+        //함수를 인자로 받아서 어떤 함수를 받았느냐에 따라 결과가 다름
+        //함수를 받아서 함수 내부에서 함수를 평가하고 결과를 리턴함
+        //언제 평가해도 상관없는 순수함수들을 많이 만들고, 이 순수함수들을 값으로 들고 다녀서 필요한 때에 평가하기
+
+        //3. add_maker
+        function add_maker(a){
+            return function (b){ //얘가 closure - a를 기억하는 함수, 얘도 순수함수임 왜냐면 a를 값을 temper하지 않기 때문에 참조하고 새로 창조만 함
+                return a + b;
+            }
+        }
+        //변수에 함수가 들어갈 수 있음, 함수가 함수를 값으로 받아서 함수를 return할 수 있음
+        //일급함수라는 개염과 closure이라는 개념이 섞임
+        var add10 = add_maker(10);
+        console.log(add10(20));
+
+        var add5 = add_maker(5);
+        var add15 = add_maker(15);
+        console.log(add5(10));
+        console.log(add15(10));
+
+        function f4 (f1, f2, f3){
+            return f3(f1() + f2());
+        }
+        console.log(
+            f4(
+            function(){return 2;},
+            function(){return 1;},
+            function(a){return a*a;}
+            )
+        )
+        //함수형 프로그래밍: 함수가 어떤 함수들을 인수로 받아서 그 함수가 원하는 로직대로 원하는대로 원하는 시점에 평가하고 원하는 인자를 받아둔 인자에 적용하는 함수
+        //순수함수들을 조합해서 큰 로직을 만들어나감
+        //Pro: 비동기가 필요한 시점, 동시성이 필요한 시점에서
+        
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\354\240\225\353\257\274\354\243\274/4\354\243\274\354\260\250 \354\213\244\354\212\265/src/week5.html" "b/\354\240\225\353\257\274\354\243\274/4\354\243\274\354\260\250 \354\213\244\354\212\265/src/week5.html"
new file mode 100644
index 0000000..942adfc
--- /dev/null
+++ "b/\354\240\225\353\257\274\354\243\274/4\354\243\274\354\260\250 \354\213\244\354\212\265/src/week5.html"	
@@ -0,0 +1,372 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <script>
+        var users = [
+            {id: 1, name: 'ID', age: 36},
+            {id: 2 , name: 'BJ', age: 32},
+            {id: 3, name: 'JM', age: 32},
+            {id: 4, name: 'PJ', age: 27},
+            {id: 5, name: 'HA', age: 25},
+            {id: 6, name: 'JE', age: 26},
+            {id: 7, name: 'JI', age: 31},
+            {id: 8, name: 'MP', age: 23},
+        ]
+        //1. 명령형 코드
+        //1.1) 30세 이상인 users를 거른다.
+        var temp_users = [];
+        for (i in users){
+            if (users[i].age>=30){
+                temp_users.push(users[i]);
+            }
+        }
+        console.log(temp_users);
+        //1.2) 30세 이상인 Users의 names를 수집한다.
+        var names = [];
+        for (i in temp_users){
+            names.push(temp_users[i].name);
+        }
+        console.log(names);
+        //1.3) 30세 미만인 users를 거른다.
+        var temp_users = [];
+        for (i in users){
+            if (users[i].age<30){
+                temp_users.push(users[i]);
+            }
+        }
+        console.log(temp_users);
+        //1.4) 30세 미만인 users의 age를 수집한다.
+        var ages = [];
+        for (i in temp_users){
+            ages.push(temp_users[i].age);
+        }
+        console.log(ages);
+
+        //응용영 함수, colleciton을 다루는 함수를 만들면서 중복들을 제거하고 함수형 프로그래밍의 특징을 알아보도록 하자
+        //30세 이상을 거르는, 30세 미만을 거르는 코드가 중복이다.
+        //대부분의 코드가 겹치고, 조건부 안의 조건만 살짝 다를 뿐이다.
+
+        //2. _filter, _map으로 리펙토링
+        //함수형 프로그래밍: 원래 있는 값을 직접 변경하지 않고, 변형된 새로운 값을 리턴하는 방식으로 해결해나감
+        //직접 필터링해서 원래 리스트를 바꾸는 것이 아니라, 원래 값을 토대로 해서 필터링을 한다면 나올 값들을 리턴하는 방식으로 코딩해야함
+        function _filter(users, predi){
+            var new_list = [];
+            //추상화의 단위가 객체가 아니라 함수이다. 
+            for (i in users){
+                //위에서 중복되지 않는 유일한 요소가 '조건'이었으므로, 아얘 조건을 함수로 전달할 수 있게 만들어버린다.
+                //이런 함수를 응용영 함수라고 부르는데, 이런 함수는 함수를 받는다. 
+                //고차함수라고도 부른다: 함수를 인자로 받거나, 함수를 리턴하거나, 함수안에 함수를 실행할때
+                if (predi(users[i])){
+                    new_list.push(users[i]);
+                }
+            }
+            return new_list;
+        }
+        function _map(list, mapper){
+            var new_list = [];
+            for (i in list){
+                new_list.push(mapper(list[i]));
+                //데이터 형이 어떻게 생겼는지 하나도 모른다. 
+            }
+            return new_list;
+        }
+
+        console.log("Division Line____________");
+        //내코드: _filter(users, (check)=>{if (check.age>=30) return true; else return false })
+        //강사 코드: _filter(users, function (check) {return user.age >= 30;});
+        var over_30 = _filter(users, (user)=> user.age>=30);
+        console.log(over_30);
+        var names = _map(over_30, user => user.name);
+        console.log(names);
+
+        var under_30 = _filter(users, (user)=> user.age<30);
+        console.log(under_30);
+        var ages = _map(under_30, user => user.age);
+        console.log(ages);
+
+        //console.log(_map([1,2,3], num => num*2));
+        /*console.log(
+            _filter([1,2,3,4], num => num%2)
+        )
+        console.log(
+            _filter([1,2,3,4], num => !(num%2))
+        )
+        */
+        //filter은 users뿐만 아니라 다른 리스트도 적용할 수 있는 함수가 된다
+        //재활용성이 높은 함수가 됨
+        //함수형 프로그래밍은 대입문을 잘 안쓰는 경향이 있다 -> 값을 변경하는게 아니라, 함수를 통과해서 한번에 새로운 값을 만들어 내는 방식이라서
+        console.log(
+            _map(
+                _filter(users, user => user.age>=30),
+                user => user.name
+            )
+        )
+        console.log(
+            _map(
+                _filter(users, user => user.age<30),
+                user => user.age
+            )
+        )
+        //안전성 높고 활용도도 높은 코드를 만들 수 있다. 
+        //map과 filter도 "해당 리스트를 한번씩 돌아가기"라는 코드를 반복한다. 이를 줄여보도록 하자.
+
+
+        function filter_(users, predi){
+            var new_list = [];
+            //추상화의 단위가 객체가 아니라 함수이다. 
+            each_(users, function(val){
+                if (predi(val)) new_list.push(val);
+            })
+            return new_list;
+        }
+        function map_(list, mapper){
+            var new_list = [];
+            each_(list, val => new_list.push(mapper(val)));
+            return new_list;
+        }
+        function each_(list, iter){
+            for (i in list){
+                iter(list[i])
+            }
+            return list;
+        }
+        var over_30 = filter_(users, (user)=> user.age>=30);
+        console.log(over_30);
+        var names = map_(over_30, user => user.name);
+        console.log(names);
+
+        var under_30 = filter_(users, (user)=> user.age<30);
+        console.log(under_30);
+        var ages = map_(under_30, user => user.age);
+        console.log(ages);
+        //필터와 맵의 중복 -> 루프부분 & 해당 i 값을 참조하는 것
+        //코드가 간결해지고 명령적인 코드가 점점 숨게 된다.
+        //선언적인 코드 표현이 되고 더 단순해지고 오류를 내지 않고 실수가 줄어든다.
+
+        //map과 each와 filter같은 함수는 이미 있는 함수이다.
+        console.log(
+            [1,2,3].map(val=>val*2)
+        )
+        console.log(
+            [1,2,3,4,5,6].filter(val => val>4)
+        )
+        //정확히 말하자면 함수가 아니라 method이다. 
+        //순수함수가 아니라 객체 상태에 따라서 결과가 달라지는 특징을 가진다.
+        //우리가 만든 맵과 필터랑 큰 차이가 있다.
+        //map, filter method는 함수가 아니라 [1,2,3,4] 객체의 method이다.
+        //method의 특징은, 해당 클래스에 정의되기 때문에 해당 클래스의 인스턴스에서만 사용할 수 있다는 것이다. -> Array가 아니면 쓸 수 없음
+        //JS에서는 Array가 아니지만 array로 취급 받는 것이 많다. e. jQuery 객체
+        //JQuery는 Array가 아니라 Array-like이다. -> document.querySelectorAll(*)의 결과는 array가 아니라서 map을 할 수가 없다. 
+        //Method는 해당하는 클래스에 준비되어 있지 않은 메서드는 사용할 수 없다.  -> 다양성 지원하기 어렵
+
+        //함수형 프로그래밍은 함수를 먼저 만들고 함수에 맞는 데이터를 구성해서 함수에 적용함 -> 높은 다양성, 유연하고 실용적
+        console.log(
+            map_(document.querySelectorAll("*"), node => node.nodeName)
+        )
+        console.log(
+            //Error이 남 -> constructor이 node list이다.
+            //배열이 아니어도 length가 있어서 위의 _map은 돌아가는 것이다.
+            //document.querySelectorAll("*").map(node=>node.nodeName)
+        )
+        //함수가 먼저 나오는 프로그래밍은 데이터가 있기 전부터 함수가 있게 된다.
+        //데이터가 먼저 나오는 상황에서는 데이터가 있어야 메서드가 생긴다
+        // 객체 지향은 평가의 순서가 굉장히 중요하게 된다. -> 반드시 해당하는 객체가 생겨야 기능을 수행할 수 있음
+        //함수는 혼자 먼저 존재하기 때문에 이 데이터가 생기지 않더라도 평가 시점이 상대적으로 매우 유연해진다. 
+
+        //두번째 함수를 콜백함수라고 부르는 경우가 있는데
+        //사실은 두번째 함수가 어떤 역할을 하는지에 따라 이름이 다르다
+        //callback: 어떤 일들을 다 수행하고 다시 돌려줄 때 맨 끝에서 다시 돌려주는 함수
+        //predicate: 조건을 리턴하는 함수, 돌면서 반복적으로 실행되는 함수, 등
+        //배열 안에 어떤 값이든 들어 있어도 다 수행할 수 있게 만드는 역할을 보조함수가 한다. 
+        map_([1,2,3,4], v => v+10);
+
+        //커링은 함수와 인자를 다루는 기법이다.
+        //함수에 인자를 하나씩 적용해 나가다가 필요한 인자가 모두 채워지면 함수 본체를 실행
+        //JS는 커링이 지원되지 않지만 1급함수 + 평가시점 자유도 = 커링 만들기 가능
+        function _curry(fn){
+            return function (a){
+                return function(b){
+                    return fn(a,b);
+                }
+            }
+        }
+        //curry함수를 사용하면 일반적으로 함수를 정해야지만 커링이 되도록 만든다.
+        var add = _curry(function(a,b){
+            return a+b;
+        });
+        //add는 다음과 같아짐
+        /*
+        function _curry(fn){
+            return function (a){
+                return function(b){
+                    return function(a,b){
+                        return a+b;
+                    }
+                }
+            }
+        }
+        */
+       //a를 먼저 받고 b를 다음에 받은 다음에 받아뒀던 fn을 나중에 실행하는 코드가 됨
+        var add10 = add(10);
+        var add5 = add(5);
+        console.log(add10(5));
+
+        //이런식으로 표기하면 5가 먼저 대입, 3이 나중에 대입해서 a=5, b=3이다. (left to right)
+        console.log(add(5)(3));
+        console.log(add5(3));
+        //본체함수인 _curry함수를 add라는 값으로 들고 있다가 원하는 시점까지 미뤄뒀다가 최종적으로 평가하는 기법이다.
+        //curry함수는 함수형 프로그래밍의 좋은 예다. 
+
+        console.log(add(1,2))
+        //a는 받고 b는 안 받았다고 인식해서 function(b){...}부분을 리턴한다.
+        function curry_(fn){
+            return function (a, b){
+                return arguments.length==2 ? fn(a,b) : b => fn(a,b);
+            }
+        }
+        /*원본함수:
+        function curry_(fn){
+            return function(a,b){
+                if (arguments.length == 2) return fn(a,b);
+                return function(b){
+                    return fn(a,b);
+                }
+            }
+        }
+        */
+        add2 = curry_(function(a,b){return a+b})
+        console.log(add2(1,2))
+        //No function "requires" an argument in JS. The parameters are optional
+        //If you're not making use of a 'b' inside your function then JS complier doesn't care
+        //https://stackoverflow.com/questions/62707352/passing-single-argument-into-a-function-that-requires-multiple-arguments-in-java
+        console.log(add2(1)(2));
+        //이 상태에서 인자가 만약에 2개가 아니면 다시 한번 함수를 return하기 때문에
+        //add10은 함수가 된다. function(b){return fn(a,b)}라는 내용의 함수가 된다
+        // -> 모든 인자가 채워지면 실행되는 함수!
+
+        var sub = curry_((a,b)=>{
+            return a-b;
+        })
+        var sub10 = sub(10);
+        console.log(sub10(5));
+        console.log(sub(10,5))
+        //5-10이 되야하는데 10-5가 나옴
+        function _curryr(fn){
+            return function (a,b){
+                return arguments.length==2 ? fn(a,b): b=> fn(b,a);
+            }
+            //하나씩 들어오면 거꾸로 적용
+        }
+        var subr = _curryr((a,b)=> a-b)
+        var sub10r = subr(10);
+        console.log(sub10r(5));
+        
+        console.log(subr(10)(5))
+
+        //get: 오브젝트에 있는 값을 안전하게 창조하는 함수
+        //오브젝트와 원하는 키를 받아서 결과를 주려고 한다.
+        function _get(obj, key){
+            return obj == null ? undefined : obj[key];
+        }
+        var user1 = users[0];
+        console.log(user1.name);
+        console.log(_get(user1, 'name'));
+
+        //console.log(users[10].name); -> 얘는 에러가 남
+        console.log(_get(users[10], 'name'));
+        //얘는 에러가 나는 대신에 undefined를 리턴한다. => 좀 더 안전하게 get을 함
+        var get_ = _curryr(function(obj, key){
+            return obj == null ? undefined: obj[key];
+        })
+        console.log(get_(user1, 'name'));
+        console.log(get_('name')(user1));
+        var get_name = get_('name');
+        console.log(get_name(user1));
+        console.log(get_name(users[3]));
+        //이러면 위의 코드를 조금 간결하게 바꿀 수 있음
+        /*
+        console.log(
+            _map(
+                _filter(users, user => user.age>=30),
+                _get('name')));
+            )
+        )
+        console.log(
+            _map(
+                _filter(users, user => user.age<30),
+                _get('name')));
+            )
+        )
+        */
+
+        console.clear();
+        //reduce함수 : 추격하는 함수. 모든 데이터들을 함수로 통해 추격시켜서 원하는 새로운 값을 도출하는 함수
+        var slice = Array.prototype.slice;
+        function _rest(list,num){
+            return slice.call(list, num || 1);
+        }
+        function _reduce(list, iter, memo){ 
+            if (arguments.length == 2){
+                memo = list[0];
+                list = _rest(list);
+                //list = list.slice(1); Array의 메서드라서 Array를 통해서만 사용할수있는 함수가 돼버린다.
+            }
+            each_(list, function(val){
+                memo = iter(memo, val);
+            })
+            return memo
+        }
+        console.log(
+            _reduce([1,2,3],function(a,b){
+                return a + b;
+            }, 0)
+        )
+        //결과가 6이 나오길 기대한다.
+        //전달하는 함수 이름이 add라고 하면
+        //memo = add(0,1)
+        //memo = add(memo,2)
+        //memo = add(memo,3)
+        //이런 방식으로 돌아가는 함수이다. 
+        //add(add(add(0,1),2),3)
+        //세번째 인자를 생략하는 방식으로 만들 수 있다.
+        console.log(
+            _reduce([1,2,3],function(a,b){
+                return a + b;
+            })
+        )
+        //Prototype -> Array로 전환하기
+        //var slice = Array.prototype.slice;
+        //slice.call(a,2);
+        //[meta, title, script, script, body, script]..
+        //slice.call(a,2).constructor
+        //-> function Array() {[native code]}
+        //call을 쓰면 arraylike 구조들을 slice 가능하다. 
+
+        console.clear();
+        //파이프는 reduce함수를 통해서 만들 수 있다.
+        //Pipe: 함수를 인자로 받아서 함수를 연속적으로 실행해주는 함수
+        //두개의 함수를 연속적으로 실행하는 함수를 리턴해주는 함수이다.
+        function _pipe(){
+            var fns = arguments;
+            return function(arg){
+                return _reduce(fns, function(arg, fn){
+                    return fn(arg);
+                }, arg)
+            }
+        }
+        var f1 = _pipe(
+            function(a) {return a+1;}, //1+1,
+            function(a) {return a*2;} //2*2
+        )
+        console.log(f1(1));
+        //파이프는 Reduce에 좀 더 특화시켜진 특화 함수이고 보다 추상화된 레벨의 함수가 reduce이다.
+        //함수들이라는 배열을 통해서 인자를 연속적으로 적용한 최종 결과로 추격하는 함수이다. 
+        //객체를 줄이기 위해서 []를 안씀
+    </script>
+</body>
+</html>
\ No newline at end of file