- 프로젝트 이름 : 보담길 (보다 나은 너를 찾길)
- 프로젝트 설명 : 대학생을 위한 자아탐색 웹 사이트
- 프로젝트 기간 : 2023/10 ~ 2023/12
| 김민아 | 박찬영 |
|---|---|
| FrontEnd Developer & Designer | BackEnd & FrontEnd Developer |
| - 기획 - 디자인 - 프론트엔드 HTML/CSS - SNS 관리 및 콘텐츠 제작 |
- 기획 - 백엔드 Node.JS - 프론트엔드 JS - 배포 |
-
메인 화면
화면 페이지 설명 
메인 화면 보담길 소개 및 각종 링크 
소개 보담길 소개 확인 
FAQ FAQ 내용 확인 
공지사항 공지사항 확인 
모바일 버전 반응형 구현 -
회원가입 및 로그인 (아이디 찾기 및 비밀번호 찾기)
화면 페이지 설명 
로그인 이메일, 카카오톡, 구글 로그인 
이메일 로그인 유효성 검사 진행 
회원가입 약관 약관 동의 진행 
회원가입 정보 입력 입력 정보 유효성 검사 진행 
회원가입 성공 회원가입 성공 
아이디 찾기 전화번호로 아이디 찾기 진행 
아이디 찾기 성공 아이디 찾기 성공 
비밀번호 찾기 비밀번호 재설정 이메일 발송 
비밀번호 재설정 이메일의 링크를 통해 비밀번호 재설정 
비밀번호 재설정 이메일 전송되는 이메일 -
마이페이지
화면 페이지 설명 
마이페이지 이름, 한 줄 소개, 가입일 확인 
마이페이지 수정 개인정보 변경 
비밀번호 변경 유효성 검사 진행 
회원 탈퇴 탈퇴 여부 재확인 
완료한 진로 게임 화면 완료한 진로 게임 목록 -
나 알아보기
화면 페이지 설명 
나 알아보기 메인 화면 나 알아보기 소개 및 링크 
진로 게임 메인 화면 진로 게임 목록 및 링크 
진로 검사 실시하기 진로 검사 목록 및 링크 -
진로 게임 1 : 어릴 때의 내가 좋아했던 것은?
화면 페이지 설명 
진로 게임 메인 화면 진로 게임 메인 화면 
진로 게임 작성 사진 첨부 및 문구 작성 
진로 게임 작성 색깔, 가로/세로 변경 
진로 게임 작성 예시 진로 게임 작성 예시 
진로 게임 결과물 링크 복사, 카카오톡 공유, 이미지 저장, 삭제 가능 
결과물 삭제 삭제 여부 재확인 
결과물 목록 확인 목록 확인 
결과물 카카오톡 공유 카카오톡 공유 메시지 
공유된 결과물 친구의 결과물 확인 (모바일 버전) -
진로 게임 2 : 내가 잘하는 것은? 네가 잘하는 것은!
화면 페이지 설명 
진로 게임 메인 화면 진로 게임 메인 화면 
본인 편지함 본인 편지함 확인, 링크 복사, 카카오톡 공유 가능 
편지함 카카오톡 공유 카카오톡 공유 메시지 
타인 편지함 편지 작성 가능 (확인은 본인만 가능함) 
편지 작성 가이드라인 확인 및 편지 작성 
편지 전송 작성 완료 및 전송 
본인 편지함 확인 전송 완료 및 링크 
편지 확인 전달받은 편지 내용 확인 -
세상 알아보기
화면 페이지 설명 
세상 알아보기 메인 화면 세상 알아보기 소개 및 링크 
직업 탐구하기 직업 목록 (커리어넷 API 및 링크) 
도움이 되는 사이트 도움이 되는 사이트 링크
-
BackEnd 개발 타임라인
- [10/07 ~ 10/08] 기본 환경 설정
- [10/08 ~ 10/12] User 모델 정의, 회원가입 · 로그인(로컬 · 카카오 · 구글 로그인) · 마이페이지 기능
- [10/14 ~ 10/15] Polaroid · Paperplane · Glassbottle 모델 정의, Polaroid 작성 · 조회 기능
- [10/22 ~ 10/24] Paperplane 작성 · 조회 · 개수 기능
- [10/23 ~ 10/26] Polaroid 이미지 미리보기 · 이미지 저장 · 색깔 · 크기 · 예시 팝업 기능, URL 복사 기능
- [10/28 ~ 10/29] Polaroid 삭제 기능, Polaroid · Paperplane 유효성 검사
- [11/05 ~ 11/07] 반응형 작업, 페이지 넘기기 구현, 회원가입 유효성 검사, 회원정보수정 기능
- [11/09 ~ 11/11] Polaroid 반응형 작업 · 파일 삭제 · 카카오톡 공유 기능, 아이디 찾기 · 비밀번호 변경 기능
- [11/11 ~ 11/12] Paperplane 반응형 작업, Game · GameRecord 모델 정의, 로그인 후 리다이렉트 기능
- [11/13 ~ 11/16] 비밀번호 찾기 · 회원탈퇴 기능, UUID 설정, FAQ · 공지사항 내용 작성
- [11/21 ~ 11/23] 카테고리 버튼 구현
- [11/26 ~ 11/27] 커리어넷 API 사용, 페이지 애니메이션 구현, SEO 태그, 파일 크기 제한
- [11/28 ~ 12/01] 배포 준비, 오류 수정, 방문자 수 카운터 기능
-
주요 사항
-
반응형 웹 구현 (PC, 모바일 버전 모두 고려)
-
회원가입 시 꼼꼼한 유효성 검사 진행으로 오류 최소화
-
구글 로그인(passport-google-oauth20), 카카오톡 공유하기(kakao.js), 이미지 미리보기(fileSaver.js), 이미지 저장하기(dom-to-image.js), 복사하기(clipboard.js) 등 다양하고 편리한 기능 시도/제공
-
커리어넷 API를 활용하여 보다 풍부한 직업 정보 제공
-
유저의 사용성과 보안을 고려한 백엔드 설계 (적절한 Redirection, 이메일 전송을 통한 비밀번호 재설정, uuid를 활용한 url 사용 등)
-
약 1년 간의 배포를 통해 누적 방문 1000회 기록
-
| Language/Tool |
|---|
    |
   (Lightsail) |
