개발공부 기록지

Index signature 란

객체의 속성(property)에 동적인 키를 사용하여 자유롭게 구현할 수 있도록 도와주는 TypeScript의  문법이다.

구문 (Syntax)

{ [key: KeyType]: ValueType }

- [ ] 안에 key 의 타입을 설정

- key : 객체의 속성을 나타내는 이름

- KeyType : key 의 타입,  주로 string, number 을 사용

- ValueType : 각 키에 해당하는 값의 타입

장점

1. 유연성: 사전에 정의되지 않은 키를 다룰 수 있다.
2. 타입 안전성: 객체의 키와 값에 대한 타입을 지정하여 타입 안전성을 유지한다.
3. 동적 데이터 처리: 동적인 데이터 구조를 처리하는 데 유용합니다. 예를 들어, 외부 API로부터 동적으로 키가 결정되는 데이터를 받을 때 유용하다.

단점

1. 데이터 타입의 유연성 부족 : 객체 내에 다양한 타입의 값을 혼합해서 사용할 수 없다
2. 유지보수성 감소 : 동적인 속성 이름을 사용하기 때문에, 객체의 구조를 한눈에 파악하기 어렵고, 추후에 구조를 변경하거나 디버깅할 때 어려움이 있을 수 있다.

예제

• string 타입의 키

interface StringIndexSignature {
  [key: string]: number;
}

const example: StringIndexSignature = {};
example['one'] = 1;
example['two'] = 2;

console.log(example); // { one: 1, two: 2 }

• number 타입의 키

interface NumberIndexSignature {
  [key: number]: string;
}

const example: NumberIndexSignature = {};
example[1] = 'one';
example[2] = 'two';

console.log(example); // { 1: 'one', 2: 'two' }

• DTO 에 string 타입의 키 적용

interface AnimalDataDTO {
  [animal: string]: number;
}

export class ExampleDTO {
  animal: YearlyDataDTO;

  constructor() {
    this.animal = {};
  }
}

const example: ExampleDTO = new ExampleDTO();
example['tiger'] = 1
console.log(example) // { tiger: 1 }

만들고 싶은 데이터 구조

{
  'year' : { 
    '2023' : { 'Back' : [ 10, 30, 40, ,,,],...}, 
    '2024' : { ...}
  }
}

타입을 정의하여 구현 하기

// TypeScript에서 객체의 키와 값이 동적으로 설정될 수 있도록 문법
// index signiture 를 이용
class ExerciseDataDTO {
  [bodyPart: string]: number[];
}

class YearlyDataDTO {
  [year: number]: ExerciseDataDTO;
}


export class AggregatedResultDTO {
  year: YearlyDataDTO;

  constructor() {
    this.year = {};
  }
}

https://joey0203.tistory.com/369 에서 내용 추가.

장점

• 객체가 변경되지 않으므로 예측가능한 상태 유지 가능
• 이해하기 쉽고 안정적인 서비스 개발에 도움이 된다.

단점

• 객체의 값이 할당될 때마다 새로운 객체가 필요하다.

구현 방법

const 사용

const helloWorld = "Hello World";

helloWorld = "Hi world"; // Cannot assign to 'helloWorld' because it is a constant.

Object.freez() 이용

const myDefinitelyConstantObject = Object.freeze({
  msg: "Hello World",
});

// Cannot assign to 'msg' because it is a read-only property.
myDefinitelyConstantObject.msg = "Hi"


const myFrozenArray = Object.freeze(["Hi"]);

//Property 'push' does not exist on type 'readonly string[]'.
myFrozenArray.push("World");

readonly 이용

class UserDetails { 
        readonly name: string 
        readonly city: string 
        readonly phoneNo: number 
        constructor(name: string, city: string, phoneNo: number){ 
            this.name = name 
            this.city = city 
            this.phoneNo = phoneNo 
        }   
} 
      
const user1 = new UserDetails("ABCD", "XYZ", 1234567890); 
const user2 = new UserDetails("APPLE", "PQR", 1269785100);

참고자료

• How to make object properties immutable in TypeScript ?
• https://www.typescriptlang.org/play#example/immutability

라이브러리 설치

$ npm i bcrypt
$ npm i -D @types/bcrypt

비밀번호 암호화하기

  async signUp(signUpRequestDto: SignUpRequestDto) {
    const { email, password } = signUpRequestDto;
    const user = new User();
    user.email = email;
    const hashedPassword = await bcrypt.hash(password, 10);
    user.password = hashedPassword;
    return await this.userRepository.save(user);
  }

saltround 를 .env 파일에서 호출하여 넣을 때

