argument데이터들을 가공한 후에 컨트롤러 메소드로 값을 넘겨주는 미들웨어이다. 컨트롤러 메소드들이 실행되기 전에 pipe가 실행된다고 이해하면 된다. 데이터를 원하는 형태로 변환하고 검증까지 할 수 있다.

글로벌 - 컨트롤러 - 라우트 - 라우트 파라미터에 사용할 수 있다. 그리고 주로 라우트 파라미터를 많이 사용 한다. (이전에 이미 main에서 글로벌로 class-validator를 사용해보긴 했다.)

코드를 보면 이해하기 쉬운데 첫번째 이미지가 라우트 파라미터에 적용한 코드이다. 파라미터의 id를 int형으로 변환해주고 검증까지 해준다. 두번째 이미지처럼 test라는 값을 id에 넘길경우 에러를 반환해준다.

또한 이런식으로 에러메세지에 대해 커스텀도 가능하다.

custom으로 pipe를 만들 수도 있다.

import {
  ArgumentMetadata,
  BadRequestException,
  Injectable,
  PipeTransform,
} from '@nestjs/common';

@Injectable()
export class MovieTitleValidationPipe implements PipeTransform<string, string> {
  transform(value: string, metadata: ArgumentMetadata): string {
    if (!value) {
      return value;
    }

    if (value.length <= 2) {
      throw new BadRequestException('영화의 제목은 3자 이상 작성해주세요!');
    }
    return value;
  }
}

이렇게 query parameter값의 validation을 체크해줄 수 있다.

Mapped Types

이미지보면 createDto와 UpdateDto의 각 필드의 class-validator가 isOptional 데코레이터만 제외하고 일치한다.

이렇게 변경해주면 createDto의 필드들을 nullable로 만들어주는 partial을 사용하면 된다.

이밖에도 pick, omit, intersection, composition등이 있다. 뭔가 TS의 유틸리티타입 같다.

Serialization

@Exclude 데코레이션 통해서 프론트엔드로 해당 컬럼은 보내지 않는다.

예를 들어, 은행어플에서 a계좌에서 b계좌로 1000원을 입금하는 과정에서 돈은 빠져나가고 b계좌로 받기 전 에러가 나면 1000원이라는 데이터는 유실된다. 또 a계좌는 1000원이 차감된 잔액으로 계속 유지가 된다. 그래서 출금과 입금을 transaction을 사용하여 하나로 논리적 작업 단위로 묶을 수 있으며, 따라서 모두 다 실행되거나 롤백이 될 수 있게 작업해야한다. nest에서 이런 롤백기능을 편하게 제어할 수 있는 기능을 제공한다.

createQueryRunner()로 queryRunner를 생성하고 기존 repository방식으로 type orm을 사용하는 부분을 queryRunner.manager로 바꿔주면 되고, 꼭 try, catch문으로 사용해서 에러발생시 catch에 걸려서 rollbackTransaction()이 실행되도록 한다.

또 이미지를 참고하면 의도적으로 코드 중간에 error를 발생시켰는데 이 때 movieDetail에 데이터가 추가되어있지 않는다. 만약 기존 repository방식으로 사용했다면 movieDetail 테이블에 데이터는 추가가 되었을 것이다.

entity에서 해당테이블의 특정 컬럼을 유니크로 지정할 수 있고, nullable을 통해 null로 수정 못하도록 강제한다. DB에서도 지울 수 없다.

Many To Many와 relationship

typeOrm이 제공하는 데코레이터로 지정해서 크게 어려운 건 없지만 foreign key관리하는 방식을 기억해두자.

1. 다대다는 두 테이블 사이의 관계를 저장하기 위해 별도의 중간 테이블이 필요하기 때문에 JoinTable이 필요하며 중간테이블이 FK관리.
2. 일대일은 어느 쪽 테이블에서 FK를 관리할지 명시적으로 지정해야 하며, 순전히 개발자의 마음대로 하면 된다.
3. 다대일 관계에서는 자연스럽게 FK가 Many 테이블에 포함된다. (그래서 관계 지정 데코레이터 필요 없음)

Many To Many시에 별도의 중간 테이블 생성 상태

1. entity embedding

export class BaseEntity {
  @CreateDateColumn()
  createdAt: Date;

  @UpdateDateColumn()
  updatedAt: Date;

  @VersionColumn()
  version: number;
}

@Entity()
export class Movie {
  @PrimaryGeneratedColumn()
  id: number;

  @Column()
  title: string;

  @Column()
  genre: string;

  @Column(() => BaseEntity)
  base: BaseEntity;
}

내가 설정한 객체에 임베딩 (extend와의 차이)

2. entity extends

@Entity()
export class Movie extends BaseEntity {
  @PrimaryGeneratedColumn()
  id: number;

  @Column()
  title: string;

  @Column()
  genre: string;
}

일반적인 상속 방법으로 사용

3. single table inheritance

@Entity()
@TableInheritance({
  column: {
    name: 'type',
    type: 'varchar',
  },
})
export class Content extends BaseEntity {
  @PrimaryGeneratedColumn()
  id: number;

  @Column()
  title: string;

  @Column()
  genre: string;
}

@ChildEntity()
export class Movie extends Content {
  @Column()
  runtime: number;
}

@ChildEntity()
export class Series extends Content {
  @Column()
  seriesCount: number;
}

childEntity에서의 개별적인 컬럼들을 포함하여 하나의 테이블로 생성. 이 때 개별적인 값들은 nullable 인데 로우 생성 시 content테이블에는 다음과 같이 생성된다. post movie -> seriesCount는 null로 생성 post series -> runtime은 null로 생성