| Tool | Usage |
|---|---|
 |
코드 관리 |
 |
태스크 관리 및 회의록 정리 |
 |
디자인 수정 |
| Usage | Package(Version) |
|---|---|
| 서버, 세션, 쿠키, 템플릿 | express(^4.18.2), express-session(^1.17.3), cookie-parser(^1.4.6), nunjucks(^3.2.4) |
| 데이터베이스 | mysql2(^3.6.1), sequelize (^6.33.0), sequelize-cli(^6.6.1), connect-redis(^7.1.0), redis(^4.6.11) |
| 환경변수 | cross-env(^7.0.3), dotenv(^16.3.1) |
| 로깅 | morgan(^1.10.0), winston(^3.11.0) |
| 배포 및 개발 | nodemon(^3.0.1), pm2(^5.3.0) |
| 보안 | helmet(^7.1.0), hpp(^0.2.3), sanitize-html(^2.11.0) |
| 회원가입, oAuth | passport(^0.6.0), passport-google-oauth20(^2.0.0), passport-kakao(^1.0.1), passport-local(^1.0.0) |
| 암호화 | bcrypt(^5.1.1), uuid(^9.0.1) |
| 기능 | axios(^1.6.2 - 요청 보내기), multer(^1.4.5-lts.1 - 이미지 업로드), nodemailer(^6.9.7 - 메일 전송) |
- clipboard.js / dom-to-image.js / fileSaver.js / kakao.js (shareKakao() 함수)
- Node.js 설치 확인 (https://nodejs.org/en)
$ node -v
$ npm -v
- MySQL 설치 및 DB 생성 (https://downloads.mysql.com/archives/installer/)
-
DB 이름은 .env의 DB_DATABASE와 동일하게 설정
-
MySQL 비밀번호와 동일하게 .env의 DB_PASSWORD 설정
### Windows : MySQL Shell 설치 ###
> \sql
> \connect root@localhost:3306
> CREATE DATABASE DBNAME;
### Linux ###
$ sudo apt-get update
$ sudo apt-get install mysql-server
$ sudo service mysql start
> sudo mysql -u root -p
> CREATE DATABASE DBNAME;
### MAC ###
$ brew update
$ brew install mysql
$ mysql.server start
> sudo mysql -u root -p
> CREATE DATABASE DBNAME;
-
Redis 설치 및 연결 (https://github.com/microsoftarchive/redis/releases)
-
(선택) 가상환경 활성화
$ python -m venv VENVNAME
$ source VENVNAME/bin/activate
- 패키지 설치
$ npm install
- 실행 후 localhost(127.0.0.1:8080) 접속
$ npm run dev
- .env 파일에 API 키, 비밀번호를 작성하지 않고 테스트하는 경우 일부 서비스가 제한됩니다. (카카오톡 공유, 메일 전송, 커리어넷 직업 정보 등)
