코딩하는 너구리

aws ec2에 https 웹 서버 구축

밤샘코딩 — Thu, 9 May 2024 00:27:59 +0900

aws 계정 및 ec2 인스턴스는 생성되어져 있다고 가정하고 구축하는 방법에 대하여 설명하고자 합니다

추후 기회가 된다면 프리티어로 계정을 생성하고 ec2 인스턴스 생성하는 방법에 대하여 포스팅해 볼게요

우선 무료로 dns를 받으세요

duckdns에서 무료로 최대 5개의 dns 를 받을 수 있습니다

혹시 고정아이피를 사용하고 있지 않다면 사이트의 install 메뉴를 참고해서 추가적인 설정을 해주세요

Duck DNS (www.duckdns.org)

Duck DNS

Duck DNS free dynamic DNS hosted on AWS news: login with Reddit is no more - legal request support us: become a Patreon

www.duckdns.org

이제 nginx와 certbot을 통해서 https 웹 서버를 구축해 봅시다

certbot은 let's encrypt 로부터 인증서를 발급받는 툴입니다

설치는 도커를 통해서 진행하려고 합니다

certbot을 통한 인증서 발급은 Let’s Encrypt으로 부터 인증 절차를 거쳐야 하고 인증 절차는 4가지 방법이 있습니다

webroot, webserver, standalone, dns

저희는 webroot 방식을 사용하여 구축합니다

docker compose 작성은 아래를 참고해주세요

docker-compose.yml
services:
  nginx:
    image: nginx:1.25.5-alpine
    container_name: nginx
    restart: always
    ports:
      - 80:80
      - 443:443
    command: '/bin/sh -c ''while :; do sleep 6h & wait $${!}; nginx -s reload; done & nginx -g "daemon off;"'''
    volumes:
      - /home/ubuntu/docker/nginx/nginx.conf:/etc/nginx/nginx.conf
      - /home/ubuntu/docker/nginx/conf.d:/etc/nginx/conf.d
      - /home/ubuntu/docker/nginx/web:/usr/share/nginx/web
      - /home/ubuntu/docker/certbot/conf:/etc/letsencrypt
      - /home/ubuntu/docker/certbot/www:/var/www/certbot

  certbot:
    image: certbot/certbot:latest
    container_name: certbot
    command: certonly --webroot --webroot-path=/var/www/certbot --email useraddress --agree-tos --no-eff-email -d cu2sea.duckdns.org
    # entrypoint: "/bin/sh -c 'trap exit TERM; while :; do certbot renew; sleep 12h & wait $${!}; done;'"
    volumes:
      - /home/ubuntu/docker/certbot/conf:/etc/letsencrypt 
      - /home/ubuntu/docker/certbot/www:/var/www/certbot
      - /home/ubuntu/docker/certbot/logs:/var/log/letsencrypt:rw

볼륨 설정 부분은 자신의 한경에 맞게 설정해주세요

위에 command 는 인증서 갱신을 대비해 nginx 데몬을 재시작하는 명령입니다

주기는 6시간으로 되어져 있으나 인증서 기한은 3개월로 적당히 설정해주세요

nginx 설정 default.conf
server {
    listen 80;
    listen [::]:80;
    server_name cu2sea.duckdns.org;

    location /.well-known/acme-challenge {
        allow all;
        root /var/www/certbot;
    }
}

위와 같이 작성하고 docker compose를 실행하면 nginx와 certbot 컨테이너가 생성되며 인증서가 생성된다.

docker compose up -d

인증서가 잘 발급되었는지 certbot 로그로 확인해보세요

docker compose logs certbot

certbot 설정 중에 command에 해당되는 내용은 인증서를 발급받는 명령입니다

인증서를 발급받고 나면 해당 명령을 제거하고 인증서를 갱신하는 명령어로 변경해야 합니다

주기는 12시간으로 되어져 있으나 인증서 기한은 3개월로 적당히 설정해주세요

docker-compose.yml에 내용을 아래와 같이 변경하자 주석을 위아래 바꿔주면 되요

docker-compose.yml
    # command: certonly --webroot --webroot-path=/var/www/certbot --email useraddress --agree-tos --no-eff-email -d cu2sea.duckdns.org
    entrypoint: "/bin/sh -c 'trap exit TERM; while :; do certbot renew; sleep 12h & wait $${!}; done;'"

