24.9.30. 개발일지 // ts설정, favicon, view to dist, 조건부 요청

* ts설정

• tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "outDir": "dist",
    "sourceMap": true,
    "target": "ES6",
    "lib": ["es6"],
  },
}

• package.json
  • -watch => ts파일을 저장할때 자동으로 js로 컴파일
  • --onSuccess => 제대로 컴파일 됐을때만 뒤의 명령 실행

{
  "scripts": {
    "start": "tsc-watch --onSuccess \"node dist/main.js\""
  },
  "devDependencies": {
    "@types/node": "^22.7.4",
    "tsc-watch": "^6.2.0",
    "typescript": "^5.6.2"
  }
}

이후 npm start로 실행하면 된다.

* favicon

• 개념
  • “파비콘(favicon)”은 탭이나 북마크를 위해 브라우저에서 사용되는 아이콘이다. 이 아이콘은 여러분의 웹사이트를 구분하는데 도움을 주고 그 사이트에 유일한 표식을 준다.
  • 네이버 탭 좌측의 N 모양이 favicon 이다.

자체제작

* view to dist

• 문제 : ts는 dist내의 js로 바꿔서 실행됨 -> view도 dist내의 view를 찾음 -> html이나 png같은 것을 dist내에 옮겨줘야 제대로 찾음.
• 해결 :
  좋은 질문입니다. TypeScript 프로젝트에서 정적 파일(예: HTML, PNG 등)을 처리하는 것은 중요한 고려사항입니다. 일반적으로 이러한 파일들을 빌드 과정에서 자동으로 dist 폴더로 복사하는 것이 좋은 방법입니다. 수동으로 파일을 옮기는 것은 오류가 발생하기 쉽고 비효율적입니다.

이 문제를 해결하기 위한 몇 가지 방법을 제안해 드리겠습니다:

1. npm 스크립트 사용:

{
  "scripts": {
    "build": "tsc",
    "copy-views": "cp -R src/views dist/",
    "prebuild": "npm run copy-views"
  }
}

이 방법은 간단하지만, 운영 체제에 따라 명령어가 다를 수 있습니다 (예: Windows에서는 cp 대신 xcopy 사용).

2. copyfiles 패키지 사용:

먼저 패키지를 설치합니다:

npm install --save-dev copyfiles

그리고 package.json에 스크립트를 추가합니다:

{
  "scripts": {
    "build": "tsc",
    "copy-views": "copyfiles -u 1 src/views/**/* dist",
    "prebuild": "npm run copy-views"
  }
}

이 방법은 크로스 플랫폼에서 작동합니다.

3. ts-node 스크립트 사용:

더 복잡한 복사 로직이 필요한 경우, TypeScript로 스크립트를 작성할 수 있습니다:

// scripts/copyAssets.ts
import * as fs from 'fs-extra';
import * as path from 'path';

const src = path.resolve(__dirname, '../src/views');
const dest = path.resolve(__dirname, '../dist/views');

fs.copySync(src, dest, {
  filter: (src, dest) => {
    // 필요한 경우 여기에 필터 로직 추가
    return true;
  }
});

console.log('Views copied to dist folder');

그리고 package.json에 스크립트를 추가합니다:

{
  "scripts": {
    "build": "tsc",
    "copy-views": "ts-node scripts/copyAssets.ts",
    "prebuild": "npm run copy-views"
  }
}

4. Webpack 사용:

프로젝트가 이미 Webpack을 사용하고 있다면, copy-webpack-plugin을 사용할 수 있습니다:

const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
  // ... 기타 웹팩 설정
  plugins: [
    new CopyPlugin({
      patterns: [
        { from: 'src/views', to: 'views' }
      ],
    }),
  ],
};

5. TypeScript 프로젝트 참조 사용:

복잡한 프로젝트의 경우, TypeScript의 프로젝트 참조 기능을 사용하여 여러 하위 프로젝트로 나누고, 각각에 대해 outDir을 설정할 수 있습니다.

권장사항:

1. 프로젝트의 규모와 복잡성을 고려하여 적절한 방법을 선택하세요.
2. 선택한 방법을 문서화하고 팀원들과 공유하세요.
3. CI/CD 파이프라인에 이 과정을 포함시켜 자동화하세요.

이러한 방법들을 통해 정적 파일들을 자동으로 dist 폴더로 복사할 수 있으며, 빌드 프로세스를 더욱 효율적으로 만들 수 있습니다.

 

 

* app 의사코드

 

* 조건부 요청

캐시시간 이내이면, 서버에 요청을 안함. 브라우저 캐시 사용.

export const cachePolicy = {
    'html': 'no-cache',
    'css': 'public, max-age=86400',
    'js': 'public, max-age=86400',
    'png': 'public, max-age=604800',
    'jpg': 'public, max-age=604800',
} as const;

public setCacheControl(value: string): this {
    this.header('Cache-Control', `max-age=${value}`);
    return this;
}

 

* 조건부 요청 V1 last-modified

• 아래의 etag와 작동방식은 비슷하다.

최초 요청에 Last-Modified 응답

이후 요청에 if-modified-since

변경일이 같은경우 response

 

 

* 조건부 요청 V2 etag

• 구현은 etag 방식만 해보기로 한다.
• 문제 : 현재는 모든 요청에 대해 html, image등이 변경점이 없어도, 새로운 파일을 보내준다.
  • 네트워크는 돈, 돈이 낭비되고 있는것이다.
• 해결 : etag 조건부요청
  • 최초요청은 그냥 body에 파일을 보내준다. && 파일을 해시한 값인 Etag를 같이 보내준다.
  • 이후 브라우저는 요청시 if-none-match를 같이 보낸다.
  • 이 값을 비교해서, 현재 파일의 해시값과 비교하여,
    • 같으면 304 Not Modifed를 보내고
    • 다르면 새로운 body에 변경된 content를 보내준다.

최초 응답

2번쨰 요청

변경사항이 없는경우 (해시값이 같은경우) 응답

조건부요청 없는경우

조건부 요청을 적용한경우, body를 안보낸다.