Microsoft / Typescript Express 보일러 플레이트 적용기

https://github.com/microsoft/TypeScript-Node-Starter

microsoft/TypeScript-Node-Starter

리액트와 달리 Node.js 에서 Typescript 사용은 조금 더 다른 느낌이다.

일단 왜인지 모르겠지만 webpack이나 babel의 사용없이 tsc라고 불리는 타입스크립트 컴파일러로 js파일로 만드는 과정이라던지 신기한 부분이 많다. (의도가 무엇일까...?)

 

일단 DB연결후 build하여 실행까지 한 뒤 하나하나 살펴보았다.

 

1. Webpack과 바벨 없이 빌드?!

당연스럽게도 Sass나 Typescript와 같은 문법을 사용하려면 Webpack과 바벨로 파일을 변환시켜 줘야 한다고 생각했다. 그런데 이 프로젝트의 build 설정은 다음과 같다.

    "build": "npm run build-sass && npm run build-ts && npm run lint && npm run copy-static-assets",
    "serve": "node dist/server.js",
    "watch-node": "nodemon dist/server.js",
    "watch": "concurrently -k -p \"[{name}]\" -n \"Sass,TypeScript,Node\" -c \"yellow.bold,cyan.bold,green.bold\" \"npm run watch-sass\" \"npm run watch-ts\" \"npm run watch-node\"",
    "test": "jest --forceExit --coverage --verbose",
    "watch-test": "npm run test -- --watchAll",
    "build-ts": "tsc",
    "watch-ts": "tsc -w",
    "build-sass": "node-sass src/public/css/main.scss dist/public/css/main.css",
    "watch-sass": "node-sass -w src/public/css/main.scss dist/public/css/main.css",
    "lint": "tsc --noEmit && eslint \"**/*.{js,ts}\" --quiet --fix",
    "copy-static-assets": "ts-node copyStaticAssets.ts",

그러고 보면 빌드에 사용되는 tsc와 node-sass 모두 컴파일러다.

여태까지 Webpack과 Babel은 이것들을 통해서 컴파일 되었을 뿐이였지, 결국 본질인 이것을 직접 이용하는 것 역시 가능하다고 추정된다.

 

실제로 다음과 같이 간단하게 만든 앱은 잘 동작한다.

import express from "express";
const app = express();
 
app.get("/", (req, res) => {
  return res.send("good").status(200);
});
 
app.listen(8080, () => {
  console.log("server");
});
 

{
  "compilerOptions": {
    "module": "commonjs", // 모듈의 설정
    "esModuleInterop": true, // import 하나의 여러 모듈을 가져오는 문법 허용
    "allowSyntheticDefaultImports": true, //export 시 export default를 자동으로 설wjd
    "target": "es6", // 사용할 ES 버전 설정
    "noImplicitAny": true, // 표현식의 에러 검증
    "moduleResolution": "node", // 모듈 해석 방식
    // "sourceMap": true,
    "outDir": "dist", // 컴파일한 파일의 위치
    "baseUrl": ".", //paths옵션의 기준 디렉토리
    "paths": { // 모듈의 위치 설정
      "*": ["node_modules/*", "src/types/*"]
    }
  },
  "include": ["src/**/*"] // 해석할 파일 src 안의 깊이의 제한없는 모든 디렉토리의 파일.
}
// tsconfig.json

 

이 기세로 lint 설정도 해보자.

https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project

Using ESLint and Prettier in a TypeScript Project

해당 사이트를 참조

{
  "parser": "@typescript-eslint/parser",
  "extends": ["plugin:@typescript-eslint/recommended"],
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module"
  }, // 파서 옵션
  "rules": {
    "semi": ["error", "always"], //세미 콜론
    "quotes": ["error", "double"], // 따옴표 및 백틱 설정
    "@typescript-eslint/explicit-function-return-type": "off",
// 타입스크립트에서 리턴값이 예상되는 값인지 판단
    "@typescript-eslint/no-explicit-any": "off"
 // 타입스크립트에서 타입 any 사용 금지
  }
}
 

2. 다른 이름의 패키지들

일반적으로 많이 쓰이는 패키지들이 모두 @types/ 형태이다.

  "devDependencies": {
    "@types/async": "^3.0.0",
    "@types/bcrypt-nodejs": "^0.0.30",
    "@types/bluebird": "^3.5.27",
    "@types/body-parser": "^1.17.0",
    "@types/chai": "^4.1.7",
    "@types/compression": "^0.0.36",
    "@types/connect-mongo": "^0.0.42",
    "@types/dotenv": "^6.1.1",
    "@types/errorhandler": "^0.0.32",
    "@types/express": "^4.17.0",
    "@types/express-flash": "0.0.0",
    "@types/express-session": "^1.15.13",
    "@types/jest": "^24.0.15",
    "@types/jquery": "^3.3.29",
    "@types/lodash": "^4.14.134",
    "@types/lusca": "^1.6.0",
    "@types/mongodb": "^3.1.28",
    "@types/mongoose": "^5.5.6",
    "@types/morgan": "^1.7.35",
    "@types/node": "^12.0.10",
    "@types/nodemailer": "^6.2.0",
    "@types/passport": "^1.0.0",
    "@types/passport-facebook": "^2.1.9",
    "@types/passport-local": "^1.0.33",
    "@types/request": "^2.48.1",
    "@types/shelljs": "^0.8.5",
    "@types/supertest": "^2.0.7",
    "@types/winston": "^2.3.9",
    "@typescript-eslint/eslint-plugin": "^1.12.0",
    "@typescript-eslint/parser": "^1.12.0",
...
}

