4주 차 여덟 번째 과제(22.02.24 ~22.02.26) TIL

프리온 보딩에서는 과제마다 각 기업이 요구하는 기술을 바탕으로 과제를 진행하는 방식입니다.

 

여덟 번째 데이터 목록 페이지 만들기

파일의 목록과 파일의 상세 데이터를 표시하는 페이지를 만들었습니다.

 

배포 깃 허브 링크 

https://github.com/Gilpop8663/08_link_data

GitHub - Gilpop8663/08_link_data: 원티드 프론트앤드 프리온보딩 2기 14팀 정보를 담는 리스트 페이지 프

 

기능 구현 (맡았던 부분)

 

Axios를 통해 데이터를 가져왔습니다.

• axios를 통해 제공된 api가 아닌 json-server를 이용해서 유효기간 날짜만 변경된 데이터를 받아와 화면에 표시했습니다. 그 이유는 api의 날짜 데이터가 22년 1월로 나와있어서 좀 더 다양하게 기능을 테스트해 볼 수 있는 최신 날짜로 갱신하였습니다.

중복하여 데이터를 가져오는 것을 지양했습니다.

• react-router-dom의 useMatch, useLocation을 이용해서 처음에 fetch 받은 데이터를 상세 페이지로 넘겼습니다.

유효기간 만료 여부를 데이터마다 알아냈습니다.

• new Date() 메서드를 사용하여 현재 시간과 api에서 받아온 데이터의 시간을 비교하여 유효기간 만료 여부를 알아냅니다.

유효 기간에 따라 화면 구성을 달리했습니다.

• 유효기간 만료 여부에 따라 화면의 구성이 바뀔 수 있도록 조건문을 통해 구현했습니다.

다양한 메서드를 활용하여 구현하였습니다.

• 날짜, 파일 크기와 같은 데이터는 인스턴스 메서드 등 다양한 메서드를 활용하여 화면과 같이 텍스트가 출력될 수 있도록 구현했습니다.

유효기간을 실시간으로 반영되게 구현하였습니다.

• 유효기간을 setTimeout을 통해 (60초 - 현재 시간의 초)의 계산을 하여 (60초 - 현재 시간의 초) 후에 리 렌더를 하고 setInterval을 통해 15초마다 리 렌더 되도록 하였습니다.

URL을 클릭한 경우 클립보드 복사 기능을 구현하였습니다.

• url 링크를 navigator.clipboard.writeText() 메서드를 활용하여 클립보드에 저장할 수 있도록 구현했습니다.

파일의 섬네일 이미지를 표현했습니다.

• api 데이터 값 중 svg 파일이 아니라면 섬네일 이미지를 보여주고 그게 아니라면 default 이미지를 보여주도록 하였습니다. svg 파일이라면 파일이 제대로 나오지 않는 이슈가 있었기 때문입니다.

 

정리 및 회고

새로 알게 된 점

• 클립보드 하는 방법에 대해 새로 알게 되었습니다.

 

•  Acees-Control-Allow-Origin 관련해서 설정이 없었을 때 CORS 정책 위반 경고를 해결하기 위해 proxy 서버를 지정해서 해결하는 방법을 알게 되었습니다.

 

 

힘들었던 점 / 해결과 극복 방법

• api 값에서 섬네일 이미지를 불러와 표시해야하는 것이 있었는 데 svg 파일만 이미지가 제대로 나오지 않아서 api값의 확장자가 svg 일 때 default 이미지를 사용하고 나머지 확장자일 때 섬네일 이미지를 표시하도록 해결했습니다.

 

• api 값의 유효기간 데이터가 처음에 new Date 로 넣었을 때 1970년대로 나와서 기업에서 1초로 주신 것으로 생각하고 1000ms로 변환하였고 2022년 1월로 이미 지난 기간으로 나와서 임의대로 기능 구현에 다양한 내용을 화면에 표시하기 위해 json-server에 기존 api 데이터와 유효기간 데이터를 새로 넣어서 페이지를 구현하였습니다.

 

• 유효기간이 표시되는 것을 실시간 시간으로 1분이 지나면 페이지에서도 1분이 지나도록 하였는데 setInterver 로 60초 초마다 하니 실시간으로는 제대로 작동이 되지 않아서 setTimeout에서 60초 - 현재 초를 하고 난 뒤 데이터가 패치되도록 하였고 setInterval로 15초마다 패치되도록 하여 해결했습니다.