![]()
실습내용문서로된 해설을 참고하여 인사정보 페이지를 만든다. 실습과정각 화면의 UI요소 컴포넌트화 index.js : html에서 body 요소를 가져와 인스턴스를 생성(body 태그 아래에 랜더링 할 수 있도록) App.js : 각 컴포넌트와 상태값, api 관리 제어할 수 있도록 컴포넌트 생성 CardView : 인사카드 데이터 랜더링 및 클릭 리스너 이벤트 관리할 수 있도록 컴포넌트 생성코드는 한화면에 담기 힘들어서 블로그에서 생략(git 참고) Storage : 인사카드 데이터 및 카드 플립 상태 데이터 로컬스토리지에 저장될 수 있도록 컴포넌트 생성 컴포넌트별 상태값을 어떻게 처리할건지 진행기존 강의 참고 하여 App.js 와 각 컴포넌트(CardView.js)에 setState 함수를 생성하여 관..
![]()
실습내용해설강의를 참고하여 고양이 사진첩 웹사이트를 만든다. 실습과정각 화면의 UI요소는 컴포넌트 형태로 추상화 하여 동작하도록 진행 아래와 같이 컴포넌트를 나눌수 있다. App.js : 각 컴포넌트 와 상태값,api 관리 및 제어하는 jsapi.js : 이미지에는 없지만 api를 요청하는 jsconst API_END_POINT = 'https://cat-photos.edu-api.programmers.co.kr'export const request = async (url) => { try { const res = await fetch(`${API_END_POINT}${url}`) if (!res.ok){ throw new Error('API Call Fail') } ..
![]()
실습 내용주어진 시간(4시간) 안에 고양이 사진첩 웹사이트를 만든다. 실습 과정0. 각 화면의 UI요소는 컴포넌트 형태로 추상화 하여 동작하도록 진행.기존 고양이 검색 사이트 구조 참고하여 진행중(명일 강의 참고하여 진행 예정) 1. 각 컴포넌트가 서로 의존성을 지니지 않게 해야함.기존 고양이 검색 사이트 구조 참고하여 진행중 (명일 강의 참고하여 진행 예정) 2. API 호출시 fetch 이용 및 async,await 문을 사용 (문제 발생하였으나 해결)기존 고양이 검색 사이트 api.js 복붙하여 API 호출 하였으나 에러가 발생 하였다.약 2시간 가량 콘솔찍으면서 찾아보니, 기존 API 와 출력 하는 형식이 달라 생기는 문제 였다. 기존 고양이 검색 사이트의 API 반환값은 JSON 형태이며, ..
