• Socket Connection을 유지한 채로 실시간으로 양방향 통신 혹은 데이터 전송이 가능한 프로토콜이다.
• 채팅 어플리케이션, SNS, 구글 Docs 등 많은 분야에서 사용되고 있다.

HTTTP와의 차이

• HTTP는 단방향 통신이였다. 클라이언트에서 서버로 Request를 보내면 서버는 클라이언트로 Response를 보내는 방식으로 동작한다. 또한 HTTP는 기본적으로 무상태(Stateless)이므로 상태를 저장하지 않는다.
• 하지만 웹소켓은 양방향 통신으로 연결이 이루어지면 클라이언트가 요청하지 않아도 서버에서 일방적으로 클라이언트로 데이터를 보낼 수 있다.
• 웹소켓은 HTTP와 다르게 상태(Stateful) 프로토콜이다. 즉, 클라이언트와 서버가 한 번 연결되면 같은 연결을 이용해 통신하므로 TCP 커넥션 비용을 아낄 수 있다.
• Connection을 유지하고 있는 동안 request-response 방식의 통신이 아닌 양방향의 실시간 데이터 통신이 가능하다.

WebSocket의 동작 방식

• WebSocket은 HTTP 포트 80, HTTPS포트 443 위에서 동작한다.
• 즉, 최초 접속시에는 HTTP 프로토콜을 이용한 핸드셰이킹을 통하여 연결을 맺는다. 이때 HTTP 업그레이드 헤더를 사용하여 HTTP 프로토콜에서 WebSocket 프로토콜로 변경한다.
• 이후 연결이 맺어지면 어느 한쪽이 연결을 끊지 않는 이상 영구적인(persistent) 동일한 채널이 맺어지고, HTTP 프로토콜이 WebSocket 프로토콜로 변경된다.
• 이때 데이터를 암호화하기 위해 WSS 프로토콜 등을 이용할 수도 있다.

npm i -D @types/multer

단일 파일 업로드

FileInterceptor() 는 두개의 인자를 가진다.

• fieldName
  • 파일을 담고 있는 HTML form의 필드 이름을 제공하는 문자열.
  • multipart/form-data 에서 name에 해당하는 값
• options : (option) MulterOptions 타입의 객체 [참조]

import { Controller, Post, UploadedFile, UseInterceptors} from '@nestjs/common';
import { FileService } from './file.service';
import { FileInterceptor } from '@nestjs/platform-express';

@Controller('file')
export class FileController {
  constructor(private readonly fileService: FileService) {}

  @Post('upload')
  @UseInterceptors(FileInterceptor('file'))
  upload(@UploadedFile() file: Express.Multer.File) {
    console.log(file);
  }
}

MulterOptions

Option을 생략하면 파일은 디스크가 아니라 메모리에 저장되며 기본적으로 Multer는 이름의 중복을 방지하기 위해 내부적으로 임의로 이름을 생성하며 확장자는 붙어있지 않게 된다.

• dest : 파일 저장 위치 설정. 지정한 path에 디렉토리가 존재하지 않으면 자동적으로 생성되고 확장자가 없는 상태에서 Multer 내부에서 임의로 생성한 이름으로 저장된다.
• storage : dest 보다 세밀하게 upload를 제어하고 싶을때 사용. DiskStorage , MemoryStorage를 제공
  • DiskStorage 기준로 설명. destination 과 filename을 설정할 수 있다.
    • destination : 파일 저장 위치 설정. 문자열이나 함수로 설정할 수 있다. 문자열로 설정할 경우 해당 디렉토리가 존재 하지 않으면 자동적으로 생성된다. 문자열이나 함수를 전달하지 않으면 기본적으로 os.tmpdir() 로 설정된다.
    • filename : 업로드한 파일의 이름을 설정하는 함수. 설정하지않으면 Multer는 확장자가 없는 32자의 난수 16진수 문자열을 생성한다.
• fileFilter : 업로드할 파일을 필터링하는 함수. 원하는 파일 형식만 허용하거나 거부할 수 있다.
• limits : 업로드할 파일의 크기 및 파일 개수 제한

| Key | Description | Default |
| --- | --- | --- |
| fieldNameSize | 최대 필드 이름 크기 | 100 bytes |
| fieldSize | 최대 필드 값 크기(바이트) | 1MB |
| fields | 비파일 필드의 최대 개수 | Infinity |
| fileSize | multipart forms의 최대 파일 크기(바이트) | Infinity |
| files | multipart forms의 최대 파일 필드의 수 | Infinity |
| parts | multipart/form-data의 파일과 필드의 개수 | Infinity |
| headerPairs | multipart form에서 파싱할 헤더의 key-value 쌍의 최대 개수 | 2000 |

• preservePath : 파일의 경로를 보존할지 여부 설정. 기본값은 false이며, true로 설정하면 클라이언트가 제공한 파일 경로를 그대로 사용한다.

import { Controller, Post, UploadedFile, UseInterceptors } from '@nestjs/common';
import { FileService } from './file.service';
import { FileInterceptor } from '@nestjs/platform-express';
import { diskStorage } from 'multer';
import { extname } from 'path';

@Controller('file')
export class FileController {
  constructor(private readonly fileService: FileService) {}

  @Post('upload')
  @UseInterceptors(
    FileInterceptor('image', {
      storage: diskStorage({
        destination: './uploads',
        filename(_, file, cb): void {
          const randomName = Array(32)
            .fill(null)
            .map(() => Math.round(Math.random() * 16).toString(16))
            .join('');
          return cb(null, `${randomName}${extname(file.originalname)}`);
        },
      }),
      fileFilter(req, file, callback) {
        if (!file.originalname.match(/\.(jpg|jpeg|png)$/)) {
          return callback(new Error('Only .jpg, .jpeg, .png format allowed!'), false);
        }
        callback(null, true);
      },
      limits: {
        fileSize: 1024 * 1024 * 5,
      },
    }),
  )
  upload(@UploadedFile() files: Express.Multer.File) {
    console.log(files);
  }
}

Custom Interceptor를 사용하여 분리

upload-interceoptor.ts

import { Injectable, NestInterceptor } from '@nestjs/common';
import { CallHandler, ExecutionContext, RequestHandler } from '@nestjs/common/interfaces';
import * as multer from 'multer';
import { diskStorage } from 'multer';
import { extname } from 'path';
import { Observable } from 'rxjs';

@Injectable()
export class UploadInterceptor implements NestInterceptor {
  private upload: RequestHandler;

  constructor() {
    this.upload = multer({
      storage: diskStorage({
        destination: './uploads',
        filename(_, file, cb): void {
          const randomName = Array(32)
            .fill(null)
            .map(() => Math.round(Math.random() * 16).toString(16))
            .join('');
          return cb(null, `${randomName}${extname(file.originalname)}`);
        },
      }),
      fileFilter(req, file, callback) {
        if (!file.originalname.match(/\.(jpg|jpeg|png)$/)) {
          return callback(new Error('Only .jpg, .jpeg, .png format allowed!'));
        }
        callback(null, true);
      },
      limits: {
        fileSize: 1024 * 1024 * 5,
      },
    }).single('image');
  }
  intercept(context: ExecutionContext, next: CallHandler<any>): Observable<any> | Promise<Observable<any>> {
    const req = context.switchToHttp().getRequest();
    return new Observable((observer) => {
      this.upload(req, null, async (err: any) => {
        if (err) observer.error(err);
        else next.handle().subscribe(observer);
      });
    });
  }
}

