본문 바로가기

전체보기335

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.
main-project 13일차 (22.09.20. 물품 공유 리스트 페이지 구현) ✅ 오늘 한 일 물품 공유 리스트 페이지 구현 카테고리, 제목 검색, 공유 상태 총 3가지의 필터를 각각의 컴포넌트로 나눠서 만들었다. (재사용성) API가 존재하지 않아 3중 필터인 기능에 대한 작업은 진행할 수 없었지만 JSON 서버를 사용하여 간단하게 테스트를 진행했다. 페이지 네이션을 구현할 때 라이브러리를 사용하여 구현하는 것보다는 자신만의 코드로 구현해보는 것이 좋다는 멘토님의 말씀을 토대로 구현해보려 했지만 생각이 잘 정리되지 않았고 코드의 길이가 길어 졌으며, 3중필터 + 페이지네이션까지 한번에 진행이 잘 되지 않았다. 결국 react-js-pagination라는 라이브러를 사용하여 구현했다. 해당 라이브러리는 페이지네이션을 JS로 구현할 때 쉽게 사용할 수 있도록 해주는 라이브러리이다. .. 2022. 9. 21.
main-project 12일차 (22.09.19. 메인화면 구성) ✅ 오늘 한 일 메인 페이지 캐러샐 구현 캐러셀(이미지 슬라이드 전환)을 구현할 때 라이브러리를 사용할 것인가? 직접구현해 볼 것인가? 이 두가지에 대해서 고민을 했다. 라이브러리를 사용한다면 쉽고 간단하고 부드럽게 동작할 수 있도록 구현할 수 있을 것 같았다. 하지만, 라이브러리를 사용하지 않았을 때, 구현하는 방법도 알고 싶어서 여러가지 검색과 지식을 통해 직접 구현해보았다. 최근 게시물 목록 구현 메인화면 중간에 최근 게시물이 카드 형태로 8개가 나타나야 했다. 해당 게시글 카드형태는 메인화면에서 뿐만아니라 마이페이지, 물품 공유 리스트 페이지 등 사용되는 곳이 많았다. 이것을 재사용할 수 있도록 고민하고 구현해서 직접 테스트를 거쳐서 여러가지 페이지에서도 사용할 수 있도록 컴포넌트를 생성했다. F.. 2022. 9. 19.
main-project 11일차 (22.09.17. Navbar 구현/다크모드 테스트) ✅ 오늘 한 일 주말간 Python 스터디가 있지만 마냥 프로젝트를 신경쓰지 않을 수 없었기 때문에 조금이나마 구현을 시작했다. Navbar 구현 데스크탑 버전과 786px에서 모바일 환경으로 만들 수 있도록 구현했다. 공유장터, 레저용품 판매점, 로그인, 회원가입 등 페이지 이동을 위해 router설정을 해주었다. 다크모드 테스트 해(라이트모드), 달(다크모드) 아이콘을 클릭시 테마가 전환될 수 있도록 했다. Styled-components의 기능중 ThemeProvider를 사용하여 변수에 지정된 색상을 테마가 바뀜에 따라 변화하도록 설정할 수 있었다. ThemeProvider? context api기반으로 만들어졌으며 Redux와 같이 루트파일에서 글로벌로 지정할 수 있다. 참고자료 styled-c.. 2022. 9. 17.
main-project 8~10일차 (22.09.14 ~ 16. 기획서 작성) ✅ 오늘 한 일 UserFlow 작성 화면 구성, API 설계 시 사이트의 동작 과정을 알기 쉽게 하기 위해 작성했다. miro를 사용하여 작성 Figma 화면 디자인 (PC/Mobile) 와이어프레임을 토대로 PC화면과 반응형(모바일) 화면을 구성했다. (팀원 전체) 반응형 디자인을 할 떄 많은 생각을 했다. 사이즈가 786px이 모바일인 줄 알았지만 사실 태블릿 사이즈였다. 1920 → 786 → 428순으로 웹, 태블릿, 모바일의 크기다. 428이 모바일중 가장 큰 사이즈이다. React 반응형 테스트 반응형을 미디어쿼리에 하나씩 필요한 곳에서 작성을 할지 아니면 컴포넌트를 변경을 해줄 지 많은 고민을 했고, 디자인 틀이 다르게 변화되는 것이 있어서 컴포넌트를 교체하는 형식을 사용하기로 했다. 사용.. 2022. 9. 15.

티스토리툴바