[js프로젝트] 프로젝트 시작할 때 초기 환경 세팅하기

프로젝트를 시작할 때 해야하는 초기 환경 세팅들이 있다.

• 메인이 될 app.js 파일에 기본적인 초기 설정 코드들 입력해두기
• .env 파일 대신 github에 올릴 .env.sample 파일 작성하기
• 팀원들과 코드의 서식 (code format) 통일시킬 .prettierrc 파일 세팅하기 

오늘은 이 세가지에 대해 알아보자.

---

app.js

app.js의 초기세팅에서 해야하는 일은 아래와 같은 것들이 있다.

- 필요한 모듈/라이브러리들 package에서 불러오기(require)

- 모듈들 실행시키기

-  데이터 연결하기

- 서버 열기

 

아래는 초기 세팅한 app.js의 예시 코드이다.

//'dotenv' 불러오기는 데이터베이스와 연결하기 전에 반드시 선행되어야 한다.
require('dotenv').config();

//필요한 모듈 불러오는 코드는 파일 최상단에 작성한다.
const express = require('express');
const cors = require('cors');
const morgan = require('morgan');
const { DataSource } = require('typeorm');

//그 다음은 require는 아니지만 필요한 변수를 선언하는 코드들을 배치한다.
const app = express();
const PORT = process.env.PORT;

//미리 필요한 모듈들 실행시키기
app.use(cors());
app.use(express.json());
app.use(morgan('combined'));

//연결할 데이터베이스 선언하기
const appDataSource = new DataSource({
  type: process.env.DB_CONNECTION,
  host: process.env.DB_HOST,
  port: process.env.DB_PORT,
  username: process.env.DB_USERNAME,
  password: process.env.DB_PASSWORD,
  database: process.env.DB_DATABASE,
});

//연결된 데이터베이스 실행하기
appDataSource
  .initialize()
  .then(() => {
    console.log('Data Source has been initialized!');
  })
  .catch((err) => {
    console.error('Error during Data Source initialization', err);
  });

//서버 연결 확인용 'ping-pong'
app.get('/ping', (req, res) => {
  res.status(200).json({ message: 'pong' });
});

//지정한 포트에서 서버 구동
app.listen(PORT, () => {
  console.log(`Server is listening on port ${PORT}`);
});

---

.env.sample

.env.sample 파일에서는 .env 파일 대신 어떤 내용이 .env에 작성되어야 하는지 보여준다.

필요한 변수들을 넣고, 각 변수들에 어떤 내용이 할당되면 되는지 작성해주면 된다.

나의 짧은 영어 실력으로 작성해본 .env.sample 예시 파일은 아래와 같다.

 

참고로 .env 파일은 js 파일 등과 달리

string을 입력할 때도 굳이 ''(따옴표)를 입력하지 않아도 된다.

DB_CONNECTION=RDBMS Name
DB_HOST=IP address
DB_USERNAME=Your user name
DB_PASSWORD=Your password for the RDBMS
DB_DATABASE=Name of your database
DB_PORT=Database port number
DB_LOGGING=True/False

PORT=Your port number

DATABASE_URL=rdbmsType://username:password@iphost:portNumber/databaseName

---

.prettierrc & settings.json

프로젝트를 함께하는 팀원끼리는 세세한 코드 format까지 맞출 필요가 있을 수 있다.

그 때 사용하는 것이 .prettierrc 파일이다.

 

.prettierrc 파일로 code format을 공유하고 설치하여 prettier 설정을 할 수 있다.

아래가 .prettierrc 파일의 예시이다.

{"trailingComma": "es5",
"tabWidth": 2,
"semi": true,
"singleQuote": true}

.prettierrc 파일을 프로젝트 폴더에 저장하고

아래와 같은 settings.json 파일을 같은 경로에 만들어 줘야 한다.

settings.json 파일에 아래와 같이 입력하여 저장하면, 팀원들과 공유한 prettier 설정이 vs code에 적용된다.

{
    "editor.formatOnSave":true
}