모두의 글을 엮어 만드는 나만의 책, 노티클 📒

Documentation
Explore Knoticle

---

🎬 프로젝트 소개

모두의 글을 엮어 만드는 나만의 책, 노티클 📒

Knoticle은 매듭(Knot)과 글(Article)을 합쳐서 좋은 글을 엮는다는 뜻입니다.

🌠 프로젝트 개요

내가 작성한 글과 다른 사람들의 글을 엮어 하나의 책으로 넘겨볼 수 있는 기능을 제공하는 서비스입니다.

🤔 기획 의도

Knoticle은 저희가 인터넷을 통한 학습 과정에서 느낀 불편함을 바탕으로 기획되었습니다.

• 링크 혹은 북마크 형식으로 좋은 글들을 저장하면 주제별로 정리하기가 어려웠습니다.
• 각각의 글로 클릭해서 이동해야 하다보니 학습의 연속성을 느끼기가 어려웠습니다.

🚩 프로젝트 목표

• 내가 학습 과정에서 찾은 좋은 글들을 특정한 주제를 기준으로 잘 정리할 수 있으면 좋겠다!
• 글을 왔다갔다 참조하는게 아니라 하나의 책을 읽는 것 같은 느낌을 받을 수 있으면 좋겠다!
• 실제 이용자의 피드백을 받아서 단계적으로 서비스를 완결성 있게 발전시킨다.

🚀 주요 기능 소개

마크다운 에디터

내가 학습한 내용을 정리해서 글을 작성할 수 있습니다.

• 마크다운 문법을 지원하는 에디터를 사용해서 원하는 글을 자유롭게 작성할 수 있습니다.
• 미리보기를 통해서 작성 중인 글이 실제로 어떻게 보일지 동시에 확인할 수 있습니다.
• 사용자의 컴퓨터에 있는 이미지 파일을 복사해 넣을 수 있습니다.

스크랩

다른 사람들이 작성한 글을 스크랩하고, 내가 작성한 글과 엮어 나만의 책을 만들 수 있습니다.

• 마음에 드는 글을 읽었다면 사용자가 가지고 있는 어떤 책으로든 스크랩할 수 있습니다.
• 스크랩한 글의 순서를 자유롭게 변경할 수 있습니다.

북마크

다른 사람들이 엮은 책을 북마크해서 꺼내볼 수 있습니다.

• 글들을 잘 엮어놓은 책을 발견했다면 북마크 할 수 있습니다.
• 북마크한 책들은 나의 서재에서 확인할 수 있습니다.
• 다른 사람의 서재에 들어가서 그 사람이 북마크한 책들을 모아볼 수 있는 기능을 제공합니다.

검색

원하는 글과 책을 검색할 수 있습니다.

• 내가 학습하고자 하는 키워드가 포함된 책과 글을 검색해서 원하는 것들만 모아볼 수 있습니다.
• 로그인한 사용자라면 자신의 책과 글에서만 검색할 수 있는 기능을 제공합니다.

⚒ 기술 스택

Common

Nginx

• 리버스 프록시 설정을 통해 사용자가 내부 서버에 접근하지 못하도록 막아서 보안을 향상 시킬 수 있다고 생각했습니다.
• 내부적으로 서버를 확장시킬 때 트래픽 분산에 용이하다고 판단했습니다.

PM2

• 싱글 스레드로 동작하는 Node.js 기반 프론트엔드 서버와 백엔드 서버를 쉽게 클러스터링할 수 있다는 장점이 있습니다.
• 클러스터 모드와 설정을 통해서 서비스를 PM2만으로 무중단 배포할 수 있어서 선택하게 되었습니다.

GitHub Action

• 매주 데모 시연과 사용자 피드백을 받기 위해서 빈번한 배포가 일어날 것으로 예상했습니다. 이 과정에서 수동 배포는 많은 리소스가 필요하기 때문에 이 과정을 자동화할 방법을 찾게 되었습니다.
• GitHub에 친화적이라 추가적인 설정 작업 없이 GitHub 내부에서 CI/CD를 수행할 수 있다고 판단했습니다.

Frontend

Next.js

• 블로그 서비스이다보니 유저가 작성한 글들이 검색 엔진에 최적화되어야 한다고 생각했고, SEO를 위한 SSR를 쉽게 할 수 있는 Next.js를 선택하게 되었습니다.
• 리액트 프레임워크이므로 러닝커브가 높지 않다고 생각했습니다.
• 프레임워크기 때문에 코드 스타일을 맞추는데 드는 시간을 절약할 수 있고, 코드의 유지보수가 편합니다.

Recoil

• 리액트에서 Hook을 사용하는 것과 비슷하기 때문에 러닝커브가 낮습니다.
• Context API를 사용할 경우, 상태가 변화하면서 불필요한 렌더링이 일어나는 것을 관리하기가 까다롭다고 판단했습니다.

Styled-components

• 컴포넌트 단위로 스타일링할 수 있어 스타일끼리 충돌이 일어날 우려가 적습니다.
• Next.js에 의해 미리 렌더링된 HTML 파일에 스타일을 적용하는 과정이 Emotion보다 까다롭지만, 직접 진행하면서 학습해보기 좋다고 생각했습니다.

Backend

Express

• NestJS와 같은 프레임워크를 사용하는데 러닝 커브가 높다고 생각했습니다.
• Express에서 초기 구조만 잘 설계해놓으면 저희 서비스를 구현하는데 큰 문제가 없다고 생각했습니다.

MySQL

• 저희 서비스에서는 사용자가 여러 책을 가지고, 책 속에 여러 글이 들어가는 구조를 가지고 있기 때문에 테이블 간의 관계를 만들 수 있는 SQL을 사용하는 것이 적절하다고 판단했습니다.
• 이 뿐만 아니라 다른 사용자가 작성한 글을 스크랩하는 기능을 제공하기 때문에 조인 테이블을 통해서 스크랩 글을 관리하는 것이 효율적으로 데이터를 다루는 것이라고 생각했습니다.

Prisma

• ORM을 사용하게 되면 테이블 간의 관계를 객체로 매핑해놓고, 이를 여러 비지니스 코드에서 재사용할 수 있다고 생각했습니다.
• Prisma의 문서화가 잘 되어있고, 관련된 커뮤니티가 활성화 되어있기 때문에 이용하는데 큰 어려움이 없을 것이라고 생각했습니다.

🧑‍💻 팀원 소개

J027 김도현	J037 김민형	J090 박현기	J179 정다현
@doputer	@MinHK4	@ParkHyeonKi	@dahyeon405