Sign in to your account

네스트JS 한국어 매뉴얼 사이트

깃허브 이메일

구현할 기능

| 분야 \ 페이지 | 홈 (index.hbs) | 로그인 (login.hbs) | 닉네임 입력 (nickname.hbs) | 이전 주제 리스트 (ex_debate_list.hbs) | 이전 주제 기록 사이트 (ex_debate_show.hbs) | 별개의 기능 | | --- | --- | --- | --- | --- | --- | --- | | 프론트 | (로그인x) 로고 버튼 로그인버튼 주제 리스트 버튼 주제 남은시간 표시 토론주제 표시 찬성 반대 비율바

(로그인o) 로그아웃 버튼 주제리스트 버튼 주제 남은 시간 표시 토론주제 표시 찬성 반대 버튼 (선택 시 찬성반대비율바) 실시간 토론 표시 (시간, 채팅내역, 닉네임- 200자이내에 3번 - 시간제재) 채팅 전송 버튼 | 카카오 버튼 네이버 버튼 구글 버튼 | 닉네임 입력 닉네임 생성버튼 닉네임 중복시 경고 | 이전 주제 목록 게시판

• 주제목록
• 주제 기간
• 찬반 비율

목록 10개 정도 나오기

목록 페이지 버튼 | (로그인x) 로고 버튼 로그인버튼 주제 리스트 버튼 주제 기간 토론주제 표시 찬성 반대 비율바 토론 기록

(로그인o) 로고 버튼 로그아웃 버튼 주제리스트 버튼 주제 리스트 버튼 토론주제 표시 찬성 반대 비율바 토론 기록 | 보안 신고버튼 관리자사이트 | | 백엔드 | (로그인x) 로고 - 새로고침 - o ****로그인 - 로그인 페이지로 - o 채팅 - 표시만 - o 리스트 - 리스트 페이지로 - o 찬성 반대 - 레인지 바 - o 남은시간표시 - o

(로그인o) 로고 - 새로고침 - o ****로그아웃 - 로그아웃 후 메인 - o ****채팅 - 전송가능 - o 리스트 - 리스트 페이지로 - o 찬성 반대 - 레인지 바 - o 찬반 버튼 - 레인지바 수정 - o 남은시간표시 - o | 각 버튼을 통해서 로그인 API 사용 - o | 닉네임 중복 확인 - o | | (로그인x) 로고 - 메인페이지로 - o ****로그인 - 로그인 페이지로 채팅 - 표시만 리스트 - 리스트 페이지로 - o 찬성 반대 - 레인지 바

(로그인o) 로고 - 새로고침 - o ****로그아웃 - 로그아웃 후 메인 ****채팅 - 표시만 리스트 - 리스트 페이지로 - o 찬성 반대 - 레인지 바 | | | 시나리오 | | - 로그인 버튼을 클릭해서 가입된 내용이 없는 경우 회원가입 페이지로 이동 | | | | |

환경설정

# 필요 모둘 설치
npm i -g @nestjs/cli
npm i

# 서버 실행
npm run start:dev

사용 모듈 & 플랫폼

• 프론트

  • hbs

    npm install --save hbs
    

    • hbs 사용 시 추가 코드

      const hbs = require("express-handlerbars");
      server.engine("view engine", hbs({
      	extname: "hbs",
      	defaultLayout: "layout.hbs",
      	partailsDir:"partials"
      }))
      

• 백엔드

  • nest.js - 웹 프레임워크

    npm i -g @nestjs/cli
    

  • socket.io - 소켓 모듈

  • axios - Http 모듈 (Ajax 사용) https://docs.nestjs.com/techniques/http-module

    npm i @nestjs/axios
    

  • express-session - 로그인 정보 저장을 위한 세션 모듈

    https://docs.nestjs.kr/techniques/session

    https://www.youtube.com/watch?v=c-84CzCEaPs&list=PL_cUvD4qzbkw-phjGK2qq0nQiG6gw1cKK&index=13

    # 타입스크립트 문법을 위한 모듈
    npm i @types/express-session
    # 바닐라 express 세션 모듈
    npm i express-session
    # 세션 정보를 파일로 저장하기 위한 모듈
    npm i session-file-store
    

  • PM2 - 서버 구동 https://pm2.keymetrics.io/

• 데이터베이스

  • mysql(mariaDB) - 데이터베이스 ‣
  • ERD Cloud - ERD툴

  # DB
  DB_HOST='localhost'
  DB_PORT=3306
  DB_USER='debate'
  DB_PASS='mochamocha'
  DB_NAME='debate'
  
  # AUTH
  KAKAO_CLINET_ID='ff5db7469114a5d6adfbdbc19d58501a'
  KAKAO_CLINET_SECRET='wYGyUwjJgHwubaw4GRzR486M6rdRCfrR'
  KAKAO_REDIRECT='<http://localhost:3000/auth/redirect/kakao>'
  
  NAVER_CLIENT_ID='3ZYCyJm99tF7H49oxtHq'
  NAVER_CLIENT_SECRET='_WTAqF5gdE'
  NAVER_RANDOM_STATE='hollyshit'
  NAVER_REDIRECT='<http://localhost:3000/auth/redirect/naver>'
  
  GOOGLE_CLINET_ID='880048515831-a3467he7oalogte46it7n2b38hvgvj59.apps.googleusercontent.com'
  GOOGLE_CLINET_SECRET='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'
  GOOGLE_REDIRECT='<http://localhost:3000/auth/redirect/google>'
  

TODO