inq-inq-inq-inq-inq / webtoon-moa

웹툰 플랫폼 3곳의 컨텐츠들을 한 곳에 모아 손쉽게 접근이 가능한 서비스

📚 Webtoon-Moa

📽 시연 영상

⚙️ 개발 환경(Development Environment)

분류	개발환경
운영체제	Windows 11 64bit / Mac OS
개발도구	Visual Studio Code, Postman, pm2
프레임워크	Express.js 4.16.1
데이터베이스	MySQL (Release 8.0.29)
버전 관리	Github, Git
오픈소스 및 외부 라이브러리	네이버 웹툰, 카카오 웹툰, 카카오 페이지 크롤링, [카카오, 네이버 로그인 API], nodemailer

🛠 세부 기술 스택(Tech Stack)

백엔드(Back-end)

• Node.js
• Express.js
• Javascript

데이터베이스(Database)

• MySQL (Release 8.0.29)

프론트엔드(Front-end)

• HTML
• CSS
• JavaScript
• JQuery
• Ajax

📝 도메인 모델 분석(Domain Model Analysis)

회원(User)

• 회원과 웹툰의 관계 : 회원은 여러 개의 웹툰을 찜할 수 있다. 또한, 하나의 웹툰은 여러 명의 회원에 의해 찜해질 수 있다. (N:N)

웹툰(Webtoon)

• 웹툰과 회원의 관계 : 회원은 여러 개의 웹툰을 찜할 수 있다. 또한, 하나의 웹툰은 여러 명의 회원에 의해 찜해질 수 있다. (N:N)

📝 테이블 정의서(Entity Details)

회원(USER) 테이블

컬럼명	한글명	TYPE	KEY	NOT NULL
USER_ID	회원 고유번호	BIGINT	PK	Y
IDENTIFIER	회원 아이디	VARCHAR		Y
PASSWORD	비밀번호	VARCHAR		Y
USERNAME	회원 이름	VARCHAR		Y
EMAIL	이메일	VARCHAR		Y

즐겨찾기(FAVORITES) 테이블

컬럼명	한글명	TYPE	KEY	NOT NULL
FAVORITES_ID	즐겨찾기 고유번호	BIGINT	PK	Y
USER_ID	회원 고유번호	BIGINT	FK	Y
WEBTOON_ID	웹툰 고유번호	BIGINT	FK	Y

웹툰(WEBTOON) 테이블

컬럼명	한글명	TYPE	KEY	NOT NULL
WEBTOON_ID	웹툰 고유번호	BIGINT	PK	Y
TITLE	웹툰 이름	VARCHAR		Y
AUTHOR	웹툰 작가이름	VARCHAR		Y
IMG_URL	웹툰 대표 이미지 URL	VARCHAR		Y
WEB_URL	원본 웹툰 상세 페이지	VARCHAR		Y
PLATFORM_NAME	플랫폼 이름	VARCHAR		Y
GENRE_NAME	장르 이름	VARCHAR		Y
WEEK	요일(1~7:월-일)	INT		Y
CLICK_COUNT	조회수	BIGINT		Y

🔗 엔티티-관계 모델(Entity Relationship Diagram)

⚙️ 로컬 데이터베이스 세팅

1. MySQL 을 자신의 컴퓨터에 설치한다. 이 때, 로컬 패스워드는 11111111 로 설정한다.
2. 설치가 완료되었으면 Terminal(Mac OS) or CMD(Windows)에 들어가서 다음과 같이 작성한다.

mysql -u root -p

접속이 안된다면 내 컴퓨터의 mysql이 깔려있는 폴더의 bin 폴더로 이동해서 다시 시도해보자.

접속이 되면 처음에 설치할 때 입력했던 패스워드를 작성하면 접속이 완료된다.

3. 데이터베이스를 만든다.

CREATE DATABASE webtoon-moa;

4. 데이터베이스를 사용한다고 선언한다.

USE webtoon-moa;

5. src 파일에 있는 init.sql의 내용을 복사해서 붙여넣기 후 실행한다.
6. 프로젝트 파일(src)의 터미널 창에서 node.js 로 init.js 를 실행한다.

src % node init.js

📐 트러블 슈팅(Trouble Shooting)

Back-end

📌이채민

