서비스 개발 실습

개발부터 배포까지

URL Shortener

요구사항

  • 긴 URL은 한 명의 관리자만 만들 수 있음
  • 짧은 URL은 누구나 이용할 수 있음

시나리오 설계

화면 설계

데이터 설계

구현

여기서부터 VS Code로 작성합니다.

페이지를 넘길때마다 한 번씩 커밋을 하도록 합니다.

Glitch와는 달리 서버 코드를 변경해도 서버가 재시작되지 않으므로, 직접 재시작해주어야 합니다.

(템플릿 변경은 바로바로 반영됩니다.)

프로젝트 세팅

  • npm init -y
  • .gitignore 추가

Express 앱 세팅

  • npm install --save express
  • 템플릿 엔진 설정
  • npm script 추가
  • static 라우트 설정
  • 템플릿, CSS 파일 추가

로깅과 인증

  • morgan 설정
  • express-basic-auth 설정

초기 데이터 작업

  • randomstring

표로 보여주기

  • .ejs extension 설치
  • emmet 사용법
  • 템플릿 작성

짧은 URL의 리디렉션

  • 핸들러 작성 (301 Moved Permanently)
  • Redirection cache
  • 짧은 URL 링크 만들기

폼

  • body-parser
  • 인증 설정
  • 폼, 핸들러 작성

스타일링

  • Bootstrap
  • CSS

now.sh를 통한 배포

  • now 설치
  • 환경변수란?
  • dotenv
  • 관리자 계정을 포함시켜 배포

Discussion

  • 최적의 개발 순서?
  • 적절한 커밋의 단위는?

Next

실습 과제 소개