Team Project (2020-2021)/SeNaJooNa 14

13. 프로젝트 마무리

메인 프로젝트 개요 : OurPlace 장소를 기록하고 공유하는 사이트 OurPlace. 전 프로젝트인 OurStory는 우리들만의 이야기를 기록하는 곳이었고, OurPlace는 장소를 기록하고 공유하는 사이트다. 사용 기술 Frontend : React, Redux(User 회원가입/로그인/로그아웃 부분만) Backend : Node, Express, MongoDB, AWS S3(이미지 업로드) 주요 기능 로그인 및 회원가입 컬렉션, 플레이스 CRUD 컬렉션 좋아요, 플레이스 좋아요 플레이스 스크랩 플레이스 댓글 작성 및 수정 검색 해커톤 프로젝트 개요 : OurStory 공동으로 일기를 작성하고 갤러리를 관리해 추억을 공유할 수 있는 어플리케이션 사용기술 드디어 길었던 프로젝트가 끝났습니다. 중간에 ..

12. 기능 구현 마무리 & 자잘한 버그 수정(2021.03.22 ~ 2021.03.28)

1. Home Page - 카테고리 목록 슬라이더 추가 - 하단 내용 구성 변경 -> 바로가기 연결 예정 2. Category Page - 좋아요 버튼 기능 구현 3. Collection Page - 내가 만든 collection일 경우 새로운 place 만들기 기능 추가 - 내가 만든 collection일 경우 place 제거 기능 추가 4. Place Page - 내가 만든 Place일 경우 place 편집 기능 추가 - 내가 만든 Place일 경우 이미지 추가 / 삭제 기능 추가 - 버튼 CSS 변경 5. Mypage - 내가 만든 collection 목록 - 좋아요 누른 collection, place 목록 보여주기 추가 6. 이후 계획 - 기능 구현 마무리 - 시연 과정에서 찾아내는 버그 수정 ..

11. 끝이 없는 개발 진행 중 (2021.03.15 ~ 2021.03.21)

각자 알아서 맡은 바를 하고 회의시간에 만나 무슨 일을 했는지 공유해서, 추가 및 수정해야하는 부분을 정하며 개발이 진행되고 있습니다. 프로젝트 상태 아무 뜻이 없던 페이지명을 rename하여 의미 부여를 함. SecondPage, ThirdPage, FourthPage -> CategoryPage, CollectionPage, PlacePage CollectionPage, PlacePage에서 지도 기능이 사라져 페이지 구조가 변동됨. modal로 들어있던 form을 분리해서 page로 만듦. Collection과 Place 추가를 위한 empty card를 만듦. user Login, Register 구현 Place를 나의 Collection에 추가하기 댓글 목록 보기, 댓글 작성하기 Mypage에 ..

10. AWS 이미지 업로드 (2021.03.08 ~ 2021.03.14)

AWS 자격 증명 credentials 파일 만들기 : 파일만 만들면 별도의 설정이나 코드는 필요 없음 Mac/Linux : ~/.aws/credentials Windows : C:\Users\USERNAME\.aws\credentials 이미지 업로드 이미지 업로드에 AWS S3를 사용하기 위해 multer, multer-s3와 aws-sdk를 사용함. npm install multer multer-s3 aws-sdk --save를 이용해 설치(--save는 package.json에 자동으로 추가하는 역할) const awssdk = require('aws-sdk'); const multer = require('multer'); const multerS3 = require('multer-s3'); co..

8. OurPlace Backend & Frontend(2021.02.22~2021.03.01)

1. Backend : 심세령, 이나경 Frontend 팀의 UI와 Backend 팀의 개발에 따라 DB가 조금씩 수정되었다. MongoDB 생성, nodejs와 DB 연결, URI 정리, user 로그인 구현, schema collection과 place 부분 2. Frontend : 권나현, 김주연 회의를 통해 'Collection 추가하기' 페이지를 추가하는 등 UI 수정을 했고 Bootstrap 같은 framework를 사용하지 않고 html과 css로 직접 모든 것을 만들어보기로 했다. 여러 페이지에서 자주 사용되는 Components를 먼저 만들었다. 권나현 : Category card, Collection card, Place card 김주연 : Header, Footer Components..