근데 언제 써야할지는 잘 모르겠다.. 대신 SQL로 만드는 건 감도잘 안오는데 굉장히 직관적으로 구현할 수 있는 것 같다

relationship

OneToOne

cascade 옵션

  async createMovie(createMovieDto: CreateMovieDto) {
    const movieDetail = await this.movieDetailRepository.save({
      detail: createMovieDto.detail,
    });

    const movie = await this.movieRepository.save({
      title: createMovieDto.title,
      genre: createMovieDto.genre,
      detail: movieDetail,
    });

    return movie;
  }

기존 영화 생성코드인데 사실 movieDetail 을 따로 선언해서 사용하지않고 바로 detail: createMovieDto.detail을 할 수 있으면 편하다.

그러나 바로 아래와 바로 써버리면 영화 조회시에 detailId가 null이고 연결이 안된다.

 async createMovie(createMovieDto: CreateMovieDto) {
    const movie = await this.movieRepository.save({
      title: createMovieDto.title,
      genre: createMovieDto.genre,
      detail: {
        detail: createMovieDto.detail,
      },
    });

    return movie;
  }

이것을 가능하게 하는 것이 cascade 옵션이다.

@OneToOne(() => MovieDetail, (movieDetail) => movieDetail.id, {
    cascade: true,
  })

Movie Entity에서 relationship 관련 부분에 cascade를 true로 해주면 movie생성시에 detail 테이블까지 한꺼번에 생성가능하다.

@module

프로젝트의 메인 모듈이 되는 app.module.ts 인데 joi를 사용해서 환경변수를 validation하였고, 참고로 환경변수 셋팅시에 fotRoot대신 forRootAsync를 통해 비동기적으로 환경변수를 셋팅할 수 있다고 한다. GPT는 외부 API 연동 시에 유용하다고 하는데 강의를 좀 더 봐야할 듯 하다.

참고로 nest.js는 ioc 컨테이너를 통해 인스턴스 생성과 injection을 자동으로 해준다는데 이론적인 내용이라 필요할 때 다시 이해해봐야할 듯.

Dto

custom validator를 만들 수도 있고, class transformer를 통해 expose, exclude, 응답값 변환도 가능하니 필요할 때 코드 참고하면 될 듯 하다. 필요할 때 찾아쓰자.

Entity

Service

id값으로 특정 영화가져오는 코드인데 repository 메서드들은 필요할 때 찾아보자. 참고로 NotFoundException은 @nestjs/common에서 제공하는 기능인데 이거 안쓰면 id와 일치하는 영화 없어도 200 ok 떨어진다. 에러처리를 위해 꼭 필요한 곳에 사용해줘야 한다.

강의 꽤 본 것 같은데 정리해보니 많지않다. 포스트맨과 postgres 사용해 보니 신기하고 api 어떻게 만드는지 감이 조금씩 오는 것 같다.

MFA 직접 구현과 webpack5의 module federation을 통한 구현도 실습해봐야할 것 같다.

제네릭은 다양한 타입을 지원하면서도 타입 안정성을 제공한다. 제네릭을 사용하면 코드의 유연성이 크게 향상되며, 코드의 재사용성을 높이고 유지보수성을 개선할 수 있다.

제네릭 타입 vs 유니언 타입

다음은 클래스의 인스턴스에서 어떤 타입의 데이터를 저장할건지 선택하고 해당 데이터 타입만 사용하는 클래스를 구현한 코드이다.

만약 아래와 같이 구현할 경우 매서드를 호출할때마다 윈시형 타입이라면 어떠한 타입이라도 data 속성에 추가 및 삭제할 수 있으며, 기능을 정상적으로 구현하기 위해서는 typeof로 타입체크를 해야하기 때문에 코드의 가독성도 많이 떨어질 것이다.

메서드 호출 시, 파라미터 타입의 유연성을 가지고 싶다면 유니언 타입, 하나의 타입으로 고정하고 싶으면 제네릭 타입을 사용하면 된다.

Generic 타입은 함수나 클래스의 선언 시점이 아닌, 사용 시점에 타입을 선언할 수 있는 방법을 제공한다.

출처: https://inpa.tistory.com/entry/TS-📘-타입스크립트-Generic-타입-정복하기 [Inpa Dev 👨‍💻:티스토리]

getter와 setter를 통해서만 private & protected 속성에 접근하도록하여 캡슐화를 구현.

호출 하는 대상이 무엇인가에 집중해야한다. https://www.youtube.com/watch?v=tDZROpAdJ9w 해당 영상참조하여, bind, 화살표함수에서의 this도 알아 둘 것.

타입체크를 추가하여 컴파일단계에서 에러체크

또한 employees 프로퍼티 앞에 private가 있는데, 해당 클래스 안에서만 접근이 가능하며, 외부에서 직접

accounting.employees[2] = "Anna";

와 같이 수정하려고 하면 에러가 표시될 것이다.

addEmployee 메서드를 써서 추가하도록 해야하고, public은 별도로 표시안해도됨.

약식 초기화 및 readonly

constructor에서 프로퍼티 선인 및 초기값 할당을 할 수 있다. readonly를 추가하면 내부 메서드에서도 해당 프로퍼티는 수정할 수 없다.

태블릿 구입기념 스터디내용 기록중. 뭔가 더 좋은 기록방법을 연구해야할 듯.

일반적으로 router설정은 여태 위와같이 /를 붙혀 절대경로로 지정했는데,

위와 같이 부모라우트를 절대경로로 지정하고, 자식 페이지들(RootLayout 컴포넌트의 Outlet으로 들어가는)은 상대경로로 지정해주면 부모 url의 뒤에 자동으로 붙는다.