앞선 컨트롤러 단에서 FileInterceptor를 사용하였을때는 해당 인터셉터들 사용하여 multer 함수를 따로 만들어 줄 필요이 제공받을 수 있는 반면 커스텀 인터셉터의 경우 constructor 내부에 multer 함수를 직접 정의한다.

file.controller.ts

import { Controller, Post, UploadedFile, UseInterceptors } from '@nestjs/common';
import { FileService } from './file.service';
import { UploadInterceptor } from 'src/interceptor/upload-interceptor';

@Controller('file')
export class FileController {
  constructor(private readonly fileService: FileService) {}

  @Post('upload')
  @UseInterceptors(UploadInterceptor)
  upload(@UploadedFile() files: Express.Multer.File) {
    console.log(files);
  }
}

File validation

• 파일 크기나 파일의 mime-type과 같은 파일 메타 데이터의 유효성을 검사하는 기능
• ParseFilePipeBuilder 클래스를 사용하여 아래와 같이 각 유효성 검사기의 수동 인스턴스화를 피하고 옵션을 직접 전달할 수 있다.

@Post('upload')
@UseInterceptors(FileInterceptor('file'))
upload(
  @UploadedFile(
    new ParseFilePipeBuilder()
      .addFileTypeValidator({ fileType: /(mp4|png)$/ })
      .addMaxSizeValidator({ maxSize: 1000 * 1024 * 1024 })
      .build({ errorHttpStatusCode: HttpStatus.UNPROCESSABLE_ENTITY }),
  )
  file: Express.Multer.File,
) {
  console.log(file);
}

• addFileTypeValidator() 의 fileType은 문자열 또는 정규식 타입으로 설정
• addMaxSizeValidator() 의 maxSize 와 message 설정
  • maxSize : 바이트 기준
  • message : 오류 발생 메시지 설정
• build 의 errorHttpStatusCode 는 오류 코드 설정

멀티 파일 업로드

단일 field name(파일 배열)으로 여러 파일 업로드

FilesInterceptor() 는 세개의 인자를 가진다.

• fieldName
  • 파일을 담고 있는 HTML form의 필드 이름을 제공하는 문자열.
  • multipart/form-data 에서 name에 해당하는 값
• maxCount : (option) 최대 파일 수를 설정
• options : (option) MulterOptions 타입의 객체 [참조]

FilesInterceptor() 를 사용하는 경우 @UploadedFiles() 데코레이터를 사용하여 request에서 파일을 추출한다.

import {
  Controller,
  Post,
  UseInterceptors,
  UploadedFiles,
} from '@nestjs/common';
import { FileService } from './file.service';
import { FilesInterceptor } from '@nestjs/platform-express';

@Controller('file')
export class FileController {
  constructor(private readonly fileService: FileService) {}

  @Post('upload')
  @UseInterceptors(FilesInterceptor('files'))
  upload(
    @UploadedFiles()
    files: Array<Express.Multer.File>,
  ) {
    console.log(files);
  }
}

field name이 각기 다른 여러 파일 업로드

• FileFieldsInterceptor() 데코레이터 이용하고, 이 데코레이터는 2개의 인자를 받는다.
  • uploadedFields : 객체의 배열로, 각 객체는 2개의 속성을 설정할 수 있다.
    • name 속성을 통해 필드 이름을 문자열 값으로 설정
    • maxCount : (option) 최대 파일 수를 설정
  • options : (option) MulterOptions 타입의 객체 [참조]

import {
  Controller,
  Post,
  UseInterceptors,
  UploadedFiles,
} from '@nestjs/common';
import { FileService } from './file.service';
import { FileFieldsInterceptor } from '@nestjs/platform-express';

@Controller('file')
export class FileController {
  constructor(private readonly fileService: FileService) {}

  @Post('upload')
  @UseInterceptors(
    FileFieldsInterceptor([
      { name: 'image', maxCount: 1 },
      { name: 'video', maxCount: 1 },
    ]),
  )
  upload(
    @UploadedFiles()
    files: {
      image?: Express.Multer.File[];
      video?: Express.Multer.File[];
    },
  ) {
    console.log(files);
  }
}

파일과 데이터 한번에 처리하기

file.controller.ts

import { Body, Controller, Post, UploadedFile, UseInterceptors } from '@nestjs/common';
import { FileService } from './file.service';
import { UploadInterceptor } from 'src/interceptor/upload-interceptor';
import { CreateFileDto } from './dto/create-file.dto';

@Controller('file')
export class FileController {
  constructor(private readonly fileService: FileService) {}

  @Post('upload')
  @UseInterceptors(UploadInterceptor)
  upload(@UploadedFile() files: Express.Multer.File, @Body() createFileDto: CreateFileDto) {
    console.log(files);
        console.log(createFileDto);
  }
}

create-file.dto.ts

export class CreateFileDto {
  title: string;
  content: string;
  image: any;
}

console.log

{
  fieldname: 'image',
  originalname: '테스트 이미지.png',
  encoding: '7bit',
  mimetype: 'image/png',
  destination: './uploads',
  filename: '0fc031767a579eee74fce9d0d49e161f.png',
  path: 'uploads/0fc031767a579eee74fce9d0d49e161f.png',
  size: 20751
}
[Object: null prototype] { title: '제목이요!', content: '컨텐츠' }

프로트단에서는 formdata.append() 를 이용하여 key-value 형태로 데이터를 추가하면 된다.

Documentation | NestJS - A progressive Node.js framework

GitHub - expressjs/multer: Node.js middleware for handling multipart/form-data.

[NestJS] File-upload & Use of Interceptor (feat. nest를 바라보는 시각..)

[Nest] 이미지와 데이터 처리하기 (with. FormData)

• 인증 정보(사용자 이름과 비밀번호)를 알아내기 위해 공격자가 반복적, 체계적으로 매번 다른 사용자 이름과 비밀번호를 입력하는 방식의 공격
• 단순하지만 리소스를 많이 소비하는 시행착오 기반의 접근 방식으로, 보통 자동화된 툴이나 스크립트 또는 봇을 사용해 액세스 권한을 획득할 때까지 가능한 모든 조합을 대입한다.

Rate Limiting

• 무차별 대입 공격으로부터 애플리케이션을 보호하는 일반적인 기법

package 설치

npm i @nestjs/throttler

import { ThrottlerModule } from '@nestjs/throttler';

@Module({
  imports: [
    ThrottlerModule.forRoot([
      // 60초동안 최대 요청 개수 10으로 제한
      {
        ttl: 6000,
        limit: 10,
      },
    ]),

    ...

  ],
})
export class AppModule {}
}