nginx 설정 default.conf
server {
    listen 80;
    listen [::]:80;
    server_name cu2sea.duckdns.org;

    location / {
        return 301 https://$host$request_uri;
    }

    location /.well-known/acme-challenge {
        allow all;
        root /var/www/certbot;
    }
}

server {
    listen 443 ssl;
    server_name cu2sea.duckdns.org;
    server_tokens off;

    ssl_certificate /etc/letsencrypt/live/cu2sea.duckdns.org/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/cu2sea.duckdns.org/privkey.pem;
    ssl_session_cache shared:le_nginx_SSL:10m;
    ssl_session_timeout 1440m;
    ssl_session_tickets off;
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_prefer_server_ciphers off;
    ssl_ciphers "ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384";

    location / {
        root   /usr/share/nginx/web;
        index  index.html index.htm;
    }

    # error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/web;
    }
}

docker-compose-yml 및 nginx 설정을 변경했으면 아래 명령으로 변경사항을 적용해주세요

docker compose up -d

tsl 설정은 tsl 권장설정인 아래 내용을 그대로 가지고 왔습니다

certbot/certbot-nginx/certbot_nginx/_internal/tls_configs/options-ssl-nginx.conf at master · certbot/certbot (github.com)

aws ec2 스왑메모리 설정

밤샘코딩 — Sun, 7 Apr 2024 01:45:26 +0900

프리티어로 750시간 무료로 사용가능한 t2.micro 의 경우 멤리가 1기가 밖에 주어지지 않습니다.

따라서 메모리 부족으로 인하여 시스템이 자주 멈추는 현상을 경험하게 됩니다.

이것으로 해결하기 위해서 스왑메모리를 설정하려고 합니다

프리티어 기준 gp3 30기가 무료 사용이 가능하기 때문에 4기가정도 스왑메모리로 설정하도록 하겠습니다

스왑 파일 생성
- sudo fallocate -l 4G /swapfile
스왑 파일 권한 변경
- sudo chmod 600 /swapfile
스왑 영역 설정
- sudo mkswap /swapfile
스왑영역 활성화
- sudo swapon /swapfile
재부팅 시 유지
- /etc/fstab 에 제일 밑에 아래 내용 추가
  - /swapfile swap swap defaults 0 0

NestJS 기본 개념

밤샘코딩 — Sun, 31 Mar 2024 03:04:42 +0900

자바스크립트 기반의 벡엔드 프레임워크로 express를 가장 많이 써왔지만

최근에 express를 사용하여 구조화된 아키텍처를 제공하는 NestJS가 떠오르고 있습니다.

fastify도 지원합니다.

공식 문서를 보면 정말 자세히 설명되어져 있지만 전체적인 구조를 이해하는데 어려움이 있어서

전체적인 구조만 정리하였습니다.

기존의 express 기반으로 요청을 처리하는 흐름을 살펴보면 아래와 같습니다.

- request

- middleware

- router

- response

nestjs에서는 이부분을 더욱 구조화하여 아래와 같이 처리합니다.

- request: 클라이언트 요청

- middleware: 기존 express 와 동일 개념

- guard: 인증 처리

- interceptor: router에서 처리하기전에 하고 싶은 것(ex: 로깅)

- pipe: 요청 유효성 검증

- controller: router를 nestjs에서는 controller라 표현하고

controller에서 비지니스 로직을 작성하지 않고 service를 별도로 만들어 처리한다.

- interceptor : router에서 처리한 이후 하고 싶은 것(ex: 로깅)

- filter: 예외 발생 시 처리

- response: 응답

middleware, guard, interceptor, pipe, filter 모두 사실상 middleware라고 볼수 있으나

nestjs에서는 enhancer 또는 template 하여 guard, interceptor, pipe, filter를 별도로 정의하였습니다.

그리고 위에 것들은 controll에서 사용하게 됩니다.

enhancer 각각은 global(모든요청), controller(router에 대한 모든 요청), route(요청), paramer(요청 parmeter에 대해) 단위로 다시 세분화되어 처리가 됩니다.

아래는 챗봇의 도움을 받은 실행순서에 대한 정보입니다. 참고하시면 도움이 될듯 합니다.

