Homile

✅ 오늘 한 일

레저 용품 판매점 상세 페이지 구현

• 레저용품 판매점은 유저가 대여하려는 물품이 공유장터에 없을 경우 판매점을 검색 할 수 있는 페이지이다.
• 레저용품 판매점은 관리자만 작성 할 수 있도록 했다.
• 물품 공유 페이지와는 다르게 지도, 주소, 전화번호가 추가된다.
• 지도는 카카오 맵 API를 사용해서 구현했다.
• 오류 및 해결
  • 오류:작성된 주소를 가져와서 위도, 경도를 찾는 코드를 작성해 위치를 카카오 맵을 이용해서 출력하는 중 오타를 작성하게 되니 이상한 위치에 마커가 찍히게 됐다.
  • 해결: 다음 주소 API를 사용해 오타를 작성할 수 없도록 했다.
  • 오류: TypeError: Cannot read properties of undefined(reading 'maps')
  • 해결: 카카오 API 사이트 도메인을 추가 (로컬환경은 추가했지만 배포환경은 추가하지않음)

• 참고자료
  • 카카오 API: https://apis.map.kakao.com/
  • 다음 주소 API: https://postcode.map.daum.net/guide

🥲 어려웠던 일

• 카카오 맵 API를 처음 써보는 것은 아니었지만 사소한 실수가 있었다. API를 활용할 수 있도록 배포환경의 주소도 사이트 도메인에 추가를 하지 않았다. 추가해서 해결했다.

📌 해야할 일

• 반응형 구현
• 레저용품 판매점 등록 구현
• 레저용품 판매점 수정 구현
• 백엔드 API와 프론트 연결

✅ 오늘 한 일

AWS S3 이미지 업로드 테스트

• 처음으로 팀원분들과 얘기를 나눴던 내용은 프론트에서 직접 S3로 이미지를 업로드 한 후 URL을 받아 서버에 넘겨주는 형식으로 작업하기로 했다.
• 하지만, 위의 방식은 AWS키 값을 프론트에서 직접 관리하기 때문에 보안상으로 좋지 않고, 사용자 측면에서 속도 저하가 일어난다고 한다.
• 그래서 파일을 백엔드측으로 전달 → 백엔드에서 S3로 이미지 업로드 → URL로 DB에 저장하는 형식으로 서버에서 처리를 해주시기로 했다. 이미지 업로드 방법은 수강하는 과정에서는 존재하지 않았다. 그렇기때문에 서버에서 되지 않을 경우를 생각하여 프론트에서 처리하는 방법도 계속해서 도전했다.
• 아래의 블로그를 참고하여 코드를 작성해 보고 왜 코드가 동작하는지 이해하여 팀원들에게 알려줄 수 있을 때 까지 계속 파헤쳐봤다.
• Error
  • AccessControlListNotSupported: The bucket does not allow ACLs
    위와 같은 에러가 나왔는데 해결 방안으로는 ACL 비활성화 → ACL 활성화를 해주니 해결되었다.
  • 이미지 업로드는 되지만 URL을 받아오는 것과 업로드된 이미지를 삭제하는 것이 되지 않는다.

참고자료

1, 2번 둘다 참고해야함

모달 구현

• 게시글 작성, 수정, 삭제, 회원가입 등 사용자에게 메시지를 전달해야하는 경우에 사용할 수 있도록 재사용이 가능한 모달창을 구현했다.

🥲 어려웠던 일

• AWS S3에 이미지 업로드하기가 진짜 너무 어려웠다. 블로그를 찾아보니 생략되는 것과 오타가 너무 많았다. 그래도 다양한 검색을 통해 해결할 수 있었다.

📌 해야할 일

• 판매점 상세 페이지 구현
• 판매점 게시글 작성 페이지 구현
• 판매점 게시글 수정 페이지 구현
• 판매점 게시글 리스트 페이지 구현

✅ 오늘 한 일

물품 공유 리스트 페이지 구현

• 카테고리, 제목 검색, 공유 상태 총 3가지의 필터를 각각의 컴포넌트로 나눠서 만들었다. (재사용성)
• API가 존재하지 않아 3중 필터인 기능에 대한 작업은 진행할 수 없었지만 JSON 서버를 사용하여 간단하게 테스트를 진행했다.
• 페이지 네이션을 구현할 때 라이브러리를 사용하여 구현하는 것보다는 자신만의 코드로 구현해보는 것이 좋다는 멘토님의 말씀을 토대로 구현해보려 했지만 생각이 잘 정리되지 않았고 코드의 길이가 길어 졌으며, 3중필터 + 페이지네이션까지 한번에 진행이 잘 되지 않았다.
• 결국 react-js-pagination라는 라이브러를 사용하여 구현했다.
  • 해당 라이브러리는 페이지네이션을 JS로 구현할 때 쉽게 사용할 수 있도록 해주는 라이브러리이다. 타입스크립트로 작업을 했다면 사용하지 했을 수도 있다 .(타입스크립트도 사용가능한 라이브러리 존재)

