📓 프로젝트 명

wise sayings (위대한 말)

👁‍🗨 프로젝트 개요

※ 명언은 계속 추가 됩니다.

• 약 800개가 넘는 명언 목록을 조회하고, 자신만의 명언 카드를 커스텀하여 공유할 수 있는 차분한 앱 디자인 느낌의 웹 사이트

🎫 프로젝트 목적과 방향성

• [목적] 국내, 국외에도 많은 명언 웹이나 앱이 존재 합니다. 하지만, 너무 번잡하고 광범위한 정보를 다루려다 보니 마음에 드는 명언을 곱심으며 감상하기에는 사용자의 시선을 많이 분산시킵니다. 따라서 저는 마음에 드는 명언을 선택하여 차분한 마음으로 집중할 수 있는 환경을 만들고자 했습니다.

📅 개발 기간/유지보수

• (개발기간) 2023년 12월 15일 ~ 2024년 4월 21일
• (유지보수) 2024년 1월 15일 ~

🔥 배포

• AWS EC2, NGINX 리버스 프록시 기반으로 구축되어 배포되었습니다.
• 배포: https://wise-sayings.com

※ 이용시 참고사항(24/5/20 기준)

• 모바일 브라우저의 경우 크로스 브라우징 문제 등으로 TTS 기능에 한하여 동작하지 않을 수 있습니다. 이는 HTML5 에서 제공하는 API의 기술적인 한계 문제로 모바일 상에서도 호환성을 모두 가져갈 수 있는 방법을 모색하고 있습니다.
• 소셜 로그인의 경우 next-auth 를 사용하여 구현되었으나, jwt 기반으로 직접 구현한 access/refresh token 기반 로그인 로직과 충돌되는 부분이 있어서 어떻게 개선할지 고민중인 상황입니다.
• 인용문에 대한 위인에 대한 추가적인 정보를 게시하기 위해 데이터를 수집 중에 있습니다.
• 현재 불필요하게 중복되거나, 확장성이 떨어지는 로직과 컴포넌트 모듈화 등의 리팩터링 진행중 입니다.

🛠️ 트러블 슈팅

• ※ 프로젝트를 진행하면서 만나게된 다양한 이슈와 개선과정을 블로그에 목차별로 정리 하였습니다.
• 트러블 슈팅 1 ~ 6
• 트러블 슈팅 7 ~ 13

🧰 프레임워크 / 라이브러리 / 그 외 도구

프론트엔드/백엔드

사용 스텍	선택 이유
Typeccript(^5.4.2)	(언어) 타입 안정성을 높이고, 코드 가독성 향상 이점 및 Next 팀에서 적용할 것을 권장하는 점을 참고 후 적용
ReactJS(^18)	(SPA) SPA를 통해 빠른 페이지 전환으로 사용자 경험을 향상시키기 위해 적용
NextJS(^14.1.4)	(리액트 프레임워크) SSR 기반의 RSC의 이점으로 빌드 시 SSG 를 통한 사전 로드를 통한 초기 렌더링 및 번들 사이즈 최적화를 위해 적용
Tailwindcss(^3.4.1)	(CSS 프레임워크) 미리 스타일이 정의된 클래스를 기반으로 빠르게 CSS를 프로젝트에 적용하기 위해 적용
Zustand(^4.5.2)	(전역 상태관리) 단순한 상태의 전역 관리를 컴포넌트 단위로 쉽고, 빠르게 적용할 수 있는 이점이 있어서 활용
Swr(^2.2.5)	(서버 상태관리) Tanstack Query/react에 비해 가볍고, NextJS 팀에서 개발하여 기존 프로젝트와의 호환성이나 유지보수 측면에서도 유리할 것으로 판단하였고, 실시간 데이터 처리 및 캐싱처리가 필요한 기능처리를 위해 활용
React icons(^5.0.1)	다양한 아이콘을 하나의 패키지에서 컴포넌트 형태로 쉽게 적용할 수 있는 이점으로 활용
React color(^2.19.3)	다양한 형태의 컬러 선택도구를 쉽게 커스텀하여 활용할 수 있는 이점으로 선택 후 활용
Word wrap(^1.2.5)	기존 Canvas API 의 textRect 로 그려진 텍스트의 경우 캔버스의 크기를 벗어나더라도 자동으로 개행해주지 못하는 문제를 개선하기 위해 활용
gsap(^3.12.5)	(애니메이션) 사용자 로그인창, 헤더 메뉴, 검색창 등 특정 사항에서의 사용자 경험 향상을 목적으로 애니메이션 기능을 적용하기 위해 사용

데이터베이스

사용 스텍	선택 이유
Postgresql(^8.11.3)	(상용 데이터베이스) NoSQL 을 쓸수도 있었으나 관계형 데이터베이스는 테이블 간의 외래키 참조 관계를 지정하여 보다 효율적으로 데이터 관리가 가능하므로 RDBS 를 선택. 현재 알고 있는 MySQL 과 PostgreSQL 중에서 보다 대규모 데이터 처리 및 엄격한 SQL 표준 규격 준수로 인한 타 환경으로의 이식성에 있어서 이점이 크다고 판단하여 선택

캐싱

사용 스텍	선택 이유
redis	(캐싱 처리) 사용자 회원가입에서 인증번호 발급 시 임시적으로 캐싱처리하여 재사용하기 위한 용도 등으로 불필요한 데이터베이스 입출력으로 인한 성능 저하를 방지하기 위해 사용.

유효성 검사