전역 설정

import { ThrottlerModule } from '@nestjs/throttler';

@Module({
  imports: [
    ThrottlerModule.forRoot([
      // 60초동안 최대 요청 개수 10으로 제한
      {
        ttl: 6000,
        limit: 10,
      },
    ]),

    ...

  ],
  providers: [
    {
      provide: APP_GUARD,
      useClass: ThrottlerGuard,
    },
  ],
})
export class AppModule {}
}

비활성화

@SkipThrottle() 를 이용하여 전체 class 또는 단일 route에 Throttel 설정을 비활성화 할 수 있음

import { Controller } from '@nestjs/common';
import { SkipThrottle } from '@nestjs/throttler';

@SkipThrottle()
@Controller('api/user')
export class UserController {}

비활성화한 class에서 특정 route를 비활성 무효 처리 할 수 도 있음

import { Controller } from '@nestjs/common';
import { SkipThrottle } from '@nestjs/throttler';

@SkipThrottle()
@Controller('api/user')
export class UserController {

    @SkipThrottle({default: false})
    dontSkip(){
        return 'Rate Limiting 설정 됨'
    }

    doSkip(){
        return 'Rate Limiting 비활성화 됨'
    }
}

Override

• @Trottle() 을 이용하여 글로벌로 설정된 limit, ttl 을 재정의하여 특정 class 또는 route에 설정할 수 있음

@Throttle({ default: { limit: 3, ttl: 60000 } })
@Get()
findAll() {
  return "Custom Rate Limiting 설정";
}

Proxies

• 애플리케이션이 프록시 서버 뒤에서 실행되는 경우 특정 HTTP 어댑터 옵션(express 및 fastify)에서 trust proxy 옵션을 확인하고 이를 활성화하세요.
• 이렇게 하면 X-Forwarded-For 헤더에서 원래 IP 주소를 가져올 수 있으며, getTracker() 메서드를 재정의하여 req.ip가 아닌 헤더에서 값을 가져올 수 있습니다.

src/common/guard/throttler-behind-proxy.guard.ts

import { Injectable } from '@nestjs/common';
import { ThrottlerGuard } from '@nestjs/throttler';

@Injectable()
export class ThrottlerBehindProxyGuard extends ThrottlerGuard {
  // proxy 뒤에 서버가 있더라도 실제 클라이언트의 IP를 빼내는 방법
  protected getTracker(req: Record<string, any>): Promise<string> {
    // 배열이면 첫번째 원소가 클라이언트 IP
    return req.ips.length ? req.ips[0] : req.ip;
  }
}

import { Controller, UseGuards } from '@nestjs/common';
import { ThrottlerBehindProxyGuard } from 'src/common/guard/throttler-behind-proxy.guard';

@UseGuards(ThrottlerBehindProxyGuard)
@Controller('api/user')
export class UserController {}

• 명령어 : docker pull mysql:버전
  • 버전 생략시 최신 버전으로 설치한다.
• 이미지 확인 명령어 : docker images

2. 다운 받은 Image로 Container 생성

명령어 : docker run --name mysql-container -e MYSQL_ROOT_PASSWORD=test1234 -e MYSQL_DATABASE=testDB -p 3306:3306 -v mysql-volume:/var/lib/mysql --restart=always --cap-add=sys_nice -d mysql

💡 옵션

• --name : 컨테이너 이름 설정
• -e : 환경변수(PASSWORD, DATEBASE) 설정
• -p : 포트 설정(외부포트: Docker 내부포트)
• -v : volume 설정
• --restart
  • no : container를 재시작 시키지 않는다. (default)
  • on-failure[:max-retries] : container가 정상적으로 종료되지 않은 경우(exit code가 0이 아님)에만 재시작 시킨다. max-retries도 함께 주면 재시작 최대 시도횟수를 지정할 수 있고, 테스트 서버 등과 같은 리모트에 설정하면 좋을 것 같다.
  • always : container를 항상 재시작시킨다. exit code 상관 없이 항상 재시작 된다.
  • unless-stopped : container를 stop시키기 전 까지 항상 재시작 시킨다.
• --cap-add=sys_nice : 컨테이너가 프로세스 나이스 값을 올리고, 실시간 스케줄링 정책을 설정하고, CPU 선호도 설정 및 기타 작업을 수행할 수 있도록 컨테이너에 CAP_SYS_NICE 기능을 부여한다.
• -d : Dispatch mode(백그라운드에서 실행)
• 마지막의 mysql은 이미지 이름

• 운영 중인 컨테이너 확인 : docker ps

3. Container에 접속하기

• Container 내부 접속 명령어 : docker exec -it mysql-container bash

• Mysql 관리자로 접속

  • mysql -u root -p
  • 비밀번호 입력

• Database 확인

  • SHOW DATABASES;

• 컨테이너 실행 시에 등록한 testDB를 확인할 수 있다.

• 추가로 Database 생성 : CREATE DATABASE 이름

4. MySQL GUI 관리도구로 열기

• 보통 MySQL Workbench를 많이 사용하나 HeidiSQL로 열겠다.

• Docker는 리눅스를 기반으로 동작한다. 따라서 윈도우 환경에서 리눅스를 사용할 수 있도록 도와주는 WSL2를 활성화 해야한다.
• WSL(Windows Subsystem for Linux)는 VM과 같은 도구 없이 윈도우 환경에서 Linux를 사용할 수 있도록 도와준다.
• PowerShell을 Bash처럼 사용하고, Linux 명령어(sed, awk, vim, apt 등)를 사용할 수 있을 뿐만 아니라 Linux 커널도 사용이 가능하다.

1. 관리자 권한으로 Windows PowerShell 실행

    # Windows SubSystem Linux를 활성화시키는 명령어
    > dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart
   
    # VirtualMachinePlatform 기능을 활성화시키는 명령어 : WSL2 버전에 필요한 명령어
    > dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart

   

2. 재부팅 후 Windows PowerShell 실행 후 wsl 명령어 실행해 설치 되었는지 확인. 아래와 같이 나오면 성공

3. Microsoft Store를 통해서 Ubuntu를 설치

4. WSL2 리눅스 커널 업데이트

   • https://wslstorestorage.blob.core.windows.net/wslblob/wsl_update_x64.msi
   • 다운로드 후 설치

5. Ubuntu 실행하여 username, password 설정

6. Windows PowerShell에서 ubuntu가 정상적으로 설치되었는지 확인

    wsl -l -v
    # -l : 현재 설치된 리눅스 배포판 명령어 확인
    # -v : 버전 확인

   

   • VERSION이 1인 경우

     • wsl 버전 변경 : wsl --set-version Ubuntu-버전

     • 모든 WSL이 기본적으로 WSL2를 사용하도록 설정 : wsl --set-default-version 2

2. Docker 설치

1. Docker Desktop for Windows 실행파일을 다운 및 설치

   • https://docs.docker.com/desktop/install/windows-install/
   • 실행
   • Accept