NestJS에서 요청의 생명주기 동안 다양한 구성 요소들은 특정 순서로 실행됩니다. 여기에는 미들웨어, 가드, 인터셉터, 파이프, 그리고 필터가 포함됩니다. 이들의 실행 순서는 다음과 같습니다:

미들웨어(Middleware): 요청이 들어오면 가장 먼저 실행됩니다.
가드(Guards): 미들웨어 다음으로 실행되며, 요청이 특정 조건을 만족하는지 확인합니다.
인터셉터(Interceptors): 가드 이후에 실행되며, 요청과 응답을 가로채 추가 로직을 수행할 수 있습니다.
파이프(Pipes): 인터셉터 다음으로 실행되며, 요청 데이터의 변환과 유효성 검사를 담당합니다.
필터(Filters): 예외 처리를 담당하며, 컨트롤러에서 발생한 예외를 캐치하여 처리합니다.
각각의 구성 요소는 글로벌(Global), 컨트롤러(Controller), 핸들러(Handler) 레벨에서 적용될 수 있으며, 각 레벨에서의 적용 순서는 다음과 같습니다:

글로벌 레벨: 애플리케이션 전체에 걸쳐 적용되며, 모든 요청에 대해 실행됩니다.
컨트롤러 레벨: 특정 컨트롤러 클래스에 적용되며, 해당 컨트롤러의 모든 핸들러에 대해 실행됩니다.
핸들러 레벨: 특정 라우트 핸들러에 적용되며, 해당 핸들러의 요청에만 실행됩니다.
인터셉터의 경우, 요청이 들어올 때는 글로벌 → 컨트롤러 → 핸들러 순으로 실행되지만, 응답을 반환할 때는 핸들러 → 컨트롤러 → 글로벌 순으로 실행되는 First In, Last Out 방식을 따릅니다

nestjs를 처음 접하면 module, controller, provider라는 말이 나옵니다.

모듈은 컨트롤러와 provider로 구성됩니다.

컨트롤러는 요청을 처리하는 라우터입니다.

provider는 컨트롤러에서 비니지스 로직을 분리한 것입니다.

독립적인 기능을 하는 단위로 모듈화합니다.

컨트롤러가 없이 provider로만 구성하여도상관 없습니다.

- module = controller + provider(비지니스 로직을 처리하는 각종 서비스)

* 특이사항: enhancer를 글로벌하게 사용할 때 최상위 모듈(app.modlule.ts)에서 provider로서 등록함

nestjs를 시작하면서 많은 개념들이 나오는데 도데체 머하는건지도 모르고 무작정 따라하기 보단

전체적인 그림을 그려놓고 시작하면 도움이 될거 같아서 정리해 봤습니다.

그럼 nestjs를 써서 백엔드 구성할 때 기본적으로 해야 되는 것들이 있어요

저같은 경우는 아래와 같이 구성해보려고 해요.

아래 모든 것들을 nestjs에서 지원합니다.

- 백엔드 프레임워크: nestjs

- 데이터베이스: postgresql

- ORM: prisma

- 문서화: swagger

- 인증방식: jwt

- websocket: socket.io

윈도우 11 wsl 설치 및 이것 저것

밤샘코딩 — Sun, 17 Mar 2024 14:35:33 +0900

WSL 설치 (Power Shell 에서 진행)
1. WSL 기능 활성화
  1. dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart
2. wsl 설치
  1. wsl --install
3. 윈도우 11 파일시스템 접근 안될 때
  1. 레지스트리 편집기 수정
    1. 컴퓨터\HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\NetworkProvider\Order
      1. Order의 제일 앞에 P9NP 추가
      2. HwOrder의 제일 앞에 P9NP 추가
4. .wslconfig 생성
  1. 위치 - \Users\<UserName>\.wslconfig
  2. [wsl2]
    memory=4GB
    swap=8GB
    localhostForwarding=true
WSL 실행 (Power Shell 에서 진행)
1. wsl
우분투 셋업
1. /etc/wsl.conf 생성
  1. [boot]
    systemd = true
    
    [user]
    default = bjpark
    
    [automount]
    options = metadata
