[파트2] javascript 실습(고양이 사진첩 어플리케이션 1회차 사전)

실습 내용

주어진 시간(4시간) 안에 고양이 사진첩 웹사이트를 만든다.

 

 

실습 과정

0. 각 화면의 UI요소는 컴포넌트 형태로 추상화 하여 동작하도록 진행.

기존 고양이 검색 사이트 구조 참고하여 진행중(명일 강의 참고하여 진행 예정)

 

1. 각 컴포넌트가 서로 의존성을 지니지 않게 해야함.

기존 고양이 검색 사이트 구조 참고하여 진행중 (명일 강의 참고하여 진행 예정)

 

2. API 호출시 fetch 이용 및 async,await 문을 사용 (문제 발생하였으나 해결)

기존 고양이 검색 사이트 api.js 복붙하여 API 호출 하였으나 에러가 발생 하였다.

약 2시간 가량 콘솔찍으면서 찾아보니, 기존 API 와 출력 하는 형식이 달라 생기는 문제 였다. 

 

기존 고양이 검색 사이트의 API 반환값은 JSON 형태이며, 현재 작업 중인 API 반환값은 JSON 배열 형태로 배열이 직접 반환되므로, 구조 분해 할당이 아니라 바로 반환된 데이터를 사용해야 한다고 한다..

 

    async getBreadcrumbRoot() {     
            /*
            호출시 값 안넘어옴 [에러 찾음,
            배열로 직접 반환되는 경우, data 필드를 사용하여 구조 분해 할당하는 것이 아니라, 바로 반환된 데이터를 사용해야 한다.
            */
            await api.fetchBreadcrumbRoot().then(data => {
            //await api.fetchRandomCats().then(({data}) => {  //기존 api 호출 테스트 완료
            console.log("Fetched breadcrumb data:", data);
            this.setState(data ? data : []);
        })
    }

 

 

작업 스크린샷

* 여차저차 root api 불러와 화면에 출력 까진 하였으나 갈길이 멀었다 ㅠ

 

 

작업코드

https://github.com/josungman/Programmer-s_Web_App_Dev_Course/tree/main/week8/part2(pre-practice)

Programmer-s_Web_App_Dev_Course/week8/part2(pre-practice) at main · josungman/Programmer-s_Web_App_Dev_Course

 

느낀점

최근 수강한 고양이 검색 사이트 강의를 참고해 프로젝트를 진행하였다.

아직 컴포넌트 구조에 익숙하지 않아 설계 부분에서 어려움을 겪었으며 특히, API 요청 처리에서 막혀 2시간 이상 시간을 소비하였다..

오늘은 여기까지 진행하고, 내일은 강의를 들으며 문제를 해결해볼 계획이다.

새로운 기술을 익히는 과정에서 직접 만지고 실수하며 배우는점이 있어서 다행? 이다

 

시간될때 지속적으로 복습하여 컴포넌트 구조에 익숙해지도록 해야겠다.