들어가며

fetch api에 대해 공부하고 바닐라 자바스크립트로 만든 컴포넌트에 fetch api 를 활용하는 강의를 들었다. 리액트로 개인 프로젝트를 진행할 때 fetch api를 사용한 적이 있다. 어떻게 동작하는지 잘 모른 상태로 리액트 공식 문서에서 설명하는대로 따라 사용하기만 했다. 자주 사용해서 fetch에 대해 잘 알고 있다고 생각했는데 내가 모르는 게 의외로 많았다.

Fetch api

XMLHttpRequest 를 대체하기 위해 등장했다. 비동기 HTTP 요청을 더 편하게 만들어주는 api 이다.

1  fetch("https://example.com/users")
2    .then((res) => res.json())
3    .then((json) => console.log(JSON.stringify(json)));

위와 같은 형태로 사용할 수 있다. 위의 코드는 'https://example.com/users' 이라는 URL로 GET 요청을 보낸다. fetch 는 Promise를 기반으로 동작한다. 그렇기 때문에 요청에 대한 응답이 Promise 형태로 오기 때문에 then 메서드를 사용해 응답을 받아올 수 있다. 이 때 응답은 Response 객체이다. Response 객체에는 HTTP 상태코드, 요청이 성공했는지 등에 대한 정보가 들어있다. 요즘은 백엔드에서 데이터를 json 형태로 많이 넘겨주는데 백엔드에서 넘겨준 데이터를 사용하기 위해서는 응답값을 json이나 text 등의 형태로 변환해주는 과정이 필요하다.

주의할 점

fetch 는 HTTP 에러가 발생해도 reject 되지 않는다. 네트워크 에러나 요청의 완료되지 못한 경우에만 reject 되고, 400번대 에러가 발생해도 resolve를 반환하기 때문에 Response 객체의 status code나 ok 값을 체크해주는게 좋다. ok 값을 사용할 때에도 조심해야 할 점은 status가 200~299 사이인 경우에만 true 값을 리턴한다는 것이다.

fetch에 url만 인자로 넘기게 되면 GET 방식으로 요청한다는 것이다. fetch의 두 번째 인자로 옵션을 설정할 수 있다. HTTP 요청 메서드, 헤더, 바디 등을 설정할 수 있으며 자세한 옵션값은 여기를 참고하면 좋을 것 같다.

Conventional Commits

요즘 과제를 하면서 커밋 메시지에 관심이 많아졌다. 찾아보니 정말 다양한 커밋 컨벤션이 있었는데 모든 컨벤션들은 Conventional Commits라는 공통된 컨벤션을 참조하고 있는 것 같다. 아직은 어떤 규칙이 있고 어떻게 사용하는지를 정리하기 보단 왜 사용하는지를 먼저 알아보고자 한다.

일단 같은 커밋 규칙을 가지고 있으면 동료와 작업할 때 편하다. 어떤 작업을 했는지 한눈에 알아볼 수 있다. 만약 작업을 하는 도중 문제가 생기면 커밋 메시지를 통해 어디에서 문제가 생겼는지 찾을 수도 있을 것 같다. 두 번째로 기계가 이해할 수 있도록 하기 위함이다. 여기서 기계란 무엇일까? 어떤 오픈소스 프로젝트가 있다고 생각해보자. 오픈소스에는 버전이 있다. 새로운 기능이 추가되거나 오류가 수정되었을 때 버전을 수정해야 한다고 한다. 이 때 사람이 직접 버전을 수정할 수도 있지만, 수정하는 과정에서 실수가 발생할 수 있기도 하고 다양한 이유로 인해 자동화 된 프로그램을 사용한다. 새로운 기능을 추가하고 커밋을 하면 프로그램은 해당 커밋이 Major 한 수정 사항인지 Minor 한 수정 사항인지 판단해야 한다. 이 때 판단의 기준이 되는게 Conventional Commit 이다. 아직은 커밋 메시지 작성이 익숙하지 않다. 팀원 중 한 분은 다른 유명한 기업의 커밋 메시지를 참고해 비슷한 형태로 작성한다고 하는데 이 방법도 정말 좋은 것 같다. 남을 위한 커밋 메시지를 작성해 본 적이 없기 때문에 데브코스 기간 동안 연습해봐야겠다.

