한국 웹툰 네이버, 카카오, 카카오 페이지 API를 사용해서 만든 웹툰 정보 사이트입니다.
개발 기간: 2023.08 ~ 2023.10
어떤 프로젝트를 할까 고민하던 중 우연히 좋아하는 웹툰의 오픈 API를 발견하여 웹툰 커뮤니티를 개발하게 되었습니다.
오픈 API의 경우 직접 수정할 수 없는 단점이 있어 Node.JS와 MongoDB를 이용하여 개인 서버를 하나 제작하여 필요한 부분은 직접 개발 했으며
또한 유저와 유저 간의 대화 기능이 있으면 게시판을 사용하여 다른 유저들 간에 공유를 하지않고 1대1의 채팅을 할 수 있게 기능을 추가시켰습니다.
반응형 제작으로 모바일 사용자들에게도 사용감에 불편함을 최대한 줄였습니다.
- Node.JS: 17.0.45
- React: 18.2.0
$ git clone https://github.com/springhana/toonboard.git
$ cd toonboard
$ npm install
$ npm run devFrontEnd
BackEnd
DataBase
State
계정
아이디: 123
비밀번호: 123
| 메인 | 요일 웹툰 |
|---|---|
| 웹툰 디테일 | 게시판 |
| 마이페이지 | 내 글보기 |
| 채팅 | 게시글 디테일 |
| 검색 | |
⭐ 게시판에 C, R, U, D 기능
- 게시판과 댓글에 대한 간단한 create, read, update, delete 기능 제공
⭐ 유저들의 관심있는 웹툰 또는 글에 구독, 좋아요 기능
- 오픈 API에 없는 기능들을 직접 추가 할 수 없으므로 개인 서버에서 직접 기능 구현 후 추가 제공함으로써
사용자들의 관심사확인 가능
⭐ 유저들에게 좋은 환경의 전달을 위해 이미지 추가 기능
- 텍스트 뿐만 아니라 이미지를 같이 제공
- 이미지는 서버에 같이 저장
⭐ 무한 스크롤 기능 (웹툰 페이지)
- 모바일 환경을 고려하며 시용자에게 필요한 만큼의 콘텐츠만 미리 로딩되어 초기 로딩 속도를 향상을 위해
무한 스크롤구현 - 무한 스크롤 블로그
⭐ 페이지네이션 기능 (게시판)
무한 스크롤처럼 시용자에게 필요한 만큼의 콘텐츠만 미리 로딩되어 초기 로딩 속도를 향상을 위해페이지네이션구현
⭐ 1대1 채팅 기능
- 유저와 유저의
1대1채팅 기능이 있으면 게시판으로 원하는 유저에게 공유하지 않고 소통할 수 있는 점을 고려해서 구현
첫 프로젝트를 진행하면서 기왕이면 내가 좋아하는 걸로 만들어보는 것도 좋을꺼 같아 웹툰 커뮤니티 사이트 개발하면서 사용도 해보면서 불편했던점 추가해야 되는점을 인지하고 개발하였습니다. 비록 아쉬운점은 있지만 다음 프로젝트 또는 리펙토링을 진행하면서 아쉬운점들은 채울 수 있으면 좋을 꺼 같습니다.