10. 24. 13일차 TIL - async&await, this, scope

15일부터 개인과제를 진행했고, 18일 저장을 하지 않은 채 정전되는 바람에 html구조와 css 이외의 작업한 코드들이 모두 사라져버렸다.. 자동저장을 설정해놓지 않은 나를 원망해야한다.. ㅠㅠ 오늘은 과제 진행 중 tmdb에서 api를 받아오는 방법 리펙토링하는 방법과, scope의 개념에 대해 정리하려고 한다.

---

1. fetch API data 리펙토링하기 ( async, await )

 

TMDB에서 API를 가지고 오는 JS 코드는 다음과 같다.

코드를 해석하면 이렇다.

1. fetch를 통해 원하는 url에서 데이터를 가져온다.

2. 그 이후 res => res.json()를 실행한다.

3. 그 이후 res => console.log(res)를 실행한다.

4. 만약 오류가 발생하면, console에 에러를 표시한다.

 

그리고 위의 코드를 아래처럼 async와 await를 사용하여 리펙토링 했다.

fetchMovies(url)이라는 함수는

1. 먼저 fetch를 통해 원하는 url에서 데이터를 가져온 이후 그 값을 response에 저장한다.

2. 이후 response.json()이 처리되면 data에 저장한다.

우리가 원하고자 하는 정보는 data.results로 확인할 수 있다.

---

2. this

1) 다음과 같은 경우 this는 무엇일까?

 

node.js를 통해 확인한 값은 Object [global]이었다..

하지만 브라우저 환경에서 확인하면 window가 출력되었다.

---

3. 변수의 scope

1) var는 블록스코프를 무시하고 호출할 수 있다.

console창에는 'I am function scoped'가 출력된다.

그렇기 때문에 재선언이 가능한 것이 아닐까 생각해 보았다.

 

2) 하지만 var여도 함수스코프를 무시하고 호출되진 않는다.

JS에서 변수는 모두 렉시컬 스코프를 가지고 있기 때문이다.

* 렉시컬 스코프란 함수가 선언된 위치에 따라 스코프를 갖는다는 것을 의미한다.

 

렉시컬 스코프의 의미를 다음의 예시를 통해 다시 확인해보자.

const y는 전역변수로 10이다.

함수 outer 내부에서 선언된 const y는 지역변수로서 20이다.

함수 inner를 실행하면 지역변수인 20이라는 값을 얻을 수 있는데

이 이유는 함수가 선언된 위치가 outer 함수 스코프 내부이기 때문에 전역변수가 아닌

함수 내부에 선언된 지역변수 y인 20의 값이 출력되는 것이다.

하지만 아래의 anotherInner의 함수를 실행할 경우 함수가 호출된 위치가 전역이기 때문에,

전역변수를 참조하여 10이라는 값을 얻을 수 있는 것이다.

---

★ 17일차 소감

오늘 오전에는 그동안 작업한 개인과제를 팀원들과 공유하며 자신은 어떤 로직을 사용하여 웹페이지를 구현하였는지 설명하는 시간을 가졌다. 정말 다들 너무 능력자다.. 나도 순탄하게 진행됐으면 현재보다 더 높은 퀄리티의 사이트를 구현했을 수도 있었겠지만, 그럼에도 불구하고 디테일한 부분은 신경쓰지 못했을 것 같은데 사용자의 ux ui를 고려하여 정말 실제로 사용되고 있는 웹사이트처럼 디자인하신 분들도 너무 많았다.. 그리고 또 우리가 과제를 통해 필수로 구현해야하는 기능은 같았음에도 불구하고 그것을 구현하기 위해 모두가 다 다른 방식을 사용하여 웹사이트를 만든 점이 너무너무 신기하고 흥미로웠다. 

 

억지로라도 만들어 본 팀원들의 개인과제 소개하기 시간은 굉장히 많은 자극을 받을 수 있었던 긍정적인 시간이었다. 다음 프로젝트에서는 시간에 쫒기며 과제이기 때문에 만드는 사이트가 아닌, 주어진 주제를 가지고 내가 구현하고 싶은, 스스로 원하는 웹사이트를 최대한 구현할 수 있도록 할 것이다. 그동안 개인적인 일이 많이 생겨 학습과 TIL작성이 소홀하였다.. 이 점은 많이 반성해야겠다.. 앞으로는 이전처럼 꾸준히 TIL을 작성하면서 그 날의 내용을 복습하고 온전히 나의 것으로 만들 수 있게 더 노력할 것이다.

 

한 주동안 왜 인지 모를 만큼 개인적인 일이 많았고.. 엎친 데 덮친 격으로 폭우로 인한 정전으로 작업하던 개인 과제가 모두 증발해버리는.. 비극적인 사건도 발생했다ㅠㅠ 앞으로는 꼭 자동저장 기능을 설정해 놓자..ㅠㅠ