re-collect-client

📝 Recollect

< Recollect : re + collect >

recollect : 기억해내다, "모아서 + 다시보다"

늘어만가는 수많은 북마크, 정리해보겠다고 만든 북마크 폴더들...

혹시 읽지 않은 북마크들이 쌓여만 가고 있진 않으신가요?

걱정하지마세요. 비슷한 주제의 북마크를 콜렉션에 담아 간직하세요.

읽지 않은 북마크들은 알림을 통해 Recollect하실 수 있습니다!

• 여기저기 흩어진 북마크를 한눈에 모아볼 수 있어요.
• 북마크를 드래그&드롭으로 쉽고 빠르게 정리해봐요.
• 비슷한 주제의 북마크는 하나의 카테고리에 담아요.
• 저장만 해두고 다시 읽지 않았던 북마크는 알림을 통해 다시 모아볼 수 있어요.
• 잊지 않고 다시 볼 수 있게, 일주일에 한 번 메일로 알려드려요.
• 다른 유저들의 북마크 콜렉션을 탐험하고, 비슷한 관심분야의 유저를 팔로우해요. (beta)

📎 배포링크 /QR

https://recollect.today/

🛠 사용한 기술 스택

🏛 Architecture

Client-Side flow chart [static]

Server-Side flow chart

주요기능별 시연 GIF

회원가입, 로그인, 비밀번호 찾기, 로그아웃

회원가입

로그인

비밀번호 찾기

로그아웃

---

랜딩 페이지

스크롤 애니메이션, 스크롤 투 탑

반응형 뷰포트

---

콜렉트 페이지 (북마크 페이지)

북마크 추가

드래그 앤 드롭

북마크 수정

북마크 삭제

카테고리 수정

카테고리 삭제

북마크 링크로 이동

반응형 뷰포트, 북마크 하단팝업

읽지않은 북마크 recollect

북마크 검색

---

프로필 페이지

유저네임 변경, 직장정보, 깃허브주소 변경, my favorite recollect 확인

비밀번호 변경 팝업

회원 탈퇴 팝업

반응형 뷰포트

---

익스플로어 페이지

페이지 진입

반응형 뷰포트

---

이메일 알림

읽지 않은 북마크 recollect

비밀번호 찾기 인증번호

🌝 우리를 소개합니다

이름(깃헙링크)	Position & Role
김시윤	💻 Front-end, 🌟 Team leader
김지우	💻 Front-end, ⏰ Time Manager
박유빈	💻 Back-end, 📝 Record Manager
이석준	💻 Front-end, 🗣 Communication Manager

프로젝트 회고

김시윤

Q. React-Slick 라이브러리를 사용한 이유

A. 이번 프로젝트에서 익스플로어 페이지를 구현하며 양옆 화살표 버튼을 클릭하며 펼쳐진 카드를 볼 수 있는 케러셀을 구현했습니다. 기능구현을 위해 구글링 해본 결과 직접 구현할 수 있는 방법과, 라이브러리를 이용해서 구현할 수 있는 방법이 있었습니다.

크게 어려워보이지 않는 기능같다는 생각에 직접구현을 시도하였습니다. 슬라이드를 담을 컨텐츠를 만들고, 클릭 이벤트가 발생할때마다 컨텐츠의 margin-left에 값을 더하거나 빼서 노출되는 카드를 이동시켜줬습니다. 마지막으로 transformX속성을 적용하여 카드가 더 부드럽게 이동되도록 하였습니다.

하지만 width값에 따른 반응형 디자인을 구현하는 과정에서 어려움이 생겼습니다. 화면 크기에 따라 노출되는 카드의 수를 조정하고 margin-left속성에 적용값을 변경하다보니 동하는게 부드럽지 않았고, 캐러셀이 많아거나 애매한 크기의 경우에는 좌우 대칭이 맞질 않았습니다. 정해진 시간동안 구현해야 하는 기능들은 많은데, 캐러셀 구현에서만 시간이 많이지체되는 것 같다는 생각이 들어 라이브러리의 힘을 빌려보기로 했습니다.