2. 설치 확인

   • Windows PowerShell 실행
   • docker 버전 확인 : docker -v 명령어 입력

참조

WSL2 사용 설정(윈도우에서 Ubuntu 사용하는 방법)

[Docker] 윈도우 도커 설치방법(window 11)

var

• 중복 선언과 재할당이 가능하며 마지막에 할당된 값이 변수에 저장된다.
• 이런 특징으로 자율성이 생기만 어떤 부분에서 값이 변경되었는지 파악하기 힘들어지게 될 수있다.

    var greeting = 'hello';
    console.log(greeting);  // hello

    var greeting = 'hi';
    console.log(greeting);  // hi

    greeting = 'how are you?';
    console.log(greeting);  // how are you?

• function-level scope
  • 함수 내에서 선언된 변수는 함수 내에서만 유효하다.
  • 함수 내에서는 블록 내외부에 관계 없이 유효하다.
  • 함수 외부에서는 참조 할 수 없다.

    function func() {
      if (true) {
        var a = 'a';
        console.log(a); // a
      }
      console.log(a); // a
    }

    func();

    // console.log(a); // ReferenceError: a is not defined

let

• 중복 선언 불가, 재할당 가능
• block-level scope
  • 함수 , if문, for문 등의 모든 코드 블록 내부에서 선언된 코드 블록 내에서만 유효
  • 코드 블록 외부에서는 참조할 수 없다.

// 중복 선언 불가, 재할당 가능
let greeting = 'hello';
console.log(greeting);  // hello

// let greeting = 'hi';  // 오류 발생 : 중복 선언 불가

greeting = 'how are you?';
console.log(greeting);  // how are you?

function func() {
  if (true) {
    let a = 'a';
    console.log(a); // a
  }
  // console.log(a); // ReferenceError: a is not defineds
}

func();

// console.log(a); // ReferenceError: a is not defined

const

• 중복 선언 불가, 재할당 가능
• block-level scope

// 중복 선언 불가, 재할당 불가
const greeting = 'hello';
console.log(greeting);  // hello

const greeting = 'hi';  // 오류 발생 : 중복 선언 불가

greeting = 'how are you?';  // 오류 발생 : 재할당 불가
console.log(greeting);  // how are you?

호이스팅(Hoisting)

• 호이스트(Hoist)의 뜻은 무언가를 들어 올리거나 끌어 올리는 동작을 설명합니다.

• 자동차를 강에서 올린다(Hoist)라고 할 수 있습니다.

• JS에서 호이스팅은 코드가 실행되기 전에 변수 및 함수 선언(이름)이 로컬 범위(유효 범위)의 맨 위로 들어올려지거나 끌어올려지는 경우를 설명한다.

var 선언문 호이스팅

• 위로 호이스팅되고, undefined 값 할당

console.log(greeting);  // undefined
var greeting = 'hello';

• 위의 예에서 콘솔로그에 undefined가 반환되는 이유는 호이스팅 때문이다.
• JS 인터프리터는 변수 생성의 선언(var greeting) 단계 및 할당(= ‘hello’) 단계를 분할한다.
• 선언 부분은 코드가 실행 되기 전에 현재 범위의 맨 위로 호이스팅되고 초기에 undefined 값이 할당 된다.
• 즉, 초기화 되기 전에 greeting 변수를 사용할 수 있다.

함수 선언문 호이스팅

• 함수 선언전에 호출하면 올바로 출력이 된다.

func(); // hoisting test

function func() {
  console.log('hoisting test');
}

let / const 선언문 호이스팅

• let 또는 const로 변수를 선언하면 실제로 변수는 여전히 호이스팅 된다.
• var 와 차이점은 var는 실제 할당 값이 할당되기 전까지 undefined 값이 할당 된다.
• 하지만 let / const 는 변수 초기에 어떤 값도 할당되지 않는다.
  • 초기화 되지 않음

console.log(greeting);  // ReferenceError: Cannot access 'greeting' before initialization
let greeting = 'hello';

문제 설명

정수 n, left, right가 주어집니다. 다음 과정을 거쳐서 1차원 배열을 만들고자 합니다.

n행 n열 크기의 비어있는 2차원 배열을 만듭니다. i = 1, 2, 3, ..., n에 대해서, 다음 과정을 반복합니다. 1행 1열부터 i행 i열까지의 영역 내의 모든 빈 칸을 숫자 i로 채웁니다. 1행, 2행, ..., n행을 잘라내어 모두 이어붙인 새로운 1차원 배열을 만듭니다. 새로운 1차원 배열을 arr이라 할 때, arr[left], arr[left+1], ..., arr[right]만 남기고 나머지는 지웁니다. 정수 n, left, right가 매개변수로 주어집니다. 주어진 과정대로 만들어진 1차원 배열을 return 하도록 solution 함수를 완성해주세요.

제한사항

• 1 ≤ n ≤ 107
• 0 ≤ left ≤ right < n2
• right - left < 105

입출력 예

문제 풀이

1. 2차원 배열에 값이 채워지는 규칙

• n = 3, left = 2, right = 5로 생성되는 배열이 아래와 같고 좌표는 (x, y)라고 하겠습니다.

    [
        [1, 2, 3],
        [2, 2, 3],
        [3, 3, 3],
    ]

  x	y	값
  0	0	1
  0	1	2
  0	2	3
  1	0	2
  1	1	2
  1	2	3
  2	0	3
  2	1	3
  2	2	3

• 규칙이 보이시나요?

• 바로 바로 x와 y 중 큰 수에 1을 더한 것이 값이 됩니다.

• 코드로는 Max(x, y) + 1 게 되죠.

2. 결과 배열 생성

• 제한사항으로 n이 10^7 까지 될 수 있기 때문에 2차원 배열 전체를 만들어 놓고 left, right로 추출하는 것은 효율성이 좋지 않아요.

• 그럼 left ~ right 범위에 해당하는 값만 생성하는 방법은 없을까?

• 좌표를 통해서 값을 생성하는 것은 위에서 알아 보았으니 범위내에서 좌표를 찾을 수 있다면 완성되겟죠?

• 위의 예시에서 범위는 left(2) ~ right(5)가 되고 n = 3일 때 우리가 찾아야 하는 좌표는 [0, 2], [1, 0], [1, 1], [1, 2]이 됩니다.

• 범위내의 값을 i라고 할때

  i	n	몫	나머지
  2	3	0	2
  3	3	1	0
  4	3	1	1
  5	3	1	2

• 규칙이 보이시나요?

• x = Math.floor(left / n)

• y = left % n

코드

function solution(n, left, right) {
    var answer = [];

    for (let i = left; i <= right; i++) {
        answer.push(Math.max(Math.floor(i / n), i % n) + 1)
    }

    return answer;
}

제한사항