첫번째 문제점

product의 리스트페이지에서 각 상품의 title을 클릭하면 상세페이지로 이동하는데, 기존에는 절대경로 지정이기 때문에 제일 앞에 root가 안붙는다. 그렇기 때문에 해당 경로를 찾을 수 없다.

디테일 페이지는 목록에서만 접근할 수 있기 때문에, 디테일 페이지로 이동하는 경로를 상대경로로 바꿔주면 자동으로 id값이 붙어 정상적으로 디테일 페이지로 이동한다. (useParams 적용은 위에서 맨 위에서 설정해두었으니 참고바람)

두번째 문제점

디테일 페이지에 뒤로가는 기능인 버튼을 달았고, 보통 import시 경로설정을 할 때 많이 본 '..'로 상위 페이지로 이동하게 하였다.

디테일 페이지 url.

클릭했을 때의 url.

클릭하면 당연히 리스트로 갈줄알았는데 왜 root로 가버릴까?

지정한 router설정을 보면 리스트 페이지인 'products'와 디테일페이지인 'products/:productId'는 형제관계이다. 즉 상위 페이지는 '/root' 였던 것이다.

이를 해결하기 위해서는

Link 속성에 relative="path"를 사용하여 현재 url경로를 토대로 상위페이지로 이동하게 한다.

원하던 대로 리스트페이지로 이동됐다.

default 값은 relative="route" 인데, 말그대로 route를 참조하느냐 현재 path를 참조하느냐의 차이이다.

그간 router설정은 path 지정과 auth 상태에 따른 페이지접근 지정만 해보고 오늘 포스팅내용은 처음 봤다. NavLink라는 간편한 기능(너무 간단해서 검색하면 될 듯)도 모르고 그저 Link만 사용하여 css로 처리했는데, 간단하지만 유용한 부분을 알게 된 것 같다.

Portal은 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 최고의 방법을 제공합니다.

overflow: hidden대화 상자를 불러오는 구성 요소가 대화 상자를 방해하는 컨테이너 또는 다른 스타일 안에 있더라도 포털을 사용하여 페이지의 나머지 부분 위에 떠 있는 모달 대화 상자를 만들 수 있습니다. portals의 일반적인 사용 사례는 부모 컴포넌트가 overflow: hidden 이나 z-index 스타일을 가지지만, 자식이 컨테이너에서 시각적으로 “이탈해야 하는” 경우입니다. 예를 들어, 다이얼로그나, 호버카드나, 툴팁같은 게 있습니다.

그간 modal은 각 컴포넌트에서 상황에 따라 불러와 해당 컴포넌트내부에서 자식으로 직접 배치하여 사용했다.

index.html의 매우 깊숙한 곳에 자리잡고 있을 것이고, 부모요소의 css 스타일이 적용될 수도 있기 때문에 성능상 좋지 않은 방법이다.

portal을 사용하면 DOM 트리의 다른 위치에 렌더링할 수 있기때문에, modal등의 컴포넌트들을 어떠한 컴포넌트의 자식요소로 배치할 필요가 없게 된다.

스터디를 하면서 portal의 개념을 처음으로 알게 되었고 이를 사용한 후기를 기록해보자.

index.html에서 모달컴포넌트가 렌더될 id="overlays"인 div를 만들어둔다.

import ReactDOM from 'react-dom';

import classes from './Modal.module.css';

const Backdrop = (props) => {
  return <div className={classes.backdrop} />;
};

const ModalOverlay = (props) => {
  return (
    <div className={classes.modal}>
      <div className={classes.content}>{props.children}</div>
    </div>
  );
};

const portalElement = document.getElementById('overlays');

const Modal = (props) => {
  return (
    <>
      {ReactDOM.createPortal(<Backdrop />, portalElement)}
      {ReactDOM.createPortal(
        <ModalOverlay>{props.children}</ModalOverlay>,
        portalElement
      )}
    </>
  );
};

export default Modal;

위와 같이 modal 컴포넌트 내부를 구성한다.

root말고 overlays에 모달이 렌더된다.

react 18버전에서는 react-dom에서 createPortal 훅을 지원하기 때문에 아래와 같이 변경할 수 있다.

import ReactDOM from "react-dom";
import { createPortal } from "react-dom"; //변경

import classes from "./Modal.module.css";

const Backdrop = (props) => {
  return <div className={classes.backdrop} />;
};

const ModalOverlay = (props) => {
  return (
    <div className={classes.modal}>
      <div className={classes.content}>{props.children}</div>
    </div>
  );
};

const portalElement = document.getElementById("overlays");

const Modal = (props) => {
  return (
    <>
      {createPortal(<Backdrop />, portalElement)} //변경
      {createPortal(
        <ModalOverlay>{props.children}</ModalOverlay>,
        portalElement
      )}
    </>
  );
};

export default Modal;

사용방법은 굉장히 간단한데 얻는 이점이 굉장히 많을 것으로 생각된다. 현재 프로젝트를 리팩토링 하면서 modal을 portal로 변경해보는 것으로 더 연습을 해보면 좋을 것 같다.

portal 관련 react 공식문서 https://react.dev/reference/react-dom/createPortal

디바운싱(Debouncing) : 연이어 발생한 이벤트를 하나의 그룹으로 묶어서 처리하는 방식으로, 주로 그룹에서 마지막, 혹은 처음에 처리된 함수를 처리하는 방식으로 사용되곤 한다.

useEffect(() => {
      setFormIsValid(
        enteredPassword.trim().length > 6 && enteredEmail.includes("@")
      );
  }, [enteredEmail, enteredPassword]);

