코드잇 학습일기 Day1. 개발자 도구, 자바스크립트 fetch 함수

코딩 강의 사이트인 코드잇에서 "오늘도 코드잇 학습일기 챌린지" 이벤트를 진행하고 있다. 평소에 코드잇을 애용하며 1일 1강의를 듣는 나에게는 넘나 참여하기 쉬운 이벤트~ 

 

https://blog.codeit.kr/post/63d1de818120e3265cbbfb52

코드잇 :: 오늘도 코드잇 학습일기 챌린지

 

그래서 2월부터 공부하려고 계획하고 있던 '자바스크립트 웹 개발 기본기' 강의로 학습일기를 써보려고 한다.

 

코드잇 자바스크립트 웹 개발 기본기

 

브라우저 개발자 도구에서 자바스크립트 코드 실행하기

크롬 브라우저에서 개발자 도구를 실행하여 자바스크립트 코드를 실행해볼 수 있다. 먼저 개발자 도구를 실행하려면 크롬 브라우저 메뉴바 우측 점 세개(?)아이콘을 클릭해야 한다. 도구 더보기 > 개발자 도구를 선택하면 된다.

 

크롬 브라우저 개발자 도구 실행 경로

 

키보드 단축키로도 실행할 수 있는데, 브라우저가 활성화되어 있는 상태에서 아래 단축키를 순서대로 누르면 된다.

 

- 맥의 경우 option + command + i(알파벳) 

- 윈도우의 경우 Ctrl + Shift + i(알파벳)

 

개발자 도구를 실행했다면 상단 부분의 Console 탭을 선택한다. 빈 화면이 보일 것이다.

 

개발자도구 console

 

이 곳에서 자바스크립트 코드를 작성하고 실행할 수 있다.

 

개발자 도구 console에서 fetch 함수 실행

 

구글 공식 홈페이지에 접속한 뒤에, 위와 같은 코드를 입력하고 실행했더니 결과값을 받을 수 있었다. 크롬 브라우저 console에서 구글 url로 요청(=request)을 보내고 그 응답(=response)을 받아 출력한 것이다.

 

fetch 함수 살펴보기

위에서 입력한 코드에 대해서 좀 더 자세히 살펴보려고 한다. 참고로 console 창에서 코드를 여러줄 연달아서 작성하려면, 바로 Enter를 누르는 것이 아니라 Shift를 누른 상태로 Enter를 눌러야 한다.

 

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

 

첫번째 줄은 fetch 함수로 시작한다. fetch는 한국어로 '가져옴' 이라는 의미를 가지고 있다.

 

구글 번역기 fetch 검색 결과

 

fetch는 서버에 요청을 보내고 응답을 받을 때 보편적으로 사용하는 함수로, promise 객체를 리턴한다.

 

그 다음 두번째 줄과 세번째 줄은 then으로 시작하는 것을 확인할 수 있다. promise 객체의 then 메소드로 서버에서 응답이 왔을 때 실행할 콜백을 등록한 것이다. 이 함수는 fetch 함수와 동시에 실행하는 것이 아니라 어떠한 조건이 만족되었을 때에 실행되는 것인데, 이러한 함수를 '콜백함수' 라고 부른다. 

 

서버에서 응답이 오면 두번째 줄의 response 함수가 실행되어 response라는 파라미터로 넘어온다. 그리고 이전 콜백(response)이 실행되고 난 후에 다시 그 리턴값을 세번째 줄의 result 파라미터로 넘겨 받아서 실행한다. 이런 식으로 then 메소드로 등록한 순서대로 콜백들이 실행되는 것이다. 

 

이것을 출력하여 콘솔에서 최종적으로 response의 내용을 볼 수 있게 된다.

 

cf. 두번째 줄의 response.text() 부분은 { return response.text(); }가 생략되어 표현된 것이다. 

 

cf. 개발자 도구의 console을 사용하다보면 undefined라는 텍스트가 출력되는 것을 자주 볼 수 있다. 이것은 console 탭의 특성과 관련이 있다. 개발자 도구의 console 탭은 해당 코드에서 최종적으로 리턴하는 값만을 출력한다. 만약 아무런 값도 리턴하지 않는 경우라면 undefined를 리턴한 것으로 간주한다. 그런데 특정 함수를 선언하거나 문자열을 출력하는 코드를 실행시키면 리턴값이 없기 때문에 undefined가 출력되는 것이다.

---

코드잇 오늘 공부 인증! 무려 26주째 연속 출석중이다. 근데 레슨을 총 510개 밖에 못 들었다고? 더 열심히 분발해야겠다.

 

코드잇 강의 인증