Homile

✅ 오늘 한 일 배포링크 : https://d1chxyssw587bm.cloudfront.net/ 발표 자료준비 스택 이미지 및 각종 기획 링크 깃헙 업로드 레저용품 판매점 API가 늦게와서 목데이터를 생성해서 화면에 출력할 수 있게함. 발표 전 주말에 API가 와서 목데이터 -> API로 수정 좋아요(관심목록) 기능 API 연결 Route53 비용 발생 가비아에서 구매한 도메인을 사용하기 위해서 사용했다. 하지만, Route53은 프리티어가 적용되지 않는 범위였다. 몇만회 이상 get요청이 오지 않는다면 1달러씩만 내면된다고 한다. 차후 방안으로는 CloudFlare를 사용하는 방법이 있을 것이다. 채팅 기능 구현 (Stomp 사용) 채팅 기능을 백엔드 측에서 API를 생성하여 크롬 플러그인을 사용해 ..

✅ 오늘 한 일 백엔드 API와 연결 메인 공유 물품 리스트 출력 모든 데이터를 불러오는데 성공 한 줄 알았지만 이미지 부분이 403에러가 뜬다 오류 메시지를 찾아보니 aws 이미지를 가져오는 권한이 나에게 존재하지 않다고 한다… 이게 맞는 것인지 백엔드분들께 여쭤보기전에 한번더 여러가지 경우의 수로 해결을 할 수 있도록 도전해봐야겠다. 메인 공유 물품 리스트 필터 출력 카테고리는 잘 나온다 3중 필터로 제목과 대여여부를 판단을 같이해야한다. 검색 필터는 검색된 내용이 제목에 포함되면 해당 게시글이 리스트로 출력돼야 하는데 제목 전체가 맞아야 출력되는 상황이 발생했다. 대여 여부 필터는 어떤 것을 하던 다 나온다. API명세서와 실제 구현된 key값이 달라서 그랬음 페이지네이션 구현 버그: 페이지번호가 ..

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

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

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

✅ 오늘 한 일 AWS S3 이미지 업로드 테스트 처음으로 팀원분들과 얘기를 나눴던 내용은 프론트에서 직접 S3로 이미지를 업로드 한 후 URL을 받아 서버에 넘겨주는 형식으로 작업하기로 했다. 하지만, 위의 방식은 AWS키 값을 프론트에서 직접 관리하기 때문에 보안상으로 좋지 않고, 사용자 측면에서 속도 저하가 일어난다고 한다. 그래서 파일을 백엔드측으로 전달 → 백엔드에서 S3로 이미지 업로드 → URL로 DB에 저장하는 형식으로 서버에서 처리를 해주시기로 했다. 이미지 업로드 방법은 수강하는 과정에서는 존재하지 않았다. 그렇기때문에 서버에서 되지 않을 경우를 생각하여 프론트에서 처리하는 방법도 계속해서 도전했다. 아래의 블로그를 참고하여 코드를 작성해 보고 왜 코드가 동작하는지 이해하여 팀원들에게 ..

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

✅ 오늘 한 일 메인 페이지 캐러샐 구현 캐러셀(이미지 슬라이드 전환)을 구현할 때 라이브러리를 사용할 것인가? 직접구현해 볼 것인가? 이 두가지에 대해서 고민을 했다. 라이브러리를 사용한다면 쉽고 간단하고 부드럽게 동작할 수 있도록 구현할 수 있을 것 같았다. 하지만, 라이브러리를 사용하지 않았을 때, 구현하는 방법도 알고 싶어서 여러가지 검색과 지식을 통해 직접 구현해보았다. 최근 게시물 목록 구현 메인화면 중간에 최근 게시물이 카드 형태로 8개가 나타나야 했다. 해당 게시글 카드형태는 메인화면에서 뿐만아니라 마이페이지, 물품 공유 리스트 페이지 등 사용되는 곳이 많았다. 이것을 재사용할 수 있도록 고민하고 구현해서 직접 테스트를 거쳐서 여러가지 페이지에서도 사용할 수 있도록 컴포넌트를 생성했다. F..

✅ 오늘 한 일 주말간 Python 스터디가 있지만 마냥 프로젝트를 신경쓰지 않을 수 없었기 때문에 조금이나마 구현을 시작했다. Navbar 구현 데스크탑 버전과 786px에서 모바일 환경으로 만들 수 있도록 구현했다. 공유장터, 레저용품 판매점, 로그인, 회원가입 등 페이지 이동을 위해 router설정을 해주었다. 다크모드 테스트 해(라이트모드), 달(다크모드) 아이콘을 클릭시 테마가 전환될 수 있도록 했다. Styled-components의 기능중 ThemeProvider를 사용하여 변수에 지정된 색상을 테마가 바뀜에 따라 변화하도록 설정할 수 있었다. ThemeProvider? context api기반으로 만들어졌으며 Redux와 같이 루트파일에서 글로벌로 지정할 수 있다. 참고자료 styled-c..

✅ 오늘 한 일 UserFlow 작성 화면 구성, API 설계 시 사이트의 동작 과정을 알기 쉽게 하기 위해 작성했다. miro를 사용하여 작성 Figma 화면 디자인 (PC/Mobile) 와이어프레임을 토대로 PC화면과 반응형(모바일) 화면을 구성했다. (팀원 전체) 반응형 디자인을 할 떄 많은 생각을 했다. 사이즈가 786px이 모바일인 줄 알았지만 사실 태블릿 사이즈였다. 1920 → 786 → 428순으로 웹, 태블릿, 모바일의 크기다. 428이 모바일중 가장 큰 사이즈이다. React 반응형 테스트 반응형을 미디어쿼리에 하나씩 필요한 곳에서 작성을 할지 아니면 컴포넌트를 변경을 해줄 지 많은 고민을 했고, 디자인 틀이 다르게 변화되는 것이 있어서 컴포넌트를 교체하는 형식을 사용하기로 했다. 사용..