• clothes : [의상 이름, 의상 종류]로 이루어진 2차원 배열
• 스파이가 가진 의상의 수는 1개 이상 30개 이하입니다.
• 같은 이름을 가진 의상은 존재하지 않습니다.
• clothes의 모든 원소는 문자열로 이루어져 있습니다.
• 모든 문자열의 길이는 1 이상 20 이하인 자연수이고 알파벳 소문자 또는 '_' 로만 이루어져 있습니다.
• return : 서로 다른 옷의 조합의 수
• 최소 하루에 한 개의 의상 입는다.

풀이

EX) [["yellow_hat", "headgear"], ["blue_sunglasses", "eyewear"], ["green_turban", "headgear"]]

1. 각 의상 종류 중 1개 선택할 수 있는 경우의 수 + 1(선택 안할 경우)
   • headgear : 2 + 1 / eyewear : 1 + 1
2. 각 의상 종류의 경우의 수 곱한다.
   • 3 * 2 = 6
3. 전부 선택 하지 않을 경우 빼기
   • 6 -1 = 5

코드

function solution(clothes) {
    let answer = 1;
    let obj = {}
    clothes.forEach(cloth => obj[cloth[1]] = (obj[cloth[1]] | 0) + 1)

    let values = Object.values(obj);

    // 각 의상 종류중 1개 선택할 수 있는 경우의 수 + 1(선택 안할 경우)
    values.forEach(value => answer *= (value + 1))

    // 모두 선택 안할 경우 빼기
    return answer - 1;
}

입력 형식

• cacheSize : 캐시 크기
• 정수, 범위 0 ≤ cacheSize ≤30
• cities : 도시 이름으로 이뤄진 문자열 배열
  • 길이 : 100,000
  • 원소 : 공백, 숫자, 특수 문자 등이 없는 영문자. 대소문 구분 X, 최대 20자

출력 형식

• 입력된 도시이름을 배열 순서대로 처리할 때, “총 실행시간” 출력

조건

• LRU(Least Recently Used) 사용
• cache hit : 실행 시간 1
• cache miss : 실행 시간 5

LRU(Least Recently Used)

• 가장 오랫동안 참조되지 않은 페이지를 교체하는 방식
• 캐시가 가득 찻을때 가장 오랫동안 참조 되지 않는 페이지 제거
• 새로 참조 할때 마다 리스트 맨 앞에 페이지 번호 추가
  • 리스트에 해당 페이지 번호가 없다면 맨 앞에 페이지 번호 추가 → Miss
  • 리스트에 해당 페이지 번호가 있다면 기존 것 제거하고 맨 앞에 페이지 번호 추가 → Hit
  • 캐시가 3이라고할때, 리스트 길이가 4이상이 되면 맨마지막 요소 제거

Cache Hit : CPU가 참조하고자하는 메모리가 캐시에 존재하는 경우 Cache Miss : CPU가 참조하고자하는 메모리가 캐시에 존재하지 않은 경우

Hit Ratio : Cache Hit / (Cache Hit + Cache Miss) Miss Ratio : Cache Miss / (Cache Hit + Cache Miss) ※ 위의 예시 : Hit Ratio = 3/8, Miss Ratio = 5/8

코드

배열로 구현

function solution(cacheSize, cities) {
    let answer = 0;
    let LUR = [];
    for (let city of cities) {
        city = city.toLowerCase();
        let i = LUR.indexOf(city);
        if (i !== -1) {
            LUR.splice(i, 1);
            answer += 1;
        } else {
            answer += 5;
        }
        LUR.push(city);
        if (LUR.length > cacheSize) LUR.shift();
    }
    return answer;
}

이중 연결 리스트(Doubly Linked List)로 구현

function solution(cacheSize, cities) {
    let answer = 0;
    let dll = new DLL();

    for (let city of cities) {
        city = city.toLowerCase();
        let isNode = dll.get(city);
        if (isNode) {
            if (isNode.index !== 0) {
                dll.remove(isNode.node);
                dll.unshift(city);
            }
            answer += 1;
        } else {
            answer += 5;
            dll.unshift(city);
        }

        if (dll.length > cacheSize) dll.pop();
    }

    return answer;
}

class Node {
    constructor(val) {
        this.val = val;
        this.prev = null;
        this.next = null;
    }
}

class DLL {
    constructor() {
        this.head = null;
        this.tail = null;
        this.length = 0;
    }
    pop() {
        let node = this.tail;
        if (!this.head) return undefined;
        if (this.length === 1) {
            this.head = null;
            this.tail = null;
        } else {
            node.prev.next = null;
            this.tail = node.prev;
            node.prev = null;
        }
        this.length--;
        return node;
    }

    unshift(val) {
        let newNode = new Node(val);
        if (this.length === 0) {
            this.head = newNode;
            this.tail = newNode;
        } else {
            this.head.prev = newNode;
            newNode.next = this.head;
            this.head = newNode;
        }
        this.length++;
        return this;
    }

    get(val) {
        let index = 0;
        let cur = this.head;
        while (index < this.length) {
            if (cur.val === val) return { 'node': cur, 'index': index };
            cur = cur.next;
            index++;
        }
        return null;
    }

    remove(node) {
        if (this.length === 0) return undefined;
        if (node.next === null) {
            this.pop();
        } else {
            let removedNode = node;
            let prevNode = node.prev;
            let nextNode = node.next;
            prevNode.next = nextNode;
            nextNode.prev = prevNode;

            removedNode.next = null;
            removedNode.prev = null;
            this.length--;
        }
    }
}

H-Index

• 과학자의 생산성과 영향력을 나타내는 지표
• n편 중, h번 이상 인용된 논문이 h편 이상이고
• 나머지 논문이 h번 이하 인용되었다면
• h의 최댓값이 이 과학자의 H-Index입니다.

예시

조건 : h번 이상 인용된 논문이 h편 이상 일때 h의 최대값

1. 1번 이상 인용 : 6개
2. 2번 이상 인용 : 6개
3. 3번 이상 인용 : 5개
4. 4번 이상 인용 : 5개 → h의 최대값 = 4
5. 5번 이상 인용 : 4개
6. 6번 이상 인용 : 2개

규칙

1. 피인용 수를 내림차순으로 정렬하고 순번(No.)를 준다.
2. h = 피인용 수가 순번 보다 크거나 같은 것 중 가장 큰 순번

코드

function solution(citationsn) {
    citationsn.sort((a, b) => b - a);
    return citationsn.filter((e, i) => e >= i + 1).length
}

조건

• 점프 : K 칸 점프 -> 건전지 K만큼 소모O
• 순간이동 : (현재까지 온 거리) x 2 에 해당하는 위치 이동 -> 건전지 소모X
• 이동하려는 거리 N이 주어졌을 때 → return 건전지 사용량의 최솟값
  • 정확히 N 까지 가야한다.

규칙

• 나머지가 0이면 n이 몫인 건전지 사용량의 최솟값
• 아니면 n이 몫인 건전지 사용량의 최솟값 + 1(나머지)

ex)

코드

function solution(n) {
  let div = Math.floor(n / 2);

  if (div === 0 && n % 2 === 0) return 0;
  if (div === 0 && n % 2 !== 0) return 1;

  if (n % 2 === 0) return solution(div);
  else return solution(div) + 1;
}