7. 웹 프로젝트 UI 구상 및 DB설계 (2021.02.14 - 2021.02.22)

1. 아이디어 결정 기존의 아이디어가 너무 복잡하여 정체성이 불분명하다는 의견을 나누다가 그 중 하나의 기능(지도, 장소)만을 특정하여 웹사이트로 구현하기로 결정하였고 특정 장소들을 스택 쌓듯이 컬렉션으로 저장하고 그것을 공유하는 웹사이트를 만들고자 하였다. 사용 예시) A,B,C,D의 친구 모임이 있다. - A가 앞으로 친구들과 방문하면 좋은 '숙대 분위기 맛집' 컬렉션과 '서울역 근처 카페' 컬렉션을 B, C, D에게 공유하여 앞으로 방문할 장소를 선정한다. - B는 자신이 알고 있는 '춘천 토박이만 아는 춘천 야경 맛집' 컬렉션을 직접 만들어 A, C, D에게 공유하여 춘천 여행 스케줄을 짠다. 2. UI 구상 프론트엔드 담당 : 권나현, 김주연 3. DB 설계 백엔드 담당 : 심세령, 이나경 4...

6. 팀플에서 깃허브 사용법 및 회의 내용(2021.02.08~2021.02.14)

시작 팀플을 진행하고 해커톤을 기점으로 본격 개발을 시작하면서 Git-Flow를 사용해보자는 의견이 나왔다. 우린 Git-flow를 사용하고 있어요 - 우아한형제들 기술 블로그 안녕하세요. 우아한형제들 배민프론트개발팀에서 안드로이드 앱 개발을 하고 있는 나동호입니다.오늘은 저희 안드로이드 파트에서 사용하고 있는 Git 브랜치 전략을 소개하려고 합니다. ‘배달 woowabros.github.io 결론부터 말하자면 실패했다. 팀원들 모두 깃허브를 사용한 적은 있지만 1) 내가 원하는 행동을 하기 위해선 어떻게 해야하는지 2) 내가 입력한 명령어가 무슨 일을 하는지를 명확하게 알고 있지는 않았다. 한 기능을 여러 명이 구현하다 보니 나중에 합칠 때는 Conflict를 해결하는 것도 많은 시간이 걸렸다. 그래서..

5. DSC KR Hackathon 참여 (21.02.01~21.02.08)

진행상황 Splash 화면 디자인 App UI 구현 구글 로그인 연동 & Firebase auth 연동 모임 목록 모임 목록 display 모임 추가 + 구성원 초대 모임방 나가기 모임방 일기 일기 목록 display 일기 작성 일기 수정 / 삭제 페이지 간의 변수 이동을 위해 Provider를 사용했으나 생각과 다르게 작동함... 해커톤 결과물 구글 기술을 활용해보고자 flutter를 사용하여 안드로이드 앱을 만들었습니다. 구글 로그인을 위해 Firebase Authentication을 이용하였습니다. 데이터베이스는 Cloud Firestore와 이미지 데이터를 저장하기 위해 Cloud Storage를 함께 사용했습니다. youtu.be/f3kaZV4Me3c 앱 실행 화면

4. DSC KR Hackathon 준비(21.01.25~21.02.01)

팀원 : 김주연, 권나현, 이나경, 심세령 팀장 : 김주연 2021.01.25 회의 해커톤에서 앱의 초반 부분(로그인, 친구 초대, 메인화면, 탭별 UI)까지 구현하기 앱의 후반 부분은 해커톤 이후에 진행하기로 결정 Flutter 공부 2021.01.29(금)까지 끝내기 2021.01.30(토)부터 해커톤 개발 시작 2021.01.29 회의 Figma로 프로토타입을 세부적으로 수정해 ver2를 만듦 해커톤에서는 공동일기까지 구현하기로 결정 역할분담 완료 추후에 게시판, 지도, 캘린더까지 추가하는 것은 web으로 진행될 예정. 진행상황 앱 대표 색 (연보라 계열) 프로토타입 재정비 역할분담 권나현 : Figma 프로토타입 재정비, 공동일기 작성 페이지 심세령 : provider 사용하여 구글 로그인 + 모..