Homile

✅ 오늘 한 일

배포링크 : https://d1chxyssw587bm.cloudfront.net/

발표 자료준비

• 스택 이미지 및 각종 기획 링크 깃헙 업로드

레저용품 판매점

• API가 늦게와서 목데이터를 생성해서 화면에 출력할 수 있게함.
• 발표 전 주말에 API가 와서 목데이터 -> API로 수정

좋아요(관심목록) 기능 API 연결

Route53 비용 발생

• 가비아에서 구매한 도메인을 사용하기 위해서 사용했다.
• 하지만, Route53은 프리티어가 적용되지 않는 범위였다. 
• 몇만회 이상 get요청이 오지 않는다면 1달러씩만 내면된다고 한다.
• 차후 방안으로는 CloudFlare를 사용하는 방법이 있을 것이다.

채팅 기능 구현 (Stomp 사용)

• 채팅 기능을 백엔드 측에서 API를 생성하여 크롬 플러그인을 사용해 소켓 테스트까지 맞췄다. 하지만, 채팅기능을 맡았던 팀원이 열심히 했지만 실시간을 데이터가 잘 받아와지지 않은 상황이 있었기에 발표시점이 얼마 남지않아 최대한 구현할 수 있도록 같이 진행했다.
• 여러방면으로 검색을 통해 다양한 코드들로 구성했다가 지웠다가를 반복하며 실시간으로 사용자간 채팅을 주고 받을 수 있도록 구현했다.
• 채팅목록도 로그인한 사용자가 볼 수 있도록했다.
• 위의 기능기 구현 된 후 디자인을 변경했다.

배포사이트 새로고침 시 하얀배경

• num run build 후 라이브 서버로 테스트하기위해 작업한 index.html 파일에 있는 경로들을 상대경로로 만들었던 것이 문제였다. 절대경로로 바꾸니 해결됨

📝 데모데이 질문 및 답변 목록 / 피드백

프론트엔드

• 질문: form data 형식을 사용했을 때 어려움은 없었나요 ?
  • 딱히 어려움은 없었으며 오히려 백엔드와 타입을 맞출 수 있어서 좋았다.
  • 파일크기 및 문자 길이 제한 있었지만 해결했습니다.
• 질문: 웹 소캣은 어떤 것을 사용하셨나요?
  • STOMP 라이브러리를 사용해서 실시간 채팅 기능을 구현했습니다.
• 질문: 반응형은 어떻게 구현하셨나요?
  • 스타일드 컴포넌트와 반응형 웹 라이브러리를 사용해서 구현했습니다.
• 피드백: FE분들 리액트 프레임워크, 최신 라이브러리, 최신 기술을 익히는 것도 중요하지만 SPA 방식에 부합하는 것과 렌더링에 대한 깊이를 조금 더 깊이 공부해보면 좋을 것 같다.

백엔드

• 질문: 소켓 트래픽 테스트를 해보았나요?
  • 트래픽 테스트는 못했습니다.
    • 피드백: 유저가 많아질 경우를 대비해서 트래픽 테스트틀 해보는 것도 좋다.
• 질문: 소켓으로 통신한다고 하셨는데 채팅 메시지를 보낼때 마다 DB에 쌓이는지?
  채팅이 완료된 후에 DB에 쌓이는지?
  • 실시간으로 채팅을 보낼 때 마다 DB에 쌓이게 됩니다.
• 질문: 채팅은 실시간으로 진행되나요?
  • 네! 실시간으로 채팅이 가능합니다. 하지만 현재 이전 대화 목록을 가져오는 API가 없어서 실시간으로만 채팅이 가능합니다.

공통 피드백

1. 자신만의 코드를 장문으로 작성할 수 있어야한다.
2. 프로젝트를 진행할 때 일정 조율을 잘 해야한다.
3. 실패, 성공의 여부를 잘 파악해야한다.

🥲 어려웠던 일

• 실시간 채팅 기능 구현

📌 해야할 일

• 리팩토링
• 자잘한 버그 수정

✅ 오늘 한 일

백엔드 API와 연결

메인 공유 물품 리스트 출력

• 모든 데이터를 불러오는데 성공 한 줄 알았지만 이미지 부분이 403에러가 뜬다 오류 메시지를 찾아보니 aws 이미지를 가져오는 권한이 나에게 존재하지 않다고 한다… 이게 맞는 것인지 백엔드분들께 여쭤보기전에 한번더 여러가지 경우의 수로 해결을 할 수 있도록 도전해봐야겠다.