2. apt 저장소 변경
  1. sudo sed -i 's/archive.ubuntu.com/mirror.kakao.com/g' /etc/apt/sources.list
3. 패키지 업데이트
  1. sudo apt update && sudo apt -y upgrade && sudo apt -y autoremove
4. 기본 패키지 설치
  1. sudo apt install ca-certificates cmake build-essential net-tools
5. wsl cuda toolkit 다운로드
  1. https://developer.nvidia.com/cuda-toolkit-archive
6. 노드 설치 (nvm 사용)
  1. curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
  2. source . ~/.bashrc
  3. nvm install --lts
7. 도커 설정
  1. 설치
    1. curl -fsSL https://get.docker.com -o docker-install.sh
    2. sudo sh ./docker-install.sh
  2. 도커 그룹에 유저 추가
    1. sudo usermod -aG docker user1
  3. postgresql 도커 컨테이너 설정
    1. 설치
      1. docker run -d \
        --name postgres \
        -e POSTGRES_PASSWORD=passwd \
        -e PGDATA=/var/lib/postgresql/data/pgdata \
        -v /home/user/postgresql/data:/var/lib/postgresql/data \
        -p 5432:5432 \
        postgres
    2. 외부접속 허용
      1. pg_hba.conf 파일 수정
        
        # ipv4 local connections
        - host all all 0.0.0.0/0 md5
      2. postgresql.conf 파일 수정
        
        listen_addresses = '*' 로 변경
      3. sql shell 접속
        
        docker exec -it postgres bash
        
        psql -U postgres
        
        DB 생성
        
        CREATE DATABASE my_db;
기타
1. 마이크로 소프트 상점에서 윈도우 터미널을 사용하면 파워쉘보다 편하다
2. DB 쿼리 시 HeidiSQL 사용하면 편하다

자바스크립트 babel에 이어서 eslint 도 같이 써볼래요?

밤샘코딩 — Sun, 12 Mar 2023 20:57:29 +0900

이전에 소개해드린 babel에 이어서 eslint 도 같이 써볼래요?

eslint가 머냐면요? 정해진 코딩룰에 어긋난게 있는지 알려주는거에요

코드에 문제가 있거나 또는 코딩룰에 어긋난 것들을 찾아서 알려주는거져

일단 package.json을 보면 eslint 관련해서 두가지 모듈을 설치했어요

eslint는 eslint 사용을 위한 필수 패키지고요

eslint-config-google 는 설정 google에서 배포한거 따라하기 위해서 설치한거에요

사전에 정의된 config는 보통 google 하고 airbnb(eslint-config-airbnb) 두개를 가장 많이 써요

저는 구글이 좋아서 구글거를 사용할게요

package.json
{
    "name": "babel-sample",
    "version": "1.0.0",
    "description": "",
    "main": "lib/index.js",
    "scripts": {
        "build": "babel src -d lib",
        "eslint": "eslint ./src",
        "start": "npm run eslint && npm run build && node ."
    },
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "@babel/cli": "^7.21.0",
        "@babel/core": "^7.21.0",
        "@babel/preset-env": "^7.20.2",
        "eslint": "^8.36.0",
        "eslint-config-google": "^0.14.0"
    }
}

babel과 마찬가지로 설정을 해야곘져?

./node_modules/.bin/eslint --init 이라고 하시면 몇가지 물어면서 설정파일을 자동으로 만들어줘요

그리고 나서 입맛에 맞춰서 바꿔서 사용하시면되요

아래는 제가 간단하게 수정한거에요

env 는 어느 환경에서 사용하는 프로그램이냐를 물어보는거에요

extends는 기 정의된 설정을 가져오겠다는건데 eslint에서 제공하는 기본하고 위에서 다운로드한 구글 설정을 쓰겠다는 거에요

babel 과 마찬가지로 요즘에 프리셋 들이 워낙 잘되있어서 설정 파일을 건드릴게 많이 없어요

rules 는 기정의된 룰에서 바꾸고 싶은게 있으면 변경할수 있어요

나는 이거 안잡았으면 좋겠는데 계속 잡네 이런 룰에 대해서 ignore 시켜버리시면되요