조건

• 1칸 또는 2칸 뛸 수 있다.
• 멀리뛰기 할 칸의 수 n
• return n까지 가는 경우의 수 % 1234567

패턴

• n = 1 → return 1

  • 1

• n =2 → return 2

  • 1 1
  • 2

• n = 3 → return 3

  • 1 1 1
  • 2 1
  • 1 2

• n = 4 → return 5

  • 1 1 1 1
  • 1 2 1
  • 1 1 2
  • 2 1 1
  • 2 2

• n = 5 → return 8

  • 1 1 1 1 1
  • 2 1 1 1
  • 1 2 1 1
  • 1 1 2 1
  • 1 1 1 2
  • 2 2 1
  • 2 1 2
  • 1 2 2

• n = 6 → return 13

  • 1 1 1 1 1 1
  • 2 1 1 1 1
  • 1 2 1 1 1
  • 1 1 2 1 1
  • 1 1 1 2 1
  • 1 1 1 1 2
  • 2 2 1 1
  • 2 1 2 1
  • 2 1 1 2
  • 1 2 2 1
  • 1 2 1 2
  • 1 1 2 2
  • 2 2 2

• 요약하자면 피보나치 수열의 패턴을 가지고 있다.

  n	return
  1	1
  2	2
  3	3
  4	5
  5	8
  6	13

• 피보나치 수열의 공식이 F(n) = F(n-1) + F(n-2) 일때

• F(n) % 1234567 = (F(n-1) + F(n-2)) % 1234567
  = (F(n-1) % 1234567 + F(n-2) % 1234567) % 1234567

코드

function solution(n) {
  let arr = [0, 1]
  for (let i = 1; i <= n; i++) {
    arr.push(arr[arr.length - 1] + arr[arr.length - 1 - 1] % 1234567)
  }
  return arr[arr.length - 1]
}

접근 방법

• 1 ~ N 차례로 배정
• 1<->2, 3<->4 .. 승부
• 이기면 1 ~ N/2번으로 차례대로 재배정
• return A, B가 만나는 라운드
• A, B 는 무조건 이김

규칙1

• 몫과 나머지의 합으로 다음 차례를 알 수 있다.

코드1

function solution(n, a, b) {
    let count = 0;
    while (a !== b) {
        a = Math.floor(a / 2) + a % 2
        b = Math.floor(b / 2) + b % 2
        count++
    }
    return count;
}

규칙2

• 규칙1을 다시 생각해 보면 한번에 올림을 해줘도 같은 결과를 찾을 수 있다.

코드2

function solution(n, a, b) {
    let count = 0;
    while (a !== b) {
        a = Math.ceil(a / 2)
        b = Math.ceil(b / 2)
        count++
    }
    return count;
}

유클리드 거리(Euclidean Distance)

• L2 Distance라고 불린다.

• 초록색 선 : 두점사이의 직선 거리(최단 거리)

• 공식

  • 각 차원의 차를 제곱해서 모두 더한 값의 제곱근

• n차원에서 두 점 사이의 거리

• JS 코드

    let a = [0, 4];
    let b = [3, 0];
  
    function euclideanDistance(a, b) {
        let distance = 0;
        for (let i = 0; i < a.length; i++) {
            distance += Math.pow(Math.abs(a[i] - b[i]), 2)
        }
        return Math.sqrt(distance)
    }
  
    euclideanDistance(a, b)  // 5

맨하탄 거리(Manhattan Distance)

• L1 Distance라고 불린다.
• 도시의 골목길(블록)을 걸을 때와 모습이 유사하여 이름이 붙었다.
• 빨강색 , 파랑색, 노랑색 선 : 거리 동일하다.
• 공식
  • 각 차원의 절대값 차의 합
• n차원에서 두 점 사이의 거리
• JS 코드

    let a = [0, 4];
    let b = [3, 0];

    function manhattanDistance(a, b) {
        let distance = 0;
        for (let i = 0; i < a.length; i++) {
            distance += Math.abs(a[i] - b[i])
        }
        return distance
    }

    manhattanDistance(a, b)  // 7

• 자신 보다 작은 두개의 자연수를 곱하여 만들 수 없는 1보다 큰 자연수
• 1과 자기 자신만을 약수로 갖는 수
• 1과 자신으로만 나누어 지는 수
• ex) 2, 3, 5, 7…

에라토스테네스의 체

• 알고리즘

  1. 2부터 구하구자 하는 모든 수 나열

  2. 2는 소수이므로 오른쪽에 2쓴다.

  3. 자신을 제외한 2의 배수 모두 지운다.

  4. 남은 수 가운데 3은 소수이므로 오른쪽에 쓴다.

  5. 자신을 제외한 3의 배수 모두 지운다.

  6. 남은 수 가운데 5은 소수이므로 오른쪽에 쓴다.

  7. 자신을 제외한 5의 배수 모두 지운다.

  8. 남은 수 가운데 7은 소수이므로 오른쪽에 쓴다.

  9. 자신을 제외한 7의 배수 모두 지운다.

  10. 위의 과정 반복하면 구하는 구간의 모든 소수가 남는다.

• 위 그림의 경우, 11^2 > 120이므로 11보다 작은 수의 배수들만 지워도 충분한다. 즉 120보다 작거나 같은 수 가운데 2, 3, 4, 5의 배수를 지우고 남는 수는 모두 소수이다.

• 알고리즘 요약

  • 1보다 큰 모든 자연수는 소수의 곱으로 이루워졌다.
  • 자연수 n이 √n보다 작은 소수들로 나눠떨어지지 않으면 자연수 n은 소수이다.

JS로 에라토스테네스의 체 구현

function solution(n) {
  // idx 0, 1은 false / 나머지는 true인 길이가 n(idx : 0 ~ n)인 배열 생성
  let arr = Array(n + 1).fill(true).fill(false, 0, 2)

  // i : n의 제곱근까지 loop
  for (let i = 2; i <= Math.sqrt(n); i++) {
    if (arr[i]) {
      // i의 배수 false로 변경
      for (let j = i * i; j <= n; j += i) {
        arr[j] = false;
      }
    }
  }
  return arr
}

• 소수개수 및 소수 반환하기

let isPrime = solution(120)
// 소수 개수 구하기
let countPrime = isPrime.filter(e => e).length  // 30
// 소수 구하기
let prime = isPrime.map((v, i) => v ? i : 0).filter(e => e)
// [2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97, 101, 103, 107, 109, 113

• 참조

  • 에라토스테네스의 체 - 위키백과, 우리 모두의 백과사전

  • [알고리즘] 소수 찾기 - 에라토스테네스의 체 by javascript

• 유사배열객체(array-like object), 반복가능객체(iterable object)를 얕은 복사(shallow copy)하여 새로운 배열 객체를 만들어 준다.

• 예제 1( 정수 → 문자열 배열)

const num = 1234;
// 정수 -> 문자열로 변경
const str = String(num);
// 문자열 -> 배열로 변경
const newArr = Array.from(str)
console.log(newArr);  // [ '1', '2', '3', '4' ]

