2024-04-24 자바스크립트 개인과제 3일차

오늘 배운 것

div를 남발하는 것보다는 적절한 semantic tag를 사용하는 것이 좋다.

코드 가독성 면에서나 SEO 최적화 등에서 유리한 것은 이미 알고 있었지만, 자바스크립트로 document를 통제할 때 간단한 경우 div 태그 자체를 수정하는 방법도 있겠으나, div를 남발한 경우 의도하지 않은 부분까지 수정되었음.

api를 fetch로 받아온 경우 .then 외부에서는 api에 접근할 수 없다. 이 경우 async와 같은 비동기 함수를 사용해야 한다.

아직 자바스크립트 입문 3일차로 then 안에서 코드를 작성 중이다. 계속 진도를 나갈 예정이다.

api를 받아와 정보를 가공하는 경우 forEach 반복문이나 map 메서드가 자주 사용된다.

의도했든 의도하지 않았든 map 메서드와 forEach 반복문을 사용하지 않고서는 배열 안에 저장된 객체에서 특정 프로퍼티에 접근할 수 없었다. 아래와 같이 내가 필요한 자료로 정리되지 않은 response.json을 정리하기 위해 .map 메서드를 사용하여 key: value의 객체 형태로 가공하여 배열 안에 담았다.

 

그런데 이렇게 저장한 getMovies라는 객체를 배열 안에 담기 위해 더 좋은 방법이 있는 지는 추후 학습할 예정이지만, 나의 경우에는 push메서드를 통해 빈 배열 getMoviesArr로 밀어 넣었다.

 

이렇게 밀어 넣는 과정에서도 배열이 여러개이기 때문에 forEach 반복문을 통해 계속 반복시켜줘야 하는데, 이 개념이 이해가 가질 않아 계속 0번 인덱스만 만들어 냈다.

 

반복문이 굉장히 자주 쓰이는 것을 실제로 경험했고, 다양한 상황에 익숙해져야 할 것 같다. 현재는 반복문에 사용되는 매개변수 개념도 잘 이해가 가지 않는 상태이다.

        const getMoviesArr = [];

        const getMovies = response.results.map((movies) => {
            return {
                name: movies.name,
                overview: movies.overview,
                vote_average: movies.vote_average,
                poster_path: movies.poster_path,
                id: movies.id,
            }
        });

        getMovies.forEach(movie => {
            getMoviesArr.push(movie);
        });