.eslintrc.js
module.exports = {
    env: {
        node: true,
        es2022: true,
    },
    extends: [
        "eslint:recommended",
        "google"
    ],
    parserOptions: {
        ecmaVersion: "latest",
        sourceType: "module"
    },
    rules: {
    }
};

저 같은경우는 위에 package.json에 보면 start 스크립트에 eslint도 하라고 넣어놔서 lint로 코드 한번 검사하고 babel로 빌드하고 그 다음에 빌드된 소스 실행을 하게 해놨어요

어떤 사람은 프리티(코딩 스타일 정의하고 코드 맞춰주는 모듈) 모듈까지 붙여서 린트 검사 하는데 저같은 경우에는 요즘 IDE 좋아서 그냥 코드정렬 때리면 알아서 이쁘게 맞춰주기때문에 굳이 프리티 까지 붙이지는 않아요.

저는 vs code를 사용합니다. 예전에 서브라임, 아톰, 웹스톰(유로) 등등 많았는데 ms에서 꽁짜툴에 머 이리 신경을 많이 쓰는지 지금 vs code가 어디다가 내놔도 뒤지지 않을 만큼 좋아요

자세한 린트 설정에 관련된 부분은 여기를 참고하세요

룰에 대한 설명도 다 있어요

Configure ESLint - ESLint - Pluggable JavaScript Linter

A pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript. Maintain your code quality with ease.

eslint.org

자바스크립트 babel 사용 해볼래요?

밤샘코딩 — Sun, 12 Mar 2023 18:48:24 +0900

바벨은 무엇일까요?

공식 홈페이지에서 아래와 같이 정의했습니다.

바벨은 자바 스크립트 컴파일러입니다.
Babel은 주로 현재 및 이전 브라우저 또는 환경에서 ECMAScript 2015+ 코드를 이전 버전과 호환되는 JavaScript 버전으로 변환하는 데 사용되는 툴체인입니다. Babel이 당신을 위해 할 수있는 주요 일은 다음과 같습니다.

쉽게 말하면 es6이상 문법으로 작성된 코드를 es5로 변경해준다는거에요.

왜냐면 자바스크립트는 문법적으로 빠르게 변하는데 시스템에 따라 브라우저나 노드버전을 지속적으로 올릴수 없는 경우가 있으니까요

특히 브라우저의 업데이트 속도는 자바스크립트의 변화보단 많이 뒤쳐지고요

그래서 그냥 옛날거에서도 돌아가게 코드 변환해버리는거에요

바벨 을 사용하려면 몇가지 툴만 설치하면 되요

요즘은 진짜 완전 편해졌어요

package.json을 보시면 필요한 모듈이 3가지밖에 되지 않아요

package.json
{
    "name": "babel-sample",
    "version": "1.0.0",
    "description": "",
    "main": "lib/index.js",
    "scripts": {
        "build": "babel src -d lib",
        "start": "npm run build && node ."
    },
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "@babel/cli": "^7.21.0",
        "@babel/core": "^7.21.0",
        "@babel/preset-env": "^7.20.2"
    }
}

바벨 설정을 해야 되는데 이미 만들어진 preset 가져다가 이거만 쓸게요

babel.config.js

module.exports = {
    presets: ["@babel/preset-env"],
};

바벨 설정파일보면 정말 많은 이름으로 제각각 다르게 쓰는데 아래 링크 참고하세요

저는 프로젝트전체에 적용시키고 싶고 json 보단 js가 좋아서 babel.config.js 파일로 정의했어요

Config Files · Babel (babeljs.io)

Config Files · Babel

Configuration File Types

babeljs.io

바벨은 여러가지 플러그인의 조합으로 변환을 하는건데 프리셋이란 이러한 플러그인들의 조합 미리 만들고 설정해 놓은거에요

일반적으로 @babel/preset-env 을 사용하면 nodejs 기준으로 왠만한건 다 되요

글 작성 기준 preset-env의 버전은 7.20.2인데 예전에는 에러 많이 나와서 플러그인 추가로 많이 설치해야됬는데 지금은 잘되네요

먼가 안되는건 검색하면서 플러그인을 추가시켜주면되요

import 구문부터 class 정의가 까지 진짜 다 잘되네요

참고로 바벨 공식 프리셋은 다음과 같이 4개가 있습니다.

