23일차_Front(JS-Fetch, DOM, API 연동 및 config.js 설정)

안녕하세요!

오늘은 데브코스 23일차 (5주 4일차) 입니다.

 

자바스크립트 비동기처리 및 DOM, API 연동에 대해 학습했습니다.

오늘 수업은 로컬에서 html과 js 로 QR생성 사이트 만들어서 띄우고,

API를 연동해서 토큰 만료시점에 따라 배경화면을 바꿔주고, 위/경도 값을 받아서 지역명과 날씨를 띄워주는 작업을 했습니다.

 

수업 종료 후 코드를 보면서 강사님 화면이랑 '왜 다르지.. API 연동했는데.. 난 왜 지역명과 날씨가 안나오지..?' 하면서 삽질하다가..

오류들 잡아내고 API_KEY 숨기느라 시간이 좀 걸렸습니다. 2시간 이상 같이 봐주신 Yana님 감사합니다. (--)(__)

 

---

어제 공부내용 추가 학습

Promise

0. 등장 배경

자바스크립트는 비동기 처리를 위한 하나의 패턴으로 콜백 함수 를 사용한다.

하지만 콜백 패턴은 아래와 같은 한계가 있다.

• 콜백 헬로 인해 가독성이 나쁘고, 비동기 처리 중 발생한 에러의 처리가 곤란
• 여러개의 비동기 처리를 한번에 처리하는데 한계가 있음

⇒ 그래서, ES6 부터 비동기 처리를 위한 또 다른 패턴으로 Promise 를 도입했다.

 

1. Promise 의 생성

• Promise 생성자 함수를 new 연산자와 함께 호출하면 Promise 객체를 생성한다.
• Promise 생성자 함수는 비동기 처리를 수행할 콜백 함수를 인수로 전달받는다.
• (이 콜백 함수는 resolve 와 reject 함수를 인수로 전달받는다.)
• Promise 생성자 함수가 인수로 전달받은 콜백 함수 내부에서 비동기 처리를 수행한다.
  • 비동기 처리가 성공하면 콜백 함수의 인수로 전달받은 resolve 함수를 호출하고,
  • 비동기 처리가 실패하면 reject 함수를 호출한다.
  • 예제
  • const promise = new Promise((resolve, reject) => { if(비동기 처리성공) { resolve('result'); } else { reject('failure reason'); } });

 

 

2. 프로미스의 상태 정보

• pending : 비동기 처리가 아직 수행되지 않은 상태 → Promise 생성 직후 기본 상태
• fulfilled : 비동기 처리가 수행된 상태 (성공) → resolve 함수 호출
• rejected : 비동기 처리가 수행된 상태 (실패) → reject 함수 호출

 

3. 프로미스의 후속처리 메서드 (아래 3개 다 프로미스반환)

• then : 2개의 콜백함수를 인수로 전달받음
  • 성공 - 비동기 처리 결과 : fulfilled 상태(resolve 함수 호출)
  • 실패 - 에러 : rejected 상태(reject 함수 호출)
• catch : 1개의 콜백함수를 인수로 전달받음
  • 실패 - rejected 상태
• finally : 1개의 콜백함수를 인수로 전달받음
  • 성공/실패 상관없이 무조건 1번 호출됨

 

async/await

0. 등장 배경

ES8 부터 제너레이터보다 간단하고 가독성 좋게 비동기 처리를 동기 처리처럼 동작하도록 구현할 수 있는 async/await 이 도입 되었다.

 

1. 특징

• 프로미스를 기반으로 동작한다.
• async/await 사용 시 프로미스의 then/catch/finally 후속처리 메서드에 콜백함수를 전달해서 동기처리 처럼 사용할 수 있다.

2. async 함수

• await 키워드는 반드시 async 함수 내부에서 사용해야 하며, 언제나 프로미스를 반환한다.
• async 함수가 명시적으로 프로미스를 반환하지 않더라도 암묵적으로 반환값을 resolve 하는 프로미스를 반환한다.

3. await 키워드