호출한 값의 데이터 타입 = string 이므로 아래와 같이 확인 절차를 걸쳐서 number 로 변환해주어야 한다.

const saltRounds = this.configService.get<string>('SALT_ROUNDS');
if (saltRounds === undefined) {
    throw new Error('SALT_ROUNDS is not defined in the configuration.');
}
const hashedPassword = await bcrypt.hash(password, parseInt(saltRounds));

signIn 을 할때는  아래 코드를 이용하여 입력된 패스워드와 DB에 저장된 패스워드가 일치하는지 확인

const passwordMatch = await bcrypt.compare(password, user.password);

자료출처

https://docs.nestjs.com/security/encryption-and-hashing

코드 tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "declaration": true,
    "removeComments": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "target": "ES2021",
    "sourceMap": true,
    "outDir": "./dist",
    "baseUrl": "./",
    "incremental": true,
    "skipLibCheck": true,
    "strictNullChecks": true,
    "noImplicitAny": true,
    "strictBindCallApply": false,
    "forceConsistentCasingInFileNames": false,
    "noFallthroughCasesInSwitch": true,
    "strictFunctionTypes": true,
    "useUnknownInCatchVariables": true,
    "noImplicitReturns": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
  }
}

• "module": "commonjs"  ▶ 생성될 모듈 코드 wlwjd
• "declaration": true   ▶ 프로젝트 배포시 .d.ts 파일을 생성
• "removeComments": true ▶ /*!로 시작하는 copy-right 헤더 주석을 제외한 모든 주석을 제거
• "emitDecoratorMetadata": true ▶ 소스에 데코레이터 선언에 대한 설계-타입 메타 데이터를 내보냅니다.
• "experimentalDecorators": true ▶ ES 데코레이터에 대한 실험적인 지원을 사용하도록 활성화합니다.
• "allowSyntheticDefaultImports": true ▶  default export가 없는 모듈에서 default imports를 허용합니다. 코드 방출에는 영향을 주지 않으며, 타입 검사만 수행합니다
• "target": "ES2021" ▶ JavaScript에 대한 버전을 설정합니다.
• "sourceMap": true ▶ 해당하는 .map 파일을 생성합니다.
• "outDir": "./dist" ▶ 컴파일된 파일들을 저장할 디렉토리를 지정합니다.
• "baseUrl": "./" ▶ 상대 경로가 아닌 모듈이 기본적으로  위치한 기준 디렉토리를 설정합니다.
• "incremental": true ▶ 프로젝트를 증분 컴파일할 수 있도록 .tsbuildinfo 파일을 저장합니다.
• "skipLibCheck": true  ▶ 모든 .d.ts 파일을 검사하는 형식을 건너뜁니다.
• "strictNullChecks": true ▶ 엄격하게 null 과 undefined 타입을 허락하지 않는다.
• "noImplicitAny": true ▶ any 타입으로 암시한 표현식과 선언에 오류를 발생시킵니다.
• "strictBindCallApply": false ▶  함수에서 bind, call 그리고 apply 메서드의 더 엄격한 검사를 활성화합니다.
• "forceConsistentCasingInFileNames": false ▶ 파일명에 대소문자 구분하지 않아도 되는 기능 사용 여부
• "noFallthroughCasesInSwitch": true ▶ 스위치 문에 fallthrough cases에 대해 오류 보고를 사용하도록 설정합니다.
• "strictFunctionTypes": true ▶ 함수를 할당할 때 매개 변수와 반환 값이 서브 타입과 호환되는지 확인합니다
• "useUnknownInCatchVariables": true ▶ catch 절의 변수 유형을 any 대신 unknown으로 만듭니다.
• "noImplicitReturns": true ▶ 함수의 모든 코드 경로에서 반환 값이 없을 때 오류를 보고합니다.
• "noUnusedLocals": true ▶사용되지 않은 지역 변수에 대한 오류를 보고합니다.
• "noUnusedParameters": true ▶ 사용되지 않은 매개변수에 대한 오류를 발생시킵니다

*증분컴파일 : 프로그램의 수정된 부분만 다시 컴파일하는 기술

참고자료

1. https://typescript-kr.github.io/pages/compiler-options.html
2. https://velog.io/@ez1211/tsconfig.json-%ED%95%9C%EA%B8%80-%EB%B2%88%EC%97%AD
3. https://inpa.tistory.com/entry/TS-%F0%9F%93%98-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-tsconfigjson-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0-%EC%B4%9D%EC%A0%95%EB%A6%AC
4. https://velog.io/@ez1211/tsconfig.json-%ED%95%9C%EA%B8%80-%EB%B2%88%EC%97%AD