2024-04-26 자바스크립트 개인과제 5일차

오늘 배운 것

배열 안에 객체가 있는 복잡한 구조 파악하기

1. 배열에 접근할 때는 인덱스 번호로 접근한다.
2. console.log(myArr[0]);
3. 객체에 접근할 때는 value를 알고 싶은 property의 key를 점 표기법(.)으로 접근한다.
4. console.log(myObj.myKey);
5. 배열과 객체가 섞여 있을 경우에도 값을 알아낼 수 있다.
6. console.log(myArr[0].myKey];
7. 그런데 이렇게 복잡한 상태의 자료구조에서는 map 메서드나 forEach문을 사용할 수 없기 때문에 자료 구조를 배열 구조로 바꾸어 주어야 한다.

오타에 유의하자

계속 반복하고 있는 실수인데, 코드에 문제가 없는데 왜 자꾸 실행이 안 되나 하고 살펴보면 변수명이나 함수 실행 코드에서 오타를 내는 경우가 상당히 많다. 오타에 유의하자. 특히 내가 이번 프로젝트에서 getMovies라는 배열을 사용하면서 Movies를 Moives라고 치는 경우가 100번 정도 발생했다. movie 라는 영어 단어를 모르는 것이 아닌데 성격이 급한 듯하다.

console에 값을 찍어볼 때는 코드 실행 순서를 유의하자

코드 실행 순서 상 console에 값이 출력될 수가 없는 상태의 코드 라인에서 console.log를 실행하여 왜 안 되지를 반복하고 있다. 심지어 코드 작성에 문제가 있었던 것으로 판단해서 코드를 잘 작성했음에도 코드 전체를 뜯어 고치는 대참사를 몇 번이나 반복했다.
아직은 문법들에 익숙하지가 않고 처음 사용해보는 문법들이 대부분이라 코드의 흐름이 눈에 들어오지 않는 것 같다. 계속 눈과 손에 익숙해지게 만드는 과정이 필요한 것 같다.

불필요한 과정을 개선하자

코드를 처음부터 끝까지 작성하다 보면 분명 메모리 관리상, 코드가독성 상 개선할 수 있는 부분이 눈에 보인다. 정상적으로 페이지가 작동한다고 끝내지 말고 계속해서 코드 리뷰를 스스로 해보면 자바스크립트 입문 1주차인 내 눈에도 어느정도 보이는 것이기 때문에 숙달될 것이라 생각한다.

실습과제

영화 검색 사이트 만들기

과정

TMDB라는 사이트에서 무료로 제공하는 API를 fetch로 받아오면 reponse.json으로 자동으로 파싱이 됨. 그런데 이 respons를 뜯어 보면 크게 배열 구조로 이루어짐.

reponse = [
  {},
  {results: ...},
  {},
  ...
]

그런데 여기에는 페이지에 띄울 필요가 없는 불필요한 정보가 많이 담겨 있어 reponse라는 배열 안에 있는 특정 객체만 필요한 상황임. 그 객체의 key는 results임. 배열 안에 있는 reuslts라는 객체에 접근하는 방법은 점 표기법(.)으로 가능함.

console.log(response.results);

그런데 왜 그랬는지 모르겠지만 과제 해결 초기에 이 response.results에서 나에게 필요 없는 key 들을 버리고 다시 새로운 배열을 만들어 냄. map 메서드를 사용함.

       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);
        });

위 코드를 살펴보면 세 번의 불필요한 과정을 거침.

1. getMoviesArr라는 빈 배열을 만들고
2. getMovies라는 배열을 만들고 이 안에 response.results라는 배열을 map 메서드로 반복문을 돌려 아래 코드블럭의 형태로 새로운 배열 구조를 만들어 값을 할당함.
3. 그리고 이렇게 나온 geMovies라는 배열을 다시 한 번 forEach를 돌려 빈 배열 getMoviesArr에 push 메서드를 통해 밀어 넣음.

결과적으로 어제 페이지 구현은 완료했지만 코드를 계속 들여다 보면서 무언가 이상한 점을 감지함. 어차피 다 같은 형태의 자료 구조인 것이 아닌가라는 의문이 들었음.

그래서 콘솔에서 이 배열들을 전부 찍어봄.

그런데 브라우저 콘솔에서 희한한 광경을 목격함.

위 사진을 보면 분명히 같은 구조인 것 같은데 하나는

[{...}, {...}, {...}] 형태로 나오고,

하나는 [] 빈 배열 처럼 보이는데 화살표를 누르면 여러 개의 객체로 이루어진 배열로 보임.

결과적으로 배열 안에 객체가 20개가 있는 배열인 것은 같은데 이 차이가 무엇인지 몰랐음.

이전 조의 동기생인 '은'님께서 답을 주셨는데, 콘솔에 찍어 보는 위치에 문제가 있었음.

       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,
            }
        });

        // 여기서 찍어 봤음.
        console.log(response.results);
        console.log(getMoviesArr);
        console.log(getMoives);


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

즉 forEach로 getMovies를 반복을 돌려 getMoviesArr에 push 하기 이전에 console에 찍어봤기 때문에 저 위치에서는 getMoviesArr는 빈 배열일 수밖에 없는 것이었음.

그런데 나를 혼란스럽게 만든 건 ▶ 화살표를 눌렀을 때 정상적으로 안의 내용물이 객체 형태로 출력됐기 때문에 같은 배열 구조인 것으로 오해하였음.

위 사진처럼 브라우저에서 i 아이콘이 뜨면 마우스를 올렸을 때 경고문을 출력해주는데, ▶ 화살표를 눌러서 나오는 값은 웹 페이지 로드가 완료된 시점에서의 결과값을 보여준다는 것이다. 이 말의 의미가 무엇인지 잘 몰랐는데 알고 보니 console.log를 실행한 시점에서는 빈 배열이 맞는데 클릭을 했을 때 펼쳐져서 나오는 값은 브라우저가 페이지를 모두 로드하고 났을 때 나오는 값이라는 것이다.

 

즉 내 의도와는 다른 것. 값이 잘 나온다고 안심하고 넘어갈 것이 아니라 내가 console.log를 실행한 시점에서는 분명 두 배열이 하나는 빈 배열 깡통이고 하나는 값이 쫙 들어 있는 훌륭한 배열이라는 것. 개발 의도와 틀어질 수 있기 때문에 코드 흐름을 읽는 눈을 길러야겠다.

 

즉 나는 어차피 response.results라는 배열과 getMoviesArr라는 배열, getMovies라는 배열이 어차피 같은 자료구조인데 계속해서 의미없는 깊은 복사를 하고 있었던 것. 만약 response.results라는 배열 안에 있는 key 값들이 나에게 필요가 없어 새로운 배열에 내가 원하는 key: value 형태로 재가공하기 위해서 하는 행위였다면 의미가 있겠지만, 나는 저 배열들이 자료 구조가 다 다른 줄 알고 이 과정을 불필요하게 자료 구조를 변경하는 과정을 반복했다.