위와 같이 enteredEmail, enteredPassword를 의존성 배열에 추가하여, 변화가 있을 때마다 formIsValid의 값을 변화시킨다고 했을 때에는 위와같이 useEffect를 사용하면 큰 문제가 되지 않을 것이다.

하지만 백엔드 서버와 통신하는 코드가 있다고 가정하면, 의존성 배열의 state들이 변화가 있을 때마다 네트워크 요청을 보낼 것이고, 이는 불필요한 네트워크 트래픽을 만든다.

따라서 최상단 정의대로 간단한 디바운싱을 구현하여, 마지막에 함수를 처리해보도록 하자.

1. useEffect(() => {
    setTimeout(() => {
      console.log("checking form validity!");
      setFormIsValid(
        enteredPassword.trim().length > 6 && enteredEmail.includes("@")
      );
    }, 500);
   }, [enteredEmail, enteredPassword]);

위와 같이 사용한다면 8번의 타이핑을 했을 때

500ms 후 8번의 코드실행이 나타난다. 서버 통신이라고 가정한다면 8번의 실행은... 불필요하다.

2. useEffect(() => {
    setTimeout(() => {
      console.log("checking form validity!");
      setFormIsValid(
        enteredPassword.trim().length > 6 && enteredEmail.includes("@")
      );
    }, 500);
   
   return () => {
      console.log("CLEANUP");
    };
   }, [enteredEmail, enteredPassword]);

return문에 CLEANUP을 출력하는 익명함수를 추가했다.(기명 함수도 물론 가능.)

첫번째 이펙트가 실행되기 전에는 CLEANUP이 출력되지 않는다. 11번의 타이핑이 있으면 첫번째 이펙트가 실행되기 전에 11번 출력된다.

3.

 useEffect(() => {
    const identifier = setTimeout(() => {
      console.log("checking form validity!");
      setFormIsValid(
        enteredPassword.trim().length > 6 && enteredEmail.includes("@")
      );
    }, 500);

    return () => {
      console.log("CLEANUP");
      clearTimeout(identifier);
    };
  }, [enteredEmail, enteredPassword]);

identifier라는 함수를 만들고 cleanup함수에서 clearTimeout을 시켜준다.

첫번째 이펙트는 결국 한번만 실행되고, 서버와 통신하는 코드라면 한번만 실행하여 불필요한 네트워크 트래픽을 줄일 수 있게 되었다.

참고로 의존성 배열이 빈배열이면 cleanup함수는 dom에서 컴포넌트(useEffect를 사용하는 컴포넌트)가 제거 될때 실행된다.

현재 실무에서는 서버와 통신하는 useEffect를 생성하여 의존성배열에 빈배열을 두고 컴포넌트 렌더시 한번만 실행하게 하고 있다.

그외 다른 state들을 조작하는 useEffect들은 새로 useEffect훅을 사용하여 처리하고 있는데, 디바운싱을 잘 활용하면 여러개의 useEffect들을 만들지 않고 보다 깔끔하게 처리 할 수 있을 것 같다.

쓰로틀링(throttling) : 마지막 함수가 호출된 후 일정 시간이 지나기 전에 다시 호출되지 않도록 하는 것 몇 밀리초에 한 번씩만 실행되게 제한을 두는 것

이라는 개념도 있는데, 스크롤 이벤트에 주로 달아준다.

const handleScroll = () => {
    if (throttle) return; //throttle이라는 state를 미리 선언해준다.
    if (!throttle) {
      setThrottle(true);
      setTimeout(() => {
        console.log("throttle");
        setThrottle(false);
      }, 300);
    }
  };

위와 같은 함수를 scroll이벤트에 달아주면 throttle이 false일 때 setTimeout함수가 실행되면서 throttle을 true로 바꿔주고 throttle이 true일 때는 return으로 함수를 종료시킬 수 있다.

그래서 throttle이 true일 때 실행될 함수를 300ms마다 실행할 수 있다.

getter, setter 함수라고도 부름 스스로는 값을 갖지 않음 - 다른 프로퍼티의 값을 읽거나 저장할 때 사용 get, set을 앞에 붙임

const person1 = {
  age: 17,

  get koreanAge () {
    return this.age + 1;
  },

  set koreanAge (krAge) {
    this.age = krAge - 1;
  }
}

console.log(person1, person1.koreanAge); //get함수 사용법. 함수같이 생겼는데 마치 프로퍼티를 쓰는 것처럼 ()를 안붙힌다.
//{age: 17} 18

person1.koreanAge = 20; // set함수 사용법. 역시 ()를 안붙히며, 인자는 하나이므로 20하나만 전달한다.

console.log(person1, person1.koreanAge); 
//{age: 19} 20;

클래스에서도 사용가능하다.

class CityOfKorea {
  constructor (name, no) {
    this.name = name;
    this.no = no;
  }
  get cityTitle() {
    return `${this.no}번 도시 ${this.name}`;
  }
  set cityNo(cityNo) {
    if (typeof cityNo !== 'number') return;
    if (cityNo <= 0) return;
    this.no = cityNo;
  }
}

const city1 = new CityOfKorea('서울', 1)

정상적인 숫자가 들어가야 no가 바뀌는 것을 볼수 있다.

class CityOfKorea {
  constructor (name, no) {
    this.name = name;
    this.no = no;
  }
  get no() {
    return this.no + '번 도시';
  }
  set no(no) {
    this.no = no;
  }
}

이렇게 필드 이름과 setter의 이름이 같을 때는 어떻게 되는가? 무한 반복이 일어나는데 이부분까지는 무료이니 얄코 강좌 중 접근자 프로퍼티를 참고해보자.

