📌 2020. 7 - 2020. 12 개인 프로젝트

<aside> 🖊️ 마음에 드는 책의 글귀를 이미지 위에 기록, 편집하여 업로드할 수 있는 소셜 웹 어플리케이션

</aside>

🚩 기획 목표 및 의도

• 처음부터 끝까지 100% 기여할 수 있는 프로젝트를 꼭 하나는 제작하고 싶었습니다.
• 아이디어는 올해부터 시작한 독서모임에서 얻었습니다. 각자 읽은 책에서 가장 인상 깊었던 구절들을 더 오래 기억할 수 있도록 이미지 카드로 만들고 서로 공유할 수 있는 소셜 웹 어플리케이션을 만들기로 했습니다. 같은 책을 읽더라도 독자마다 전부 다른 대목과 문장에서 마음의 울림을 얻기 때문입니다.
• 갈피에 올라오는 포스트는 작가의 문장으로 채워지지만, 동시에 그 문장을 고른 '나'를 은은히 드러낼 수 있는 소셜 웹 어플리케이션 입니다.

🛠 스택

FE

ReactJS / Redux / Javascript(ES6) / HTML5 / CSS3 / Axios

BE

NodeJS / Express / MongoDB(mongoose) / Redis(RedisLab) / AWS S3

🏷 홈페이지

🧰 깃허브

✨ 특징

<aside> 🖊️ 인용할 구절을 이미지 카드로 만들어 포스팅

</aside>

text ( quotes )

• 유저가 직접 입력
• CSS property( 폰트, 크기, 색상, 정렬, 줄간격, 위치 등 ) 값을 조정

+

background image

• 유저가 직접 이미지 파일을 업로드
• 혹은 color picker로 색상을 선택

⇒

DOM to image File

• 유저가 업로드 하면 useRef로 선택된 캔버스 DOM이 이미지로 캡쳐(dom-to-image)
• 백엔드에서 multer를 통해 AWS S3로 업로드

🧱 구조 및 기능

FE

1. 클라이언트 개별 웹 페이지를 React Hooks를 포함하는 컴포넌트들로 구성
   • 로그인, 회원가입 등의 입력 폼 및 validation
   • Infinite Scroll(pagenation)로 모아보기 구현, 각 View 타입( Card / Thumbnail )을 컨테이너화
   • 게시글 삭제, 좋아요, 코멘트를 개별 컴포넌트로 관리
2. Redux와 Axios로 서버와의 데이터 교환과 흐름을 제어
   • useDispatch 및 useSelector 등의 Redux Hook으로 개별 컴포넌트( 예: 네비게이션 바 ) 내에서 유저 로그인 정보를 업데이트
   • 서버로부터의 에러들은 모달창과 연결하여 핸들링