@babel/preset-env for compiling ES2015+ syntax
@babel/preset-typescript for TypeScript
@babel/preset-react for React
@babel/preset-flow for Flow

react 개발하시는분들은 create-react-app 이거 사용하실텐데 react-scripts 모듈이 webpack 설정부터 다 잡아주니까 특별이 건드릴일이 없어요

바벨공부하시다가 보면 폴리필이란 단어를 보게 되는데

폴리필은 바벨로 코드 변환 시 바벨이 알수 없는 모듈들을 사용하게 되면 변환이 안되요

그래서 그러한 것들을 미리 정의해서 import 시키면서 변환해주는건데 대부분 브라우저 환경에서만 제공되는 글로벌 api 들이에요

노드에서는 폴리필 설정하지 않아도 잘되요

혹시 폴리필에 관해 알고 싶으신분은 여기보세요

@babel/polypill 은 예전에 사용하던 방식이니 그거 말고 아래 링크쪽 참고 하시면되요

@babel/plugin-transform-runtime · Babel (babeljs.io)

@babel/plugin-transform-runtime · Babel

A plugin that enables the re-use of Babel's injected helper code to save on codesize.

babeljs.io

자바스크립트 nullish 병합 연산자에 대해 아십니까?

밤샘코딩 — Sun, 12 Mar 2023 14:51:06 +0900

nullish 병합 연산자(nullish coalescing operator)는 ?? 연산자를 사용해서 값을 선택하게 해주는 문법이에요

?? 이거는 처음들어 보시져?

||, && 연산자에 대해서 우선 살펴볼게요

0 || 1 이거는 true고 0 || 0 은 false 잖아요

그리고 1 && 1 이거는 true 고 1 && 0 은 false 고요

그럼 조건문 사용할 때 위 연산이 true/false를 반환하는가 라고 생각할수 있어요

근데 그렇지 않아요

|| 연산자는 앞에서부터 true에 해당되는 값이 발견되면 그 값을 반환하는거에요

자바스크립트에서 값을 bool 값으로 변환해주는 방식에 따라서 말이져

&& 연산자는 반대로 false 해당되는 값이 발견되면 그 값을 반환하고요

그래서 위에 설명드린 걸 다시 써보면 반환되는 값은 아래처럼 되요

조건의 마지막까지 오게되면 그냥 마지막 값을 넘겨줘요

- 0 || 5 = 5,

- 0 || 0 = 0

- 10 && 5 = 5

- 10 && 0 = 0;

그래서 조건문은 반환된 값을 토대로 true/ false로 변환 시키는거에요

그럼 ??는 멀까요?

|| 랑 거의 유사해요 근데 true/ false를 판단하는 기준이 달라요

자바스크립트 자동형변환 기본 구조에 따르는게 아니에요

값이 선언되어져 있기만 하면 그 값이 0이건 빈스트링이던 상관없이 true 처리해요

예를 들어 볼게요

let a = 0;
console.log(a || 3 || 0);	// 결과는 3이에요
console.log(a ?? 3 ?? 0);	// 결과는 0이에요
console.log(0 ?? 3 ?? 0);	// a 대신 0을 넣어도 결과는 0이에요
console.log(null ?? 3 ?? 0);	// a 대신 null을 넣으면 결과는 3이에요

이거 어떨때 쓰면 유용할까요?

삼항연산자 대체할때 좋아요

여러개중에 값을 선택할때 swich/ if 문 이런거 안써도 되요

아래 보시면 Person 생성자에서 두개의 인자를 받고 이름을 지어줄건데

닉네임이 있으면 닉네임, 없는데 네임은 있으면 네임, 네임도 없으면 기본값으로 하라는거에요

이거 swich/ if 문 써야되는데 코드 한줄로 끝나요

그리고 age는 그냥 전달받은게 있기만하면 그걸로 사용하고 아니면 0으로 할게라고 하는 코드에요

const DEFAULT_NAME = 'anonymous';

class Person {
	name = '';
    age = 0;
	constructor(nickName, name, age) {
    	// 왼쪽부터 체크해서 값이 true에 해당되면 그 값을 사용하겠다
    	this.name = nickName || name || DEFAULT_NAME;
        // 왼쪽부터 체크해서 값이 있기만하면 그 값을 사용하겠다
        this.age = age ?? 0;
    }
}