setter의 무한반복이 일어난다고 할 수 있다.

해결방법

class CityOfKorea {
  constructor (name, no) {
    this.name = name;
    this.no = no;
  }
  get no() {
    return this._no + '번 도시'; //밑줄추가
  }
  set no(no) {
    this._no = no; //밑줄추가
  }
}

const city1 = new CityOfKorea('인천', 2);

setter와는 다른 필드명을 사용하여 자기반복호출을 방지 constructor의 no는 setter를 가리키고 실제 필드명은 _no가 됨

은닉

💡 캡슐화 encapsulation 인스턴스의 프로퍼티 값을 함부로 열람하거나 수정하지 못하도록 은닉 자바스크립트의 필드는 기본적으로 public

class Employee {
  #name = '';
  #age = 0;
  constructor (name, age) {
    this.#name = name;
    this.#age = age;
  }
}

const emp1 = new Employee('김복동', 32);

console.log(emp1);
//Employee {#name: '김복동', #age: 32}

console.log(emp1.#name); // ⚠️ 오류 발생
// 오류발생이라고는 하는데 console에는 잘 찍힌다... 뭐지...
// 대괄호로 접근 할 때는 undefined 반환

class Employee {
  #name = '';
  #age = 0;
  constructor (name, age) {
    this.#name = name;
    this.#age = age;
  }
  get name () {
    // [n]: n + 1 번째 글자를 반환
    return this.#name[0] + '모씨';
  }
  get age () {
    return this.#age - (this.#age % 10) + '대';
  }
  set age (age) {
    if (typeof age === 'number' && age > 0) {
      this.#age = age;
    };
  }
  getOlder(years) { this.#age += years; }
}

const emp1 = new Employee('김복동', 22);

constructor, 접근자 프로퍼티 또는 기타 함수에서 접근 가능 인스턴스에서 바로 접근은 못하도록 은닉, 위 방법들로 제어

외부에서 클라이언트가 그 키를 알고 값을 요청해도 접근이 불가능하게 막아둔다.

얄코 접근자프로퍼티에 대하여

개인적으로 위의 링크에서 맨 밑에 부분에서 하나하나 복사하며 값을 직접 확인해보는 것을 추천한다.

이번 챕터는 얄코님 페이지에서 많은 코드를 발췌해서 정리했다.

조금 이해하기가 어려워서 3번정도 돌려보았다.

결국 위의 개념은 정보은닉으로 이어지는 것 같다.

객체에 대한 구체적인 정보를 노출시키지 않도록 하고, 외부접근도 불가능하게 하기 위한 방법으로 이해할 수 있을 것 같다.

캡슐화가 컴포넌트화인줄 알고, 은닉이란 것은 막연히 서버 쪽 개념이라고만 생각해왔는데

이번에라도 알게 되어 다행인 것 같기도 하고.. 아직 멀었다 싶기도하다...🥲

클래스의 기본 형태.

constructor매서드는 아래와 같은 특성을 지닌다.

• 인스턴스 생성시 인자를 받아 프로퍼티를 초기화함

• 클래스에 하나만 있을 수 있음 - 초과시 오류 발생
• 다른 메서드 이름을 쓸 수 없음
• 기본값 사용 가능
• 필요없을 (인자가 없을 때 등) 시 생략 가능
• 값을 반환하지 말 것! 생성자 함수처럼 암묵적으로 this 반환

생성자 함수와의 차이

클래스로 인스턴스 생성시 로그에서 프로토타입으로 들어간다.

간단하게 만들어서 콘솔로 확인해보자.

필드

class FavoriteMovie {
  actor = '실베스터 스탤론';  //field값이 정해져있으므로 constructor 필요없음.
  about = {'best': 1, 'worst': 5};
  constructor (name, type) {
    this.name = name;
    this.type = type;
  }
  introduce () {
    return `내가 좋아하는 영화는 ${this.name}이고 ${this.type}장르야!`;
  }
  more (name) {
    return `${this.about[name]}편이 제일 재밌었어`
  }
}


const movie1 = new FavoriteMovie('록키','액션');
const movie2 = new FavoriteMovie('대부', '느와르');

movie1.about['best'] = 6; //movie1만 변경. 과연 movie2도 영향이 있을까?

console.log(movie1.more('best'), movie2.more('best'))

여기서 알수 있는 것은 초기값만 같을 뿐, 인스턴스들의 값들은 개별적으로 적용된다!

정적(static)필드와 메서드

class FavoriteMovie {
  static theme = "복싱";
  static introduceTheme () {
      return `${this.theme}장르입니다.`;
  } 
  constructor (name, type) {
    this.name = name;
    this.type = type;
  }
  introduce () {
    return `내가 좋아하는 영화는 ${this.name}이고 ${this.type}장르야!`;
  }
}

이렇게 클래스를 선언하고 아래와 같이 테스트해봤다.

여기서 알수 있는 것은 static 필드는 클래스 차원에서만 호출이 가능하다는 점이다.

그리고 정적 메서드(introduceTheme)는 정적 필드(theme)만 사용 가능하다. constructor로 만들어진 필드에 접근하면 에러가 발생한다.

그리고 만들어진 인스턴스 수에 관계없이 메모리한곳만 차지한다.

위의 class를 예시로 들면, 위의 class를 통해 만들어진 인스턴스들은 각각 name,type, introduce()를 차지하고 있는데,

static필드는 FavoriteMovie 단 한곳에서만 차지한다.

//인천의 관광지들을 나타내는 객체들

const spot1 = {
  name: '월미도',
  no: 1,
  introduce () {
    return `인천의 ${this.no}번째 관광지, ${this.name}입니다!`;
  }
};

const spot2 = {
  name: '차이나타운',
  no: 2,
  introduce () {
    return `인천의 ${this.no}번째 관광지, ${this.name}입니다!`;
  }
};

const spot3 = {
  name: '개항장',
  no: 3,
  introduce () {
    return `인천의 ${this.no}번째 관광지, ${this.name}입니다!`;
  }
};

위와 같이 같은 형식의 객체를 만들었다. 그러나 관광지들이 100개, 1000개라면?

// 생성자 함수 

function IncheonTravelingSpot (name, no) {
  this.name = name;
  this.no = no;
  this.introduce = function () {
  return `인천의 ${this.no}번째 관광지, ${this.name}입니다!`;
  }
}

와 같이 하나의 틀을 만들면 된다.

// 아래와 같이 생성자 함수로 만들어진 객체를 인스턴스라고 한다.

const spot1 = new IncheonTravelingSpot('월미도', 1);
const spot2 = new IncheonTravelingSpot('차이나타운', 2);
const spot3 = new IncheonTravelingSpot('개항장', 3);

• 생성자 함수는 new 연산자와 함께 사용한다! => new를 붙히지않으면 undefined 반환.
• 생성자 함수에서는 메서드 정의가 불가하다 => 리터럴 객체 생성과 클래스에서는 가능.

프로토타입

자바스크립트 객체지향의 중심이라고 한다.

// 생성자 함수 

function IncheonTravelingSpot (name, no) {
  this.name = name;
  this.no = no;
  this.introduce = function () {
  return `인천의 ${this.no}번째 관광지, ${this.name}입니다!`;
  }
}

const spot1 = new IncheonTravelingSpot('월미도', 1);

IncheonTravelingSpot.prototype.introEng = function () {
  return `Welcome to Incheon at ${this.name}!`;
};

spot1정의 후 introEng라는 프로토타입을 추가했음에도 유기적으로 연결되어 있다.

타 방식과의 차이점

//생성자 함수
function IncheonTravelingSpot (name, no) {
  this.name = name;
  this.no = no;
  this.introduce = function () {
  return `인천의 ${this.no}번째 관광지, ${this.name}입니다!`;
  }
}

//객체를 직접 반환
function createIncheonTravelingSpot (name, no) {
  return {
    name, no,
    introduce () {
      return `인천의 ${this.no}번째 관광지, ${this.name}입니다!`;
   }    
  }
}

/// 객체 리터럴
const spot1 = {
  name: '월미도', no: 1,
  introduce: function () {
  return `인천의 ${this.no}번째 관광지, ${this.name}입니다!`;
  }
};

// 객체 반환 함수
const spot2 = createIncheonTravelingSpot('차이나타운', 2);

// 생성자 함수
const spot3 = new IncheonTravelingSpot('개항장', 3);

차이점은 일단 spot3만 로그앞에 생성자 함수명이 써져있기도하고.... instanceof의 return값도 다르다. constructor체인을 열어보면 차이점을 명확하게 알 수 있다. spot3은 생성자함수를 포함하고 있다.

생성자 함수 자체의 프로퍼티와 함수 추가

function IncheonTravelingSpot (name, no) {
  this.name = name;
  this.no = no;
  this.introduce = function () {
    return `인천의 ${this.no}번째 관광지, ${this.name}입니다!`;
   }
}

IncheonTravelingSpot.gu = '중구';
IncheonTravelingSpot.contact = function () {
    return `안녕하세요! ${this.gu}청입니다. 무엇을 도와드릴까요?`
} ;

const spot3 = new IncheonTravelingSpot('개항장', 3);

위의 프로토타입 항목에서 처럼 *IncheonTravelingSpot.prototype~ *방식이 아닌 직접 넣었다.

차이를 알 수 있을 것이다.

자세한 내용은 차후 정적 프로퍼티(static)에서 다루도록 하자.

// new를 넣지 않았을 때
function IncheonTravelingSpot (name, no) {
  this.name = name;
  this.no = no;
  this.introduce = function () {
    return `인천의 ${this.no}번째 관광지, ${this.name}입니다!`;
   }

  if (!new.target) { 
    return new IncheonTravelingSpot(name, no); //재귀함수 형식을 사용하여 방지해줄 수 있다.
  }
}

const spot1 = new IncheonTravelingSpot('월미도', 1);
const spot2 = IncheonTravelingSpot('차이나타운', 2);

console.log(spot1, spot2);

정상 출력되는 것을 볼 수 있다.

클래스에서는 new 없으면 오류발생하므로 그냥 이렇구나하고 넘어가자.

https://www.inflearn.com/course/%EC%A0%9C%EB%8C%80%EB%A1%9C-%ED%8C%8C%EB%8A%94-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8/dashboard

얄코님의 제대로 파는 자바스크립트를 보고 있는데 확실히 모던자바스크립트라는 서적으로만 보면 이해안되는 것을 쉽게 설명 잘해주신다. 항상 기본을 중시하고 항상 복습하도록 하자!

기존 문법

const x = 1, y = 2;

const obj1 = { 
  x: x,
  y: y
}

console.log(obj1);
=> {x: 1, y: 2}

콘솔찍어보기전에는 에러가 날 것 같았는데 x:1, y:2로 할당이 되었다.

ES6에서의 문법

function createProduct (name, price, quantity) {
    return {name, price, quantity}
}

createProduct('선풍기', 5000, 1)

=> {name: '선풍기', price: 5000, quantity: 1}

위와 같이 마치 클래스를 찍어내듯 사용할 수 있다.

기존문법

const person = {
  name: '홍길동',

  salutate: function (formal) {
    return formal
    ? `안녕하십니까, ${this.name}입니다.`
    : `안녕하세요, ${this.name}이에요.`;
  }
}
console.log(person.salutate(true));
=>안녕하십니까, 홍길동입니다.

const person = {
    name: '홍길동',

    salutate (formal) {
        return formal
        ? `안녕하십니까? 저는 ${this.name}입니다.`
        : `안녕? 나는 ${this.name}이야`
    }
}

console.log(person.salutate(true));
=>안녕하십니까, 홍길동입니다.

ES6부터는 위의 표현으로 정의된 함수만(function으로 정의한 것이 아닌) 매서드라고 부른다.

코드의 길이가 짧아지고 가독성이 좋아진 것 같다.

사실 위 2개의 사례를 보면 현업에서 사용할 가능성은 적지만, 기록해두면 언젠가 써먹을 날이 오겠지..음..

바로 다음 프로젝트가 이어졌고, 처음으로 실전에서 개발 환경 구성을 진행하였다.

사실 회사에서도 devops의 개념이 처음 도입되면서, 백엔드 쪽은 다른 분이, 프론트는 내가 맡게 되었고, AWS 버킷생성도 못하는 신입의 입장에서는 굉장히 난감한 상황이었다.

처음에는 많은 경험과 스펙을 쌓을 수 있어 호기롭게 도전했지만 docker, k8s, aws설정방법등에 대해 공부하며 느낀 것은 개발과는 또다른 삽질의 연속이다. 어떻게 하란거지가 아니라 이게 대체 무슨 말이지라는 느낌이었다. 특히 컨테이너개념과 오케스트레이션은 개념은 이해해도 이게 왜 프론트에 필요한지 아직 이해가 되지않는다. 간단하게 s3에 올리고 캐시무효화하면 될 거 같은데 말이다.. 쉽지않은 분야인 것 같다.

아무튼 가장 간단한 방법인 S3에 업로드 -> cloudfront무효화의 과정을 git action을 통해 배포해 보기로 하였고, 과정을 간단하게 기록해보자.

기록용이니 정말 간단하게 정리하자면

1. route53은 메인 도메인에서 서브도메인을 연결하였고, dev와 prod 두개를 생성한다.
2. s3 bucket 역시 같은 용도로 2개, cloudfront도 2개 생성.

• route53, s3 bucket, cloudfront의 생성방법은 구글링하면 잘 나와있으니 참고하자.

정적 웹페이지 배포는 어려울게 없으나, spa프로젝트는 신경써야 할 것이 좀 있다. 기록해두고 잘안될때는 한번씩 확인해보자.

• 모든 퍼블릭 액세스 차단 여부
• 버킷 정책 작성
• cloudfront 오류 페이지 응답코드 200 반환 (spa특성상 index.html는 하나이기 때문)

• cloudfront 원본 편집 탭에서 엑세스 제어 설정 (모든 퍼블릭 액세스를 차단했기 때문에 제어 설정을 꼭 해준다. 이거 안해서 3시간 삽질함..)

내가 작성한 git action workflow. 주석 잘 읽고 실수하지말자

name: CI/CD

on:
  pull_request:
    types:
      - closed #pr이 닫길때, 즉 merge가 될 때

jobs:
  if_merged:
    if: github.event.pull_request.merged == true
    runs-on: ubuntu-18.04 #20.04 버전부터 바뀐 aws cli명령어가 있다. 그래서 버전을 지정해준다.
    steps:
      - run: |
          echo The PR was merged
      - name: Checkout source code
        uses: actions/checkout@master

      - name: Cache node modules # node modules 캐싱
        uses: actions/cache@v1
        with:
          path: node_modules
          key: ${{ runner.OS }}-master-build-${{ hashFiles('**/yarn.lock') }}
          restore-keys: |
            ${{ runner.OS }}-build-
            ${{ runner.OS }}-

      - name: Install Dependencies
        run: yarn
        env:
          CI: ''

      - name: Build
        run: npm run generate

      # 다음은 브랜치이름에 따라 s3업로드와 cloudfront무효화를 진행한다.
      # 브랜치이름을 변수명으로 만들어서 코드를 간소화 할 필요가 있다.

      - name: Deploy if develop
        if: github.base_ref == 'develop'
        env:
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          AWS_DEFAULT_REGION: ap-northeast-2
          AWS_EC2_METADATA_DISABLED: true
        run: |
          aws s3 sync ./dist s3://프로젝트이름

      - name: Invalidate CloudFront if develop
        if: github.base_ref == 'develop'
        uses: chetan/invalidate-cloudfront-action@v2
        env:
          DISTRIBUTION: ${{ secrets.DISTRIBUTION_ID_DEV }}
          PATHS: '/*'
          AWS_REGION: ap-northeast-2
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}

      - name: Deploy if master
        if: github.base_ref == 'master'
        env:
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          AWS_DEFAULT_REGION: ap-northeast-2
          AWS_EC2_METADATA_DISABLED: true
        run: |
          aws s3 sync ./dist s3://프로젝트이름

      - name: Invalidate CloudFront if master
        if: github.base_ref == 'master'
        uses: chetan/invalidate-cloudfront-action@v2
        env:
          DISTRIBUTION: ${{ secrets.DISTRIBUTION_ID_PROD }}
          PATHS: '/*'
          AWS_REGION: ap-northeast-2
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}