🥲 어려웠던 일

• 페이지네이션을 나만의 코드로 구현하는 것이 어려웠고 실패했다. 다음에 성공할 수 있도록 로직을 조금 더 공부해야겠다.

📌 해야할 일

• AWS S3로 이미지 업로드하기

✅ 오늘 한 일

메인 페이지 캐러샐 구현

• 캐러셀(이미지 슬라이드 전환)을 구현할 때 라이브러리를 사용할 것인가? 직접구현해 볼 것인가? 이 두가지에 대해서 고민을 했다.
• 라이브러리를 사용한다면 쉽고 간단하고 부드럽게 동작할 수 있도록 구현할 수 있을 것 같았다. 하지만, 라이브러리를 사용하지 않았을 때, 구현하는 방법도 알고 싶어서 여러가지 검색과 지식을 통해 직접 구현해보았다.

최근 게시물 목록 구현

• 메인화면 중간에 최근 게시물이 카드 형태로 8개가 나타나야 했다.
• 해당 게시글 카드형태는 메인화면에서 뿐만아니라 마이페이지, 물품 공유 리스트 페이지 등 사용되는 곳이 많았다.
• 이것을 재사용할 수 있도록 고민하고 구현해서 직접 테스트를 거쳐서 여러가지 페이지에서도 사용할 수 있도록 컴포넌트를 생성했다.

Footer 구현

• Footer도 데스크탑, 모바일 버전 두가지 형태로 존재했다.
• 간단하게 작게 만드는 것이 아닌 Footer에 담긴 내용의 위치가 변화해야 했기 때문에 2가지 버전으로 컴포넌트를 구성해서 Footer를 구현했다.

🥲 어려웠던 일

• 자주 사용되는 틀을 재사용 할 수 있도록 생각하면서 컴포넌트를 구현하는 것이 어려웠다.

📌 해야할 일

• 물품 공유 리스트 페이지 구성
• AWS S3로 이미지 업로드하기

✅ 오늘 한 일

주말간 Python 스터디가 있지만 마냥 프로젝트를 신경쓰지 않을 수 없었기 때문에 조금이나마 구현을 시작했다.

Navbar 구현

• 데스크탑 버전과 786px에서 모바일 환경으로 만들 수 있도록 구현했다.
• 공유장터, 레저용품 판매점, 로그인, 회원가입 등 페이지 이동을 위해 router설정을 해주었다.

다크모드 테스트

• 해(라이트모드), 달(다크모드) 아이콘을 클릭시 테마가 전환될 수 있도록 했다.
• Styled-components의 기능중 ThemeProvider를 사용하여 변수에 지정된 색상을 테마가 바뀜에 따라 변화하도록 설정할 수 있었다.
• ThemeProvider?
  • context api기반으로 만들어졌으며 Redux와 같이 루트파일에서 글로벌로 지정할 수 있다.
• 참고자료

🥲 어려웠던 일

• ThemeProvider를 처음 사용해봐서 힘들었지만 Redux와 같은 구조라고 생각하니 사용할 수 있게 됐다.

📌 해야할 일

• 메인 페이지 구성
• 물품 공유 리스트 페이지 구성

✅ 오늘 한 일

UserFlow 작성

• 화면 구성, API 설계 시 사이트의 동작 과정을 알기 쉽게 하기 위해 작성했다.
• miro를 사용하여 작성

Figma 화면 디자인 (PC/Mobile)

• 와이어프레임을 토대로 PC화면과 반응형(모바일) 화면을 구성했다. (팀원 전체)
• 반응형 디자인을 할 떄 많은 생각을 했다. 사이즈가 786px이 모바일인 줄 알았지만 사실 태블릿 사이즈였다.
  1920 → 786 → 428순으로 웹, 태블릿, 모바일의 크기다. 428이 모바일중 가장 큰 사이즈이다.

React 반응형 테스트

• 반응형을 미디어쿼리에 하나씩 필요한 곳에서 작성을 할지 아니면 컴포넌트를 변경을 해줄 지 많은 고민을 했고, 디자인 틀이 다르게 변화되는 것이 있어서 컴포넌트를 교체하는 형식을 사용하기로 했다.
• 사용된 라이브러리: React-responsive
  • 반응형 미디어 쿼리를 편하게 해주며 크기에 따라 출력되는 컴포넌트를 정할수 있는 라이브러리이다.

🥲 어려웠던 일

• UserFlow 작성 시 비회원, 회원, 관리자가 접속할 수 있는 페이지와 기능을 구별하여 작성하는 것이 어려웠다.
• 디자인을 할 때, 반응형을 고려하여 디자인하는 것이 처음이라 실수를 했다.
• 처음 사용하는 React-responsive 라이브러리에 적응하는데 어려움을 겪었지만 몇번 시도해보니 충분히 사용할 수 있었고 팀원들에게도 알려줄 수 있었다.

📌 해야할 일

• 디자인된 화면을 실제 코드를 작성하여 화면에 출력해야한다.