우리동네 중고서적 대여 서비스 '동네북'(Main-project)
1.[Main-Project] Day 1 - 팀 편성 및 팀 빌딩, 프로젝트 아이디어 회의, 웹앱 로고
전일 프리 프로젝트가 끝나자마자 바로 메인 프로젝트가 시작되었다. 당일에 프론트엔드, 백엔드 전체 인원이 산업군 별로 나눠져 있는 ZEP에 모였고, 우리가 약 1시간이라는 시간동안 직접 팀원을 모아서 팀을 짜야했다. 감사하게도 어느정도 프로젝트 아이디어를 생각하셨던 분
2.[Main-Project] Day 2 - 사용자 요구사항 정의서, git branch 컨벤션, 피그마 작업
2일차는 아래와 같은 사항들이 진행되었다. 사용자 요구사항 정의서(구체적으로 작성 및 확정)git branch 컨벤션(pr 병합 방식, branch 관리 정하기)피그마 작업(화면 구성, user flow 정리 및 확인)필요한 api 프론트엔드 측에서 작성map 검색(전
3.[Main-Project] Day 3 - Figma, 개발 환경 정하기 , component 정하기, 소통
📗 Pre-Project, Day 3 > * Figma userflow와 백엔드 데이터 빌딩 고려하여 수정하기 Figma 구체화하여 작업(modal, page, input, button) 메인 로고 컬러, font 결정 component 결정하고 css 결정 개발
4.[Main-Project] Day 4 - 구현 기능 리스트화, P&R, 개발 환경 세팅, 멘토링, sprint
구현 기능 리스트화하기P&R 멘토링사용자 요구사항 정의서 구체화 \- 메인페이지 💅 레이아웃 및 스타일 페이지 로드: get 요청 책 선택하기: 도서 상세 조회 페이지로 이동 책 등록하기: 로그인 정보 확인 후 글작성페이지 or 로그인 페이지로
5.[Main-Project] Day 5(주말) - hero section, map api 재조정, 사용자 요구사항 정의서 구체화
hero section 추가하기 + 피그마 작업백엔드와 map api 재조정사용자 요구사항 정의서 구체화 → 유저의 입장에서 생각하다보니 hero section을 추가하면 좋겠다는 생각이 들었고, 팀원분들도 모두 긍정적으로 생각하셔서 바로 피그마 작업에 들어가게 되었다
6.[Main-Project] Day 6(주말) - 코딩 컨벤션, Router, 반응형 웹앱, TypeScript
코딩 컨벤션 - 프론트엔드 코딩 규칙 정하기Router 정리공통 아이콘 정리(react icons)반응형 피그마Router 정리하기TypeScript 개인 공부→ 본격적으로 기능 구현을 하기 전에 깔끔하고 팀원 모두가 이해하기 쉬운 코드 작성을 위해 프론트엔드의 코딩
7.[Main-Project] Day 7 - 마일스톤, github issue,칸반보드, CSS 작업(onClick, navigate, tab)
마일스톤 정하기뷰 및 기능 구현 역할 재분담github issue칸반 보드 정리하기 CSS 작업styled component 로 react icon css 적용하기→ 이제 본격적으로 작업에 들어가기 전에 milestone을 정하기로 하였다. 보완과 배포, 에러 해결을
8.[Main-Project] Day 8 - Kakao map API 띄우기, 카카오 디벨로퍼스 앱 연동하기, 지도 라이브러리, 에러 해결
마이페이지 수정 페이지 모달창 구현하기hero section 라우터 설정해두기카카오맵 키 발급하고 연동시키기지도 검색 페이지에 카카오맵 띄우기지도 라이브러리 사용하기→ Day 8부터 '지도 검색' 구현에 들어가는데, 카카오맵 사용에 앞서서 먼저 카카오 디벨로퍼스에 앱
9.[Main-Project] Day 9~10 - Kakao map API 현재 위치 표시, Geolocation API, 지도 확대 축소 불가 기능, 마커, 커스텀 오버레이
유저의 현재 위치 마커로 표시하기지도 확대,축소 불가 기능 구현하기드래깅 이벤트 적용하기지도 검색창 및 현재 위치 버튼 스타일 구현주변 상인 여러개의 마커 보여주기커스텀 오버레이 구현 및 클릭 이벤트 적용하기→ 가장 먼저, 카카오맵에서 유저의 현재 위치를 가져오고 표시
10.[Main-Project] Day 11 - Kakao map API 검색창 로직 구현, 현재 위치 버튼 기능 구현, 아래에서 위로 올라오는 css animation, lottie animation
로딩 애니메이션 구현검색창 입력 구현 - 책 검색시 해당 되는 책이 없다면 기존 상인마커 및 커스텀 레이아웃 삭제하기리스트 구현 - data가 있을 시 하단에 리스트가 생성되게 구현(아래에서 위로 올라오는 css animation)현재 위치 버튼 기능 구현 - 현재 위
11.[Main-Project] Day 12(주말) - Kakao map API 통신 호출 구현 및 테스트
검색 페이지 - 섹터당 상인 위치 API 통신 테스트 진행지도 섹터당 책의 총 개수, 책 목록 API 호출 구현지도에서 상인 섹터 클릭시 상인 리스트 API 호출 구현→ 백엔드 측에서 API 명세서가 어느정도 완성되어 제대로 통신이 되는지 확인해보는 시간을 가졌다. 위
12.[Main-Project] Day 13(주말) - Kakao map API 책 상태값, 검색창 로직 추가, 지도 확대 축소 기능 레벨 지정, 커스텀 오버레이 수정
책 검색 - 책 상태 리스트 구현(책 이름, 대여상태, 상인) 커스텀 오버레이 - 상인 수에 따른 오버레이 크기 변경(한자리수, 두자리수, 세자리수 기준)검색창 - 빈칸 상태로 검색 시, 현재 위치 주변 상인 정보 불러오기 로직 추가지도 레벨 - 1~5까지 확대/축소
13.[동네북] 구글 플레이 스토어 등록을 위한 개인 정보 처리 방침
< 친구네다락방 >('https://dongne-book.com'이하 '동네북')은(는) 「개인정보 보호법」 제30조에 따라 정보주체의 개인정보를 보호하고 이와 관련한 고충을 신속하고 원활하게 처리할 수 있도록 하기 위하여 다음과 같이 개인정보 처리방침을
14. [동네북] 구글 플레이 스토어에 pwa 앱 출시하기 성공 !
📲 구글 플레이 스토어에 우리의 프로젝트를 출시해보자 > → 드디어 약 4주간의 프로젝트가 끝났다. 워낙 짧은 시간 동안 기획, 디자인, 협업, 기능 구현, 배포, 발표 준비까지 많은 것들을 진행하다보니 메인 프로젝트 중간부터 블로깅을 할 수 없었다. 메인 프로젝
15.[Main-Project] 이미지 등록시, 이미지 리사이징 함수 추가
이미지 리사이징
17.[동네북] Google Lighthouse로 웹사이트 성능 측정하기
👉🏻 Lighthous는 Google Chrome에서 제공하는, 웹앱의 품질 개선에 도움을 주는 자동화 도구이다. 성능, 접근성, SEO 등 사이트에 대한 전반적인 진단을 할 수 있다. 이번에는 우리의 동네북 서비스를 Lighthous로 진단하고 웹 사이트 성능 최