다른 부분은 이상없이 예상대로 잘 됐는데 가장 삽질한 부분은 s3에 업로드이다.

- name: Deploy
        env:
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
        run: |
          aws s3 cp \
            --recursive \
            --region ap-northeast-2 \
            dist s3://프로젝트이름

처음 구글링 시에는 위와 같은 방법으로 시도를 했는데 dist는 .ignore에 포함되어 있기 때문에 dist폴더를 찾지 못해 deploy에 계속 실패하는 것이다. 여기서 또 4시간 삽질했다..

The user-provided path dist does not exist.

(이런 에러가 계속 떴다.)

결국 검색 후 aws s3 sync 를 사용하여 직접 나의 디렉토리 타깃경로와 s3를 동기화 하여 해결하였다. 아! 그리고 AWS REGION을 추가하고 AWS_EC2_METADATA_DISABLED : true를 꼭 추가하자. METADATA에 관한 부분은 문서를 읽고 있는데 무슨말인지 모르겠다.. 근데 안쓰면 에러가 나서 추가해줬다. AWS는 굉장히 심오하구나..

아무튼 정상적으로 자동 배포까지 성공하였고, merge된 브랜치에 따라 하나의 브랜치에만 deploy되는 것을 확인했다. 앞으로의 과제는 컨테이너 개념을 익히고, ecr push와 버전에 따른 deploy를 위해 tagging을 인식해 적용해볼 계획이다.

