개인 과제 1일 차 @grid, for of, fetch
이번 주는 자바스크립트 공부와 함께 다음주 월요일까지 해야 하는 개인 과제도 있다. 때문에 오늘은 어제 배운 것들을 간단하게 복습하고, 대부분의 시간을 개인과제를 하는 데에 사용했다.
그리고 코딩이 내게 매번 새로운 놀라움을 준다는 것을 느꼈다. fetch로 반복문을 돌려서 영화 추천 리스트를 만들기 시작했는데, fetch를 다루는 게 너무 어려워서 내내 고생했다. 바로 어제와 아래에 객체와 배열을 이해했는데, 이제는 promise라는 것도 알아야 하고, 또 then에 대해서도 알아야 할 것 같다. 다만 아직 이러한 개념들을 이해하지 못했고, 따라서 과제도 완성하지 못했다.
오늘 배운 것은 이러한 것들은 아니고, 일단 당장에는 겉핣기로만 알게 된 다른 것들을 정리하려고 한다.
grid
먼저 grid다.
grid는 여태 css로 목록 엇비슷한 것들을 만들 때마다 항상 갈구해왔던 기능을 가지고 있는 css 기능이다. 무려 자식 요소들의 width, height를 균등하게 맞추어주고, 규격을 벗어나면 다음 행으로 넘어가게 할 수 있는 정렬 기능이다. 이 기능이 있으면 목록처럼 많은 자식 요소들을 정렬해야 할 때 쉽게 규격을 맞출 수 있다.
나는 이번에 카드들의 부모요소인 cardList div에 이를 할당하여 정렬을 맞추었다.
for ~ of
다음은 for of문이다.
for문에는 여러 형태가 있는데, 가장 기본적인 for문부터 for of문, for in문, forEach문, 번외로 while문이 그것들이다.
이 중에서 객체를 다룰 수 있는 것은 for in문인데, for에 넣게 된 데이터 타입이 배열의 형태이기 때문에 이번에는 for ~ of문을 사용하게 되었다.
for of문은 반복 가능한 객체에 대해 사용할 수 있고, 일반적으로는 배열에 사용한다. 사용하는 형태는
for(const element of arr) {
본문
}
이렇게 되며, 배열의 각 요소를 빼 와서 사용할 수 있다. 이번에 fetch로 불러온 데이터는 크게는 promise형태이고 객체, 배열, 객체의 규격으로 이루어져 있어서 2겹 벗겨서 for of 문을 사용했다.
또 이렇게 배열에 for of을 사용하고 console.log(element)를 찍어보면 배열 형태가 다시 한 겹 벗겨져서 객체 형태의 데이터를 볼 수 있었다.
그리고 이렇게 추출해낸 값들을 잘 활용해서 카드를 하나 만들어낸 것까지는 좋았는데...
문제는
1. 카드가 하나만 생성되고
2. 마지막 값만 출력된다.
는 것이다.
무언가 코드를 잘못짜서 이전에 구한 값에 나중에 반복된 값이 대체되었다는 것까지는 이해했는데, 이러한 현상을 어떻게 타파할 수 있을지는 모르겠다. 모종의 방법으로 코드 마지막에 반복된 값을 저장하는 코드라도 짜넣어야하는건가 싶다.
fetch
fetch는 서버에서 자료를 받아오는 방법이다.
이렇게 받아오는 자료는 promise 형태를 가지고 있으며,
=> response.json()과 같은 방법으로 변환해야만 사용할 수 있다.
또한 다른 곳에서 받아온 자료인만큼 어떤 형태를 띄고 있을지 알 수 없으므로
=> console.log와 같은 방법으로 자료의 구조를 확인하는 것이 필수적이다.
위에서 언급한 바와 같이 이번에 나는 자료의 구조를 하나씩 벗겨가면서 원하는 값을 추출했는데, 사실 처음에는 fetch로 받아온 데이터를 객체 또는 배열 형태로 따로 저장하려고 했다. 하지만 어째선지 잘 되지 않았기 때문에, fetch.then을 이용하여 구조를 벗기고 for of문을 돌리기로 했다.
결국 이마저도 잘 안 되기는 했지만, 내일이나 모래 즈음에는 튜터님께 묻거나 하여서 문제를 해결하고 개인과제를 완료할 수 있었으면 좋겠다.