• 로그인 시 DB에서 사용자 정보를 찾아올 때, JSON 값으로 반환되는줄 알고 세션에 그대로 저장했다가 세션에서 값을 못불러오는 문제 발생 → DB에서 값을 가져오면 JSON Array로 반환되었기 때문에 세션에 첫번째 인덱스 값을 넣어주니 해결되었다.
• 크롤링할 때 모든정보를 가져와지지 않는 문제점 → 이미지가 일부 안가져와지는 문제를 해결하지 못하였다. img 태그가 두개인데 무조건 첫번째꺼를 가져오게 되었다.

📌성유진

• 렌더링할 때 정확한 값이 띄워지지 않는 문제점 → 렌더링 하기전에 값을 디코딩해서 뷰로 뿌려주었다.
• ejs파일에 DB 정보 출력시 공백 에러 - 출력페이지에 urlencondedParser 사용선언, 출력메시지를 문자열 변수에 포함하여 해결
• 즐겨찾기 출력시 사용자별로 출력 불가 - 테이블간 외래키 사용하여 INNER JOIN하여 해결
• nodemailer 메일 전송 불가 문제 -  메일 어플리케이션 사용 용도 비밀번호 생성(계정권한 부여),  메일에서 사용할 인증코드 용 데이터는 따로 테이블 생성하여 해결

Front-end

📌조수빈

• jQuery 클릭 이벤트 버블링 - .stopPropagation() 사용, 부모 태그로의 이벤트 전파 중단하여 해결
• ReferenceError (실행 순서 문제) - $(document).ready(function(){}) 를 사용하여 스크립트가 다 준비된 상태에서 함수를 실행하는 방식으로 해결
• 뒤로 가기 시 데이터가 refresh 되지 않는 문제 (Ajax 비동기 통신) - $(window).bind("pageshow", function (event) {}) 를 사용하여 뒤로 가기 이벤트를 감지하고, 뒤로 가기 이벤트가 일어나면 reload 함수를 통해 데이터를 refresh 해주어 해결

📌최소연

• [웹툰 카드], 웹툰 제목이 긴 경우 배열이 씹히는 현상 발생 - 제목의 길이를 제한해두고 잘린 제목은 생략부호 처리. css에서 아래와 같이 작성
• overflow: hidden;text-overflow: ellipsis;-o-text-overflow: ellipsis;white-space: nowrap;max-width: 130px;
  • overflow: hidden으로 정해둔 사이즈가 넘어가는 경우에는 해당 글자 뒤를 안보이게 설정
  • text-overflow: ellipsis; 정해둔 사이즈가 넘어가면 …(생략부호) 처리가 되도록 함
  • white-space: nowrap; 공백문자가 있는 경우 줄바꿈 처리하지 않도록 함
  • max-width로 길이를 명확히 제한하여, 해당 사이즈를 넘어갈 경우에는 … 처리가 되도록 하였음.
• 즐겨찾기 버튼 클릭시 색상 변경 문제 발생
• 기존: 새로운 함수를 선언하여 색상 변경 시도 -> 두번 클릭해야 작동, 즐겨찾기 해제시 색상 변경이 작동하지 않는 문제 발생
• 해결 -> 기존 즐겨찾기 코드(값 넘겨주는)에 색상 변경 코드만 추가
  • 해당 변수에서 text값만 변경해주면 채워주는 하트로 변경이 가능하기 때문에 (google icon코드 사용) text()를 사용하여 text값만을 변경해주는 방식으로 해결함

🖥 사용자 인터페이스(UI)

메인 페이지

즐겨찾기 페이지

검색 페이지

로그인, 회원가입

아이디, 비밀번호 찾기

📍 영상 링크

영상링크

webtoon-moa's Issues

로그인 API 구현

1. 로그인 폼 정보 model로 담아서 전달
2. 로그인할 회원정보 데이터베이스에서 조회
3. 로그인 검증
4. 로그인 세션 유지

OAuth2 로그인 구현

1. Kakao 로그인 및 강제 회원가입 진행
2. Naver 로그인 및 강제 회원가입 진행

웹툰 조회 API 구현

1. 조회순 검색
2. 인기순 검색
3. 플랫폼별 검색
4. 인덱스 페이지 - 해당 요일 모든 웹툰검색

DB 설정정보 및 크롤링 데이터 세팅

1. MySQL 설정정보 및 로컬 DB 연동
2. 크롤링 데이터 엑셀파일 불러와서 DB에 삽입