typescript도 공부해야하는데.. 하 이번 프로젝트 끝나면 개발공부도 꼭 다시 시작해야겠다. react-query도 공부해봐야지..

express로 구성한 간단한 백엔드 코드

구성한 dockerfile과 강의 내용 설명

dockerfile에서는 명령어 하나하나가 layer형태로 구성되는데

가장 빈번하게 수정될 내용들이 아래로 가는 것이 좋다.

변경된 최상단의 layer들만 업데이트해주고 나머지 layer들은 재사용된다.

image만드는 시간 단축 및 효율성 up!

빌드 cli

1. docker build -f Dockerfile -t fun-docker .

   • . (가장 마지막 dot)
     • build context이며, 명령어를 수행하는 경로 지정이다 .
     • “.”은 가장 최상위 루트
   • -f
     • Dockerfile 이름 설정. 기본적으로 Dockerfile을 많이 사용한다.
   • -t
     • docker image의 이름 설정(tag 비슷함)

2. docker images를 이용하면 local machine에 만들어진 image들을 확인 가능

3. docker run -d -p 8080:8080 fun-docker

   • -d
     • detached. 실행되는 동안 터미널이 대기하지않고, 다른 일을 수행할 수 있게 해준다.
     • to run a play background!
   • -p
     • host machine의 포트와 container의 포트연결

