Node.js 프로젝트(2) - Node.js 환경 셋팅 및 기본 프레임 셋팅

Node.js module

 

 

사용하는 모듈은 다음과 같습니다. 이는 프로젝트를 진행하며 계속해서 추가될 예정입니다.

 

• "dependencies":
  • "body-parser": "^1.19.1",
  • "cors": "^2.8.5",
  • "ejs": "^3.1.6",
  • "express": "^4.17.2",
  • "nodemon": "^2.0.15",
  • "passport": "^0.5.2"

 

 

---

Directory

 

 

디렉토리 구조는 다음과 같습니다.

DOM tree는 프로젝트 완성시에 추가할 예정입니다.

 

Main Directory

 

설명

 

• node_modules : module이 들어있는 폴더입니다.
• public : img, css, js등 assets과 메인 페이지가 들어있는 폴더입니다.
• router : request별 라우팅 처리를 하기 위해 구현해놓은 라우터들의 파일입니다.
• views : 각 페이지들을 구현한 ejs파일들이 들어있는 폴더입니다.

 

 

 

 

---

app.js

 

 

app.js는 웹 서비스를 실행하는 파일이며 각 요청에 대해 router를 사용할 예정이기 때문에 직접적인 라우팅 처리는 하지 않습니다. 

 

 

 

---

메인페이지

 

 

router의 index.js입니다. root로 접근한 get 요청에 대해 메인페이지를 Response로 전송하게 구현하였습니다.

 

 

 

다음은 메인페이지의 디자인입니다. 노란색 파스텔 톤 계열로 페이지의 컨셉을 구현하였고 이와 대비되어 가시성이 좋은 색상인 검정색으로 글씨를 구현하였습니다.

 

Header의 왼쪽은 로고, 가운데는 메뉴, 오른쪽은 회원가입과 로그인 버튼으로 구성하였습니다.

 

메인 페이지의 컨텐츠 구성은 아직 미정이지만, 웹 표준을 준수한 다른 사이트들을 참고하여 구성하도록 하겠습니다.

 

 

 

 

이후 진행과정부터는 다음 포스팅에 담겠습니다.