어느덧 벌써 위코드에 들어온지도 2달이 다 됐다. 체감상으로는 엊그제 같은데 벌써 두달이라니 시간 진짜 빠르다. 나는 아직 많이 모자라고 배운게 많이 없다고 생각했는데 두달전의 나를 돌이켜봤을때 진짜 많이 성장한 것 같다. 그런면에서는 나 자신이 살짝 대견한거 같기도 하고..ㅎ 아무튼 프로젝트 끝나고 주말 !
프로젝트 끝났다고 기쁨을 만끽하는 것도 좋지만 !! 언제나 경각심을 갖기 위해 회고록을 쓰려 한다. 초심초심
2차 프로젝트
프로젝트 소개
1차프로젝트에서의 목표가 라이브러리를 쓰지 않고 React를 이용하여 페이지 구현 및 사이트 제작이였다면 이번 2차프로젝트의 목표는 라이브러리 적용과 다양한 API의 접목에 초점을 두었다.
이번 프로젝트는 '싱그러운 집' (https://www.shouse.garden/main/main.html)을 모티브로 한 사이트 제작이다. 싱그러운 집은 여행, 커뮤니티, 쇼핑 3가지의 카테고리로 이루어진 커머스 및 커뮤니티 사이트인데 이를 다 구현하기에는 시간적으로 부족하다 생각하여 기존에 해봤던 쇼핑(커머스) 부분이 아닌 커뮤니티쪽과 여행쪽을 섞어 구현 해보자고 계획을 잡았다.
프로젝트 선정이유는 글쓰기 및 게시판 같이 CRUD 기능의 페이지를 구현해보고 싶음에 있다.
페이지 구성은 총 Main, Login, List, Posting, Detail 페이지 이렇게 5가지로 구성되어 있고 이중에 내가 맡은 페이지는 Posting 글쓰기 페이지 이다 !
### Posting
이번 프로젝트 에서 새로 접목해본것은 기존의 Json 방식의 문자열 전송 방식이 아닌 form Data 방식 데이터 처리와 1차때는 fetch 함수를 썻더라면 2차때는 axios를 써 통신 하였다.
form Data 방식을 쓴 이유는 물론 기존의 해본 방식이 아닌 새로운 방식으로 접근해보고 싶어서 한 것도 있지만, 기존에 썻었던 JSON 타입은 문자열밖에 전송하지 못하므로 파일 같은 것을 전송하기 위해서는 form Data 객체를 써주어야 전송이 가능하기에 채택하게 되었다.
사용법은 추후에 따로 정리하기로 하고, 파일 업로드는 <input type="file"> 이 아닌 dropzone 이라는 라이브러리를 사용하여 구현해보았고 라이브러리를 처음 써보면서 느낀점은 확실히 구현을 안하고 가져다 쓰면 되니 편하긴 하다. 그치만 css수정이라던가? 내 입 맛에 쓰기위해 수정하기에 많은 어려움을 느꼈다...
우편번호 같은 경우에는 카카오 우편번호(DaumPostCode) 라는 API를 이용하여 구현하였으며, 이를 이용하여 주소값을 state로 관리하였다.
그리고 글을 쓰고나서 상세 페이지 제일 하단에 지도를 띄워주기 위해 위도와 경도를 같이 요청했는데, 이를 구하기 위해서 카카오 지도 API의 Service를 이용하여 공식문서를 참고하여 위에서 구한 우편번호의 주소값을 토대로 위도와 경도를 구하여 state로 관리하여 서버에게 보냈다.
후기
기존 1차프로젝트와 다르게 2차프로젝트에서는 전에 맡던 페이지 분량의 비해 이번에는 1개만 맡게 되어 상대적으로 시간이 많다고 느껴졌다. 그러다보니 나도 모르게 시간이 많다고 생각하여 자만하게 되었고(물론 시간안에 기능구현은 끝냈다) 시간을 먼가 타이트하게 쓰지 못했다는 점이 아쉬웠으며, 이번 프로젝트를 하면서 라이브러리를 사용해보고 API도 사용해보고 다양한 기술들을 접목해볼 수 있어서 굉장히 재밌었다. 물론 대체 이건 어떻게 쓰는거야 어떻게 하는거지 하면서 씨름하던 나날들이 떠오르지만 돌이켜보면 재밌었던 것 같다.
참고 링크 : https://github.com/youngsoon12/35-2nd-SeSac-frontend