의존 객체 관련해서 에러가 발생한다면 ( 아마 _default.에 해당 function이 없다고 나온다) 위의 목록에서 확인하자.

 

3. App의 다양한 미들웨어

1) lusca

crsf 와 관련된 보안 이슈들을 도와주는 라이브러리

 

2) flash

flash는 session의 휘발성을 부여해서 유저의 session관련 보안 관리를 해주는 라이브러리

 

3) bluebird

bluebird는 Promise를 더욱 효율적이고 성능적으로 좋게 사용할 수 있게 도와주는 promise 프레임워크

 

라고 합니다.

 

4. Model

스키마 작성 이후에 타입 선언하는 것이 특이하다.

const userSchema = new mongoose.Schema({
    email: { type: String, unique: true },
    password: String,
    passwordResetToken: String,
    passwordResetExpires: Date,
 
    facebook: String,
    twitter: String,
    google: String,
    tokens: Array,
 
    profile: {
        name: String,
        gender: String,
        location: String,
        website: String,
        picture: String
    }
}, { timestamps: true });

userSchema.pre("save", function save(next) {
    const user = this as UserDocument;
    if (!user.isModified("password")) { return next(); }
    bcrypt.genSalt(10, (err, salt) => {
        if (err) { return next(err); }
        bcrypt.hash(user.password, salt, undefined, (err: mongoose.Error, hash) => {
            if (err) { return next(err); }
            user.password = hash;
            next();
        });
    });
});
 

pre 메소드를 사용할 때

2번째 라인의 const user = this as UserDocument 는 굉장히 특이한 문법이다.

export type UserDocument = mongoose.Document & {
    email: string;
    password: string;
    passwordResetToken: string;
    passwordResetExpires: Date;
 
    facebook: string;
    tokens: AuthToken[];
 
    profile: {
        name: string;
        gender: string;
        location: string;
        website: string;
        picture: string;
    };
 
    comparePassword: comparePasswordFunction;
    gravatar: (size: number) => string;
};
 

 

Type Assertion

이 문법은 타입 단언과 관련있다.

 

Typescript에서는 타입선언이 안되어 있을시에 타입 추정이라는 것을 한다.

그 변수가 어떤 타입을 가지고 있는지 말이다.

 

근데 특정 자료구조에서 많은 타입을 가지고 있는 경우는 이러한 추론을 하는데 문제가 생긴다고 한다.

 

그러한 이유로 어떤 타입이라는것을 확실히 단언해주어야 하고 이때 쓰는데 as 키워드를 사용하는 것이다.

 

결국 userSchame에서 호출한 this는 실행됬을때의 user를 의미하고 이 user는 많은 속성들과 속성의 유무를 파악하기 힘들기 때문에 as 를 통해서 이 문제를 해결한 것으로 보인다.

5. passport Session 전략

passport.serializeUser<any, any>((user, done) => {
    done(undefined, user.id);
});
 
passport.deserializeUser((id, done) => {
    User.findById(id, (err, user) => {
        done(err, user);
    });
});

passport.serializeUser<UserDocument,Function>((user, done) => {
    done(undefined, user.id);
});

실제로 동작하는데도 문제가 없었다.

6. Login 전략

passport.use(new LocalStrategy({ usernameField: "email" }, (email, password, done) => {
    User.findOne({ email: email.toLowerCase() }, (err, user: any) => {
        if (err) { return done(err); }
        if (!user) {
            return done(undefined, false, { message: `Email ${email} not found.` });
        }
        user.comparePassword(password, (err: Error, isMatch: boolean) => {
            if (err) { return done(err); }
            if (isMatch) {
                return done(undefined, user);
            }
            return done(undefined, false, { message: "Invalid email or password." });
        });
    });
}));

export const postLogin = (req: Request, res: Response, next: NextFunction) => {
    check("email", "Email is not valid").isEmail();
    check("password", "Password cannot be blank").isLength({min: 1});
    // eslint-disable-next-line @typescript-eslint/camelcase
    sanitize("email").normalizeEmail({ gmail_remove_dots: false });
 
    const errors = validationResult(req);
 
    if (!errors.isEmpty()) {
        req.flash("errors", errors.array());
        return res.redirect("/login");
    }
 
    passport.authenticate("local", (err: Error, user: UserDocument, info: IVerifyOptions) => {
        if (err) { return next(err); }
        if (!user) {
            req.flash("errors", {msg: info.message});
            return res.redirect("/login");
        }
        req.logIn(user, (err) => {
            if (err) { return next(err); }
            req.flash("success", { msg: "Success! You are logged in." });
            res.redirect(req.session.returnTo || "/");
            console.log("login")
        });
    })(req, res, next);
};
 

재미있는 건 front단에서 validation을 하는 것이 아니라 요청을 받으면 해당 메소드에서 해주었다.

import { check, sanitize, validationResult } from "express-validator";

해당 check를 마치면 에러 발생시 validationResult에 에러 메시지가 담기는 모양인가보다.

에러가 있다면 flash를 이용하여 유저에게 전달한다.

아닐 경우에는 passport를 이용하여 로그인을 하게 된다.