Homile

✅ 오늘 한 일

반응형 전역 설정

• 하나의 페이지에서 컴포넌트를 바꿔야 하는 경우에는 react-responsive 라이브러리를 사용하여 컴포넌트를 바꾸는 형식으로 진행할 수 있었지만 단순히 크기만 변동하는 것이라면 미디어 쿼리로 크기만 바꿔주면 되기 때문에 아래와 같은 라이브러리를 찾게 되었다. (react-responsive를 전역적으로 사용하는 방법도 있을 것이다.)
• styled-media-query를 사용한 반응형
  • 위의 라이브러리를 사용해 보려했다. 하지만, 스타일드 컴포넌트에 전역으로 설정할 수 있어서 사용하지 않았다.
• Styled-Component를 사용한 반응형 구현
  • 아래와 같은 코드로 Theme.js 파일에 사이즈를 지정했다.
  • 사용시 미디어 쿼리에 프롭으로 내려주어 지정된 크기를 숫자대신 변수로 사용할 수 있다.

// Theme.js
// 사이즈 지정
const size = {
  desktop: "1141px",
  tabletL: "1140px",
  tabletS: "860px",
  mobile: "786px",
};

// 테마 프로바이드
export const Theme = {
  desktop: `(min-width: ${size.desktop})`,
  tabletL: `(max-width: ${size.tabletL})`,
  tabletS: `(max-width: ${size.tabletS})`,
  mobile: `(max-width: ${size.mobile})`,
};

// 미디어쿼리 사용 파일
  @media ${(props) => props.theme.tabletL} {
    width: 53.5rem;
  }
  
  @media ${(props) => props.theme.tabletS} {
    width: 36rem;
  }
  
  @media ${(props) => props.theme.mobile} {
    width: 26.75rem;
  }

• 파비콘 / 탭 이름 수정
  • public -> index.html에서 파비콘과 탭에 나올 페이지 이름을 수정했다.
• 게시글 카드에 대여가능 여부에 따른 동그라미의 색상을 변경해주는 것을 구현했다.

메인페이지 반응형 구현

• 모바일용 Nav Dropdown 구현
• 모바일용 Footer 구현
• 모바일용 게시글 카드 구현

공유장터 목록 페이지 반응형 구현

• 게시글 카드 크기변경
• 모바일용 카테고리, 검색, 대여상태 구현

🥲 어려웠던 일

• 미디어 쿼리를 전역으로 설정해서 처음 사용하다보니 적응하는데 시간이 걸렸지만 적응되니 하나하나 크기를 기억하지 않고 프롭스로 변수명을 작성하면 되니 편해졌다.

📌 해야할 일

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

✅ 오늘 한 일

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

• 레저용품 판매점은 유저가 대여하려는 물품이 공유장터에 없을 경우 판매점을 검색 할 수 있는 페이지이다.
• 레저용품 판매점은 관리자만 작성 할 수 있도록 했다.
• 물품 공유 페이지와는 다르게 지도, 주소, 전화번호가 추가된다.
• 지도는 카카오 맵 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와 같은 구조라고 생각하니 사용할 수 있게 됐다.

📌 해야할 일

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