JS 웹 개발 (1)

깨진알·2023년 12월 18일

목록 보기

17/21

웹 기초 다지기

1. fetch 함수

fetch("https://www.google.com')
  // 콜백 함수 (Callback Function) : 조건을 만족하고 실행되는 함수
  .then((response) => response.text())
  // 이전 콜백함수의 return값을 다음 콜백함수가 넘겨받을 수 있다. (response.text()가 result 파라미터로 넘어가게 된다.)
  .then((result) => { console.log(result); });

fetch 함수는 서버에 request를 보내고 response를 받는 함수이다. (Promise라는 객체를 리턴하는데 사용된다. 추후에 자세히 설명하도록 하겠다.) 이 때 then 메소드를 활용하여 콜백함수(respone가 왔을 때 실행할 콜백)를 등록할 수 있다. 이렇게 등록된 콜백들은 then 메소드로 등록한 순서대록 실행되고, 이때 이전 콜백의 리턴값을 이후 콜백이 넘겨받아서 사용할 수 있다.

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

그렇다면 위와 같이 작성해도 되지 않을까 라는 생각을 할 수 있다. 이 response 파라미터로는 response의 실제 내용 자체가 넘어오는 게 아니다. response 파라미터에는, response에 관한 각종 부가 정보들과, 실제 내용을 함께 갖고 있는 하나의 객체(object)가 넘어오게 된다. 그래서 원하는 response의 실제 내용을 확인하고 싶을 때는 맨 앞에 코드와 같이 작성해야 한다.

즉, response 객체의 text라는 메소드를 호출해야 한다. 이 text 메소드의 리턴값이 바로 response의 실제 내용이다. (정확히 말하자면 Promise 객체이다.)

2. 웹 (Web)

3. URL (Uniform Resource Locator)

웹에 존재하는 특정 데이터를 나타내는 문자열을 의미한다.

3-1. 직접 URL 작성?

보통 www.naver.com이나 www.google.com처럼 URL에서의 호스트(host) 부분까지만 입력하고, 어떤 서비스의 메인 페이지로 진입하게 될 것이다. 이미 화면에서 클릭하는 버튼 등에 어느 URL로 새로운 request를 보낼지, HTML 코드 또는 JavaScript 코드로 다 작성이 되어있기 때문이다.

<a href="https://www.nazer.com/blogs/myOfficial/120"...>...</a>
// 상대 URL (같은 서버 안에 존재하는 경우 이렇게 path 이후의 부분만 표시해서 표현 가능)
<a href="/myCommunity/threads/731" ...>...</a>

웹 페이지에서 버튼을 클릭하면 a 태그의 href 속성에 적힌 URL 주소로 웹 브라우저가 알아서 request를 보내서 response를 받아 새로운 웹 페이지를 로드한다. 이런 식으로 웹 페이지에 미리 모든 것이 세팅되어 있기 때문에 서버에서 요구하는 path 형식, query 형식을 알 필요가 없다.

3-2. request를 보내면 일어나는 일

(1) 웹 브라우저는 URL에서 호스트(host) 부분을 보고, 여러 서버들 중 어느 서버와 통신을 할지 찾는다. 이때 호스트 부분을 도메인 네임(Domain Name)이라고 한다. 특정 서버를, 외우기 어려운 IP 주소가 아니라 외우기 쉬운 문자열로 나타낸 것이 도메인 네임이다. Domain Name Resolution이라는 작업을 통해 웹 브라우저가 도메인 네임을 가지고 특정 서버를 식별할 수 있게 된다.

(2) (1)에서 어떤 서버와 통신해야 할지를 식별하고 나면, 웹 브라우저는 해당 서버로 request를 보낸다. 이 떄 URL에서 path 이후의 부분들(보락색 부분)을 request에 담아서 보내게 된다.

(3) request를 받은 서버는 request에 담기 path 이후의 부분들을 보고, 그것이 의미하는 데이터를 찾고, 찾은 결과를 response에 담아서 보낸다.

(4) 웹 브라우저는 받은 response의 내용을 갖고 사용자에게 보여준다. 이때 response의 내용이 HTML 코드, JavaScript 코드 등에 해당하면 그에 맞는 화면ㅇ르 사용자에게 그려서 보여주게 되는 것이다.