React-Slick 라이브러리를 이용하여 위 문제들을 해결할 수 있었습니다. ( 기본요소들을 커스터마이징하여 디자인하는 시간이 꽤 걸렸지만 ) 반응형 문제를 쉽게 해결할 수 있었습니다. 더불어 화면에 노출시킬 카드의 수, 클릭을 할때마다 넘길 카드의 수 등 많은 옵션들을 쉽게 설정할 수 있어서 훨씬 부드럽게 동작하는 캐러셀을 구현할 수 있었습니다.

김지우

Q. 프로젝트를 하면서 가장 신경썼던 부분은 무엇인가요?

A. 주제를 선정하고 프로젝트를 진행하는 동안 계속해서 고민했던 것은 우리의 서비스가 실제로 상용화되기에도 좋을 편리한 서비스면 좋겠다는 것이었습니다. 그래서 평소에 사용자의 입장에서 '이런 서비스가 있다면 좋을텐데', '이런 기능이 추가되면 더 편리할텐데'라고 생각했던 것들을 떠올려보았습니다.

개발공부를 시작하면서 다시보고 싶은 웹컨텐츠나, 자주 들어가는 사이트들을 북마크해야 할 일이 늘어났습니다. 브라우저 상단 북마크탭에 저장하거나, 메모장에 링크를 걸어두거나, 메세지 나에게 보내기 등등 여러 방법을 써보았지만, 흩어진 북마크를 찾아 오랜시간 헤매게 되는 불편함이 있었습니다. 심지어 저장해두고도 잊어버려 다시 보지 못하는 경우도 생겼습니다.

그래서 북마크를 보기 좋게 관리할 수 있고, 저장해두고 잊어버리는 일 없이 알림을 받아볼 수 있는 서비스를 직접 만들어보기로 했습니다. 저를 포함해 북마크 기능을 자주 사용하는 팀원들의 경험을 바탕으로 전체적인 웹의 기능을 구체화하고, 사용자에게 더욱 편리한 서비스가 될 수 있도록 UX를 고려한 UI를 만들기 위해 노력했습니다.

단순히 북마크를 추가하고 삭제하는 기본 기능을 구현하는 것에 그치지 않고, 버튼의 위치, 글자, 색상, 화면의 비율 등을 적절히 조정하는 일에 시간을 들였습니다. 또한, 웹페이지 내에 읽지않고 방치된 북마크를 알려주는 알림배너를 구현한 것 외에, 일주일에 한 번 이메일로도 알려주는 이메일 알림기능을 추가해 매번 직접 웹페이지로 들어와야하는 사용자의 불편함을 줄일 수 있도록 했습니다.

정해진 시간내에 기획,디자인,기능구현을 모두 해야해서 아직 부족한 면이 있다고 생각하지만, 저를 비롯한 팀원들 모두 서비스를 만드는 사람, 개발하는 사람의 입장이 아닌 사용자의 입장에서 편리한 서비스를 만드는 일의 중요성에 대해 공감하고 있기 때문에 프로젝트를 더욱 개선해나갈 계획입니다. ([email protected] 피드백은 언제나 환영입니다☺️)

Q. 프로젝트를 진행하면서 가장 어려웠던 부분이 무엇인가요?

A. 당연한 이야기지만, 혼자서 모든 부분을 맡아서 진행하거나, 모든 부분을 함께 구현하는 것이 비효율적인 진행방식임을 앞선 2주 프로젝트에서 경험했기 때문에, 이번 프로젝트에서는 팀원간 컴포넌트 단위, 혹은 페이지 단위로 분업을 해서 코드를 작성하기로 했습니다. 그리고 사전 목업, 프로토타입 제작 단계에서 UI 컴포넌트들을 최대한 통일성있고 꼼꼼하게 만들고, css 루트설정, 변수와 메소드명 규칙을 지키면서 작업을 진행했습니다. 그럼에도 불구하고 코드구조가 복잡해지면서 서로의 코드를 한 번에 이해하는데에 어려움이 있었습니다. 게다가 정해진 시간 안에 각자 맡은 기능구현에 집중하면서, 동시에 다른 팀원의 코드까지 모두 파악하는 것은 쉬운 일이 아니었습니다.