• 예제 2 (정수 → 정수 배열)

const num = 1234;
// 정수 -> 문자열로 변경
const str = String(num);
// element를 문자열에서 정수로 변경
const mapfn = (arg) => Number(arg)
// 문자열 -> 배열로 변경
const newArr = Array.from(str, mapfn)
console.log(newArr);  // [ 1, 2, 3, 4 ]

2. split(), map()

• split('') : 문자열을 잘라서 배열로 반환

• map(callback) : 각 element를 callback 함수에 적용한 값을 배열로 반환

  
  

• 예제 1 (정수 → 정수 배열)

  const num = 1234;
  // 정수 -> 문자열로 변경
  const str = String(num);
  // element를 문자열에서 정수로 변경
  const mapfn = (arg) => Number(arg)
  // 문자열 -> 배열로 변경
  const newArr = str.split('').map(mapfn)
  console.log(newArr);  // [ 1, 2, 3, 4 ]

• 유사배열객체(array-like object), 반복가능객체(iterable object)를 얕은 복사(shallow copy)하여 새로운 배열 객체를 만들어 준다.

const set = new Set([1, 2, 3]); // Set(3) { 1, 2, 3 }
const arr = Array.from(set)     // [ 1, 2, 3 ]

2. Spread Operator (전개 연산자)

• 배열이나 문자열과 같이 반복 가능한 객체를 하나씩 펼처서 리턴한다.

const set = new Set([1, 2, 3]); // Set(3) { 1, 2, 3 }
const arr = [...set]     // [ 1, 2, 3 ]

3. forEach()

• 반복문 활용

const set = new Set([1, 2, 3]); // Set(3) { 1, 2, 3 }
const arr = []
set.forEach(ele => {
  arr.push(ele)
})
console.log(arr);  // [ 1, 2, 3 ]

생성하는 2가지 방법

1. 정규식을 리터털로 선언

    cosnt regex = /abc/;

   • 스크립트가 로드될 때 컴파일되므로, 정규식 문자열이 변하지 않는다면 리터럴 방식으로 선언하는 것이 성능상 조금 더 이점이 있다.

2. 정규식 생성자 RegExp를 이용해서 생성

    cosnt regex = new RegExp("abc");

   • 정규식이 실행 시점에 컴파일되기 때문에 정규식을 동적으로 변화시켜야 할 때 유용

특수문자 이스케이프(Escape)

• 몇몇 특수문자들은 특수한 용도로 사용되는 예억어이기 때문에 백슬래시(\)를 문자 앞에 붙여 문자 그대로 해석되도록한다.

const regex1 = /\*/;
const regex2 = /\?/;
const regex3 = /\./;
const regex4 = /\\/;

플래그(Flags)

• 고급 검색을 위한 옵션 설정
• 플래그는 리터럴 방식인지 생성자 방식인지에 따라 설정하는 방식이 다르다.

const regex1 = /패턴/flags;
const regex2 = new Regex(/패턴/, flags);

• g (Global)

  • 패턴과 일치하는 모든 것을 검색. 해당 플래그가 없으면 일치하는 첫 번째 결과만 반환

    const str = 'banana';
    
    // g 플래그 없는 경우 : 최초에 발견되 문자만 반환
    str.match(/a/)  // [ 'a', index: 1, input: 'banana', groups: undefined ]
    // g 플래그 있는 경우 : 모든 결과 배열로 반환
    str.match(/a/g)  // [ 'a', 'a', 'a' ]

• m (Multiline)

  • 문자열의 행이 바뀌더라도 계속 패턴 검색

• i (Case Insensitive)

  • 대, 소문자 구별 없이 검색

    const str = 'banAna'
    str.match(/a/gi) // [ 'a', 'A', 'a' ]

메타 문자(Meta Charactor)

문자 그룹(Charactor Set, [] , [^])

• 대괄호([])로 묶인 긍정 문자 그룹은 대괄호 내부의 문자열 중 하나라도 일치하는 경우를 의미

const str = 'gray and grey'

str.match(/gr[ae]y/g);   // [ 'gray', 'grey' ]

• 대괄호 내부에 들어가는 특수문자는 메타 문자로 취급되지 않기 때문에 별도로 이스케이프 하지 않아도 된다.

const str = '!@#$%^&*.'