• await 키워드는 프로미스가 settled 상태(비동기 처리가 수행된 상태) 가 될때까지 대기하다가 settled 상태가 되면 프로미스가 resolve한 처리결과를 반환한다.
• await 키워드는 반드시 프로미스앞에서 사용해야한다.

 

 

---

 

오늘 공부 내용

Fetch

• HTTP 요청 전송 기능을 제공하는 클라이언트 사이드 Web API
• fetch 함수는 HTTP 응답을 나타내는 Response 객체를 래핑한 Promise 객체를 반환한다.
  • XMLHttpRequest 객체보다 사용법이 간단하다.
  • 프로미스를 지원하기 때문에 비동기 처리를 위한 콜백 패턴의 단점에서 자유롭다.
  • 후속처리 메서드 then 을 통해 프로미스가 resolve 한 Response 객체를 전달받을 수 있다.

 

DOM (Document Object Model, 문서 객체 모델)

• HTML 또는 XML 기반 문서와 상호작용하고 표현하는 API
• DOM 은 웹 페이지를 스크립트 또는 프로그래밍 언어와 연결
  • DOM 은 document 의 모든 노드에 접근하고 상호작용할 수 있도록 브라우저에서 코드를 실행할 수 있게 해줌
  • 이벤트 리스너를 노드에 추가해 주어진 이벤트가 발생할 때 트리거가 되게 할 수 있음

---

 

수업 따라가기

수업 종료 후 코드를 실행시킴 분명 강사님 코드와 내코드가 동일한 것 같은데 만든 사이트가 연결이 됐다가 안됐다가 함

=> api 호출 및 연결 문제같아서 응답실패를 체크하는 예외를 추가함

=> 위치 접근 실패 시 서울 좌표를 제공하는 로직도 적용함

if (!response.ok) {
    throw new Error('날씨 API 응답 실패');
  }

 

브라우저에 사이트가 잘 로드되었는데, 아무리봐도 날씨 정보가 보이질 않아서 여기저기 확인해봤는데

글씨 색이 흰색이어서 안보였음.. .. 어이없던 실화.... 바로 CSS로 글자 크기 키워줌..

 

 

 

API KEY 숨기기

코드를 고치고, 깃허브에 올리려니 Api key 가 노출되는 문제가 있어서.... 숨겨봐야겠다 싶어서 방법을 알아보고 있었는데

zep (온라인 모각코)에 Yana 님이 접속해서 화면보시더니 뭐가 문제냐고.. "님 에러 꿀잼" 이러면서 2시간동안 봐줌..

 

제가 아직 초보라 어떤 문제인지는 말할 수 있는데, 이 프로젝트가 어떻게 구성되어있는지, 발생원인이 뭔지 등등 ..

몰라서 파악하는데 시간이 오래걸림.. 😅

 

Yana 님의 node환경 이냐는 물음에 (node.js 쓰니까 ) 네 라고 대답하고 dotenv 라이브러리를 설치하고,

실행하라고해서 브라우저로 실행했더니 브라우저환경이면 dotenv 안쓴다고.. 다시 처음 부터 시작 함ㅠㅋ

 

그리고 .env 는 환경변수, config는 설정파일인데, 첨에 몰라서 내가 env 파일 만드려고하니까 기겁하심 ㅋㅋㅋㅋ

 

암튼 config.js 에 api key 를 숨기고, 변수와 import 문을 수정하고, .gitignore에 등록하고, git push함 ..! 

이런저런 얘기하느라 시간이 금새 지나갔다.. 매번 저를 도와주시고 들여다봐주셔서 감사합니당

 

 

블로그 글이 구조적이지 않은데 새벽 2: 55이라 그런것 같다.. 21시 30분부터 앉아있었더니 비몽사몽이다 

 

휴 . .. ! 내일은 기존 코드에 시간을 예시로 기재해둔 부분을 시간이 흐르는 실제 시계로 바꿔보고 싶고,

오늘 강사님이 내주신 과제(api 로 카카오맵 붙여보기) 도 해보고싶다.

 

 

 

오늘도 고생하셨습니다 !

내일은 무려 금요일~ 하루만 더 힘내자~