하지만 큰 범위로 나누어 작업한 코드를 다시 세분화해서 재분업을 하고 팀원의 코드에 추가적인 로직을 덧붙여야했을 때, 클라이언트와 서버 코드의 싱크를 맞출 때는 서로의 코드를 충분히 이해해야 했습니다. 그럴때마다 각자의 코드를 설명하는 리뷰시간을 가지거나, 궁금한 점을 자유롭게 물어보았습니다.

또, 팀원이 제작한 컴포넌트를 가져와 재활용해야하는 경우가 있었는데, 일부분만을 변형하는 일이 쉽지 않았습니다. 팀원이 이미 사용하고 있는 컴포넌트 구조와 css를 해치지 않으면서 제가 맡은 페이지에도 삽입해 적용해야했기 때문입니다. 처음에는 비슷한 구조의 컴포넌트를 새로 만들어서 독립적으로 사용할까 고민했지만, 팀원들과 이런 문제상황을 공유하고 상의한 끝에 해당 컴포넌트를 여러 곳에서 사용가능하도록 코드를 수정하여 문제를 해결했습니다.

혼자가 아닌 여럿이서 작업을 할 때 생기는 문제점들을 경험하면서, 다른 사람이 작성한 코드를 이해하는 것, 알아보기 쉬운 코드를 작성하는 것, 재활용하기 쉽게 컴포넌트를 만드는 것의 중요성을 느낄 수 있었습니다.

이석준

Q. 프로젝트를 진행하면서 가장 어려웠던 부분이 무엇인가요?

A. 프로젝트 초기에 리덕스에 대한 지식을 잊어서 리덕스를 통한 상태관리가 가장 어려울 줄 알았습니다. 하지만 제게 더 어려웠던 것은 리액트 훅입니다. useEffect가 어떤 시기에 동작하는지 감이 잡히지 않아서 몇 시간동안 useEffect에 대해 제대로 다시 공부했던 기억이 있습니다. 또한 드래그앤 드롭 기능을 구현하면서 useRef라는 훅에대해 처음 응용해보게 되었습니다. 생소하고 어려웠지만 공부해 습득해나가는 과정이 즐거웠습니다.

Q. 프로젝트를 진행하면서 특별히 신경썼던 부분이 있나요?

A. 비회원 사용자가 자연스럽게 북마크 관리기능을 사용해 볼 수 있게 콜렉트페이지 게스트모드 기능구현에 신경을 많이 썼습니다. 처음 SR단계에서 팀원 모두의 생각이 일치했던 부분이 비회원도 저희 서비스를 자연스럽게 사용할 수 있어야 한다는 점이었습니다. 비회원이 추가하는 북마크는 서버에 요청을 보내지 않고 리덕스 스토어에 저장되게 됩니다. 북마크를 수정, 삭제할 때도 스토어에 있는 데이터를 조회하고 찾아서 수정,삭제가 이뤄지게 됩니다. 이 부분을 구현하면서 마치 sequelize로 할 수 있는 일을 제가 복잡하게 직접 작성하고 있다는 생각이 들었습니다. 코드가 복잡해질 수록 오류가 많아졌고 애를 먹었지만 마침내 구현했을 때 뿌듯함을 느꼈습니다.프로젝트가 끝나더라도 리팩토링을 통해서 게스트 모드를 구현하기 위해 다른 방법이 있는지 찾아보고 개선해 나갈 예정입니다.

박유빈

🗒 Wiki

https://github.com/codestates/re-collect-client/wiki

⚙️ Server repository

https://github.com/codestates/re-collect-server

더 자세한 내용은 아래 링크에서 확인

https://codestates.notion.site/9-Collector-Recollect-3fcb48a9a7a8422a8c615619382851b3