Project/main-project14 main-project Final(최종) (22.10.05 ~ 12. 발표준비 및 데모데이) ✅ 오늘 한 일 배포링크 : https://d1chxyssw587bm.cloudfront.net/ 발표 자료준비 스택 이미지 및 각종 기획 링크 깃헙 업로드 레저용품 판매점 API가 늦게와서 목데이터를 생성해서 화면에 출력할 수 있게함. 발표 전 주말에 API가 와서 목데이터 -> API로 수정 좋아요(관심목록) 기능 API 연결 Route53 비용 발생 가비아에서 구매한 도메인을 사용하기 위해서 사용했다. 하지만, Route53은 프리티어가 적용되지 않는 범위였다. 몇만회 이상 get요청이 오지 않는다면 1달러씩만 내면된다고 한다. 차후 방안으로는 CloudFlare를 사용하는 방법이 있을 것이다. 채팅 기능 구현 (Stomp 사용) 채팅 기능을 백엔드 측에서 API를 생성하여 크롬 플러그인을 사용해 .. 2022. 10. 23. main-project 24~27일차 (22.10.01 ~ 04. API연결 / 배포) ✅ 오늘 한 일 백엔드 API와 연결 메인 공유 물품 리스트 출력 모든 데이터를 불러오는데 성공 한 줄 알았지만 이미지 부분이 403에러가 뜬다 오류 메시지를 찾아보니 aws 이미지를 가져오는 권한이 나에게 존재하지 않다고 한다… 이게 맞는 것인지 백엔드분들께 여쭤보기전에 한번더 여러가지 경우의 수로 해결을 할 수 있도록 도전해봐야겠다. 메인 공유 물품 리스트 필터 출력 카테고리는 잘 나온다 3중 필터로 제목과 대여여부를 판단을 같이해야한다. 검색 필터는 검색된 내용이 제목에 포함되면 해당 게시글이 리스트로 출력돼야 하는데 제목 전체가 맞아야 출력되는 상황이 발생했다. 대여 여부 필터는 어떤 것을 하던 다 나온다. API명세서와 실제 구현된 key값이 달라서 그랬음 페이지네이션 구현 버그: 페이지번호가 .. 2022. 10. 23. main-project 21~23일차 (22.09.28 ~ 30. 판매점 페이지) ✅ 오늘 한 일 등록과 수정의 경우 일단 JSON Server로 진행했다. 후에 formdata로 API에 보내줘야한다고 하니 formdata에 대해서 알아봐야한다. 레저용품 판매점 등록 구현 처음에 toastui 에디터를 사용해서 사용자에게 편의성을 제공하고 싶었으나 수정을 하는 부분에서 에디터에 기본값을 불러오지 못하는 오류가 생겨서 textarea로 변경했다. JS로 사용할 경우 이러한 경우가 종종 발생하는 것 같다. TS로 리팩토링 할 때, 추가해봐야 겠다. 코드를 잘 못 작성해서 카테고리가 고정되는 상황이 발생했지만 코드를 조금 더 세밀하게 봐서 기본값을 지정해주고 변경하는 코드를 작성하지 않았다는 것을 찾아서 해결했다. 작성 후 등록버튼을 누를 경우 작성된 내용이 담긴 상세페이지로 이동하도록 .. 2022. 10. 23. main-project 18~20일차 (22.09.25 ~ 27. 반응형 구현) ✅ 오늘 한 일 반응형 전역 설정 하나의 페이지에서 컴포넌트를 바꿔야 하는 경우에는 react-responsive 라이브러리를 사용하여 컴포넌트를 바꾸는 형식으로 진행할 수 있었지만 단순히 크기만 변동하는 것이라면 미디어 쿼리로 크기만 바꿔주면 되기 때문에 아래와 같은 라이브러리를 찾게 되었다. (react-responsive를 전역적으로 사용하는 방법도 있을 것이다.) styled-media-query를 사용한 반응형 위의 라이브러리를 사용해 보려했다. 하지만, 스타일드 컴포넌트에 전역으로 설정할 수 있어서 사용하지 않았다. Styled-Component를 사용한 반응형 구현 아래와 같은 코드로 Theme.js 파일에 사이즈를 지정했다. 사용시 미디어 쿼리에 프롭으로 내려주어 지정된 크기를 숫자대신 변.. 2022. 10. 21. main-project 17일차 (22.09.24. 판매점 상세 페이지 구현) ✅ 오늘 한 일 레저 용품 판매점 상세 페이지 구현 레저용품 판매점은 유저가 대여하려는 물품이 공유장터에 없을 경우 판매점을 검색 할 수 있는 페이지이다. 레저용품 판매점은 관리자만 작성 할 수 있도록 했다. 물품 공유 페이지와는 다르게 지도, 주소, 전화번호가 추가된다. 지도는 카카오 맵 API를 사용해서 구현했다. 오류 및 해결 오류:작성된 주소를 가져와서 위도, 경도를 찾는 코드를 작성해 위치를 카카오 맵을 이용해서 출력하는 중 오타를 작성하게 되니 이상한 위치에 마커가 찍히게 됐다. 해결: 다음 주소 API를 사용해 오타를 작성할 수 없도록 했다. 오류: TypeError: Cannot read properties of undefined(reading 'maps') 해결: 카카오 API 사이트 도.. 2022. 10. 14. main-project 14~16일차 (22.09.21 ~ 23. AWS S3 이미지 업로드) ✅ 오늘 한 일 AWS S3 이미지 업로드 테스트 처음으로 팀원분들과 얘기를 나눴던 내용은 프론트에서 직접 S3로 이미지를 업로드 한 후 URL을 받아 서버에 넘겨주는 형식으로 작업하기로 했다. 하지만, 위의 방식은 AWS키 값을 프론트에서 직접 관리하기 때문에 보안상으로 좋지 않고, 사용자 측면에서 속도 저하가 일어난다고 한다. 그래서 파일을 백엔드측으로 전달 → 백엔드에서 S3로 이미지 업로드 → URL로 DB에 저장하는 형식으로 서버에서 처리를 해주시기로 했다. 이미지 업로드 방법은 수강하는 과정에서는 존재하지 않았다. 그렇기때문에 서버에서 되지 않을 경우를 생각하여 프론트에서 처리하는 방법도 계속해서 도전했다. 아래의 블로그를 참고하여 코드를 작성해 보고 왜 코드가 동작하는지 이해하여 팀원들에게 .. 2022. 9. 22. 이전 1 2 3 다음
