[파트6]javascript 실습(인사정보 페이지)

실습내용

문서로된 해설을 참고하여 인사정보 페이지를 만든다.

 

실습과정

각 화면의 UI요소 컴포넌트화

 

index.js : html에서 body 요소를 가져와 인스턴스를 생성(body 태그 아래에 랜더링 할 수 있도록)

 

App.js : 각 컴포넌트와 상태값, api 관리 제어할 수 있도록 컴포넌트 생성

 

CardView : 인사카드 데이터 랜더링 및 클릭 리스너 이벤트 관리할 수 있도록 컴포넌트 생성

코드는 한화면에 담기 힘들어서 블로그에서 생략(git 참고)

 

Storage : 인사카드 데이터 및 카드 플립 상태 데이터 로컬스토리지에 저장될 수 있도록 컴포넌트 생성

 

컴포넌트별 상태값을 어떻게 처리할건지 진행

기존 강의 참고 하여 App.js 와 각 컴포넌트(CardView.js)에 setState 함수를 생성하여 관리할 수 있도록 하였다.

 

CardView.js

App.js

 

 

작업이미지(GIF)

 

 

작업코드

https://github.com/josungman/Programmer-s_Web_App_Dev_Course/tree/main/week8/part6

Programmer-s_Web_App_Dev_Course/week8/part6 at main · josungman/Programmer-s_Web_App_Dev_Course

 

느낀점

해설이 최소한의 코드만 나와 있어 작업한것이 잘한것인지 정확이 파악이 힘들었다.

 

컴포넌트를 나누어 클래스 방식으로 불러와 작업하는 식으로 진행 하였으며 

문제에 나온 기능은 모두 정상동작 확인 하였다.

다만 한가지 걸리는게 CardView.js 컴포넌트 안에서 onNextPage 함수 작업한것이 해당 컴포넌트 독립성?이 떨어져 추후 유지 보수시 어렵지 않을까 생각이 든다..

 

시간이 될때 코드 리뷰 하여 잘못된 부분을 피드백 받아 수정할 수 있도록 해야겠다.