안녕하세요

밤샘코딩 — Sun, 12 Mar 2023 13:05:10 +0900

안녕하세요 블로그 주인입니다.

저는 그냥 소프트웨어 개발하면서 먹고사는 직장인이에요

한 6년인가 안드로이드 개발하다가 한 6년 자바스크립트언어로 개발하고 있어요

안드로이드는 사실 변화도 엄청 빠르고 너무 오래전에 개발한거라 저도 이제 아는게 거의 없는거나 다름이 없어진 상태네요

처음에 es5로 자바스크립트를 접했을 때 oop 언어라고 하더니 머 지원되는거 하나 없고 함수형 언어네 라고 생각을했어요

그래도 oop 기반으로 작성할라고 검색도 많이하고 공부도 했었죠

es6라는 문법이 나중에 나오고 이것을 접해보니까 정말 신세계더라구요

자바 비스무리하게 작성이 가능해진거 같아서요

저는 사실 태생언어가 자바다 보니 자바기준으로 많이 생각하고 자바스럽게 코딩을 하는 경향이 있어요

현재는 거의 es6문법을 사용해서 웹이랑 노드사용해서 백그라운드 서버나 서비스 개발하고 있어요

아는게 많지는 않지만 궁금한거 있으시면 댓글이나 방명록에 남겨주시면 공부하고 알아보고 정리해서 글 올려볼게요

저는 학생도 아니고 강사도 아니에요, 실무를 하는 사람이에요

그래서 학교다닐때 배웠던 원리, 구동방식, 어떻게 가능한건데 이런 깊이 있는 지식은 없어요

아마 올리는 글들은 "개념이 먼데, 어떻게 써야되는데 어디다 써야되는데" 에 포커싱 될거에요

만나서 반갑습니다

자바스크립트 추상클래스 어떻게 작성할까요?

밤샘코딩 — Sun, 12 Mar 2023 12:54:20 +0900

추상 클래스면 직접 생성이 불가능하고 추상메소드의 구현을 강제 해야 되잖아요?

class Parent {
    constructor() {
    	// 직접 생성하는거 못하게 할게요
        if (this.constructor === Parent) {
            throw Error("This is abstract class");
        }

		// 추상 메소드 구현하라고 강제할게요
        if (this.abstractMethod === Parent.prototype.abstractMethod) {
            throw Error("you should implement abstract method");
        }
    }

    abstractMethod() {
        throw Error("This is abstract method");
    }
}

class Children extends Parent {
    abstractMethod() {
        console.log('called abstractMethod from children');
    }
}

위 예제코드를 보시면 부모 생성자에서 현재 생성자가 Parent하고 동일하냐고 물어보는거에요

이것이 동일하면 부모를 생성한거고 아니면 다른 무언가를 생성한거에요

그리고 그 아래부분은 추상메소드 구현을 강제한거에요

현재 내가 가지고 있는 메소드하고 Parent가 가지고 있는 메소드가 동일하냐고 물어보는거에요

부모 클래스에서 가지고있는 메소드하고 동일하다면 자식은 해당 메소드를 구현하지 않은거니까

구현해서 오라고 에러를 던지고 있는 코드에요

부모 클래스에서 구현된 추상메소드에 에러를 던지는 부분은 사실상 필요 없어요

호출될일이 없거든요 생성자에서 다 처리해놔서요

상속구조를 살펴보면 자식은 부모의 프로토타입과 자신의 생성자를가지게 되요

자식이 가지고 있는 프로토타입은 부모 조상(위 예제에서는 object가 되겠죠?)의 프로토타입과 부모 자신의 생성자를 가지게 되죠

상속을 반복하게 되면 위에 설명드린 것이 계속 반복되는거고 이것을 프로토타입 체인이라고 해요

그리고 우리가 속성이나 메소드를 사용할때 가장 가까운 곳에서부터 찾아요

const children = new Children()
// 부모가 가진거 + 자식이 바꿔치기하고 추가한거
children.__proto__
// 부모의 부모가 가진거 + 부모가 부모의부모꺼를 바꿔치기하고 추가한거
children.__proto__.__proto__

