5주차 스터디 자바스크립트 웹 개발 기본기 (1) 웹 기초 [코드잇 부스트 백엔드 스터디 ]

 

 

 

<자바스크립트 웹 개발 기본기>

 

1. 웹 기초 다지기

📌 웹 브라우저와 서버가 통신하는데 필요한 자바스크립트 코드를 어떻게 작성하는지
웹 개론
JSON
Ajax
promise 
fetch
async/await

 

 

 

fetch 함수 사용해보기

 

웹 브라우저와 서버가 통신하는 방법

 

fetch('https://www.google.com')
  .then((response)=> response.text())
  .then((result)=>{console.log(result)});

 

* html은 웹페이지의 뼈대를 구성하기 위해 사용하는 마크업 언어

 

 

💡웹 브라우저가 서버로부터 받는 것은 코드 덩어리

웹브라우저가 그것을 해석해서 사용자에게 화면을 보여준다

 

 

이런 오류 발생

 

 

 

fetch 함수 살펴보기

 

☑️용어

웹 브라우저가 서버로 보내는 요청 Request

서버가 다시 보내지는 응답은 Response

 

 

fetch('https://www.google.com')
  .then((response)=> response.text()) //리스폰스를 처리하는 부분 (서버에 리스폰스가 와야 실행됨) 
  //.then((response)=> {return  response.text()}) 
  .then((result)=>{console.log(result)});

 

 

💡callback → 어떤 조건이 만족되었을 때 실행되는 함수

• fetch: 서버로 리퀘스트를 보내고 리스폰스를 받는 함수

• then: 콜백을 등록해주는 메소드 (프로미스 객체의 메소드다)

→ then 메소드로 콜백을 등록해주면 서버의 리스폰스가 왔을 때 그 콜백이 실행된다

 

 

 

💡이전 콜백의 리턴 값을 다음 콜백이 넘겨받을 수 있다는 것!

따라서 response.text()의 값은 그대로 다음 콜백의 result 파라미터로 넘어간다

 

 

 

실행순서

 

 

 

 

response 객체

 

☑️response 파라미터로는 리스폰스의 실제 내용 자체가 넘어오는 것이 아니다

response 파라미터에는, 리스폰스에 관한 각종 부가 정보들과, 실제 내용을 함께 갖고 있는 하나의 객체(object)가 넘어온다.

 

 

 

 

웹이란?

 

 

 

web(world wide web)

• 웹 브라우저를 통해 돌아다니는 가상의 연결망 세계

• 웹에는 무수히 많은 웹 페이지들이 연결되어있음

 

HyperText

• 웹 페이지에 적혀 있는 텍스트

html은 hyper text markup language라는 뜻의 줄임말이다

 

 

 

 

URL 이란? 

 

• 규격화 된 리소스 검색자

• 웹에 존재하는 특정 데이터를 나타내는 문자열

 

 

URL 구성요소

 

 

path가 원하는 데이터를 특정하기 위한 핵심 부분 → 데이터를 패스로 나타내는 방법은 서버마다 다르게 설계되어있다

 

쿼리는 하나의 속성 이름에 등호와 값이 써 있고 각각의 속성은 &로 이어서 나타냄

 

 

 

 

포트를 지정 안했는데도 접속되는 이유

 

 

URL(https://www.google.com, https://www.naver.com)들을 포트번호가 빠져도 잘 작동한다

💡그건 바로 특정 프로토콜로 통신을 하는 서버 프로그램은 특정 포트 번호를 사용하도록 정해져 있기 때문이다

• http 프로토콜로 통신하는 서버 프로그램은 포트 번호 80번을,
• https 프로토콜로 통신하는 서버 프로그램은 포트 번호 443번을

쓰도록 정해져 있다

 

 

 

 

 

URL과 리퀘스트

 

 

1. URL을 직접 입력한 적이 없는 이유

→ 이미 화면에서 클릭하는 버튼 등에 어느 URL로 새로운 리퀘스트를 보낼지, HTML 코드 또는 Javascript 코드로 다 작성이 되어있기 때문

 

 

2. 리퀘스트를 보내면 일어나는 일

 

브라우저는 URL에서 호스트(host, 위 그림에서 www.codeitshopping.com에 해당하는 부분) 부분을 보고,

전 세계의 수많은 서버들 중에서 정확히 어느 서버와 통신을 해야 하는지를 찾는다

 

 

이때 www.codeitshopping.com 같은 것을 도메인 네임(Domain Name)이라고 한다

💡특정 서버를, 외우기 어려운 IP 주소가 아니라 외우기 쉬운 문자열로 나타낸 것이 바로 도메인 네임이라고 한다

 

 

Domain Name Resolution의 원리

도메인 네임만으로 어떻게 특정 서버와 통신할 수 있는지

→본격적인 통신을 시작하기 전에 도메인 네임을 IP 주소로 변환해주는 절차가 존재

 

 

 

이미 한번 codeit.kr의 IP 주소를 받은 후에는 제 컴퓨터의 OS가 그 IP 주소를 보통 별도로 저장해두고 계속 사용

제 컴퓨터가 사용하는 가장 근처의 네임 서버 또한 자주 요청받는 도메인 네임에 대해서는

별도로 외부에 요청할 필요가 없도록 캐시(cache)로 관리하는 경우도 있음

 

 

 

HTTP란?

 

 

 

💡프로토콜: 통신을 하는 두 주체가 지켜야 하는 통신 규약

뒷부분이 의미하는 데이터를 가져오기 위해 통신을 할 때

https 프로토콜을 지키겠다는 뜻!

 

 

 

 

웹 브라우저와 서버도 각자 프로토콜에 맞게 리퀘스트와 리스폰스를 보낸다

 

 

 

☑️http

• HyperText(다른 텍스트에 대한 참조를 갖고있는 텍스트) Transfer Protocol

• 하이퍼텍스트를 전송하는 프로토콜

• 이미지 음성 영상파일 등 다양한 것들을 주고 받기도 한다

• 뒤에 s가 붙으면 보안이 붙여진거다

 

원하는 URL로 리퀘스트보내기

 

fetch('https://workey.codeit.kr/ratings')
  .then((response) => response.text())
  .then((result) => { console.log(result); });

아래의 URL에 리퀘스트를 보내고 그 리스폰스의 내용을 출력하는 코드를 작성