Express-generator

wltjd1688·2025년 2월 14일

풀사이클

목록 보기

16/74

Express는 Node.js 기반의 경량 웹 프레임워크로, Express 홈페이지에 가면 웹 애플리케이션, API, 선능등을 지원해준다고 적혀있다.

웹 프레임워크
내가 만들고 싶은 웹 서비스를 구현하는데 필요한 모든 일을 툴 안에서 할 수 있는 것

express-generator로 기본 구조 생성하기

설치 및 사용

express 애플리케이션 생성기 페이지를 통해 express-generator를 설치하면 기본적인 폴더 및 파일 구조를 바르게 생성할 수 있다.

$ npx express-genrator

를 통해 설치를 하면된다. 이 후 해당 명령어를 통해 설치가 되었는지 확인할 수 있다.

$ express --version
4.16.1

이제 express를 명령어에 입력하면 다음과 같이 나온다.
만약 comment not found에러가 나온다면 제일 밑부분을 참고하자

$ express

  warning: the default view engine will not be jade in future releases
  warning: use `--view=jade' or `--help' for additional options

destination is not empty, continue? [y/N]

경고는 나중에 기본 뷰 엔진이 변경될 수 있다는 것과 계속 사용하길 원한다면 --view=jade 옵션을 함꼐 사용하라는 의미로 지금은 넘어가자

제일 밑에는 현재 디렉토리가 비어있지 않다고, 그대로 진행해도 되냐고 묻는 것이다. 여기서 y를 눌러준다.
그러면 다음과 같이 여러 디렉토리를 만들어 주는 것을 확인할 수 있다.

   create : public/
   create : public/javascripts/
   create : public/images/
   create : public/stylesheets/
   create : public/stylesheets/style.css
   create : routes/
   create : routes/index.js
   create : routes/users.js
   create : views/
   create : views/error.jade
   create : views/index.jade
   create : views/layout.jade
   create : app.js
   create : package.json
   create : bin/
   create : bin/www

   install dependencies:
     $ npm install

   run the app:
     $ DEBUG=express-base:* npm start

실제로 디렉토리를 보면 다음과 같이 만들어진다.

이후 의존성을 설치하라는 명령어에 따라 입력하고 app.js를 실행시키고, 해당 포트로 들어가면 다음과 같이 나온다.

$ npm install
$ DEBUG=express-base:* npm start
> express-base@0.0.0 start
> node ./bin/www

  express-base:server Listening on port 3000 +0ms

express-generator 둘러보기

이걸 통해서 필요한걸 다 설치해줌,

bin

프로그램의 실행과 관련된 파일이 있는 폴더

www

여러 모듈을 불러옴(app, debug, http등등)
normalizePort함수를 통해 포트가 숫자로 올바르게 변환되도록 하고, 따로 설정하지 않으면 3000 포트를 사용
HTTP 서버 생성 및 실행, 이벤트 핸들링
보조 함수들(normalizePort, onError, onListening)
해당 파일에서 서버의 실행과 포트등을 설정한다.

⁇왜 파일 명이 www이지?
이때까지 js파일들이 모두 .js 확장자를 가지고 있어서 그렇지, 확장자가 필수는 아니다.
"www"또한 단지 관례적인 이름일 뿐이다.

public

프론트엔드에 필요한 images, javascript, stylesheets등등이 담긴다.

routes

URL 경로와 해당 경로에 대한 요청을 처리하는 파일이 담긴 폴더

index.js & user.js

express 모듈 가져오기
분기처리용 라우터 가져오기
각 페이지의 엔드포인트에 보여줄것을 만듬(API)

views

ejs 파일과 같은 템플릿 파일이 있는 폴더

app.js

다양한 모듈들을 불러옴(:10) http-errors, express, path, cookie-parser, morgan등등
express 앱 생성 및 뷰 엔진을 설정함
미들웨어 연결[로깅, jSON/URL인코딩, 쿠키 파싱, 정적 파일 제공 등을 연결함]
routes의 index와 users파일을 /와 /users에 할당함
404페이지와 error에 대해서 헨들링할 수 있도록 설정

🛑 zch: commnet not found express 해결하기 - mac기준
1. 글로벌 설치 여부 확인하기
emtpy가 나오면 설치가 안된거고, 다음과 같이 출력이 된다면 이미 설치가 된 것이다. 이걸 다시 불러오도록 해야한다.
$ npm list -g express-generator
/opt/homebrew/Cellar/node/23.7.0/lib
└── express-generator@4.16.1
실행파일 위치 확인하기
Express명령어는 실행 파일 형태로 존재한다.
설치 위치를 확인하려면 다음 명령어를 사용하면 된다. /opt/homebrew/Cellar/node/23.7.0라고 적은 자리에 위에서 얻은 위치를 넣으면 된다.
$ find /opt/homebrew/Cellar/node/23.7.0 -name express
/opt/homebrew/Cellar/node/23.7.0/bin/express
/opt/homebrew/Cellar/node/23.7.0/lib/node_modules/express
당시에 2개중에 위의 경로에서 @express 가 보여서 해당 주소로 하였다.
3. PATH 환경 변수에 실행 파일 경로 추가하기
터미널에서 express 명령어를 인식하려면, 해당 실행 파일이 위치한 디렉토리를 PATH에 추가해야 한다.
export PATH="$PATH:/opt/homebrew/Caller/node/23.7.0/bin"
이 명령은 현재 셀 세션의 PATH 환경 변우세 해당 경로를 추가하여 실행 파일을 사용할 수 있게 한다.
4. 환경 설정 파일 다시 로드하기
zsh를 사용중이라면, 환경 설정 파일을 다시 불러와 변경 사항을 적용해야한다.
source ~/.zshrc