// [] 안에 있는 특수문자는 리터럴 특수문자 취급된다.
str.match(/[#.]/g);   // [ '#', '.' ]

• 범위 지정 구문(dash, - )를 이용하여 간략하게 표기할 수 있다.

const regex1 = /[A-Z]/; // === /[ABCDEFGHIJKLMNOPQRSTUVWXYZ]/
const regex2 = /[0-9]/; // === /[0123456789]/
const regex3 = /[가-힣]/;

• [^] 부정 문자 그룹(Negative Character Set)을 이용하여 대괄호에 해당하지 않는 문자열을 매칭할 수 있다.

const str = '2023 09 14 Monday';
// 숫자만 찾기
str.match(/[0-9]/g)  // ['2', '0', '2', '3', '0', '9', '1', '4']
// 숫자 제외하고 찾기
str.match(/[^0-9]/g) // [' ', ' ', ' ', 'M', 'o', 'n', 'd', 'a', 'y']

10진수 문자(Digit Character, \d, \D)

• \d : [0-9] 와 동일
• \D : [^0-9] 와 동일

const str = '2023 09 14 Monday';
// 숫자만 찾기
str.match(/\d/g)  // ['2', '0', '2', '3', '0', '9', '1', '4']
// 숫자 제외하고 찾기
str.match(/\D/g) // [' ', ' ', ' ', 'M', 'o', 'n', 'd', 'a', 'y']

단어 문자(Word Character , \w, \W)

• \w : [0-9a-zA-z_] 와 동일(숫자, 영어 대소문자, 언더스코어(_)를 포함하는 그룹
• \W : [^0-9a-zA-z_]

const str = '2023 09 14 Monday';
// 단어만 찾기
str.match(/\w/g)  // ['2', '0', '2', '3', '0', '9', '1', '4', 'M', 'o', 'n', 'd', 'a', 'y']
// 단어 아닌 것만 찾기
str.match(/\W/g)  // [' ', ' ', ' ']

공백 문자(Whitespace Character, \s, \S)

• \s : 스페이스, 탭, 폼피드, 줄 바꿈 문자 등을 포함한 하나의 공백 검색
• \S : \s의 역집합

const str = '2023 09 14 Monday';
// 공백만 찾기
str.match(/\s/g)  // [' ', ' ', ' ']
// 공백이 아닌것만 찾기
str.match(/\S/g)  // ['2', '0', '2', '3', '0', '9', '1', '4', 'M', 'o', 'n', 'd', 'a', 'y']

임의의 문자(Any Character, .)

. : 개행 문자를 제외한 모든 단일 문자에 해당

const str = '2023 09 14 Monday';

str.match(/./g)  
// ['2', '0', '2', '3', ' ', '0', '9', ' ', '1', '4', ' ', 'M', 'o', 'n', 'd', 'a', 'y']

str.match(/../g)
// ['20', '23', ' 0', '9 ', '14', ' M', 'on', 'da']

앵커(Anchor, ^, $ )

• 메타 문자들은 어떤 문자열을 일치 시킬 것인지에 관한 것이였다면
• 앵커는 입력된 정규식이 어떤 특정 위치에서 동작할지를 제한하는 역할의 문자
• 즉, 위치만 제한할 뿐 검색 결과에는 포함되지 않는다.
• ^ : 패턴 시작 앵커
  • 해당 정규식이 줄의 시작 부분인지 확인하는 역할
  • 문자 그룹([])에서의 부정 그룹을 나타내기 위한 캐럿(^)과는 다른 용법!
• $ : 패턴 종료 앵커
  • 해당 정규식이 줄의 마지막 부분인지 확인하는 역할

const str1 = 'aaa';
const str2 = 'bab';

// str의 시작이 a 인지 검색
console.log(str1.match(/^a/))  // [ 'a', index: 0, input: 'aaa', groups: undefined ]
console.log(str2.match(/^a/))  // null
// str의 마지막이이 a 인지 검색
console.log(str1.match(/a$/))  // [ 'a', index: 2, input: 'aaa', groups: undefined ]
console.log(str2.match(/a$/))  // null

단어 경계(Word Boundaries, \b, \B)

• \b : 다른 단어 문자(\w)가 앞이나 뒤에 등장하지 않는 위치임을 나타내는 문자
• \B : \b 의 역집합

const str = " react and act";

// act 양옆에 단어 문자가 없는 것만 찾기
str.match(/\bact\b/); // [ 'act', index: 11, input: ' react and act', groups: undefined ]
// act 좌측에 단어 문자가 있는 것 찾기
str.match(/\Bact/);   // [ 'act', index: 3, input: ' react and act', groups: undefined ]

교체 구문(Alternation, |)

• OR 연산자와 동일한 역할
• 연산자 우선 순위가 가장 낮다.

const str = " react or act or enact";

str.match(/react|enact/g); // [ 'react', 'enact' ]

수량자(Quantifier)

• 메타 문자들이 N회 반복됨을 나타내기 위한 문자
• 적용하고자하는 문자 오른쪽에 붙인다.
• 기본적으로 정규식은 탐용적이기 때문에, 수량자에 다양한 경우의 패턴이 매칭될 때에는 가능한 긴 패턴을 반환다.

const str = "abc";

// ab 또는 abc가 있는 찾기
// 반환 값으로 ab, abc 중 더 긴 abc 반환
str.match(/abc?/); // [ 'abc', index: 0, input: 'abc ab', groups: undefined ]

• 반환 값으로 ab도 일치하고 abc도 일치하지만 정규식은 탐욕적이기 때문에 더 길고 많은 값을 반환한다.

게으른 수량자(Lazy Quantifier)

const str = "abc";

// ab 또는 abc가 있는 찾기
str.match(/abc??/); // [ 'ab', index: 0, input: 'abc', groups: undefined ]

• 반환 값으로 ab도 일치하고 abc도 일치하지만 ?를 다시 붙여 게으르게 만듦으로서 가능한 더 적고 짧은 값을 반환

우선 범위 수량자 - 정확이 n 번 일치 ({n})

• {m,n} : 최소 m번, 최대 n번 반복

const str = "xxx";

str.match(/x{1,3}/);   // [ 'xxx', index: 0, input: 'xxx', groups: undefined ]
str.match(/x{1,3}?/);  // [ 'x', index: 0, input: 'xxx', groups: undefined ]

• {n} : 앞선 패턴이 n번 반복 === {n,n}

const str = "zxxzzxz";

str.match(/x{1}z/); // [ 'xz', index: 2, input: 'zxxzzxz', groups: undefined ]
str.match(/x{2}z/); // [ 'xxz', index: 1, input: 'zxxzzxz', groups: undefined ]

• {n,} : 앞선 패턴이 최소 n번 이상 반복

const str = "zxxzzxz";

str.match(/x{1,}/)  // [ 'xx', index: 1, input: 'zxxzzxz', groups: undefined ]
str.match(/x{1,}?/) // [ 'x', index: 1, input: 'zxxzzxz', groups: undefined ]

• + : 앞선 패턴이 한번 이상 반복 === {1,}

const str = "xxxx";

str.match(/xx+/)  // [ 'xxxx', index: 0, input: 'xxxx', groups: undefined ]
str.match(/xx+?/) // [ 'xx', index: 0, input: 'xxxx', groups: undefined ]

• ? , ?? : 앞선 패턴이 1번 또는 0번 일치

const str = "xxxx";

str.match(/xx?/)  // [ 'xx', index: 0, input: 'xxxx', groups: undefined ]
str.match(/xx??/) // [ 'x', index: 0, input: 'xxxx', groups: undefined ]

• * : 0번 이상 일치

const str = "xxxx";

str.match(/x*/)  // [ 'xxxx', index: 0, input: 'xxxx', groups: undefined ]
str.match(/x*?/) // [ '', index: 0, input: 'xxxx', groups: undefined ]

참조

정규표현식 완전정복 - 재그지그의 개발 블로그

[JavaScript] - 정규표현식

정규 표현식 - JavaScript | MDN

let str = "1zero2zero3"
let parm = 'zero'

let arr = str.split(parm)
console.log(arr) // ["1", "2", "3"]
str= arr.join('0')
console.log(str) // 10203

• split() 을 이용하여 특정문자(parm=zero)를 구분자로 잘라서 배열 생성
• join() 을 이용하여 배열의 모든 요소를 대체하려는 문자열('0') 으로 연결하여 하나의 문자열 생성

2. replace, 정규식 활용

let str = "1zero2zero3"
let parm = 'zero'

let reg = new RegExp(parm,'g')
console.log(reg) // /zero/g
str= str.replace(reg, 0)
console.log(str) // 10203

• new RegExp()로 변수에 담긴 특정문자로 정규식 생성
• replac()로 정규식에 해당하는 문자열 0으로 대체

• split() 메서드로 문자열을 문자 배열로 반환
• reverse() 메서드로 배열 순서 뒤집기
• join() 메서드로 배열의 원소 문자열로 결합

function reverseString(str) {
  // 1. split() 메서드로 string -> 배열로 반환
  let splitString = str.split("");  // [ 'b', 'a', 'n', 'n', 'a' ]

  // 2. reverse() 메서드를 배열의 순서를 뒤집기
  let reverseArray = splitString.reverse(); // [ 'a', 'n', 'n', 'a', 'b' ]

  // 3. join() 메서드로 배열의 모든 요소를 문자열로 결합
  let joinArray = reverseArray.join(""); // annab

  // 4. 반전된 문자열을 반환
  return joinArray; // annab
}

console.log(reverseString("banna"));

위의 코드를 한줄로 요약하면 아래와 같다.

function reverseString(str) {
  return str.split("").reverse().join("");  // annab
}

console.log(reverseString("banna"));