메인 공유 물품 리스트 필터 출력

• 카테고리는 잘 나온다
• 3중 필터로 제목과 대여여부를 판단을 같이해야한다.
  • 검색 필터는 검색된 내용이 제목에 포함되면 해당 게시글이 리스트로 출력돼야 하는데 제목 전체가 맞아야 출력되는 상황이 발생했다.
• 대여 여부 필터는 어떤 것을 하던 다 나온다.
  • API명세서와 실제 구현된 key값이 달라서 그랬음

페이지네이션 구현

• 버그: 페이지번호가 3인상태에서 카테고리를 변경할 경우 페이지번호를 1번으로 바꿔주지 않아서 무한로딩 버그 있음.

배포 및 도메인 연결

• S3 → CloudFront → Route53 → gabia

레저용품 공유 상세페이지 API 연결

• 상세페이지 내용 출력
• 대여상태 변경 (patch) 기능이 안됨 500에러
• 채팅으로 연결되지 않음 (roomId가 null로 출력)

마이페이지 내가 쓴 게시글 API 연결

🥲 어려웠던 일

• 도메인을 연결하는 과정에서 가비아에서 구매한 도메인으로 접속시 페이지가 잘 열리지 않는 일이 있다... 이유는 클라우드 프론트에서 배포방식을 캐시방식으로 잡힌것 같다.. 이를 해결해야 가비아 도메인을 사용할 수 있다.

📌 해야할 일

• 가비아 도메인 캐시배포 해결하기...
• 채팅기능 붙이기
• 발표준비

✅ 오늘 한 일

등록과 수정의 경우 일단 JSON Server로 진행했다. 후에 formdata로 API에 보내줘야한다고 하니 formdata에 대해서 알아봐야한다.

레저용품 판매점 등록 구현

• 처음에 toastui 에디터를 사용해서 사용자에게 편의성을 제공하고 싶었으나 수정을 하는 부분에서 에디터에 기본값을 불러오지 못하는 오류가 생겨서 textarea로 변경했다.
• JS로 사용할 경우 이러한 경우가 종종 발생하는 것 같다. TS로 리팩토링 할 때, 추가해봐야 겠다.
• 코드를 잘 못 작성해서 카테고리가 고정되는 상황이 발생했지만 코드를 조금 더 세밀하게 봐서 기본값을 지정해주고 변경하는 코드를 작성하지 않았다는 것을 찾아서 해결했다.
• 작성 후 등록버튼을 누를 경우 작성된 내용이 담긴 상세페이지로 이동하도록 했다.

레저용품 판매점 수정 구현

• 판매점 등록 페이지랑 흡사하지만 디폴트값을 지정해야 했다. 하지만 위에서 적은 오류가 생겨서 textarea로 변경했다 ;ㅅ;
• 수정 후 수정버튼을 누를 경우 수정된 페이지로 이동하도록 했다.

드롭다운 애니메이션 수정

• 문제: 드롭다운이 너무 길게 늘어졌다가 줄어드는 문제 있었다.
• 해결:
  • 키프레임 대신 transition을 사용했다.
  • 높이 값을 0과 15.725rem으로 주는 데 transition으로 높이 변경하는데 걸리는 시간을 지정했다.

// 기본 코드
height: ${props => props.height};
  animation-name: ${props => props.class};
  animation-duration: 1.3s;

@keyframes up {
    0% {
      height: 15.725rem;
    }
    100% {
      height: 0px;
    }
  }

  @keyframes down {
    0% {
      height: 0px;
    }
    100% {
      height: 15.725rem;
    }
  }

// 변경 코드
height: ${(props) => (props.className === "up" ? "0px" : "15.725rem")};
transition: height 1.3s;

🥲 어려웠던 일

• formdata를 처음 작성하다보니 테스트를 하는 과정에서 많은 오류를 발생했지만 결국 어떻게하는지 알아냈다.
• 애니메이션이 길게 늘어지는 오류가 있었지만 키프레임과 애니메이션에 대해 알아보니 해결됐다.

📌 해야할 일

• 백엔드 API와 프론트 연결
• 배포
• 발표준비

✅ 오늘 한 일

반응형 전역 설정

• 하나의 페이지에서 컴포넌트를 바꿔야 하는 경우에는 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에 이미지 업로드하기가 진짜 너무 어려웠다. 블로그를 찾아보니 생략되는 것과 오타가 너무 많았다. 그래도 다양한 검색을 통해 해결할 수 있었다.

📌 해야할 일

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