// 자식꺼가 되겠져? 자식이 바꿔치기(오버라이딩) 해놨잖아요
children.__proto__.abstractMethod
// 부모꺼가 되겠져?
children.__proto__.__proto__.abstractMethod

아그리고 prototype 하고 __proto__의 차이점은요

prototype은 Person이라는 class 그 자체에서 제공하는 속성이고 __proto_는 생성된 객체에서 제공하 prototype 에대한 setter/ getter 함수라고 보시면되요

그래서 Person의 프로토타입을 알고 싶으면 Person.prototype, Person 객체의 프로토타입을 알고 싶으면 new Person().__proto__ 이렇게 되는거에요

그럼 위에 예제에서 보이는 this.abstractMethod === Parent.prototype.abstractMethod 코드 있잖아요

이거 __proto_기반으로 체크해볼게요

this.abstractMethod === this.__proto__.__proto__.abstractMethod 이렇게 해도 동일하게 되겠네요

class 문법에서 접근제한자 어떻게 해야 할까요?

밤샘코딩 — Sat, 11 Mar 2023 21:53:06 +0900

es6 문법에서 공식적으로 private에 대한 문법은 제공하고 있어요

바로 이름 앞에 #을 붙이는거에요

그렇지만 protected에 대한 문법은 없어요

암묵적으로 이름앞에 _를 붙입니다.

class T {
	// private 변수
	#pwd = 1234;

    // 자식만 직접 접근하자는 약속이고 값을 보고 싶으면 getId를 호출해라 라는거에요
    _id = 1;
    getId() {
    	return this._id;
    }
}

그럼 위에 private 이거 어떻게 가능한건지 궁금하지 않아요?

const #pwd = new WeakMap();

class T {
	constructor() {
    	#pwd.set(this, 0);
        let pwd = #pwd.get(this);
    }
}

위에 보면 외부에서 접근할수 없는 스코프에 WeakMap을 만들고 WeakMap에다가 this를 key 로 해서 값을 설정하고 가져오고 하는거에요

이렇게 해서 object를 계속 생성해도 서로 다른 값을 가질수 있도록 하고 값을 숨기는거에요

WeakMap은 object만 key로 가질수 있어요

이렇게 되면 외부에서는 pwd를 접근할수 없겠져? class 내부에서는 당연히 볼수 있는 값이지만요

es5로 WeakMap을 통해서 구현할수도 있지만 es5로 private 처리하기 이런거 검색해보시면 아래와 같은 방법도 나올거에요

함수 내부에다가 변수 선언하고 그거 set/get 하는 함수 만들어서 this에다가 붙이는거에요

생성자 함수 실행하면 객체 반환할거고 _id 변수는 더이상 접근할 방법은 없어지고 set/get 함수통해서 조작 하라는거에요

var T = function() {
	var _id = 10;
    this.setId = function(id) {
    	_id = id;
    };
    this.getId = function() {
    	return _id;
    };
}

자바스크립트는 GC라는 도구가 알아서 메모리 정리해줘요

참조가 없어지면 정리되는거에요. 그럼 _id는 함수 끝날때 없어져야되잖아요. 근데 set/get 함수에서 쓰겠다고 하고 있져?

이것이 클로저라는 개념이에요

내부함수에서 사용하고 있는 외부함수 변수는 정리되지 않고 메모리에 남아있고 내부함수는 그 메모리를 기억하고 있는거에요

같은 자바 스크립트인데 가끔 es6문법에서는 가능한데 왜 es5에서는 안되는거야 라는 생각이 들때가 있잖아요

es6에서 할수 있는건 es5에서도 할수 있어요 문법적으로 접근이 쉽게 만들어준거고

babel을 사용해서 변환한다음 보면 어떻게 이런걸 구현했는지 알수 있어요

요즘 추세는 OOP고 OOP의 기본은 class로 모듈화 하고 접근제한자로 캡슐화 하는거잖아요

class 이쁘게 만들어봐요

let autoIdGenerator = 0;

Class T {
	#age = 0;
	#internalId = autoIdGenerator++;
    
    _getInternalId() {
    	return this.#internalId;
    }
    
    setAge(age) {
    	if (age < 0) {
        	throw Error("age must be bigger then 0");
        }
        
        this.#age = age;
    }
    
    getAge() {
    	return this.#age;
    }
}