[Pre-Project] Day 9 - API, fetch, get,post, map 함수, 프로필 이미지 랜덤으로 넣기
📍 Pre-Project, Day 9
→ 아래와 같이 작업을 진행을 하였는데, 프리 프로젝트가 거의 끝나가고 있는 상황에서 우리는 이제 API들을 fetch 해오고, 마지막으로 css만 손을 봐주면 되었다. 하지만 생각치 못한 cors error가 갑자기 뜨면서 백엔드 측에서도 서버를 확인하고,우리 측에서 일단 작업을 하기 한 팀원분께서 proxy로 해결해주시는 등... 정말 글로는 담기지 않지만 대혼란이였다. cors error 정말... 이 부분은 되었다가 안되었다가 해서 현재 -ing.
- github read.me 작성하기(표 작성, 기술 스택 뱃지)
- 서버 에러 해결하기
- 특정 포트 죽이기
- users page 완성하기
- 팀원들 오류 같이 해결하기(fetch 에러)
- 개인 브랜치에서 작업한 내역, dev로 merge 한 후 개인 branch 정리
✍🏻 Users 페이지 구현하기
→ 금일 우리는 위 stackoverflow의 users 페이지처럼 전체 유저들의 정보를 가지고 오는 페이지를 구현해야했다. 위와 같이 구현하기 위해서는, 아래와 같이 진행해야 했다.
다만 우리팀은 백엔드분들과 소통한 결과, user name과 user email까지 가능할 것 같다고 하셔서 이 두가지를 구현하기로 했다.
- Users API 정보를 fetch로 불러와야 하고,
- 백엔드 넣어주지 않은 프로필 이미지 랜덤으로 넣기
- map 함수로 반복되는 컴포넌트 작성하기(유저의 프로필 박스)
✍🏻 grid로 영역 지정하기
→ 이전에 경험했던 문제를 기반으로 이번에는 처음부터
grid를 사용해야겠다고 생각했다.
물론 위의 사진은 중간에 작업하면서 확인한 화면이지만, 저렇게 처음부터grid를 사용하여 영역을 지정해주니 작업 하는데 수월했고, 코드는 아래와 같다.<style jsx>{` .grid{ display: grid; width: 80%; grid-template-columns: 25% 25% 25% 25%; } `}
✍🏻 Users API 정보를 fetch로 불러오기
→ 백엔드에서 작성한 API 명세서를 토대로
(GET, get users)
우리는데이터가 필요한 곳에서 통신하기로 했으므로, user.js 파일에서 아래와 같이 작성해주었다.import React from 'react'; import { useState, useEffect } from "react"; export default function user() { useEffect(() => { const headers = new Headers({ "Content-Type": "text/xml", }); fetch( `http://54.180.175.144:8080/user?page=1&size=36`, ) .then((res) => res.json()) .then((user) => setUser(user.data)) .catch((err) => console.log(err)); }, []); return (); }
✍🏻 프로필 이미지 랜덤으로 넣기
→ user image는 우리 프론트엔드 측에서 해야해서 구글링을 해본 결과,
image url을 랜덤으로 주는 한 사이트를 찾게 되었다.
- image url 랜덤 사이트
처음에는 1:1 비율의 이미지를 불러오기 위해서 아래와 같이 작성하였는데, 이렇게 작성하니 위의 그림과 같이모든 user image가 동일하게 나오고,새로 고침을 하여도 다같이 변하는 문제를 확인 할 수 있었다.https://picsum.photos/200
→
user id를 설정해주지 않아 생긴 문제였다.
그래서 최종적으로 아래 코드처럼 작성하니 문제없이 위 그림처럼 모든 user image가 다르게 나왔으며 새로 고침을 하여도 정상적으로 작동하는 것을 확인할 수 있었다. 해결 완료!<img src={`https://picsum.photos/${person.userId}/200`} alt="image" width="70" height="70"/>
✍🏻 반복되는 component map 함수로 작성하기
→ users의 정보가 담긴
컴포넌트가 동일하게 반복해야하는 상황으로,map 함수를 사용해서 작성해주었다.return ( <div className='grid'> {user?.map((person) => <div className='profile' key={person.userId}> <img src={`https://picsum.photos/${person.userId}/200`} alt="image" width="70" height="70"/> <div> <div className='userName'>{person.userName}</div> <div className='email'>{person.email}</div> </div> </div>)} </div>
✍🏻 post로 부족한 user 정보 추가해주기
→ 위의 코드처럼 36개의 user 정보들을 요청했으나, 화면에서는 8개 이상 user 정보가 보이지 않는 문제점을 발견했다.
→
확인해보니 백엔드에서 넣어준 user 정보가 8개 밖에 있지 않아 생긴 문제 였다.
그래서 위의 코드처럼 36개를 불러오고 있음에도 8개만 보였던 것이 것이다. 그래서 우리가postman post로 user들을 추가(POST, add user)해주니 화면에 36개의 user 정보들이 보이며 문제는 해결되었다.
→ 마지막으로 아래와 같이
style-jsx까지 작성하여 위와 같이 우리가 원하는 페이지를 구현하였다. 완성!<style jsx>{` img:hover{ cursor: pointer; } .userName{ display: flex; font-size: 15px; color: rgb(46,93,192); display: flex; align-items: center; justify-content: left; margin-left: 20px; } .userName:hover{ color: rgb(0, 51, 162); } .email:hover{ color: black; } .email{ display: flex; font-size: 15px; display: flex; align-items: center; justify-content: center; margin-left: 20px; color: rgb(98,98,98); } .profile{ margin-top: 70px; width: 254px; height: 82px; display: flex; } .profile:hover{ background-color: rgb(244,246,245); } .grid{ display: grid; width: 80%; grid-template-columns: 25% 25% 25% 25%; } .title{ font-size: 27px; margin: 34px 24px 24px 34px; } .input{ margin-top: 10px; color:rgb(215,217,219); } input{ padding: 7px 12px 7px 9px; border: 1px solid rgb(172,178,183); } `}</style>
✍🏻 회고
금일 여러가지 작업들을 하였지만, 특히나 API 통신에 대한 이해가 부족하다는 것을 느낄 수 있었다. 이전까지 부트 캠프 학습 과정에서 서버가 없는데 서버가 있는 것처럼 상태값을 작동시키는 방식으로만 코드를 짜는 것만 해와서 그런지,
postman을 확인하고,get,post요청하는 것이 생각보다 어색하고 시간이 오래 걸렸다. 이에 대해서 추가적인 공부가 연습이 필요할 것 같다.
하지만, 이번에는 이전에 어려워했던grid를 활용하여 user의 profile 나열을 어렵지 않게 할 수 있었다.