사용 스텍	선택 이유
Joi(^17.11.0)	(유효성) 회원가입 시 서버에서 전달받은 객체의 유효성 검사를 위해 활용(zod 와 비교 했을 때, 정적 타입 체크를 해주지 않아서 타입안정성이 떨어질 수 있다는 생각이 들었으나, 복잡한 유효성 검사가 목적이 아니므로 joi를 선택)

배포 및 이미지 처리

사용 스텍	선택 이유
AWS EC2	(프로젝트 배포) NextJS 를 로컬과 유사한 환경에서 배포할 수 있는 점이 매력적으로 보였고, 리소스 사용량에 따른 리소스 확장이 유연한 부분이 큰 이점이라 생각하여 선택

🗂️ 프로젝트 구조(참고용)

• ※ 현재 리팩터링과 추가적인 기능 개선에 따라서 달라질 수 있습니다.

📦src
 ┣ 📂app
 ┃ ┣ 📂 (ai) -----------→ AI 명언 생성 챗봇(완료) 및 명언이미지 생성(계획중)
 ┃ ┃ ┗ 📂ai-quote
 ┃ ┣ 📂(gallery) -----------→ 커스텀 명언 카드 갤러리(계획중)
 ┃ ┃ ┗ 📂gallery
 ┃ ┣ 📂(post) --------------→ 포스트 수정 및 업데이트 페이지 그룹
 ┃ ┃ ┣ 📂add-wisesaying
 ┃ ┃ ┗ 📂update-wisesaying
 ┃ ┣ 📂(quotes) ------------→ 명언 관련 페이지 그룹
 ┃ ┃ ┃ 📂search
 ┃ ┃ ┣ 📂quotes
 ┃ ┃ ┃ ┗ 📂populars
 ┃ ┃ ┃ ┗ 📂[category]
 ┃ ┃ ┃   ┗ 📂[name]
 ┃ ┃ ┃     ┣ 📂[id]
 ┃ ┃ ┗ 📂user-quotes
 ┃ ┃   ┗📂[category]
 ┃ ┣ 📂(user) -------------→ 유저 관련 페이지 그룹
 ┃ ┃ ┣ 📂forgot
 ┃ ┃ ┣ 📂login
 ┃ ┃ ┣ 📂logout
 ┃ ┃ ┣ 📂mypage
 ┃ ┃ ┗ 📂signin
 ┃ ┣ 📂api ----------------→ API Routes
 ┃ ┃ ┣ 📂auth -- 인증
 ┃ ┃ ┃ ┣ 📂access
 ┃ ┃ ┃ ┣ 📂refresh
 ┃ ┃ ┃ ┣ 📂clear-token
 ┃ ┃ ┃ ┣ 📂forgot
 ┃ ┃ ┃ ┣ 📂login
 ┃ ┃ ┃ ┗ 📂signin
 ┃ ┃ ┣ 📂bookmark -- 북마크
 ┃ ┃ ┃ ┗ 📂[id]
 ┃ ┃ ┣ 📂quotes -- 명언
 ┃ ┃ ┃ ┣ 📂authors
 ┃ ┃ ┃ ┃ ┗ 📂[category]
 ┃ ┃ ┃ ┣ 📂random
 ┃ ┃ ┃ ┣ 📂search
 ┃ ┃ ┃ ┣ 📂topics
 ┃ ┃ ┃ ┃ ┗ 📂[category]
 ┃ ┃ ┃ ┣ 📂users
 ┃ ┃ ┃ ┃ ┗ 📂post
 ┃ ┃ ┃ ┃   ┣ 📂categories
 ┃ ┃ ┃ ┃   ┃ ┣ 📂[category]
 ┃ ┃ ┃ ┃   ┣ 📂[id]
 ┃ ┃ ┃ ┗ 📂[id]
 ┃ ┃ ┃   ┗ 📂comments
 ┃ ┃ ┃   ┃ ┗ 📂reply
 ┃ ┃ ┃   ┗ 📂likes
 ┃ ┃ ┣ 📂sitemap
 ┃ ┃ ┗ 📂users
 ┃ ┃   ┗ 📂mypage
 ┃ ┃     ┣ 📂posts
 ┃ ┃     ┗ 📂upload
 ┃ ┗ 📂quotes-styler
 ┃   ┗ 📂[name]
 ┃     ┗ 📂[id]
 ┣ 📂components -------------→  컴포넌트들
 ┃ ┣ 📂layout
 ┃ ┗ 📂UI
 ┃   ┣ 📂auth
 ┃   ┣ 📂bookmark
 ┃   ┣ 📂comment
 ┃   ┣ 📂common
 ┃   ┣ 📂detail-quote
 ┃   ┣ 📂header
 ┃   ┣ 📂mypage
 ┃   ┣ 📂quote
 ┃   ┣ 📂quote-editor
 ┃   ┣ 📂reply
 ┃   ┣ 📂search
 ┃   ┗ 📂styler
 ┣ 📂configs ----------------→ 프로젝트 환경 설정 관련 처리
 ┣ 📂custom -----------------→ 커스텀 훅
 ┣ 📂services ---------------→ 클라이언트 측 서비스 로직 처리
 ┃ ┣ 📂data
 ┃ ┗ 📂user
 ┣ 📂store ------------------→ Zustand 상태관리
 ┣ 📂types ------------------→ 타입 관리
 ┣ 📂utils ------------------→ 공통 함수 관리
 ┗ 📂validation -------------→ joi 유효성 검사