4. docker ps를 활용하면, 현재 실행중인 container 확인가능

실행확인!

5. docker tag fun-docker:latest gudjun/privitetest:latest
   • 뒤에는 dockerhub의 repo이름.
   • push 하려면 image의 이름을 바꿔줘야한다.

6. docker login

   • 도커 로그인

7. docker push gudjun/privitetest:latest

   • push완료

도커의 필요성과 개념이해만 이틀정도 걸린 것같다... 처음 생활코딩보면서 html, css 공부하던때가 생각나는데 최대한 빨리 회사에서 원하는 능력으로 끌어올려야 할 것 같다.

출처: https://www.youtube.com/watch?v=LXJhA3VWXFA

자바스크립트뿐만 아니라 Java, C언어 등의 다른 언어들에서도 위와 유사한 계산 오류가 발생한다.

컴퓨터가 램에 숫자를 저장할때는 기본적으로 8개의 칸(8bit === 1byte)에 0과 1로 이루어진 2진법으로 저장하게 된다.

그러나 몇몇 소수(ex: 0.1)는 10진법에서 2진법으로 변환하는 과정에서 무한 소수가 되어버린다.

저장공간의 한계가 있는 컴퓨터는 무한 소수를 유한 소수로 인식하게끔 일정 단위 이상 넘어가는 숫자들은 제거하게 되고 여기서 미세한 오차가 발생한다.

정밀도를 위해서는 이른바 칸이라는 것을 늘려주고 싶다면 float(32bit)나 double(64bit)을 사용해 늘려주거나, 와 같이 나타낼 수도 있고, Math객체를 이용한 적절한 반올림을 통해 계산을 할 수도 있다.

애플코딩 유튜브 강좌를 보니 미군의 패트리어트가 위와 비슷한 사유로 인해 시간계산의 오차가 나서 적의 미사일을 요격하지 못해 28명의 전사자가 발생하였다는데, 군대에서 유도탄특기로 4년을 복무한지라 더 와닿았던 것 같다.

아무튼 면접에서 관련질문 나올 시 약간이라도 아는 척을 할 수 있게 되었다.

?? 를 활용하여 변수의 값이 null 또는 undefined 일때 뒤에 코드를 실행할 수 있다.

1번은 변수가 선언(초기화)만 상태이기 때문에 undefined(해당 O), 2번은 0이라는 number를 할당해줬기 때문에 해당안됨, 3번은 null을 직접 할당했기때문에 null(해당 O)

주로 산술 연산자에서만 위와 같은 식으로 사용했는데, 병합 할당 연산자로도 사용이 가능하다.

단축평가를 이용한 연산방법인데 x가 0(falsy)이기 때문에 100 실행, y가 빈문자열(falsy)이기 때문에 앞에 코드만 실행하고 종료, z는 null이기 때문에 뒤에코드 실행

api를 통해 받아오는 data값 중 null이나 undefined를 체크할 때 사용할 수도 있을 것 같아 적어두었다. 사실 조건을 체크할 때 !(부정연산자)를 사용할 수도 있기 때문에 쓸일이 많이 있을까싶긴 하지만 알아두면 좋을 것 같다.