ES 모듈에서 궁금한 점

1  // one.js 파일
2  export default function add(a, b) {
3    return a + b;
4  }
5  
6  console.log("test");

1  // two.js
2  import add from "one.js";
3  
4  console.log(add(1, 2));

one.js 파일에서 add 함수를 export 하고 two.js 파일에서 add 함수를 불러와서 1과 2의 합을 출력하면 3이 출력되기 이전에 test 문자열이 출력된다. 나는 막연하게 export 키워드가 붙은 값만 사용되기 때문에 나머지 코드는 실행되지 않는다고 생각했다.
ES modules: 만화로 보는 심층 탐구라는 글에서 설명하는 것은, 만약 import 문을 만나면 해당 파일을 읽어와야하는데 브라우저는 해당 파일을 직접 파싱할 수 없다고 한다. 그렇기 때문에 모듈 레코드라고 하는 데이터 구조로 변환하는 과정이 필요한데 이 때 파일을 구문분석한다고 한다. 나는 구문분석의 과정에서 코드를 읽기 때문에 console.log 가 실행된다고 생각했다. 관련해서 멘토님께 여쭤봤는데 구문분석이라는 것은 실행 컨텍스트가 생성될 때 실행에 필요한 변수나 객체 등을 저장하는 과정과 비슷하다고 하셨다. 아직 실행 컨텍스트를 완전히 이해하지 못해서 와닿지 않았는데 다시 실행 컨텍스트를 공부하면 관련 내용을 이해할 수 있지 않을까 기대하고 있다.

정리

오늘의 강의는 이론이 적고 대부분이 실습이었다. 강사님이 작성하는 코드를 보면 나도 할 수 있을 것 같은 생각이 든다. 강의를 다 듣고 나 혼자 해보려고 하면 안된다. 그래도 예전에 우아한테크캠프 지원할 때 2차 코딩테스트가 바닐라 자바스크립트를 사용해 재사용 가능한 컴포넌트 형태로 주어진 과제를 해결하는 것이었는데 당시에는 제대로 이해 못했던 걸 조금씩 이해하게 되니까 재밌다.

팀원 분께서 공유해주신 글이 있다. 흔히 알고있는 더닝 크루거 효과에 대한 이야기이다.
나는 우매함의 봉우리를 지나 절망의 계곡으로 가고 있는 중인 것 같다. 글에서는 이 단계의 특징을 학습할 지식의 범위가 엄청나게 넓어지는 것이라고 한다. 맞는 것 같다. 하나의 지식을 공부하다보면 또 다른 부분을 공부해야 하고, 이 과정이 계속해서 반복된다. 배워야 할 지식의 범위가 넓어질 수 밖에 없다.
이 단계를 해결하는 방법으로

1. 다른 사람들과 함께 해라
2. 다른 사람의 코드를 읽어라
3. 자그마한 것으로 시작하고 계속해서 만들어라

라고 설명하고 있다. 불행 중 정말 다행인건 위의 3가지가 데브코스를 통해 얻을 수 있다는 것이다. 절망의 계곡을 지나 깨달음의 비탈길로 갈 수 있도록 데브코스에서 열심히 공부해야겠다.

참고자료

mdn fetch https://developer.mozilla.org/en-US/docs/Web/API/fetch
Conventional Commits https://www.conventionalcommits.org/en/v1.0.0/
개발 배우기가 정말 어려운 이유 https://brunch.co.kr/@jypthemiracle/14
ES modules: 만화로 보는 심층 탐구 https://ui.toast.com/weekly-pick/ko_20180402