프로젝트 소개
- 부동산 필수 앱의 사이트인 GanadaBang 클론 코딩한 GanadaBang 프로젝트
프로젝트 선정 이유
- 외부 API를 이용한 다양한 이벤트 처리 경험
- 국내 최대 규모의 부동산 중개 어플을 모티브로 한 웹 사이트 구축 경험
- 내부의 로직을 분석하여 클론 웹 사이트에 적용
프로젝트 계획 및 기간
- 📅 2021/06/21 ~ 2021/07/02
개발 팀원
- FE : 정유정, 김건우, 이도윤
- BF : 김태우, 이아란, 김성규
Catch Fabric 시연 영상
적용 기술
Front-End
- React.js(함수형), JavaScript, styled-component, html
Back-End
- Python, Django web framework, Bcrypt, JWT, My SQL
Common
- AWS(EC2), RESTful API
협업 Tool
- trello, slack, postman, git, gitHub
1차 때는 React의 class형을 사용하여 만들었다면 2차 때는 함수형 그리고 styled-component를 활용하여 만들어 보았다.
class형과 함수형이 다른 문법(?)으로 구동되기 때문에 그런 부분 공부와 styled-component의 사용도 처음이라 처음은 맨붕 of 맨붕이였지만 여러 장점이 있겠지만 나는 파일을 여러개로 나눌 필요가 없다는 것과 props 부여해 활용할 수 있다는 점이 마음에 들었다.
구현 기능
내가 한 구현은 🙋♀️로 표시 하였다.
- 메인 페이지 🙋♀️
search: 모달을 조건부 렌더링과 useRef를 사용하여 input 값으로 RESTful API를 이용해 고유의 아이디가 가진 지도 페이지로 이동
product list: 랜덤한 데이터를 받아 형식에 맞게 함수로 값을 바꿔 화면단에 보여줌
소셜 Login: 카카오 로그인 API를 JDK로 불러와 카카오 토큰으로 활용하기
Nav: 조건을 props로 넘겨 pathname과 비교하여 받은 결과 값으로 화면마다 다른 nav 보여주기 - 방올리기 페이지 🙋♀️
upload photo:input: type="file"로 선택한 파일을URL.createObjectURL(file)를 이용해 파일을 전환해서 화면에 보여주기
upload Address: Duam Code API로 주소창에 친 값으로 Data 받아오기 - 상세 페이지
Advanced Router: RESTfull API 파라미터 값으로 데이터 불러오기 - 지도 페이지
map: 네이버 맵 API를 이용한 지도 페이지 구현
page nation: 지도 API의 영역을 가져와 방 리스트를 조회하여 조회된 내역에 대한 페이징 처리
filter: 전,월세,매매 및 가격등의 선택 내역에 따른 방 내역 조회
새롭게 배웠던 코드
소셜 Login
- 기본적인 flow
- index.html 파일에 첫 번째 사진처럼 kakao에서 제공하는 sdk와 javaScript의 키를
Kakao.init()안에 넣어줘야한다. - window.kakao를 쓰기 편하게 해주기 위해
const { Kakao } = window;로 비구조 할당을 해주었다. Kakao.Auth.login()의 () 안에 객체 안에 success: 와 fail: 을 넣어 success: 에는 카카오토큰을 받아 백한테 주고 다시 우리만의 토큰을 받아 로컬스토리지에 넣어 로그아웃 했을 시에만 토큰을 없애게 해주었다.
- 소셜 로그인 어렵지 않으니 겁먹지 마라
API가 그냥 API가 아닌 카카오나 네이버에서 들고와서 한다고 생각했을 때 덜컥 겁부터 났었다.
잘하는 사람들로만 고용하는 회사니 코드가 어렵지 않을까? 내가 이해하지 못할 코드로 구성되어있지 않을까? 이런 막연한 생각이 있었다 하지만 잘하는 사람들이 만든 코드 사용법은 처음 코드를 보는 사람에게도 역시나 친절했다. 물론 공식 홈페이지에선 무엇을 말하는지 이해하는데 오래 걸렸지만 사용법은 정말 쉽게 해놓으셨다.
그리고 데이터는 프론트와 백 양쪽에서 받아올 수가 있는데 우리 팀은 백에서 받아와주셔서 나는 토큰을 받아 백에 넘겨주고 그걸 기반으로 만든 토큰 값을 받아 이용하였다.
try{}catch(){}은 왜, 어떻게 쓰는 걸까?
try{}안에 내가 해주고 싶은 코드를 넣고 그 곳에 에러가 났을 경우 밑의 코드를 마저 읽지 않고 바로 잡아서catch{}안에 넣는 것이다.
Nav
- 컴포넌트에 따라 다른 스타일을 부여하고 싶다면 props로 조건을 주자!
여기에서 공유하고 싶은 코드는 styled-component에서 링크이동(라우터 주소이동)으로 인한 테마가 다르게 하는법이다.
styled-component는 css처럼 style을 줄 수 있지만 말 그대로 component라 props도 줄 수 있다는 장점이 있다 여기에서 조건을 props로 넘길 수 있는데
const isMainPage = location.pathname === '/';란 변수를 만들어isMainActive이름으로 props를 넘겨 세 번째 사진처럼 삼항연산자를 사용하여 다른 테마를 주었다.(isActiveMain를 비구조 할당하였다.)
방올리기 페이지
배열에 사진 더하는 함수, 지우는 함수
fromData로 만들어 주소 state와 같이 data를 fetch하는 함수
배열에 넣었던 사진들을 화면단에 보여주는 함수
render되는 부분
- 사진 파일을 화면에 보여줄려면
URL.createObjectURL()사용하자!
사실 내 컴퓨터에있는 사진 파일을 화면단에 보여지게 한다는게 참으로 어려워 보였다. 그래서 착한선배님(위코드 선배님들이 시간내서 오셔서 후배 위코더의 모르는 부분을 가르쳐주시는 제도(?)가 있다)에게 물어 알게된 메소드이다.
이 메소드는 화면에 보여줄 수 있는 url로 만들어 주는 것이다.
- 변형하는 flow
로컬에서 선택된 파일들을 map으로 돌려URL.createObjectURL()로 변형한걸fileArray라는 변수에 담고 그 변수에 담긴 것을previewImages라는 배열 state에concat으로 더해주었다.
- 배열 빼줄 때는 spread operator(...)를 사용하자
React에는 불변성을 지켜주는게 중요한데 이 말은 즉 직접적으로 데이터를 변환하는게 아닌 기존을 복사하여 새로운 것을 만들어 변환을 줘 리랜더링해야한다는 것이다.
불변성을 지켜야하는 이유는 컴포넌트 상태가 업데이트 되었다는 것을 인지하고 필요한 부분만 리랜더링할 수 있기 때문이다.
(기존을 직접적으로 수정하면 리랜더링 되지 않는다.)
- formData와 일반 데이터를 같이 fetch로 보낼 땐 일반 데이터를 fromData넣어서 같이 보내자!
즉 일반 데이터와 폼데이터를 같이 fetch할 수가 없는데 그럴 때는 일반데이터도 formData안에 같이 넣어서 보냈었다. fd라는 fromData 객체를 만들고 그 안에 사진 파일은
for of문법을 사용하여 하나 하나 넣어주고, 주소는JSON.stringify({})안에 넣어 fetch의 body에 fd만 넣어줬다. (세 번째 사진 참고)
🔔주의 할 점
여기에서 정말 주의할 점이 있는데 백엔드로 fetch로 데이터를 보낼 때는 URL.createObjectURL()로 변환한 값이 아닌 파일이 선택된 값들을 담아서 보내는 것이 중요하다
이 것이 안되어 발표 시간까지 시간이 끌어 힘들었다고 한다,,ㅠㅠ
