오늘의 나는 무엇을 잘했을까?
정신이 없는 와중에도 부트캠프에 참여 한 점이 가장 잘 한 것이지 않을까 싶다. 얼른 정리하고 열심히 공부하자.
오늘의 나는 무엇을 배웠을까
JS
1. fetch 함수
- 서버로 request를 보내고 response를 받는 함수
- request : 클라이언트가 서버로 보낸 요청
- response : 서버가 보내준 응답
fetch('url')
서버로부터 받은 response를 처리하는 부분- 콜백 : 나중에 어떤 조건이 만족되었을 때 동작하는 함수
then메소드 : promise 객체의 메소드, 콜백을 등록시켜 줌- 연이어 여러개의 콜백이 있으면 이전 콜백의 반환값을 다음 콜백이 파라미터로 받음
2. Web
- World Wide Web
- 웹 브라우저를 통해 돌아다니는 가상의 연결망 세계
- Hyper Text : 문서 내부에 또 다른 문서로 연결되는 참조를 집어 넣어 웹 상에 존재하는 여러 문서끼리 서로 참조할 수 있는 기술
- 하이퍼 링크를 통해 수많은 웹 페이지들이 연결되어 구성
3. URL (Uniform Resouce Locator)
3-1. url의 구성
Scheme : 브라우저가 리소스를 요청하기 위해 사용해야 하는 프로토콜 (e.g. HTTPS / HTTP)
Host : 전 세계 서버 중 하나의 서버를 특정
Port : 어떤 서버를 이용할지 결정하는 번호, : 뒤에 나
Path : 파일의 경로, 서버에 있는 데이터 중 원하는 데이터 특정
Query String : 데이터에 관한 세부적인 요구사항
Fragment : 리소스 자체의 다른 부분을 가리키는 앵커
3-2. request의 과정
- 웹 브라우저가 url의 host 부분을 보고 통신할 서버를 식별
- 서버가 식별되면 url의 path 이후의 부분(path,query)를 request에 담아 서버에 보냄
- 서버는 request를 확인하여 해당하는 결과를 response에 담아 보냄
- 웹 브라우저가 response 내용을 바탕으로 사용자에게 결과를 보여줌
3-3. 한 번의 접속 -> 여러 번의 request
- 브라우저가 하나의 페이지를 그릴 때 첫 response에서 받아온 내용 안에 추가적으로 요구되는 여러가지가 들어 있음
- 가령, 이미지 파일의 url에 request를 다시 보내 이미지를 받아와야 한다든지...
- 따라서 한 번 접속하지만 request - response 쌍은 여러번 나올 수 있음
4. Scheme
- URL에서 프로토콜의 이름이 들어가는 부분
- 프로토콜 : 통신을 하는 두 주체가 지켜야 하는 통신 규약
4-1. HTTP
- HyperText Transfer Protocol
- 웹 브라우저와 서버 사이 통신의 규약
- HTTPS : HTTP + Secure, 보안성 강화
5. JSON
5-1. JSON
- JavaScript Object Notation
- 정보를 교환할 때 사용하는 데이터 포맷
- JS에서 객체를 표현하는 것과 유사
- 데이터의 이름과 값의 쌍으로 구성,
:으로 구분 - JSON 객체 구조
- JSON 배열 구조
5-2. JSON 문법 vs. JS 객체 표기법
- JSON의 경우 프로퍼티 이름에 반드시 큰따옴표 붙여야 함
- JSON 값이 문자열일 경우 반드시 큰따옴표, 작은따옴표 X
- undefined, NaN 등의 일부 값을 표현할 수 없음
-> JSON이 어느 언어나 환경에 종속되어 사용되지 않기 때문 - 주석 추가가 불가능, 코드가 아닌 데이터 포맷이므로
5-3. JSON 데이터 객체로 변환하기
- JS의 내장객체 JSON 사용
parse메소드 :string타입의 JSON 데이터를 JS 객체로 변환
6. Request
6-1. request 메소드의 종류
GET: 데이터 조회, defaultPOST: 데이터 추가PUT: 새 데이터로 기존 데이터 덮어쓰며 수정DELETE: 데이터 삭제PATCH: 새 데이터로 기존 데이터 일부 수정HEAD:GET과 동일하지만, body 부분 제외하고 head 부분만 받음
6-2. 메소드에 따른 데이터베이스의 데이터 처리 작업
| 메소드 | 데이터 처리 |
|---|---|
| GET | READ |
| POST | CREATE |
| PUT | UPDATE |
| DELETE | DELETE |
6-3. request의 구성
- Head : request에 대한 부가 정보가 들어 있는 부분 (e.g. 메소드)
- Body : 실제 데이터를 담는 부분
- POST, PUT request의 경우 추가하거나 변경할 내용
6-4. POST request
- 데이터를 추가하는 request
fetch('url' , {
method: 'POST',
body: JSON.stringify(data),
})
서버로부터 받은 response를 처리하는 부분- 데이터를 추가하기 떄문에 body에 전달할 데이터를 입력해야 함
stringify: JS 객체를 string type의 JSON 문자열로 변환
6-5. PUT request
- 데이터를 수정하는 request
fetch('url'), {
method: 'PUT',
body: JSON.stringfy(data),
})
서버로부터 받은 response를 처리하는 부분- url에 수정할 데이터를 특정해 줘야 함
6-6. DELETE request
- 데이터를 삭제하는 request
fetch('url', {
method: 'DELETE',
})
서버로부터 받은 response를 처리하는 부분- body가 필요하지 않음
7. Web API
7-1. API 란?
- Application Programming Interface
- 프로그램들이 서로 상호작용하는 것을 도와주는 매개체
7-2. Web API 란?
- 웹 서버 또는 웹 브라우저를 위한 API
- 어느 url로 어떤 request를 보냈을 때, 무슨 처리가 수행되고 어떤 response가 오는지 정해놓는 규격
- Web API 설계는
1. 서비스에서 사용될 모든 url 나열
2. 각각의 url에 관한 예상 request / response 내용 정리
8. JSON 데이터 다루기
8-1. 직렬화 (Serialization)
- JS 객체를
string타입의 JSON 데이터로 변환하는 것 JSON.stringify()- 객체가 가진 데이터 만을 서버로 보내면 되기 때문에
기본 내장 프로퍼티는 보낼 필요가 없음, 메소드도 마찬가지
8-2. 역직렬화 (Deseialization)
string타입의 JSON 데이터를 JS 객체로 변환하는 것JSON.parse()- 문자열인 JSON 데이터를 파싱하기 보다는 객체로 변환하여 데이터를 다루는 것이 훨씬 편함
8-3. json 메소드
response.json()
- response 내용이 JSON 데이터라면 역직렬화를 함꼐 수행, 아닐 경우 오류 발생
-JSON.parse()과정을 생략 가능
- response 내용이 JSON 데이터로 약속되었으면 활용하기 좋음
9. response
9-1. response Head
- response에 대한 부가정보가 들어 있음
- 다양한 header들로 구성
- 상태 코드 (Status Code) : request를 받은 서버가 작업 결과를 나타내기 위해 Head에 넣는 숫자
- Content Type : request 또는 response의 바디에 들어 있는 데이터 타입을 나타냄,
주타입 / 서브 타입의 형식으로 나타남
fetch('url', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: ~
})
와 같이, fetch 함수의 옵션 객체 안에 headers 라는 프로퍼티를 생성하여 객체 하나를 설정하고,
그 객체 안에 'Content-Type' 이라는 프로퍼티를 설정하여 값을 할당하면 Content Type 헤더가 추가됨 오늘의 나는 어떤 어려움이 있었을까?
이번 주차 자바스크립트 강의의 난이도가 갑자기 상승하여 조금 놀랐다. 사실 많이 놀랐다.
강의를 듣는 속도가 좀처럼 나지 않고, 강의 내용마저도 100% 이해했다고 생각이 들지 않는다.
들은 강의 내용을 복습해 봐야겠다.
내일의 나는 무엇을 해야할까?
- 자바스크립트 웹 개발 기본기 수강
- 멘토링 참여
- 보충 학습 참여
개발자를 지망하는 경영학도