UIHYEON

65줄짜리 텍스트 파일이 GitHub 124k Stars를 받은 이유 (CLAUDE.md 4원칙)

의현 — Mon, 11 May 2026 19:18:29 +0900

1. AI의 역설 (성능은 올라가지만, 신뢰는 떨어진다.)

최근 LLM의 성능은 새로운 모델이 나올 때마다 더 좋아지지만, 실제 AI를 활용하다보면 다음과 같은 상황을 한 번쯤은 직면해봤을 것이다.

할루시네이션 (Hallucination) : 아주 그럴듯하게 틀린 정보를 제공하는 문제
성급한 일반화 : 모호한 질문에 대해 "알아서" 가정을 세우고 코드를 작성하는 문제
복잡도 증가 : 간단히 해결할 수 있는 문제를 수백 줄의 복잡한 코드로 구현하는 문제

이러한 문제는 AI가 못해서 생기는 문제가 아니라, 오히려 모델 성능이 올라갈수록 더 많은 지식을 통해 더 나은 답변을 생성하려고 하기 때문에 발생하는 문제라 생각한다.

성능은 올라가는데 신뢰는 오히려 떨어지는 상황이 발생하고 이러한 상황을 "지능의 역설"이라 할 수 있다.

결국 AI의 지능을 제어하고 검증하는 능력이 점점 더 중요해지는 시대가 된 것 같다.

그래서 등장한 개념이 하네스 (Harness) 다.

2. 하네스 (Harness)가 뭐지?

하네스 (Harness)는 원래 마구(馬具, 말을 제어하기 위해 채우는 장치)를 뜻한다.

개발에서는 소프트웨어를 통제된 환경에서 실행하고 검증하기 위한 툴을 의미한다.

다음과 같은 테스트들이 있다면, 어떤 코드 변경이 들어와도 "맞다/틀리다"를 즉시 판단할 수 있다.

describe("결제 모듈", () => {
  it("잔액 부족 시 에러를 던진다", () => { ... });
  it("중복 결제를 방지한다", () => { ... });
  it("타임아웃 시 롤백한다", () => { ... });
});

하네스의 핵심이 바로 이것이다.

AI에게 "이렇게 해줘"라고 말하는 대신, "이 기준을 만족시켜줘"라고 말하는 것

❌ 명령형
"이 함수에 에러 처리 추가해줘"

✅ 하네스 방식
"null 입력, 빈 배열, 네트워크 타임아웃 케이스를 테스트로 먼저 작성하고,
그 테스트가 전부 통과하도록 함수를 수정해줘"

차이는 단순해 보일 수 있지만 결과는 완전히 다르다. 두 번째 방식은 API가 성공/실패 신호를 스스로 판단하며 루프를 돌 수 있다.

3. Andrej Karpathy의 언급

Andrej Karpathy는 Open AI 공동창업자이자 전 Tesla AI 디렉터로, AI/ML 분야에서 가장 유명한 실무자 중 한명이다.

안드레 카파시가 트위터에 아래와 같은 글을 올렸다.

"모델들은 사용자를 대신하여 잘못된 가정을 세우고 검증 없이 그대로 진행합니다. 혼란을 관리하지도 않고, 설명을 요청하지도 않고, 불일치를 드러내지도 않고, 장단점을 제시하지도 않으며, 필요할 때 반박하지도 않습니다."

"그들은 코드를 지나치게 복잡하게 만들고, 추상화를 과도하게 늘리고, 사용되지 않는 코드를 정리하지 않고... 100줄이면 충분할 코드를 1000줄 넘게 부풀려 구현하는 걸 정말 좋아합니다."

"그들은 여전히 때때로 자신들이 충분히 이해하지 못하는 부작용을 이유로 주석이나 코드를 수정하거나 삭제하는데, 이는 설령 그것이 작업과 직접적인 관련이 없더라도 마찬가지입니다."

이러한 문제는 모두가 겪고 있었지만, 아무도 이와같이 명확하게 정리하지 못했던 것이었다.

이를 바탕으로 개발자 Forrest Chang 이 CLAUDE.md 파일로 정리했고, andrej-karpathy-skills 레포로 GitHub에 공개되었다.

코드는 한 줄도 없지만 124k 이상의 Star를 받으면서 화제가 되었다. 그 만큼 많은 개발자들이 이러한 상황을 겪고 있었다는 것을 의미한다.

4. CLAUDE.md 4가지 원칙

andrej-karpathy-skills 레포에 있는 CLAUDE.md는 다음과 같은 4가지 원칙을 따르고 있다.

Think Before Coding : 잘못된 가정, 숨겨진 혼란, 간과된 절충안
Simplicity First : 지나친 복잡함, 과장된 추상화
Surgical Changes : 직교한 부수 변경, 건드리면 안되는 코드를 건드리는 행위
Goal-Driven Execution : 검증 가능한 성공 기준의 부재

4.1 Think Before Coding - 코딩하기 전에 생각해라.

"가정하지 마세요. 혼란을 숨기지 마세요. 트레이드오프를 드러내세요."

이러한 문제는 AI에게 모호한 질문을 하면 자기 마음대로 해석한 뒤 개발을 시작해버리는 문제를 해결하기 위한 방안이다.

"검색 API가 좀 느린 것 같아. 최적화해줘." 라고 요청을 한다고 가정을 해보자.

원칙이 적용되지 않았다면 AI가 스스로 판단하고 개발을 진행하게되고, 만약 원하는 요구사항과 다르다면 이러한 코드를 전부 고쳐야 되는 상황이 발생한다.

하지만 원칙을 적용하게 된다면, 모호한 질문에 AI가 역으로 질문을 하게 되고 요구사항을 명확화하면서 개발을 이어나갈 수 있다.

4.2 Simplicity First - 단순함이 먼저다.

"요청된 것만. 추측성 기능 없음. 단일 사용 코드에 추상화 없음."

"두 수를 더하는 함수"를 만들어줘라고 요청을 한다고 가정해보자.

좌측은 인터페이스를 구현하고, 인터페이스의 구현체인 클래스를 구현하고, 그 클래스의 객체를 만드는 형태이다.

하지만 우측과 같이 단순하게 구현할 수 있다. 딱봐도 우측의 경우가 원하는 요구사항을 간단하게 구현을 한 것으로 볼 수 있다. (그렇다고 1번이 안좋은 건 아니다. 상황에 따라 달라질 수 있다.)

2번째 원칙 글의 마지막 부분에 "시니어 엔지니어가 보면 과도하다고 할 코드인가? 그렇다면 단순화해라." 라고 명시가 되어있다.

4.3 Surgical Changes - 수술하듯 고쳐라.

"꼭 필요한 곳만 건드려라. 본인이 만든 잔해만 치워라."

"calculate_total 버그만 고쳐줘"라고 했을 때, AI가 옆 함수를 리팩토링하고 타입 힌트 추가하고 주석 스타일을 바꾸게 되면 리뷰가 지옥이 된다.

"getUserById() 에서 null 반환하는 버그 하나만 고쳐줘" 라고 요청했다고 가정해보자.

원칙을 지키지 않을 경우 null 체크를 수정하면서 스스로 판단해 다른 부분도 최적화해버리는 경우가 존재한다. 이러한 부분은 오히려 불필요한 개선을하게 된다.

4.4 Goal-Driven Execution - 목표 기반 실행

"성공 기준을 정의하고, 검증될 때까지 루프를 돌려라."

"정렬 함수 버그 고쳐줘"라고 요청을 했다고 가정해보자.

좌측은 선언형이고, 우측은 명령형이다.

원칙을 지킬 경우 실패 테스트 케이스를 작성하고, 수정을 한 뒤, 실패 테스트 케이스가 통과되는지 스스로 루프를 돌면서 확인을 하게된다.

5. 설치 방법

5.1 Skill 로 명시적으로 호출하고 싶은 경우 - 플러그인 설치

/plugin marketplace add forrestchang/andrej-karpathy-skills
/plugin install andrej-karpathy-skills@karpathy-skills

플러그인을 설치하고, /karpathy-guidelines 를 실행하면 적용이 된다.

5.2 CLAUDE.md 파일을 직접 다운받고 싶다면 - curl 한 줄

전역 전용 (모든 프로젝트)

curl -o CLAUDE.md https://raw.githubusercontent.com/forrestchang/andrej-karpathy-skills/main/CLAUDE.md

프로젝트 단위 적용

echo "" >> CLAUDE.md
curl https://raw.githubusercontent.com/forrestchang/andrej-karpathy-skills/main/CLAUDE.md >> CLAUDE.md

6. 마무리

AI 성능이 좋아질수록 개발자의 역할이 '구현'에서 '설계와 검증'으로 빠르게 변화하고 있는 것 같다고 생각이 든다.

안드레 카파시가 강조한 원칙들은 단순히 AI 실수를 줄이는 방법이 아니라, 앞으로 개발자들이 갖춰야할 역량인 'Harness Engineering'의 기초라고 생각한다.

* 참고 사이트

https://www.youtube.com/watch?v=gol5jv4wcfs

https://github.com/forrestchang/andrej-karpathy-skills

[AWS] FE/BE 배포 아키텍처 (CI/CD) 설계부터 자동화까지

의현 — Sun, 10 May 2026 20:48:13 +0900

AWS를 이용해 프론트엔드와 백엔드를 어떻게 배포를 하고 관리를 할 수 있는지에 대해 공부를 한 내용을 바탕으로,

각 기능의 세세한 내용보다는 전체적으로 데이터가 어떻게 흐르고 배포가 되는지에 대해 다뤄볼 것이다.

1. 한 눈에 보는 전체 설계도

목표는 GitHub에 Push를 하면 FE와 BE가 각각 최적의 경로로 자동 배포되는 것이다.

인프라 구조를 간략하게 살펴보면,

Frontend : S3 + CloudFront(CDN) (서버 없는 확장 구조)
Backend : EC2 + ALB(Application Load Balancer) + CodeDeploy (고가용성 무중단 구조)
CI/CD : GitHub Actions
권한 관리 : IAM Role (각 AWS 서비스가 신뢰할 수 있는 역할 부여)
시크릿 관리 : AWS Secrets Manager / Parameter Store + GitHub Secrets

2. 사전 준비 : IAM Role 설정

실제 구축을 시작하기 전에 IAM Role을 먼저 설정해야 한다. 위와 같은 인프라를 구축하기 위해서는 다음과 같은 설정이 필요된다.

필요한 IAM Role

Role 이름	부여 대상	필요한 이유
EC2-CodeDeploy-Role	EC2 인스턴스	S3에서 배포 파일 다운로드, CodeDeploy Agent 통신
CodeDeploy-Role	CodeDeploy 서비스	EC2에 배포 명령 전달, Auto Scaling 연동
GitHub Actions용 IAM User	GitHub Actions	S3 업로드, CodeDeploy 배포 트리거

EC2 인스턴스에 AmazonS3ReadOnlyAccess 와 AmazonEC2RoleforAWSCodeDeploy 정책을 가진 Role을 붙여야 CodeDeploy Agent가 S3에서 파일을 가져올 수 있다.

3. Frontend : 서버가 필요 없는 'Serverless' 배포

프론트엔드 (React, Next.js 등) 는 빌드를 하게되면 결국 HTML, CSS, JS 파일로 구성되어진다.

프론트엔드의 경우는 정적인 파일이기 때문에 따로 EC2 서버를 띄워둘 필요가 없다.

3.1 배포 흐름

빌드 : GitHub Actions 에서 npm run build를 수행
S3 업로드 : 빌드된 파일들을 AWS의 파일 저장소인 S3에 업로드
정적 웹 호스팅 : S3의 '웹 서비스 호스팅' 기능을 활성화하면, S3 자체가 Nginx 같은 웹 서버 역할을 하며 파일을 사용자에게 전달한다.
- 보안 설정 (OAC, Origin Access Control) : S3 버킷은 public 차단 상태로 두고, CloudFront가 S3에 접근할 수 있도록 OAC을 설정한다. S3를 직접 public으로 하면 CloudFront를 우회한 직접 접근이 가능해져 보안에 취약해진다.
전 세계 배포 (CloudFront) : S3 앞에 CloudFront(CND) 를 붙여 전 세계 어디서든 초고속으로 접속하게 만들고 HTTPS 보안 연결까지 적용한다.
캐시 무효화 (Cache Invalidation) : S3에 새 파일을 올렸다고 끝이 아니라, CloudFront는 엣지 서버에 이전 파일을 캐싱하고 있기 때문에, 배포 후 반드시 aws cloudfront create-invalidation으로 캐시를 초기화해야 사용자가 최신 버전을 받을 수 있다.

프론트엔드는 S3 저장소에 빌드된 파일을 올려두면 끝나기 때문에, 따로 EC2 서버가 필요없다.

⚠️ SPA 라우팅 주의사항
React Router 같은 클라이언트 라우팅을 사용할 경우, CloudFront에서 커스텀 에러 페이지를 설정해야 한다.
/about 같은 경로를 직접 새로고침하면 S3에서 404가 반환되는데, 이를 index.html로 리다이렉트 해줘야 SPA가 정상적으로 동작한다.

4. Backend : 여러 대의 서버를 안전하게 '무중단' 배포

백엔드 (Spring Boot 등) 는 코드가 서버 메모리 위에서 24시간 실행되어야 한다. 그래서 여러 대의 인스턴스를 관리하는 전략이 중요하다.

4.1 EC2 사전 준비 : CodeDeploy Agent 설치

CodeDeploy가 EC2에 배포 명령을 내릴 때 Agent를 통해 통신하기 때문에 EC2 인스턴스에는 CodeDeploy Agent가 설치되어 있어야 한다.

EC2 UserData나 프로비저닝 단계에서 미리 설치해두는 것이 좋다.

학습을 위한 참고용 코드 (정확한 코드가 아닐 수 있습니다.)

# Amazon Linux 2 기준
sudo yum update -y
sudo yum install -y ruby wget
cd /home/ec2-user
wget https://aws-codedeploy-ap-northeast-2.s3.amazonaws.com/latest/install
chmod +x ./install
sudo ./install auto
sudo systemctl start codedeploy-agent
sudo systemctl enable codedeploy-agent

4.2 ALB (Application Load Balancer) 와 Target Group

AWS에서 동일한 서버에 트래픽을 균일하게 분산시키기위해 ALB와 Target Group이 필요하다.

Target Group : 같은 환경의 EC2 인스턴스들을 하나의 그룹으로 지정
ALB (Application Load Balancer) : 사용자의 요청을 받아 Target Group 내의 건강한 서버들에게 트래픽을 골고루 분산시켜줌
Health Check : ALB는 주기적으로 EC2 인스턴스의 /health 같은 엔드포인트를 확인하며 서버가 정상 동작하는지 확인하고, health check를 통과한 인스턴스에만 트래픽을 보냄

4.3 appspec.yml

CodeDeploy는 "배포해"라는 명령만 받을 뿐, 실제로 뭘 해야 하는지 전혀 알지 못한다.

appspec.yml 파일이 "지시서" 역할을 해주고, S3에 올린 파일 내부에 이 파일이 없으면 CodeDeploy는 배포 자체를 실패 처리한다.

appsepc.yml은 크게 3개의 블록으로 구성되어있다.

files : 파일 복사
permissions : 권한
hooks : 스크립트 실행

4.4 배포 전략 : Rolling Deployment Vs Blue/Green Deployment

CodeDeploy는 Rolling Deployment 와 Blue/Green Deployment 두 가지 주요 배포 전략을 지원한다.

4.4.1 Rolling Deployment (순차 배포)

서버를 한 대씩(또는 그룹씩) 업데이트 하는 방식. 비용이 효율적이지만 배포 중 구 버전과 신버전이 동시에 서비스될 수 있다.

업데이트 과정

ALB가 서버A 트래픽 차단
서버A 업데이트
헬스 체크 통과
ALB가 서버A 트래픽 복구
다음 서버 반복

4.4.2 Blue/Green Deployment

기존 서버 그룹(Blue)과 동일한 신규 서버 그룹(Green)을 새로 띄우고, 완전히 준비되면 ALB가 한 번에 트래픽을 전환하는 방식.

배포 실패 시 ALB만 다시 기존 서버 그룹(Blue)으로 돌리면 되므로 롤백이 매우 빠르다.

추가 서버 비용이 발생하지만, 실제 운영 환경에서는 Blue/Green 배포 방식이 더 안전하다는 장점이 있다.

5. 시크릿 & 환경변수 관리

DB 비밀번호, API 키 같은 민감한 정보를 코드에 하드코딩하거나 S3에 올리면 절대 안된다.

다음과 같은 방법으로 관리를 할 수 있다.

방법	설명	용도
GitHub Secrets	GitHub Actions 워크플로우에서 사용하는 AWS 키, 환경 변수	CI/CD 파이프라인 내
AWS Parameter Store	서버 실행 시 EC2가 직접 읽어오는 설정값	DB URL, 설정 파일 등
AWS Secrets Manager	자동 로테이션이 필요한 DB 패스워드, API 시크릿	고보안 자격증명

6. GitHub Actions을 통한 CI/CD 파이프라인

GitHub Actions의 각 FE/BE의 배포 워크플로우를 설정하여 GitHub에 Push가 되었을 때 배포가 자동화 될 수 있도록 설정할 수 있다.

(아래의 yml코드는 예시코드로 대략적인 구성을 확인하는 용도로 보시면 됩니다.)

FE 배포 워크플로우

# .github/workflows/fe-deploy.yml
name: FE Deploy

on:
  push:
    branches: [ main ]
    paths: [ 'frontend/**' ]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'

      - name: Install & Build
        working-directory: ./frontend
        run: |
          npm ci
          npm run build
        env:
          REACT_APP_API_URL: ${{ secrets.API_URL }}

      - name: Configure AWS credentials
        uses: aws-actions/configure-aws-credentials@v2
        with:
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          aws-region: ap-northeast-2

      - name: Upload to S3
        run: |
          aws s3 sync ./frontend/build s3://${{ secrets.S3_BUCKET_FE }} \
            --delete \
            --cache-control "public, max-age=31536000" \
            --exclude "index.html"
          # index.html은 캐싱 제외 (항상 최신 버전 제공)
          aws s3 cp ./frontend/build/index.html s3://${{ secrets.S3_BUCKET_FE }}/index.html \
            --cache-control "no-cache"

      - name: Invalidate CloudFront Cache
        run: |
          aws cloudfront create-invalidation \
            --distribution-id ${{ secrets.CLOUDFRONT_DISTRIBUTION_ID }} \
            --paths "/*"

BE 배포 워크플로우

# .github/workflows/be-deploy.yml
name: BE Deploy

on:
  push:
    branches: [ main ]
    paths: [ 'backend/**' ]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3

      - name: Set up JDK 17
        uses: actions/setup-java@v3
        with:
          java-version: '17'
          distribution: 'temurin'

      - name: Build with Gradle
        working-directory: ./backend
        run: ./gradlew build -x test

      - name: Configure AWS credentials
        uses: aws-actions/configure-aws-credentials@v2
        with:
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          aws-region: ap-northeast-2

      - name: Package for CodeDeploy
        # appspec.yml + scripts/ + jar를 하나의 zip으로 묶기
        run: |
          mkdir -p deploy
          cp backend/build/libs/*.jar deploy/app.jar
          cp appspec.yml deploy/
          cp -r scripts/ deploy/
          cd deploy && zip -r ../deploy-${{ github.sha }}.zip .

      - name: Upload zip to S3
        run: |
          aws s3 cp deploy-${{ github.sha }}.zip \
            s3://${{ secrets.S3_BUCKET_BE }}/deploy/deploy-${{ github.sha }}.zip

      - name: Trigger CodeDeploy
        run: |
          aws deploy create-deployment \
            --application-name ${{ secrets.CODEDEPLOY_APP_NAME }} \
            --deployment-group-name ${{ secrets.CODEDEPLOY_GROUP_NAME }} \
            --s3-location bucket=${{ secrets.S3_BUCKET_BE }},key=deploy/deploy-${{ github.sha }}.zip,bundleType=zip \
            --deployment-config-name CodeDeployDefault.OneAtATime \
            --description "Deploy ${{ github.sha }}"

참고
github.sha 를 파일명에 사용하면 각 커밋마다 고유한 배포 파일이 생성되어 버전 관리와 롤백이 쉬워진다.

7. 이 방식의 장점

관리 편의성 : 개발자가 SSH로 서버에 직접 접속하여 업데이트를 하지 않아도 되고, GitHub만 신경 쓰면 된다.
안정성 : 배포 중에 에러가 나도 로드 밸런서가 살아있는 서버로만 연결해주니 사용자는 에러를 겪지 않을 수 있다.
- CodeDeploy의 ValidateService 훅에서 실패하면 자동으로 이전 버전으로 롤백해준다.
확장성 : 서버가 2대든 10대든 태그만 달아주면 CodeDeploy가 알아서 모두 업데이트를 해준다.
- Auto Scaling Group과 연동하면 트래픽에 따라 서버 수도 자동 조절할 수 있다.
보안 : S3는 public 차단, 민감 정보는 Secrets Manager / Parameter Store 에 분리하여 코드 저장소에 노출되는 저보를 최소화한다.

[AWS] EBS(Elastic Block Store) 알아보기

의현 — Sat, 9 May 2026 17:40:37 +0900

0. 들어가기 전

EBS를 살펴보기전에 먼저 Block Store와 Object Store에 대해서 간단하게 비교해보자.

S3와 같은 Object Store는 프로그램 등을 설치할 수 없고, 파일만 저장되는 저장소이지만,

Block Store는 프로그램 등을 설치할 수 있는 저장소를 의미한다.

1. EBS (Elastic Block Store)

컴퓨터 본체를 보면 CPU와 램카드, 그래픽카드, SSD, HDD가 다같이 장착되어 컴퓨터가 동작하게 된다.

EC2 인스턴스가 연산에 관한(CPU, 메모리 등) 처리를 한다고 한다면, 데이터를 저장하는 역할(SSD, HDD)은 바로 EBS가 한다고 보면 된다.

즉, EBS는 클라우드에서 사용하는 가상 하드디스크(HDD)라고 말할 수 있다.

EBS는 AWS 클라우드의 Amazon EC2 인스터스에 사용할 영구 블록 스토리지 볼륨을 제공한다.

그리고 단 몇분 내에 사용량을 많게 또는 적게 확장할 수 있으며, 프로비저닝(빌리는 행위)한 부분에 대해서만 저렴한 비용을 지불할 수 있다.

1.1 EBS ↔ EC2 연결 특징

EBS의 가장 큰 특징은 EC2 인스턴스가 종료되어도 별개로 작동하여 유지가 가능하다는 점이다.

보통 컴퓨터 본체가 꺼지면 하드도 당연히 꺼져 이용을 못하겠지만 EBS는 네트워크로 별개로 연결된 서비스이기 때문에 가능한 것이다.

만일 잠시 인스턴스 처리 기능이 필요하지 않고 저장 장치 기능만 필요할때는, 인스턴스를 정지시켜도 EBS는 독립적으로 살아있기 때문에 스토리지 기능만 이용하는데 인스턴스의 추가 요금을 내지 않아도 된다.

이러한 구성은 다음과 같은 장점이 있다.

만약 컴퓨터의 CPU를 다른 것으로 업그레이드 한다고 하면 컴퓨터를 끄고 본체를 뜯어서 새로운 CPU로 교체해줘야 하지만,

네트워크로 연결된 인스턴스와 EBS는 단순히 인스턴스만 다른걸로 EBS와 재연결 시켜주면 된다.

그리고 인스턴스 입장에서 여러가지 EBS를 붙일 수 있다는 특징이 있다.

하나의 컴퓨터에 HDD, SSD를 여러개 부착할 수 있는 것처럼 인스턴스도 같은 원리이다.

반대로 하나의 EBS를 여러 EC2에 장착(EBS Multi Attach)도 가능하다.

여러 컴퓨터가 하나의 하드를 공용 저장소로 사용하는 원리이다. 이것은 당연히 물리적인 컴퓨터입장에서는 불가능하지만, 네트워크(클라우드)에서만 가능한 특징이다.

EBS는 EC2와 같은 가용영역(AZ, Availability Zone)에 존재한다. AZ가 같아야 연결 및 통신이 빠르기 때문이다.

만일 다른 AZ로 생성해서 EC2에 붙이려고 한다면 에러가 나게 된다.

1.2 EBS 볼륨 (Volumn) 이란?

EBS로 생성한 디스크 하나하나 저장 단위를 말한다.

EBS 볼륨을 인스턴스에 연결한다는 말은 EC2에 물리적 하드 드라이브처럼 사용하겠다는 의미이다.

쉽게 말하면, 윈도우에서 흔히 볼 수 있는 C드라이브, D드라이브는 각각 디스크이며 볼륨이라고 보면 된다.

1.2.1 EBS 볼륨 유형 타입

EBS 타입이란 시중에서도 같은 하드 저장 디스크라도 SSD와 HDD, NVMe로 나뉘고 용량에 따라 성능과 가격이 차이나는 것처럼, EBS도 각각 타입으로 나눠놓은 것이다.

EBS는 총 5가지 타입을 제공한다.

범용 (General Purpose of GP3) : SSD
프로지너이 된 IOPS (Provisioned IOPS or io2) : SSD
- IOPS (Input/Output Operations Per Second)는 HDD/SDD같은 저장 장치가 1초당 얼마나 많은 읽기/쓰기 작업을 처리할 수 있는지 나타내는 성능 단위
- 빠르게 데이터를 전송할 때 유리
쓰루풋 최적화 (Throughput Optimized HDD or st1)
- 많은 량의 데이터를 전송할 때 유리
콜드 HDD (SC1)
마그네틱 (Standard)

각 타입의 성능은 용량과 MAX IOPS 수치를 보면 된다.

IOPS 수치가 높을수록 데이터 통신이 빠르다고 보면 된다.

1.3 EBS와 Instance Store

EC2 인스턴스 저장 타입은 대표적을 두가지가 있다.

앞서 보았던 EBS 기반과 인스턴스 저장 기반이다.

[ EBS 기반 ]

EC2가 EBS와 네트워크로 연결 -> 속도는 느림
하지만 인스턴스가 삭제되더라도 EBS는 남아있음 (영구적 스토리지)
하나의 인스턴스에 연결한 EBS 볼륨을 따로 분리해서 다른 인스턴스에 연결 가능 (마치 USB를 넣었다 뺏다 하듯이)

[ 인스턴스 저장 기반 (Instance Store) ]

EC2안에 store가 들어있음 (네트워크 연결 X) -> 속도가 빠름
안에 내장되어있는 형태로, 인스턴스가 삭제되면 store도 같이 삭제됨
EBS처럼 store를 분리해서 다른 인스턴스에 연결 불가능
보통 영구적이지 않은 데이터를 저장
- e.g. cache 데이터

아래 이미지와 같이 EC2를 생성할 때, EC2 타입을 고르는 항목에서 Instance Store 항목에 EBS 전용과 1 x 100 (SSD) 라고 써져있는 유형들을 볼 수 있다.

EBS 전용은 말 그대로 스토리지를 EBS로만 사용할 수 있는 EC2 인스턴스 타입이라는 뜻이고,

(SSD) 라고 명시되어있는 것이 Instance Store를 따로 가지고 있다는 뜻이다.

[ 참고 사이트 ]

https://www.youtube.com/watch?v=Hz27LEk8Z48&list=PLfth0bK2MgIYuFahPhXTpTomkwVx5Fl-v&index=21

https://docs.aws.amazon.com/ebs/latest/userguide/what-is-ebs.html

What is Amazon Elastic Block Store? - Amazon EBS

What is Amazon Elastic Block Store? Amazon Elastic Block Store (Amazon EBS) provides scalable, high-performance block storage resources that can be used with Amazon Elastic Compute Cloud (Amazon EC2) instances. With Amazon Elastic Block Store, you can crea

docs.aws.amazon.com

[AWS] AMI / Snapshot 개념 알아보기

의현 — Sat, 9 May 2026 15:37:24 +0900

1. EC2 데이터 백업

백업 및 복원은 서버를 사용하는 사람들에게는 필수적으로 알아야할 내용이며, 백업하는 습관은 의무적이라고 할만큼 중요한 습관이다.

EC2는 기본적으로 사용을 하면 할 수록 요금이 많이 발생하게 된다. 따라서 절약하기 위해서는 주기적으로 사용하지 않는 EC2를 중지하거나 종료해야 한다.

하지만 해당 EC2에 중요한 데이터나 다시 사용할 수 있는 데이터들이 담겨져 있는 경우가 많은데,

이러한 백업 및 복원에 대한 유지관리를 편하게 할 수 있는 방법이 AMI 이미지를 통해 EC2의 정보를 저장하고 EBS Snapshot을 통해 데이터를 저장하는 방법이 있다.

이번 글에서는 EBS 스냅샷, AMI에 대해 알아보고, 이를 백업하여 관리하는 방법을 알아볼 것이다.

2. 스냅샷(Snapshot)

스냅샷(Snapshot)은 EBS를 저장하는 효율적인 방법으로서, 특정 시간에 EBS 볼륨 상태의 저장본을 의미한다.

✏️ EBS 볼륨(Volumn)이란?
간단히 말해서 EBS로 생성한 디스크 하나하나 저장단위를 말한다.
디스크는 윈도우에서 C드라이브, D드라이브와 같은 것을 의미한다.

EBS의 데이터 저장 상태에 대해 사진(백업본)을 찍어둔 개념이라고 이해하면 된다.

그래서 필요시에 스냅샷을 통해 특정시간의 저장 데이터에 대한 EBS 복구가 가능한다.

스냅샷은 다음과 같은 상황에서 자주 이용이 된다.

OS와 별개로 데이터만 백업하고 싶은 경우
생성된 스냅샷을 기반으로 여러 종류의 AMI를 생성하고 싶은 경우
Amazon DLM을 활용하여 백업을 자동화하고, 스토리지 비용 최적화를 원하는 경우
- 동일한 볼륨에 대한 스냅샷을 여러번 생성하면 변경된 부분에 대한 데이터만 추가적으로 백업 + 오래된 스냅샷은 자동으로 삭제

2.1 스냅샷 원리

스냅샷의 가장 큰 특징은 증분식 저장(변화된 부분만 저장) 한다는 점이다.

아래 사진과 같이 파란색 블럭, 노란색 블럭, 초록색 블럭 이라는 각기 다른 데이터가 있다고 가정해보자.

만일 이 데이터 블럭들의 각 특정시간대 마다 저장 상태에 대해 백업을 한다고 가정하면, 각 시간대 마다 저장 용량(파란박스) 을 따로따로 추가로 할당해줘야 할 것이다.

이러한 방식은 많은 용량 낭비로 이어지게 된다.

따라서 저장용량 공간 전체를 각 시간대 마다 할당하는게 아닌, 추가된 데이터(변화된 부분)의 크기(용량)만 스냅샷을 하여 저장함으로서, 전체적인 용량을 아낄수 있게 한다. (이러한 방식은 Git의 스냅샷 원리와 유사하게 동작)

만약 HDD가 16tb라면 스냅샷 할 때마다 16tb를 매번 만드는 것이 아닌, 변화가 된 부분만 찍어두는 것이다.

그래서 처음에는 16tb가 필요하지만 이후에는 100mb가 바뀌었으면 해당 부분만 찍어 스토리지를 효율적으로 저장한다.

스냅샷을 자주 찍어도 부담이 크게 되지 않으니, 필요할때마다 자주 스냅샷을 찍는 것이 추천되어진다.

스냅샷 파일들은 보통 S3(파일저장소)에 보관된다.

Data Lifecycle Manager / AWS Backup 등으로 자동화 해서 생성 사능 (직접 Snapshot 관리를 안해도 됨)

3. AMI (Amazon Machine Image)

AM는 EC2 인스턴스를 실행하기 위해 필요한 정보를 모은 템플릿 이다.

EC2(가상 컴퓨터)를 실행하기 위해서 CPU 프로세서 타입이라던가 저장공간 용량은 몇인지, 32비트인지 64비트인지, 운영체제는 무엇인지, 소프트웨어는 어떤게 설치되어있는지 ... 등 정보가 필요한데 이러한 세팅 정보(템플릿)를 저장한 단위라고 생각하면 된다.

즉, AMI란 서버에 필요한 운영체제와 다양한 소프트웨어로 구성된 플랫폼이며, AWS 이를 이미지라고 불린다.

템플릿에는 컴퓨터 OS 환경설정 정보 뿐만 아니라 인스턴스의 EBS에 대한 정보도 모두 포함되어있다.

EBS에 대한 정보라는 것은 EC2 인스턴스가 어떤 EBS 스냅샷과 연결되어있는지에 대한 정보를 말한다.

AMI 백업 방식은 다음과 같은 상황에서 자주 이용된다.

긴급하게 백업된 인스턴스를 복구해야하는 경우
설정이 완료된 인스턴스 이미지를 만들고 싶은 경우
Auto Scaling Group 에서 새 인스턴스를 자동으로 생성하기 위해

이외에도 AMI를 사용하여 현재 상태의 EC2 세팅(템플릿)을 복제해서 다른 계정이나 다른 리전에게 전달도 가능하다.

또한 프로그램 형태로 AMI 배포가 가능하기 때문에 다른사람이 받아 내 EC2 상태 그대로를 사용할 수 있다.

3.1 AMI 구성

1개 이상의 EBS 스냅샷
AMI에는 인스턴스가 어떤 EBS 스냅샷과 연결되어있는지에 대한 정보가 포함
인스턴스 저장 기반 인스턴스의 경우 루트 볼륨에 대한 템플릿
- 인스턴스 저장 기반 인스턴스란는 EC2 서버에 물리적으로 붙어있는 임시 디스크(내장 SSD/HDD)를 사용하는 방식을 의미함
사용 권한 (어떤 AWS 어카운트가 사용할 수 있는지)
EBS 블록 디바이스 매핑 (EC2 인스턴스를 위한 볼륨 정보 = EBS가 무슨 용량으로 몇 개 붙는지)
필요에 따라 Private으로 가지고 있거나 Public 공개 가능

3.2 AMI 생성 과정

EBS의 스냅샷을 찍음
스냅샷에는 OS, 파일, 시작권한 ... 등이 존재
스냅샷을 S3에 저장
스냅샷을 기반으로 AMI를 만듦
AMI을 가지고 EC2를 실행하거나, 다른 사람에게 공유하거나 복사함

4. AMI와 Snapshot의 차이점

기본적으로 EBS를 백업한다는 점에서 AMI와 Snapshot은 동일하다.

하지만,

AMI는 EC2 인스턴스에 연결되어 있는 모든 EBS Volumn을 동시에 백업하는 것이라면,

Snapshot 기능은 사용자가 선택한 EBS Volumn 하나를 백업한다는 점에서 차이가 있다.

쉽게 말하면, AMI는 컴퓨터 하나를 통째로 백업한다는 느낌이고, Snapshot은 하드디스크 내용물만 백업한다는 것으로 이해하면 된다.

또한, AMI와 Snapshot을 이용하여 새로운 EC2 인스턴스를 생성할 수 있는데,

AMI인 경우에는 바로 EC2 인스턴스를 생성할 수 있고,

Snapshot인 경우는 Snapshot을 이용해 AMI를 생성하는 단계를 거쳐야 한다는 차이가 있다.

Snapshot은 EBS 내용을 백업한 데이터라 바로 인스턴스를 만드는게 불가능하다.

정리하면 다음과 같다.

[ AMI ]

EC2에 연결된 전체 볼륨 백업 (EC2 인스턴스에 연결되어있는 OS가 설치된 루트 장치를 포함)
인스턴스가 어떤 EBS 스냅샷과 연결되어있는지에 대한 정보도 포함
긴급하게 백업된 인스턴스를 복구해야하는 경우
인스턴스 설정 등이 복잡해서 설정이 완료된 인스턴스 이미지를 만들고 싶은 경우
Auto Scaling Group 에서 새 인스턴스를 자동으로 생성하기 위해 만드는 경우

[ Snapshot ]

특점 시점 백업, 특정 EBS 볼륨 백업
Snapshot을 이용해 AMI 생성 가능, 단 이 경우 지정된 Snapshot이 Root Volumn으로 지정됨
OS와 별개로 데이터만 백업하고 싶은 경우
생성된 스냅샷을 기반으로 여러 종류의 AMI를 생성하고 싶은 경우

[ 참고 사이트 ]

https://www.youtube.com/watch?v=Hz27LEk8Z48&list=PLfth0bK2MgIYuFahPhXTpTomkwVx5Fl-v&index=21

https://docs.aws.amazon.com/AWSEC2/latest/UserGuide/AMIs.html

Amazon Machine Images in Amazon EC2 - Amazon Elastic Compute Cloud

Amazon Machine Images in Amazon EC2 An Amazon Machine Image (AMI) is an image that provides the software that is required to set up and boot an Amazon EC2 instance. Each AMI also contains a block device mapping that specifies the block devices to attach to

docs.aws.amazon.com

[AWS] EC2 개념 살펴보기 (Instance / EBS / AMI)

의현 — Fri, 8 May 2026 19:01:37 +0900

1. EC2 (Elastic Compute Cloud) 개념

EC2란 Amazon Elastic Compute Cloud의 줄임말로 AWS에서 제공하는 클라우드 컴퓨팅을 말한다.

독립된 컴퓨터를 임대해주는 서비스라고 이해하면 된다.

EC2를 사용하는 이유를 간단하게 살펴보면,

서버를 돌리기위해 컴퓨터를 사고 세팅을하고 컴퓨터를 켜놓는 비용 대비, EC2는 몇 분만에 바로 컴퓨터 1대와 같은 기능을 하는 서버를 쉽게 만들 수 있다.

초기 구입비용, 세팅비용이 전혀 없고, 사용한 만큼의 비용만 지불하면 된다.

또한 인터넷을 통해 자유롭게 EC2에 접속할 수 있고, 이미지(AMI) 기능도 사용할 수 있다.

이미지(AMI) 기능을 간단하게 살펴보면,

컴퓨터를 사용하면 프로그램 설치하고, 파일을 저장하고, 설정을 변경하게 되는데, 이 OS 상태를 그대로 저장하는 기능을 이미지(AMI)라고 한다.

윈도우 백업 설정이라고 보면 된다.

즉, 컴퓨터를 하나 장만할 때마다 반복되는 설치 작업을 하지 않게 되는 것이다.

이를 통해 하드웨어 구매없이 빠르게 애플리케이션을 개발하고 배포할 수 있다.

EC2를 통해 원하는 만큼 가상 서버를 구축하고 보안 및 네트워크 구성과 스토리지 관리가 가능하며, 요구 사항이나 갑작스런 트래픽 증가 등 변동 사항에 따라 신속하게 규모를 확장하거나 축소할 수 있어 서버 트래픽 예측 필요성이 줄어든다는 장점이 있다.

1.1 EC2 특징 요약

컴퓨팅 요구사항의 변화에 따라 컴퓨팅 파워를 조절할 수 있다.
실제로 사용한 만큼의 비용만 지불하면 된다.
Linux / Windows 중 OS 선택이 쉽다.
몇 분안에 전세계에 컴퓨터 수백여대를 생성할 수 있다.
머신러닝, 웹서버, 게임서버, 이미지 처리등 다양한 용도에 최적화된 서버를 쉽게 구축할 수 있다.
여러 다른 AWS 서비스와의 유기적인 연동이 가능하다.

2. EC2의 구성 (Instance / EBS / AMI)

일반적인 서버를 보면 보통 컴퓨팅(CPU, RAM), 하드디스크, 랜카드 로 나뉘어진다.

이것은 EC2에 대입해보면 다음과 같다.

컴퓨팅(CPU, RAM) = Instance
하드디스크 = EBS
랜카드 = ENI

✏️ 랜카드
한 네트워크 상에서 컴퓨터끼리 신호를 주고받는 데 쓰이는 하드웨어

2.1 EC2 Instance 이해하기

인스턴스란 AWS 클라우드에서 사용하는 가상 컴퓨터라고 이해하면 된다.

가상의 컴퓨터의 CPU, 메모리, 그래픽카드 등 연산을 위한 하드웨어 부분을 담당한다.

Amazon EC2는 각사용 목적에 따라 최적화된 다양한 인스턴스 유형을 제공한다.

컴퓨터라고해서 다 같은 컴퓨터가 아니라, 컴퓨터마다 쓰임새가 다양하다.

고사양 게임용, 서버용, 대용량 데이터 저장소, 영상용 등 컴퓨터 하드뒈어 구성에 따라 사용 목적을 정할 수 있다.

이것이 바로 인스턴스 유형이다.

즉, EC2 인스턴스를 통해 애플리케이션 종류와 목적에 따라 적합한 리소스 조합을 선택할 수 있는 유연성을 제공하는 서비스이다.

2.1.1 EC2 Instance 유형

RPG 게임을 예로들면 쉽게 이해할 수 있다.

RPG 게임에서 캐릭터를 생성하면 한정된 스탯 포인트로 힘/민첩/지구력 .. 등을 골라 배분할 수 있다.

이러한 스탯의 배분에 따라 전사를 할지, 마법사를 할지, 도적을 할지 직업이 결정된다.

이처럼 EC2 인스턴스에 스탯 분배 개념을 대입해 보면 이해하기가 쉽다.

위와 같이 RPG 게임에서 한정된 스탯으로 힘/민첩/지능/운 중에 어느 것을 찍어 생성할지 결정하는 것처럼,

EC2 인스턴스란 한정된 요금으로 EC2 인스턴스의 유형(직업)을 고르고 사이즈(스탯 포인트)를 골라 인스턴스별로 사용 목적에 따라 최적화를 시키는 것이다.

예를들어 CPU에 힘을 실어 연산능력이 좋은 서버를 만든다던지, 메모리 위주에 힘을 실어 저장소로서 기능 구성한다던지 등 다양하게 구성이 가능하다.

RPG 게임에도 직업이 전사/도적/마법사 등이 있듯이, 인스턴스 유형에도 타입이라는 것이 존재한다.

AWS는 각 인스턴스 사용 목적(서버용, 머신러닝용, 게임용 등)에 따라 타입별로 인스턴스에 이름을 부여해 구분하고 있다.

e.g. t타입, m타입, inf타입 ...등

표를 보면 범용 및 컴퓨팅 최적화, 메모리 최적화, 저장 최적화 등 성능 목적에 따라 타입이 여러가지 존재한다는 것을 볼 수 있다.

t타입과 m타입은 범용타입이기 때문에 AWS 초보자들이 가장 많이 사용하는 프리티어에서 사용하는 타입으로 자주 접해볼 수 있는 타입이다.

2.1.2 EC2 Instance Size

인스턴스 크키는 CPU 갯수, 메모리 크기, 성능 등으로 사이즈가 결정됨을 말한다.

인스턴스 사이즈가 클수록 더 많은 메모리, 더 많은 CPU, 더 많은 네트워크 대역폭을 가질 수 있다는 것을 의미한다.

다음 표를 보면 t2 인스턴스 타입에 nano, micro, small, ...xlarge 로 크기가 나뉘어진 것을 볼 수 있다.

CPU나 메모리 사이즈가 클 수록 성능도 빨라진다.

2.1.3 EC2 Instance 타입 읽는 법

위에 Instance 타입을 모두 외워야 하는건 아니다.

다만 위 사진처럼 인스턴스 단어가 나오면 어떠한 의미인지 파악하면 된다.

위 'c7gn.2xlarge' 단어를 해석하면 다음과 같다.

c : 컴퓨팅 최적화(Compute Optimized) 인스턴스 패밀리를 의미한다.
7 : 7세대 인스턴스를 의미한다.
g : AWS Graviton 프로세서를 사용하는 ARM 기반 인스턴스를 의미한다.
n : 네트워크 성능이 강화된(Network Optimized) 유형을 의미한다.
2xlarge : 인스턴스 크기(Size)를 의미하며, `xlarge`보다 더 큰 사양을 가진다.

2.2 EBS (Elastic Block Store) 이해하기

2.1에서 살펴본 Instance가 연산 (CPU, 메모리 등) 에 관한 처리를 한다고 하면, 데이터를 저장하는 역할은 EBS가 담당한다고 보면 된다.

즉, 클라우드에서 사용하는 가상 하드디스크(HDD) 인 셈이다.

컴퓨터 본체에 꽂혀있는 하드를 네트워크로 만든 버전이라고 생각하면 된다.

EBS는 AWS 클라우드의 Amazon EC2 인스턴스에 사용할 영구 블록 스토리지 볼륨을 제공한다.

그리고 단 몇분 내에 사용량을 많게 또는 적게 확장할 수 있고, 프로비저닝(빌리는 행위)한 부분에 대해서만 저렴한 비용을 지불할 수 있다.

2.1 EBS 볼륨 유형 타입

EBS 타입이란 시중에서도 같은 하드 저장 디스크라도 SSD, HDD, NVMe로 나뉘고 용량에 따라 성능과 가격이 차이나는 것처럼, EBS도 각각 타입으로 나눠놓은 것이다.

EBS는 총 5가지 타입을 제공하는데, 다음과 같다.

범용 (General Purpose of GP3) : SSD
프로비저닝 된 IOPS (Provisioned IOPS of io2) : SSD
쓰루풋 최적화 (Throughput Optimized HDD or st 1)
콜드 HDD (SC1)
마그네틱 (standard)

일반적으로 범용타입인 GP3를 선택하면 되지만, 요금을 아끼겠다 하면 마그네틱을 사용하면 된다.

2.3 AMI (Amazon Machine Image) 이해하기

AMI는 EC2 인스턴스를 실행하기 위한 정보를 모은 단위이다.

✏️ AMI
서버에 필요한 운영체제와 다양한 소프트웨어로 구성된 템플릿

예를들어 '리눅스가 깔린 EC2를 사용 할 것이다'라고 한다면,

인스턴스를 생성하고 OS를 일일이 설치하고 구성해야 하는 것이 아니라, 리눅스 환경 세팅이 된 리눅스 템플릿 AMI를 EC2에 적용시켜주면 간편하게 리눅스 환경인 컴퓨터를 장만하게 되는 원리이다.

스냅샷을 기반으로 AMI 구성이 가능하기 때문에, AMI를 사용하여 현재 상태의 EC2 세팅(템플릿)을 복제해서 다른 계정이나 다른 리전에게 전달도 가능하다.

✏️ Snapshot (스냅샷)
EBS를 저장하는 효율적인 방법으로서, 특정 시간에 EBS 볼륨 상태의 저장본을 뜻한다.

[ 참고 사이트 ]

https://www.youtube.com/watch?v=WC_WarZJy5I&list=PLfth0bK2MgIYuFahPhXTpTomkwVx5Fl-v&index=19

https://docs.aws.amazon.com/AWSEC2/latest/UserGuide/concepts.html

What is Amazon EC2? - Amazon Elastic Compute Cloud

What is Amazon EC2? Amazon Elastic Compute Cloud (Amazon EC2) provides on-demand, scalable computing capacity in the Amazon Web Services (AWS) Cloud. Using Amazon EC2 reduces hardware costs so you can develop and deploy applications faster. You can use Ama

docs.aws.amazon.com

React 18, 무엇이 달라졌는가

의현 — Tue, 28 Apr 2026 18:57:12 +0900

1. 새로운 진입점: `createRoot`

React 18의 모든 새 기능은 진입점부터 달라졌다. 기존에 17이하 버전에서 사용하던 `ReactDOM.render` 대신 `ReactDOM.createRoot`를 사용하도록 변경이 되었다.

// React 17 이하
import ReactDOM from 'react-dom';
ReactDOM.render(<App />, document.getElementById('root'));

// React 18
import ReactDOM from 'react-dom/client';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

물론 18 이상의 버전에서도 `ReactDOM.render`을 사용할 수 있지만, 이 API를 그대로 사용하게 되면 React 18의 동시성 기능이 활성화되지 않는다는 문제가 발생한다. 즉, createRoot로 마이그레이션해야 React 18에서 다루는 기능을 활용할 수 있다.

2. 동시성 모드(Concurrent Mode)란 무엇인가?

React 18에서 동시성 모드란 가장 중요한 개념이고, 가장 오해하기 쉬운 개념이기도 하다.

2.1 기존 React의 렌더링 방식 (동기적)

React 17까지의 렌더링은 중단할 수 없는 동기 작업으로 실행이 되었다. React가 렌더링을 시작하면, 그 작업이 끝날 때까지 브라우저는 아무것도 할 수 없었다.

예를들어 리스트가 1,000개인 컴포넌트를 렌더링하는 동안 사용자가 버튼을 클릭해도 렌더링 끝나기 전에는 반응이 없고, 이러한 현상으로 "UI가 버벅거린다"라는 느낌을 들게한다.

2.2 동시성(Concurrent) 렌더링

동시성 모드는 멀티스레딩이 아니다. JavaScript는 여전히 싱글 스레드이다.

하지만, React가 렌더링 작업을 나눠서, 중간중간 브라우저에게 제어권을 돌려주는 방식이다.

이러한 방식으로 기존에는 렌더링이 한 번 시작되면 중단할 수 없었지만, 동시성 렌더링은 렌더링을 중단하고, 나중에 이어서 할 수도 있다는 것이다. 심지어 아예 렌더링을 다시 시작할 수도 있다.

즉, 사용자 입력에 따른 화면이 계속해서 변할 때, 입력을 한 뒤 화면 변화를 기다리는게 아니라 계속해서 입력을 이어나갈 수 있다는 의미이다.

2.3 "동시성 모드"라는 이름이 헷갈리는 이유

React팀이 React 18 출시 시점에 "Concurrent Mode"라는 표현 대신 "Concurrent Features"라는 표현을 사용하기로 했다.

예전에는 "모드를 켜면 전체가 바뀐다"는 뉘앙스였는데
실제로는 필요한 곳에서만 선택적으로 쓰는 기능이기 때문에 이와 같은 표현을 사용한다.
- `useTransition`, `useDeferredValue`같은 API를 사용한 컴포넌트에서만 동시성 렌더링이 적용이되고, 기존 코드는 그대로 동작한다.

3. Automatic Batching

3.1 Batching이란?

Batching은 여러 개의 state 업데이트를 하나로 묶어서 한 번만 렌더링하는 최적화이다.

// 다음과 같은 코드는 총 몇번의 렌더링이 일어날까?
function handleClick() {
  setCount(c => c + 1);
  setFlag(f => !f);
  setName('React');
}

위 코드는 setCount, setFlag, setName 총 3개의 상태가 변하고, 각 상태가 변할 때마다 렌더링이 이루어지는게 아니라 하나의 리렌더링으로 묶어 1번만 렌더링이 이루어진다.

3.2 React 17 과 18의 차이

React의 버전에 따라 Batching의 범위가 다르니 주의해야 한다.

// React 17

// ✅ batching 적용 → 렌더링 1번
function handleClick() {
  setCount(c => c + 1);
  setFlag(f => !f);
}

// ❌ batching 미적용 → 렌더링 2번
setTimeout(() => {
  setCount(c => c + 1); // 렌더링 발생
  setFlag(f => !f);     // 또 렌더링 발생
}, 1000);

// ❌ batching 미적용 → 렌더링 2번
fetch('/api/data').then(() => {
  setCount(c => c + 1);
  setFlag(f => !f);
});

React 17에서는 이벤트 핸들러에서는 Batching이 적용되지만, fetch 또는 setTimeout과 같은 비동기는 각각 렌더링이 이루어지게 된다.

React 18 : `createRoot`를 사용하면 어디서든 자동으로 Batching이 적용된다.

// React 18

// ✅ 모두 batching 적용 → 렌더링 1번
setTimeout(() => {
  setCount(c => c + 1);
  setFlag(f => !f);
}, 1000);

// ✅ Promise 내부도 적용 → 렌더링 1번
fetch('/api/data').then(() => {
  setCount(c => c + 1);
  setFlag(f => !f);
});

3.3 batching을 원하지 않을 경우

`createRoot`를 통해 자동으로 batching이 이루어지게 되고, 만약 batching을 사용하고 싶지 않다면 어떻게 할까?

그런 경우는 거의 발생하지 않지만 각 state 변경 후 즉시 렌더링이 필요하다면 `flushSync`를 사용하면 된다.

import { flushSync } from 'react-dom';

function handleClick() {
  flushSync(() => {
    setCount(c => c + 1); // 여기서 즉시 렌더링
  });
  flushSync(() => {
    setFlag(f => !f); // 여기서 또 즉시 렌더링
  });
}

4. Transition : 렌더링에 우선순위 부여하기

4.1 문제 상황

검색창에 타이핑을 할 때 다음과 같은 상황을 생각해보자. 두 가지 일이 동시에 일어나게 된다.

입력창에 텍스트 업데이트 (즉각 반응해야 함)
검색 결과 목록 업데이트 (조금 느려도 괜찮음)

React 17에서는 둘 다 같은 우선순위로 처리된다. 결과 목록이 많아지게되면 입력 자체가 버벅이는 현상이 발생한다.

4.2 startTransition

React 18에서는 `startTransition`을 이용해 "이 업데이트는 조금 늦어도 돼"라고 명시할 수 있다.

import { startTransition } from 'react';

function handleChange(e) {
  // 급함: 입력값 업데이트
  setInputValue(e.target.value);

  // 급하지 않음: 검색 결과 업데이트 (transition으로 표시)
  startTransition(() => {
    setSearchQuery(e.target.value);
  });
}

`startTransition` 안의 업데이트는 긴급하지 않은(non-urgent) 업데이트로 표시가 된다. 더 긴급한 업데이트(사용자 입력)이 들어오면, transition 렌더링은 중단되고 긴급한 것을 먼저 처리하는 방식으로 동작한다.

4.3 useTransition 훅

`useTransition`은 `startTransition`의 훅 버전이다. 추가로 "현재 transition이 진행 중인지" 여부를 알 수 있다.

import { useTransition } from 'react';

function SearchPage() {
  const [isPending, startTransition] = useTransition();
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);
  
  function handleChange(e) {
    setQuery(e.target.value); // 급한 : 즉시 반영
    
    startTransition(() => {
      const filtered = heavyFilter(e.target.value);
      setResults(filtered); // 덜 급함 : transition
    }
  }

  return (
    <>
      <input value={query} onChange={handleChange} />
      {isPending ? <Spinner /> : <ResultList results={results} />}
    </>
  );
}

`isPending`이 `true`인 동안 로딩 스피너를 보여줄 수 있어, 사용자 경험이 크게 향상된다.

4.4 Transition vs Debounce

사용자 경험(UX) 측면에서 두 방식은 "입력이 끝난 뒤 결과가 나온다"는 점에서 비슷하게 생각할 수 있다.

하지만 내부 메커니즘과 목적은 완전히 다르다.

구분	Transition	Debounce
핵심 원리	우선순위를 낮춰서 메인 스레드 점유를 피함	`setTimeout`으로 실행 자체를 뒤로 미룸
대기 시간	없음 (컴퓨터 성능에 따라 가변적)	개발자가 설정한 고정 시간(e.g. 300ms)
중단 가능성	새로운 입력이 들어오면 렌더링을 즉시 중단	타이머가 끝나면 무조건 실행됨
사용 목적	UI 응답성 유지 (입력창 버벅임 방지)	API 호출 횟수 제한, 과도한 연산 방지

5. Suspense의 진화

5.1 React 17까지의 Suspense

React 16.6에서`Suspense`가 도입됐지만, 당시에는 React.lazy를 이용한 코드 스플리팅에서만 공식 지원했다.

const LazyComponent = React.lazy(() => import('./SomeComponent'));

<Suspense fallback={<Spinner />}>
  <LazyComponent />
</Suspense>

데이터 페칭에 Suspense를 쓰는 건 권장되지 않았었다.

5.2 React 18의 Suspense

React 18에서 React 17과 마찬가지로 Suspense 경계 안의 형제 컴포넌트들이 전부 준비될 때까지 기다린다. 이 부분은 동일하지만 fallback처리 방식이 변화되었다.

React 17의 문제 : 페이지 이동 시 기존 화면이 즉시 사라짐

예를들어 사용자가 "상세보기" 클릭한 상황을 생각해보자.

기존 목록 화면이 즉시 사라진다.
<Spinner /> 로 교체 (fallback)
데이터 로드 완료
상세 화면 등장

즉, 상세보기 버튼을 클릭할 경우 즉시 fallback으로 덮어버려 부자연스러운 UX라는 생각이 들게 된다.

React 18 : Transition과 결합하면 기존 화면을 유지

`startTransition`안에서 일어나는 업데이트가 Suspense를 트리거하면, React는 기존 화면을 fallback으로 교체하지 않고 새 화면이 준비될 때까지 기존 화면을 그대로 유지하게 된다.

function App() {
  const [page, setPage] = useState('list');
  const [isPending, startTransition] = useTransition();

  function navigate(nextPage) {
    startTransition(() => {
      setPage(nextPage); // "급하지 않음"으로 표시
    });
  }

  return (
    <>
      {isPending && <TopBarSpinner />} {/* 기존 화면 위에 살짝 표시 */}
      <Suspense fallback={<FullPageSpinner />}>
        {page === 'list' ? <ListPage /> : <DetailPage />}
      </Suspense>
    </>
  );
}

즉, 다음과 같이 개선된 UX로 동작을 하게 된다.

기존 목록 화면이 그대로 유지
상단에 작은 로딩 표시만 나옴 (fallback)
데이터 로드 완료
상세 화면으로 자연스럽게 교체 (UX 개선)

6. 새로 추가된 Hook들

6.1 useId

목적 : 서버와 클라이언트 양쪽에서 안정적인 고유 ID 생성

function FormField() {
  const id = useId();

  return (
    <>
      <label htmlFor={id}>이름</label>
      <input id={id} type="text" />
    </>
  );
}

왜 필요할까?

SSR 환경에서 `Math.random()`이나 증가하는 카운터로 ID를 만들면, 서버에서 생성한 ID와 클라이언트에서 hydration할 때 생성한 ID가 달라져 hydration mismatch 에러가 발생한다. `useId` 훅은 컴포넌트 트리 구조를 기반으로 ID를 생성하기 때문에 서버/클라이언트 양쪽에서 동일한 ID가 나오게된다.

주의 : key prop이나 CSS 선택자에는 사용함녀 안된다. 클론(`:`)이 포함된 형식이라 CSS 선택자와 충돌할 수 있다.

6.2 useDeferredValue

목적 : 특정 값의 업데이트를 "뒤로 미루기"

앞서 보았던 `useTransition`과 개념은 같지만, state setter에 접근할 수 없는 상황(e.g. 부모로부터 prop을 받을 때)에서 사용한다.

function SearchResults({ query }) {
  // query가 빠르게 바뀌어도, deferredQuery는 여유 있을 때 업데이트됨
  const deferredQuery = useDeferredValue(query);

  return <HeavyList filter={deferredQuery} />;
}

실제 `query`는 즉시 반영되고, `deferredQuery`는 브라우저가 여유 있을 때 업데이트된다. 덕분에 입력창은 즉각 반응하면서, 무거운 리스트는 약간 지연되어 렌더링된다.

useTransition vs useDeferredValue

	useTransition	useDeferredValue
사용 위치	state를 직접 업데이트하는 곳	이미 내려운 prop 값
코드 변경	setState 감싸기	값을 래핑
isPending	제공	없음

6.3 useSyncExternalStore

목적 : React 외부 스토어 (Redux, Zustand 등)를 안전하게 구독

동시성 렌더링 환경에서는 렌더링 도중 외부 스토어 값이 바뀔 수 있는데, 이때 컴포넌트마다 다른 값을 읽으면 UI가 일관되지 않는 tearing 현상이 발생하게 된다. 이를 `useSyncExternalStore`가 방지한다.

import { useSyncExternalStore } from 'react';

function useWindowWidth() {
  return useSyncExternalStore(
    (callback) => {
      window.addEventListener('resize', callback);
      return () => window.removeEventListener('resize', callback);
    },
    () => window.innerWidth,          // 클라이언트 snapshot
    () => 0                           // 서버 snapshot (SSR용)
  );
}

일반 앱 개발자보다는 라이브러리 개발자가 주로 사용한다고 한다. Redux, Zustand등 주요 상태 관리 라이브러리들은 이미 해당 훅을 내부적으로 적용을 했다고 한다.

6.4 useInsertionEffect

목적 : CSS-in-JS 라이브러리를 위한 특수 훅

실행 순서 : `useInsertionEffect` -> `useLayoutEffect` -> `useEffect`

DOM mutation이 일어나기 전, 스타이을 주입하기 위한 훅으로 `styled-components`, `emotion`같은 CSS-in-JS 라이브러리가 동시성 렌더링에서 안전하게 스타일을 삽입할 수 있도록 만들어진 것이다.

보통은 CSS-in-JS 라이브러리 내부에서 사용하는 API이다.

7. Strict Mode의 새로운 동작

7.1 변경 내용

React 18 Strict Mode에서 새로 추가된 동작이 있다. 컴포넌트를 의도적으로 두 번 마운트한다.

컴포넌트 마운트 (effect 실행)
언마운트 (effect cleanup 실행)
다시 마운트 (effect 재실행)

개발 모드에서만 발생하며, 프로덕션에서는 영향이 없다.

7.2 왜 이렇게 바뀌었을까?

React 팀이 미래에 도입하는 기능 중에 Offscreen API가 있는데, 사용자에게 보이지 않는 컴포넌트를 미리 렌더링하거나, 탭 전환 시 컴포넌트를 숨겼다가 빠르게 다시 보여주는 기능이다.

이를 위해서 컴포넌트 마운트 -> 언마운트 -> 재마운트 사이클을 정상적으로 견뎌야한다. Strict Mode가 이것을 미리 검사해주는 것이다.

// ❌ 문제: 두 번 구독하고 한 번만 해제
useEffect(() => {
  const subscription = externalStore.subscribe(handler);
  // cleanup을 안 반환하면, 두 번째 마운트에서 구독이 중복됨
}, []);

// ✅ 올바른 작성
useEffect(() => {
  const subscription = externalStore.subscribe(handler);
  return () => subscription.unsubscribe(); // cleanup 반드시 작성
}, []);

콘솔에 effect가 두 번 실행되는 이유는 Strict Mode가 "cleanup을 제대로 작성했는지"를 검사하는 것이다.

8. Streaming SSR

8.1 기존 SSR의 문제

기존 SSR은 폭포수(waterfall) 구조이다.

서버 : 모든 데이터 fetch 완료 대기
서버 : 전체 HTML 렌더링
서버 : 완성된 HTML 전송
클라이언트 : JS 번들 다운로드
클라이언트 : 전체 hydration 완료

이 과정을 통해 인터렉션이 가능한 구조로 되고, 한 부분이 느려지면 전체가 느려지게 된다.

8.2 React 18의 Streaming SSR

`Suspense` 경계가 스트리밍의 단위가 되고, 빠른 부분이 먼저 사용자에게 표시되고, 느린 부분은 데이터가 준비되면 그때 전송된다.

function App() {
  return (
    <Layout>
      <Header />             {/* 빠름: 즉시 전송 */}
      <Suspense fallback={<Skeleton />}>
        <SlowDataComponent /> {/* 느림: 준비되면 스트리밍 */}
      </Suspense>
    </Layout>
  );
}

마무리 정리

기능	핵심 요약
createRoot	동시성 기능의 진입점. 이걸 써야 나머지가 활성화
동시성 렌더링	렌더링을 잘게 쪼개 중단/재개/폐기 가능. 우선순위 기반 처리
Automatic Batching	setTimeout, Promise 내부도 자동으로 state 업데이트를 묶어 한 번만 렌더링
Transition	"이 업데이트는 덜 급해"라고 표시. 사용자 입력이 항상 먼저 처리됨
Suspense	동시성과 통합. Streaming SSR과 함께 쓸 때 더 유용
useId	SSR 환경에서도 안전한 고유 ID 생성
useDeferredValue	prop을 받는 쪽에서 값 업데이트를 지연
useSyncExternalStore	외부 스토어 구독 시 tearing 방지. 라이브러리 내부용
useInsertionEffect	CSS-in-JS 라이브러리용 스타일 주입 훅
Strict Mode	이중 마운트로 effect cleanup 올바름 검사
Streaming SSR	Suspense 기반으로 HTML을 조각내어 스트리밍 전송

* 참고사이트

https://ko.react.dev/blog/2022/03/29/react-v18

React v18.0 – React

The library for web and native user interfaces

ko.react.dev

https://www.youtube.com/watch?v=WtiF3DP6oWk

리액트 불변성(Immutability), 대체 왜 지켜야 할까?

의현 — Mon, 27 Apr 2026 20:30:46 +0900

불변성이란?

불변성(Immutability)은 말 그대로 "변하지 않는 성질"을 나타낸다. 프로그래밍에서는 한 번 할당된 메모리의 값을 직접 바꾸지 않는 것을 의미한다.

예를 들어 `let a = 1`이라고 선언했을 때, `a = 2`로 재할당하면 숫자 1이 있던 메모리 공간을 바꾸는 게 아니라, 2가 저장된 새 메모리 주소를 a에 연결한다.

핵심 한 줄 요약
불변성 = 메모리에 있는 값 자체를 건드리지 않는 것. 업데이트가 필요하면 새 값을 만들어서 교체한다.

원시 타입 vs 참조 타입

자바스크립트 값은 크게 두 종류로 나뉘는데, 이게 불변성을 이해하는 핵심이다.

1. 원시 타입(Primitive Type)

e.g. `let a = 1;`, `b = a`를 하게 되면 어떻게 될까?

a = 1을 할당하면 메모리주소 #100번에 1이 저장되어 매핑이 된다. 이후 b = a를 하게되면 메모리주소 #101번에 새로운 1이 생성되고, #101번이 b에 할당된다.

즉, b를 변경해도 a에 영향을 주지 않는다. (값을 복사하는 방식)

2. 참조 타입(Reference Type)

e.g. `let obj1 = { val: 30 };`, `obj2 = obj1`을 하게 되면 어떻게 될까?

`{ val: 30}`을 생성한 객체가 메모리 주소 #100번에 생성되어 obj1에 해당 메모리 주소가 매핑이 된다. 이후 obj2 = obj1을 하게 되면 새로 메모리 주소를 생성하지 않고 #100번이 obj2에 매핑이 되어진다.

즉, obj2를 변경할 경우 obj1에 영향을 미치게된다. (주소를 복사하는 방식)

이러한 복사 방식을 얕은 복사(shallow copy)라 부른다.

리액트는 어떻게 변화를 감지할까?

리액트가 리렌더링을 결정하는 방식은 생각보다 간단하다. 이전 state와 새 state를 얕은 비교(Shallow Comparison)를 통해 확인을 하게된다.

얕은 비교란 메모리 주소(참조값)이 같은지 확인하는 비교 방식이다. 값 내부까지는 비교하지 않는다.

따라서 객체 state를 직접 수정하면 메모리 주소는 변하지 않아서 리액트는 "아, 안 바뀌었네?"라고 판단하여 화면을 업데이트하지 않는 문제가 발생할 수가 있다.

올바른 state 업데이트 패턴

1. 원시 타입(Primitive Type)

원시 타입은 값 자체를 그냥 넘겨도 된다.

-> 원시 타입 값은 메모리 주소에 새로 할당하여 매핑이 되기 때문에

const [count, setCount] = useState(0);

// 원시 타입은 값 자체를 그냥 넘겨도 OK
setCount(5);
setCount(count + 1);

2. 참조 타입(Reference Type)

객체 타입의 경우 객체가 생성된 메모리 주소를 복사하기 때문에, 객체를 새로 생성해야 한다.

객체를 새로 생성하는 대표적인 방법

1. Spread Operator (...)

스프레드 연산자를 이용해 객체를 새로 생성할 수 있다. 물론 재귀를 통해서도 복사를 할 수 있다.

// 올바르지 않는 방법
const [user, setUser] = useState({
  name: '의현', age: 100
});

// 직접 수정 → 주소 안 바뀜
user.age = 30;
setUser(user); // 리렌더링 안 됨!

--------------------------------------

// 올바른 방법 (스프레드 연산자 이용)
const [user, setUser] = useState({
  name: '의현', age: 100
});

// 새 객체 생성 → 새 주소!
setUser({ ...user, age: 30 });
// 리렌더링 성공!

단, 중첩 객체의 경우는 불변성을 보장하지 않는다.

쉽게 말하면 1depth까지만 복사를 한다고 이해하면 된다.

2. immer 라이브러리 (중첩 객체 복사)

스프레드 연산자를 이용해서도 중첩 객체의 불변성을 지키도록 새롭게 생성할 수는 있다. 하지만 중첩이 많아질수록 코드가 지저분해지는 단점이 있다.

const [profile, setProfile] = useState({
  name: '의현',
  address: { city: '성남', zip: '13494' }
});

// 중첩된 address도 새 객체로 만들어야 한다.
setProfile({
  ...profile,
  address: {
    ...profile.address,
    city: '판교'   // city만 바꾸고 zip은 유지
  }
});

immer 라이브러리를 이용하면 중첩된 객체를 쉽게 복사를 할 수 있다.

Immer란 무엇인가?
가변(Mutable) 코드를 작성해도 불변(Immutable) 상태로 만들어주는 라이브러리로, 복잡한 복사 로직 없이 단순히 값을 대입하는 것만으로 리액트가 원하는 "새로운 객체"를 반환해준다.

immer의 핵심 동작 방식: Proxy와 Copy-on-Write

Proxy 생성 : immer의 `produce`함수를 실행하면 원본 데이터를 복사하는 대신, 원본을 감싸는 Proxy인 `draft`를 생성한다.
기록(Recipe) : `draft.address.city = '판교'`라고 값을 변경하면, 이 변경 사항은 원본에 바로 반영되지 않고 Proxy 내부의 Recipe에 기록이 된다.
Copy-on-Write : 변경이 일어나는 순간, immer는 해당 경로에 있는 객체들만 새롭게 생성(깊은 복사)한다. 나머지 변경되지 않는 부분은 원본의 주소를 그대로 참조하게 된다.

const [profile, setProfile] = useState({
  name: '의현',
  address: { city: '성남', zip: '13494' },
  hobbies: ['coding', 'tennis']
});

setProfile(
  produce(draft => {
    draft.address.city = '판교'; 
  })
);

그렇다면 위 예시에서 `hobbies`는 얕은 복사가 된 상태이고, 이를 수정하게 되면 원본에 영향을 미치는게 아닐까?라고 의문이 들 수 있다.

결론부터 말하면, 원본에 영향이 미치지 않는다.

예를 들어, profile에 city만 변경해서 user에 새로운 객체를 복사했다고 가정을 해보자.

const [profile, setProfile] = useState({
  name: '의현',
  address: { city: '성남', zip: '13494' },
  hobbies: ['coding', 'tennis']
});

const user = produce(profile, (draft) => {
  draft.address.city = '강남';
});

immer의 복사를 통해 hobbies는 얕은 복사를 통해 메모리 주소(#500)을 공유하고 있는 상황이다.

만약 user의 hobbies를 수정하려고하면 어떤일이 일어날까?

공유 단계 : `profile`과 새로운 `user`는 모두 동일한 hobbies 주소(#500)을 가리키고있다.
수정 시도 : `user.hobbies.push(...)`를 통해 수정을 시도
immer의 개입 : `user`는 단순 객체가 아니라 Proxy이기 때문에 수정하려고 하면 immer가 원본 주소(#500)를 수정하지 못하게 제지 당하게 된다.
분리 : immer는 즉시 `hobbies` 배열을 복사한 새로운 주소(#700)를 생성하고, user가 이 새 주소를 바라보게 갈아끼운 뒤 수정을 진행하게 된다.

결국 변경을 하지 않아 얕은 복사로 메모리 주소를 공유하고 있는 값들도 실제 수정이 일어나게 될 경우 새로운 메모리 주소로 생성하여 원본에 영향을 주지 않게 동작한다.

왜 immer는 이런 방식을 사용할까? (성능 vs 안전)

모든 데이터를 처음부터 끝까지 깊은 복사(Deep Copy)하면 안전하지만, 거대한 객체를 다룰 대마다 메모리와 CPU를 엄청나게 소모하게 된다.

결국 immer는 구조적 공유(Structural Sharing)를 통해 성능과 안전을 둘 다 잡는 방식을 선택했다.

- 변경 안 된 것 : 주소만 가져와서 메모리 아끼기 (얕은 복사)

- 변경 된 것 : 수정 직전에 새 참조 만들기 (Proxy 기반의 참조 분리)

리액트에서 불변성이 필요한 이유

1. 효율적인 렌더링 최적화 (성능 향상)

리액트의 핵심 성능은 바뀐 부분만 다시 그리는 것에 있다. 이때 리액트는 '뭐가 바뀌었는지' 판단하기 위해 얕은 비교(Shallow Comparison)를 수행한다.

불변성을 지키지 않으면 : 객체 내부의 값만 바뀌고 주소값은 그대로라면, 리액트는 `prevProfile === nextProfile` 결과가 `true`라고 판단하게 되고, "아무것도 바뀌지 않았네?"라고 판단해 화면을 업데이트하지 않는 버그가 발생하게 된다.
불변성을 지키면 : 값이 바뀌면 무조건 새로운 메모리 주소를 갖게되고, 리액트는 복잡하게 객체 내부를 다 비교할 필요없이 "주소 값이 다르네? 그럼 업데이트 해야지!"하고 즉시 감지하여 렌더링을 결정하게 된다.

결국 매우 적은 리소스(주소 비교 한 번)으로 성능 최적화가 가능해지게 된다.

2. 예측 가능한 데이터 (사이드 이펙트 방지)

여러 컴포넌트가 하나의 객체를 공유하고 있을 때, 한 곳에서 데이터를 직접 수정(Mutation)해버리면 다른 컴포넌트의 데이터도 의도치 않게 같이 변해버리게 된다.

불변성을 지키면 : 기존 데이터는 그대로 보존되고 항상 새로운 상태가 생성된다.
데이터가 어느 시점에, 어떤 작업에 의해 바뀌었는지 추적하기가 매우 쉬워지고 코드가 복잡해져도 데이터가 갑자기 이상해지는 사이드 이펙트를 제거할 수 있다.

3. 디버깅과 '시간 여행'기능 (Time Travel Debugging)

리액트 생태계의 도구들 (Redux DevTools 등)은 상태가 바뀔 때마다 기록(snapshot)을 보관한다.

만약 불변성을 지키지 않고 원본을 수정했다면, 이전 상태들이 다 현재 상태로 덮어씌어져서 과거 데이터를 알 수 없게 된다.
불변성을 지키면 : 과거의 상태 객체들이 각각 다른 주소값으로 메모리에 살아있고, "이전 버튼"을 눌렀을 때 과거 상태를 그대로 가져오기만 하면되서 실행 취소(Undo/Redo) 기능이나 타임머신 디버깅을 완벽하게 구현할 수 있게 된다.

한 줄 요약

불변성을 지키면 리액트는 "메모리 주소 비교"만으로 변경 사항을 순식간에 파악하고, 개발자는 데이터가 꼬일 걱정 없이 안전하게 개발을 할 수 있게된다.

* 참고 사이트

https://youtu.be/gER3iJZyd0A?si=w9yrlndk4lDKOzKg

NeetCode Maximum Subarray (JavaScript), 누적합, Greedy

의현 — Fri, 10 Apr 2026 17:29:38 +0900

링크 : https://neetcode.io/problems/maximum-subarray/question

문제 설명

Given an array of integers nums, find the subarray with the largest sum and return the sum.

A subarray is a contiguous non-empty sequence of elements within an array.

Example 1:

Input: nums = [2,-3,4,-2,2,1,-1,4]

Output: 8

Explanation: The subarray [4,-2,2,1,-1,4] has the largest sum 8.

Example 2:

Input: nums = [-1]

Output: -1

Constraints:

1 <= nums.length <= 1000-1000 <= nums[i] <= 1000

1 <= nums.length <= 1000
1000 <= nums[i] <= 1000

문제 풀이

누적 합과 Greedy를 이용하여 문제를 해결

[ 핵심 아이디어 ]

현재 index까지 최대 값으로 만들 수 있는 누적 합을 계산하도록 로직을 작성해야 함.

e.g. i번째를 계산하기 위해 i - 1번째 까지의 최대 누적 합에 현재 i번째를 더한 값이 i번째 보다 클 경우 i번째의 값을 i - 1 + i 를 합한 값으로 갱신해줘야 함

갱신이 끝났다면 answer에 최대 누적합을 갱신해주면 됨

class Solution {
    /**
     * @param {number[]} nums
     * @return {number}
     */
    maxSubArray(nums) {
        let answer = nums[0];
        for (let i = 1; i < nums.length; i++) {
            if (nums[i - 1] + nums[i] > nums[i]) {
                nums[i] = nums[i - 1] + nums[i];
            }

            answer = Math.max(answer, nums[i]);
        }

        return answer;
    }
}

결론

Greedy문제 + 누적 합을 활용해서 문제를 접근해야 함.

NeetCode Islands and Treasure (JavaScript), BFS

의현 — Thu, 9 Apr 2026 19:44:34 +0900

링크 : https://neetcode.io/problems/islands-and-treasure/question

문제 설명

You are given a m×nm×n 2D grid initialized with these three possible values:

1 - A water cell that can not be traversed.
- 0 - A treasure chest.
- INF - A land cell that can be traversed. We use the integer 2^31 - 1 = 2147483647 to represent INF.

Fill each land cell with the distance to its nearest treasure chest. If a land cell cannot reach a treasure chest then the value should remain INF.

Assume the grid can only be traversed up, down, left, or right.

Modify the grid in-place.

Example 1:

Input: [
  [2147483647,-1,0,2147483647],
  [2147483647,2147483647,2147483647,-1],
  [2147483647,-1,2147483647,-1],
  [0,-1,2147483647,2147483647]
]

Output: [
  [3,-1,0,1],
  [2,2,1,-1],
  [1,-1,2,-1],
  [0,-1,3,4]
]

Example 2:

Input: [
  [0,-1],
  [2147483647,2147483647]
]

Output: [
  [0,-1],
  [1,2]
]

Constraints:

m == grid.lengthn == grid[i].length1 <= m, n <= 100grid[i][j] is one of {-1, 0, 2147483647}

m == grid.length
n == grid[i].length
1 <= m, n <= 100
grid[i][j] is one of {-1, 0, 2147483647}

문제 풀이

각 위치에서 보물까지의 최소거리를 구하는 문제로 BFS를 활용하면 문제를 해결

[ 핵심 아이디어 ]

각 좌표에서 보물까지의 최소 거리를 구하는 형태로 로직을 작성할 경우 O(N * N)의 시간 복잡도를 가진다. 결국 n이 커지게되면 시간 초과 오류가 발생한다.

따라서, bfs를 n번 반복하는게 아닌 1번만 반복하도록 로직을 구성하면 된다.

1번만 반복하도록 하기위해서 각 좌표에서 보물까지의 최소 거리를 구하는게 아닌, 각 보물 좌표에서 이동하면서 각 좌표에 최소 거리를 최신화 해주면 된다.

이렇게 되면 보물 위치에서 단 한번의 BFS로 모든 좌표의 보물까지의 최소거리를 구할 수 있다.

class Solution {
    /**
     * @param {number[][]} grid
     */
    islandsAndTreasure(grid) {
        const cols = grid.length;
        const rows = grid[0].length;
        const dirs = [
            [-1, 0],
            [1, 0],
            [0, -1],
            [0, 1]
        ];
        const visited = new Set();
        const queue = [];

        for (let y = 0; y < cols; y++) {
            for (let x = 0; x < rows; x++) {
                if (grid[y][x] === 0) {
                    queue.push([y, x, 0]);
                    visited.add(`${y},${x}`);
                }
            }
        }

        while (queue.length > 0) {
            const [y, x, cnt] = queue.shift();
            grid[y][x] = cnt;

            for (const [dy, dx] of dirs) {
                const my = y + dy;
                const mx = x + dx;
                if (my >= 0 && my < cols && mx >= 0 && mx < rows && !visited.has(`${my},${mx}`) && grid[my][mx] !== -1) {
                    visited.add(`${my},${mx}`);
                    queue.push([my, mx, cnt + 1]);
                }
            }
        }
    }
}

결론

BFS 형태의 문제이지만 BFS를 어떻게 활용할 건지에 대한 고민이 필요한 문제같다.

LeetCode Cheapest Flights Within K Stops (JavaScript), Dijkstra + BFS

의현 — Sat, 4 Apr 2026 23:54:35 +0900

링크 : https://leetcode.com/problems/cheapest-flights-within-k-stops/description/?envType=problem-list-v2&envId=9id5lube

문제 설명

There are n cities connected by some number of flights. You are given an array flights where flights[i] = [fromi, toi, pricei] indicates that there is a flight from city fromi to city toi with cost pricei.

You are also given three integers src, dst, and k, return the cheapest price from src to dst with at most k stops. If there is no such route, return **-1.

Example 1:

Input: n = 4, flights = [[0,1,100],[1,2,100],[2,0,100],[1,3,600],[2,3,200]], src = 0, dst = 3, k = 1
Output: 700
Explanation:
The graph is shown above.
The optimal path with at most 1 stop from city 0 to 3 is marked in red and has cost 100 + 600 = 700.
Note that the path through cities [0,1,2,3] is cheaper but is invalid because it uses 2 stops.

Example 2:

Input: n = 3, flights = [[0,1,100],[1,2,100],[0,2,500]], src = 0, dst = 2, k = 1
Output: 200
Explanation:
The graph is shown above.
The optimal path with at most 1 stop from city 0 to 2 is marked in red and has cost 100 + 100 = 200.

Example 3:

Input: n = 3, flights = [[0,1,100],[1,2,100],[0,2,500]], src = 0, dst = 2, k = 0
Output: 500
Explanation:
The graph is shown above.
The optimal path with no stops from city 0 to 2 is marked in red and has cost 500.

Constraints:

2 <= n <= 100
0 <= flights.length <= (n * (n - 1) / 2)
flights[i].length == 3
0 <= fromi, toi < n
fromi != toi
1 <= pricei <= 104
There will not be any multiple flights between two cities.
0 <= src, dst, k < n
src != dst

문제 풀이

특정 지점에서 특정 지점으로 가는 최소 비용을 구하는 문제로 다익스트라를 떠올릴 수 있다.

하지만 k횟수 라는 제한이 있기 때문에 일반적인 다익스트라로는 구현이 불가능하다.

그 이유는 다익스트라는 '비용'적인 측면에서 최적화하기 때문에 횟수라는 제한이 추가가되면 일반적인 다익스트라 알고리즘으로 해결을 할 수 없다. -> 이미 방문한 노드에 대해서 최적의 답을 정했기 때문에

해당 문제는 dijkstra + bfs를 활용하여 문제를 해결했다.

접근 방식

graph : src -> dst로 가는 비용을 저장하는 배열
distance : src로 부터 각 지점까지의 최소 비용을 저장하는 배열
- 초기 src는 0으로 초기화 (자기 자신이기 때문에)
k라는 횟수를 파악하기 위해 queue 배열을 사용
- [src, cost, stops] : 시작 지점, 비용, 횟수를 저장
각 지점에서 최소 비용을 계산하는 로직은 dijkstra형태로 진행이 되고, 최소 횟수를 통해 검사하는 노드는 bfs 형태로 진행을 한다.
- 즉, queue의 배열의 길이가 0보다 크다면 계속 해서 검사
- 최소 비용은 일반적인 dijkstra에서 각 노드를 거쳐 최소비용이 되는지 검사하는 로직을 사용

/**
 * @param {number} n
 * @param {number[][]} flights
 * @param {number} src
 * @param {number} dst
 * @param {number} k
 * @return {number}
 */
var findCheapestPrice = function(n, flights, src, dst, k) {
    const graph = Array.from({length: n}, () => []);
    flights.forEach(([s, d, c]) => graph[s].push([d, c]));

    const distance = Array(n).fill(Infinity);
    distance[src] = 0;

    // src, cost, stops
    const queue = [[src, 0, 0]];

    while (queue.length > 0) {
        const [from, cost, stops] = queue.shift();

        for (const [nei, c] of graph[from]) {
            const totalCost = cost + c;
            if (totalCost < distance[nei] && stops <= k) {
                distance[nei] = totalCost;
                queue.push([nei, distance[nei], stops + 1]);
            }
        }
    }

    return distance[dst] === Infinity ? -1 : distance[dst];
};

결론

이 문제는 일반적인 '비용'에 중점을 둔 dijkstra형태가 아닌, 횟수가 포함되어 BFS 형태를 응용해서 풀어야 하는 문제이다.

핵심 동작

1. 최소 비용 구하기 : dijkstra

2. 탐색 : bfs

LeetCode Perfect Squares (JavaScript), BFS, DP

의현 — Fri, 3 Apr 2026 19:07:36 +0900

링크 : https://leetcode.com/problems/perfect-squares/description/

문제 설명

Given an integer n, return the least number of perfect square numbers that sum to n.

A perfect square is an integer that is the square of an integer; in other words, it is the product of some integer with itself. For example, 1, 4, 9, and 16 are perfect squares while 3 and 11 are not.

Example 1:

Input: n = 12
Output: 3
Explanation: 12 = 4 + 4 + 4.

Example 2:

Input: n = 13
Output: 2
Explanation: 13 = 4 + 9.

Constraints:

1 <= n <= 104

문제 풀이

1. BFS 풀이

접근 방식

[현재 값, 카운트]를 기준으로 제곱 값을 더해가면서 n과 같은 경우를 찾는 것

단, 같은 숫자가 중복해서 발생할 수 있으므로 visited를 설정해 이미 검사한 숫자는 다시 검사하지 않도록 해야 함.

/**
 * @param {number} n
 * @return {number}
 */
var numSquares = function(n) {
    const queue = [[0, 0]];
    const visited = new Set(); // 방문한 숫자는 검사하지 않도록
    visited.add(0);

    while (queue.length > 0) {
        const [sum, count] = queue.shift();

        for (let i = 1; ; i++) {
            const nextSum = sum + i * i;
            if (nextSum === n) return count + 1;
            if (nextSum > n) break;

            if (!visited.has(nextSum)) {
                visited.add(nextSum);
                queue.push([nextSum, count + 1]);
            }
        }
    }
};

2. DP 풀이

접근 방식

i 번째 : 숫자 i를 만들기 위한 최소 횟수를 저장

점화식은 다음과 같이 정의할 수 있다.

dp[i - j * j] + 1 (j * j <= i)

i에서 어떤 제곱수(j * j)를 뺏을 때 최솟 값 중에서 1을 더한 값을 의미한다.

e.g. i가 4이고, j 가 1인 경우를 해석하면 다음과 같다.

dp[4] = 4이고 dp[4 - 1*1] = dp[3] = 3이다.

즉 4번째에서 1번째를 뺀 3숫자를 만드는 경우의 수에서 1을 더한 값이 4를 만들 수 있는 경우의 수이다. (3 + 1)

이런 식으로 j * j가 i보다 작거나 같을 때까지 반복하며 최소 경우의 수를 구해서 i번째에 할당한다.

/**
 * @param {number} n
 * @return {number}
 */
var numSquares = function(n) {
    const dp = new Array(n + 1).fill(0);
    for (let i = 0; i <= n; i++) {
        dp[i] = i;
    }

    for (let i = 1; i <= n; i++) {
        for (let j = 1; j * j <= i; j++) {
            dp[i] = Math.min(dp[i], dp[i - j * j] + 1);
        }
    }

    return dp[n];
};

결론

BFS와 DP형태로 문제를 해결할 수 있다.

최소 경로의 수를 구하는 문제로 DP보다 BFS가 더 효율적으로 해결이 될 수 있다.

그 이유는 BFS같은 경우 최소 경로를 만나면 즉시 종료를 시키기 때문에 어떠한 경우에서는 DP보다 효율적으로 동작할 수 있다.

LeetCode Count of Interesting Subarrays (JavaScript), 누적합, 해시맵

의현 — Fri, 3 Apr 2026 17:39:04 +0900

아래 문제를 먼저 보고 오시는걸 추천드립니다!

https://kuh97.tistory.com/entry/LeetCode-Subarray-Sum-Equals-K-JavaScript-%EB%88%84%EC%A0%81%ED%95%A9

링크 : https://leetcode.com/problems/count-of-interesting-subarrays/description/?envType=daily-question&envId=2025-04-25

문제 설명

You are given a 0-indexed integer array nums, an integer modulo, and an integer k.

Your task is to find the count of subarrays that are interesting.

A subarray nums[l..r] is interesting if the following condition holds:

Let cnt be the number of indices i in the range [l, r] such that nums[i] % modulo == k. Then, cnt % modulo == k.

Return an integer denoting the count of interesting subarrays.

Note: A subarray is a contiguous non-empty sequence of elements within an array.

Example 1:

Input: nums = [3,2,4], modulo = 2, k = 1
Output: 3
Explanation: In this example the interesting subarrays are:
The subarray nums[0..0] which is [3].
- There is only one index, i = 0, in the range [0, 0] that satisfies nums[i] % modulo == k.
- Hence, cnt = 1 and cnt % modulo == k.
The subarray nums[0..1] which is [3,2].
- There is only one index, i = 0, in the range [0, 1] that satisfies nums[i] % modulo == k.
- Hence, cnt = 1 and cnt % modulo == k.
The subarray nums[0..2] which is [3,2,4].
- There is only one index, i = 0, in the range [0, 2] that satisfies nums[i] % modulo == k.
- Hence, cnt = 1 and cnt % modulo == k.
It can be shown that there are no other interesting subarrays. So, the answer is 3.

Example 2:

Input: nums = [3,1,9,6], modulo = 3, k = 0
Output: 2
Explanation:In this example the interesting subarrays are:
The subarray nums[0..3] which is [3,1,9,6].
- There are three indices, i = 0, 2, 3, in the range [0, 3] that satisfy nums[i] % modulo == k.
- Hence, cnt = 3 and cnt % modulo == k.
The subarray nums[1..1] which is [1].
- There is no index, i, in the range [1, 1] that satisfies nums[i] % modulo == k.
- Hence, cnt = 0 and cnt % modulo == k.
It can be shown that there are no other interesting subarrays. So, the answer is 2.

Constraints:

1 <= nums.length <= 105
1 <= nums[i] <= 109
1 <= modulo <= 109
0 <= k < modulo

문제 풀이

접근 방식 (누적합 + hash map)

[ 핵심 아이디어 ]

구간 (i, j)에 대한 누적합은 sum[j] - sum[i] 로 구할 수 있다.
이전 누적합을 map으로 관리하도록 하는 방법을 찾아야 한다.

2번에 대한 이전 누적합은 관리하는 방법은 아래를 통해 알 수 있다.

(i, j)에 대한 누적합은 sum[j] - sum[i]이고 구하려고하는 것은 (sum[j] - sum[i]) % modulo == k 인 값이다.

이를 변형하면 sum[i] % modulo = sum[j] % modulo - k이다.

sum[i] % modulo 는 이전 값에 대한 누적 합을 의미하고,
sum[j] % modulo 는 현재 값에 대한 누적 합을 의미한다.

결국 이전 누적 합을 modulo로 나눈 값과 현재 누적합을 modulo로 나눈 값에서 k를 뺀 것과 일치하는 것을 찾으면 된다.

-> 즉, 이전 누적 합을 modulo로 나눈 값을 map에 저장해두면 O(1)의 시간 복잡도로 찾을 수 있다.

하지만, sum[j] % modulo - k에 문제가 있는데, 이 값이 음수가 될 수 있다는 것이다. 이를 방지하기위해 + modulo를 더한 값에 modulo를 나눈 값을 사용하도록 하면 음수가 나오는 문제를 방지할 수 있다.

최종적으로 만들어진 공식은 다음과 같다.

sum[i] % modulo = (sum[j] % modulo - k + modulo) % modulo

/**
 * @param {number[]} nums
 * @param {number} modulo
 * @param {number} k
 * @return {number}
 */
var countInterestingSubarrays = function(nums, modulo, k) {
    let answer = 0;
    let prefixSum = 0;

    const map = new Map();
    map.set(0, 1);

    for (let num of nums) {
        // 현재 숫자가 조건(nums[i] % modulo === k)에 만족하면 prefixSum 1증가
        if (num % modulo === k) {
            prefixSum++;
        }

		// 현재 누적 합에서 modulo를 나눈 값
        let currentModValue = prefixSum % modulo;
        let target = (currentModValue - k + modulo) % modulo;

        if (map.has(target)) {
            answer += map.get(target);
        }

        map.set(currentModValue, (map.get(currentModValue) || 0) + 1);
    }

    return answer;
};

결론

누적 합을 어떠한 방식으로 관리를 할 것인가에 대한 부분과

누적 합을 어떻게 변형을 시킬 수 있는지를 만드는 게 중요한 포인트인 것 같다.

LeetCode Subarray Sum Equals K (JavaScript), 누적합

의현 — Thu, 2 Apr 2026 19:12:18 +0900

링크 : https://leetcode.com/problems/subarray-sum-equals-k/description/

문제 설명

Given an array of integers nums and an integer k, return the total number of subarrays whose sum equals to k.

A subarray is a contiguous non-empty sequence of elements within an array.

Example 1:

Input: nums = [1,1,1], k = 2
Output: 2

Example 2:

Input: nums = [1,2,3], k = 3
Output: 2

Constraints:

1 <= nums.length <= 2 * 104
1000 <= nums[i] <= 1000
107 <= k <= 107

문제 풀이

해당 문제는 누적합 + hash를 이용하여 해결 (이외의 알고리즘은 시간 초과 오류가 발생)

문제는 구간의 누적합이 k와 같은 경우의 수를 찾는 문제이다.

[ 핵심 아이디어 ]

[i, j]의 구간합이 k와 같다는 것을 식으로 표현하면 다음과 같다.

prefixSum[j] : 현재(j)까지의 누적합

prefixSum[i] : 이전(i)까지의 누적합

따라서, [i, j]의 누적합은 다음과 같다.

prefixSum[j] - prefixSum[i] = k; 이를 현재를 기준으로 변형하게 되면

prefixSum[i] = prefixSum[j] - k; 를 의미하고, 이는 현재 누적합에서 k를 뺀 값이 이전 누적합과 같다는 것을 의미한다.

결국, 이전에 저장해둔 누적 값이 이미 존재할 경우 O(1)로 빠르게 접근해서 찾을 수 있다는 점을 이용해야 한다.

map.set(0, 1)을 해주는 이유는? 배열의 맨 첫 번째 요소부터 시자하는 부분 배열을 표현하기 위해서이다.

즉, 아무것도 안 더했을 때 합은 0이고 이는 1개 존재한다. 라는 의미이다.

만약 이 설정이 없다면 발생하는 문제상황에 대해 간단하게 살펴보면,

만약 nums = [3, 2, 1]이고 k = 3인 상황을 가정해보자.

첫 번째 숫자 3을 만납니다. sum = 3이 된다.
찾는 target은 sum - k, 즉 3 - 3 = 0이다.
그런데 이전 기록에 0이 기록되어 있지 않다면?
- 분명 [3] 자체로 정답인데, 프로그램은 "이전에 합이 0이었던 적이 없네?" 하고 정답이 아니게 되는 오류가 발생하게 된다.

/**
 * @param {number[]} nums
 * @param {number} k
 * @return {number}
 */
var subarraySum = function(nums, k) {
    const map = new Map();
    map.set(0, 1);

    let sum = 0;
    let answer = 0;

    for (let num of nums) {
        sum += num;
        const target = sum - k;

        if (map.has(target)) {
            answer += map.get(target);
        }

        map.set(sum, (map.get(sum) || 0) + 1);
    }

    return answer;
};

결론

투 포인터나 이중 루프로 접근하면 쉽지만, 배열이 커짐에 따라 시간 복잡도가 급격하게 커져 오류가 발생한다.

따라서, 누적 합의 상태를 맵에 기록하여 사용하면 한 번의 반복(O(N))에도 정답을 찾을 수 있다.

결국 이 문제의 핵심은 구간의 합을 구하는 방식에서 현재 누적 합 - k가 이전 누적 합과 같다는 식을 찾아내는 것이 중요하고, 이 정보를 찾아야 해시 맵을 통해 빠르게 정답을 찾을 수 있다.

LeetCode Course Schedule || (JavaScript), 위상정렬

의현 — Thu, 2 Apr 2026 17:48:37 +0900

링크 : https://leetcode.com/problems/course-schedule-ii/description/

문제 설명

There are a total of numCourses courses you have to take, labeled from 0 to numCourses - 1. You are given an array prerequisites where prerequisites[i] = [ai, bi] indicates that you must take course bi first if you want to take course ai.

For example, the pair [0, 1], indicates that to take course 0 you have to first take course 1.

Return the ordering of courses you should take to finish all courses. If there are many valid answers, return any of them. If it is impossible to finish all courses, return an empty array.

Example 1:

Input: numCourses = 2, prerequisites = [[1,0]]
Output: [0,1]
Explanation: There are a total of 2 courses to take. To take course 1 you should have finished course 0. So the correct course order is [0,1].

Example 2:

Input: numCourses = 4, prerequisites = [[1,0],[2,0],[3,1],[3,2]]
Output: [0,2,1,3]
Explanation: There are a total of 4 courses to take. To take course 3 you should have finished both courses 1 and 2. Both courses 1 and 2 should be taken after you finished course 0.
So one correct course order is [0,1,2,3]. Another correct ordering is [0,2,1,3].

Example 3:

Input: numCourses = 1, prerequisites = []
Output: [0]

문제 풀이

위 문제는 위상정렬 알고리즘을 안다면 쉽게 해결할 수 있다.

위상정렬이란?
순서가 정해진 작업을 순서대로 수행할 때, 그 순서를 결정해주는 알고리즘
즉, 쉽게 말해 순서에 따라 작업이 실행되는 경로를 의미한다.

위상정렬을 하기위해 다음과 같은 변수가 필요하다.

adj 배열 : [a, b]가 있을 때, b를 하기위해서는 a가 선행되어야 한다.
- b -> [a] 형태로 값을 관리하는 배열
inDegree 배열 : [a, b]가 있을 때, a가 수행되기 위해 이전에 선행되어야 하는 작업의 갯수를 의미
- a : 3 형태로 a가 수행되려면 몇 개의 작업이 수행되어야 하는지를 count로 저장
queue 배열 : 현재 작업을 수행할 수 있는 목록의 배열
order 배열 : 최종적으로 순차대로 수행된 작업의 목록을 저장하는 배열

위상정렬 알고리즘 간단하게 보기 (문제를 기준으로)

adj, inDegree배열을 채우기
현재 inDegree에서 바로 수행할 수 있는 값(값이 0이라면 해당 작업은 바로 수행가능)을 queue배열에 추가
queue 배열의 길이가 남아있다면 아래 로직을 반복적으로 수행
1. queue에서 하나를 뺀다.(shift)
2. 해당 작업은 완료된 작업으로 order(정답)에 추가
3. 뺀 작업이후 수행할 수 있는 목록의 값의 count를 1씩 감소시키면서, count가 0이라면 queue에 추가해준다.
최종적으로 order에 쌓인 작업의 갯수가 numCourses와 같다면 정상적으로 작업이 수행된 것을 의미
- 모든 코스를 들을 수 없다면 빈 배열([])을 리턴

/**
 * @param {number} numCourses
 * @param {number[][]} prerequisites
 * @return {number[]}
 */
var findOrder = function(numCourses, prerequisites) {
    const adj = {};
    const inDegree = Array.from({length: numCourses}, () => 0);

    for (let i = 0; i < prerequisites.length; i++) {
        const [course, pre] = prerequisites[i];
        if (!adj[pre]) {
            adj[pre] = [course];
        } else {
            adj[pre].push(course);
        }
        inDegree[course]++;
    }

    const queue = [];
    for (let i = 0; i < numCourses; i++) {
        if (inDegree[i] === 0) {
            queue.push(i);
        }
    }

    const order = [];
    while (queue.length > 0) {
        const c = queue.shift();
        order.push(c);

        if (adj[c]) {
            for (let next of adj[c]) {
                inDegree[next]--;
                if (inDegree[next] === 0) {
                    queue.push(next);
                }
            }
        }
    }

    return order.length === numCourses ? order : [];
};

결론

위상정렬의 핵심은 adj, inDegree배열과 queue를 활용하여 순차대로 작업을 실행할 수 있는지 여부를 판단할 수 있어야 한다.

LeetCode Sort Colors (JavaSciprt), three pointer

의현 — Thu, 26 Mar 2026 19:04:16 +0900

링크 : https://leetcode.com/problems/sort-colors/description/

문제 설명

Given an array nums with n objects colored red, white, or blue, sort them **in-place** so that objects of the same color are adjacent, with the colors in the order red, white, and blue.

We will use the integers 0, 1, and 2 to represent the color red, white, and blue, respectively.

You must solve this problem without using the library's sort function.

Example 1:

Input: nums = [2,0,2,1,1,0]
Output: [0,0,1,1,2,2]

Example 2:

Input: nums = [2,0,1]
Output: [0,1,2]

Constraints:

n == nums.length
1 <= n <= 300
nums[i] is either 0, 1, or 2.

Follow up: Could you come up with a one-pass algorithm using only constant extra space?

문제 풀이

접근 방식

0, 1, 2를 정렬하기 위해 3개의 포인터 start, mid, end를 설정
start -> 0, mid -> 1, end -> 2를 나타냄
정렬하기 위한 로직 (mid <= end인 경우 아래 로직을 따르면 정렬이 됨)
- mid가 2인 경우 end와 교체, end는 1 감소
- mid가 0인 경우 start와 교체, start, mid 1 증가
- mid가 1인 경우 mid 1 증가

/**
 * @param {number[]} nums
 * @return {void} Do not return anything, modify nums in-place instead.
 */
var sortColors = function(nums) {
    let [start, mid, end] = [0, 0, nums.length - 1];

    while (mid <= end) {
        if (nums[mid] === 2) {
            [nums[mid], nums[end]] = [nums[end], nums[mid]];
            end--;
        } else if (nums[mid] === 0) {
            [nums[mid], nums[start]] = [nums[start], nums[mid]];
            start++;
            mid++;
        } else {
            mid++;
        }
    }
};

결론

3개의 기준점 (start, mid, end 포인터)를 이용해 0, 1, 2를 구분하는 방식으로 해결

LeetCode Edit Distance (JavaScript), DP

의현 — Thu, 26 Mar 2026 18:40:16 +0900

링크 : https://leetcode.com/problems/edit-distance/description/

문제 설명

Given two strings word1 and word2, return the minimum number of operations required to convert word1 to word2.

You have the following three operations permitted on a word:

Insert a character
Delete a character
Replace a character

Example 1:

Input: word1 = "horse", word2 = "ros"
Output: 3
Explanation:
horse -> rorse (replace 'h' with 'r')
rorse -> rose (remove 'r')
rose -> ros (remove 'e')

Example 2:

Input: word1 = "intention", word2 = "execution"
Output: 5
Explanation:
intention -> inention (remove 't')
inention -> enention (replace 'i' with 'e')
enention -> exention (replace 'n' with 'x')
exention -> exection (replace 'n' with 'c')
exection -> execution (insert 'u')

Constraints:

0 <= word1.length, word2.length <= 500
word1 and word2 consist of lowercase English letters.

문제 풀이

접근 방식 (DP를 이용해 풀이)

word1, word2의 길이 + 1 만큼의 2차원 배열을 생성 (""인 경우도 고려해 + 1한 값을 배열로 생성)
i번째 (word1기준) 까지의 부분 문자열로 j번째 (word2기준) 까지 부분 문자열로 만들 수 있는 경우의 수 구하기
- (i, j) = word1의 i 번째까지로 word2의 j 번째까지 만드는 최소의 경우의 수를 의미
- dp[i - 1][j] : Delete, 삭제
  - word1의 i - 1번째까지가 j 번째와 같다면 i번째는 쓸모없으니 제거해야함
- dp[i - 1][j - 1] : Replace, 교체
  - word1의 i - 1번째가 word2의 j - 1번째와 같을 때 다음 문자는 word2에 맞게 교체되어야 함
- dp[i][j - 1] : Insert, 삽입
  - word1의 i번째까지가 word2의 j - 1번째까지와 같다면 word2의 j번째 문자를 추가해야함

(i, j)	""	r	o	s
""	0	1	2	3
h	1	1	2	3
o	2	2	1	2
r	3	2	2	2
s	4	3	3	2
e	5	4	4	3

[ 좀 더 자세한 설명, (1, 1)에서 최소 비용 구하는 과정 ]

결국 (i, j)를 구하는 방식은 다음과 같이 이해할 수 있다.

( i - 1, j - 1 ) 교체	( i - 1, j ) 삭제
( i, j - 1 ) 삽입	( i, j ) 현재 위치

따라서, 현재 위치는 교체된 값, 삭제된 값, 삽입된 값에 + 1(현재 j번째의 word2 문자를 더하기)을 한 값 중에서 최소 값을 구하면 된다.

만약 위 같은 표가 왜 저렇게 나오는지 이해가 되지않는다면, 먼저 삽입, 삭제, 교체가 어떠한 기준으로 이루어지는지 글로 먼저 이해를 하고 이를 표로 정리해보는게 좋을 것 같다.

e.g. 삽입의 경우 글로 이해를 해본다면, word1의 i 위치까지의 부분 문자열과 word2의 j 위치까지의 부분 문자열이 같아야 하고, word2의 j가 추가가 되어야 한다면, word1은 i번째가 아닌 i - 1번째에 j를 추가해야 된다.

/**
 * @param {string} word1
 * @param {string} word2
 * @return {number}
 */
var minDistance = function(word1, word2) {
    const [rows, cols] = [word1.length, word2.length];
    const dp = Array.from({length: rows + 1}, () => Array.from({length: cols + 1}, () => 0));

    for (let i = 0; i <= rows; i++) {
        dp[i][0] = i;
    }
    for (let j = 0; j <= cols; j++) {
        dp[0][j] = j;
    }

    for (let i = 1; i <= rows; i++) {
        for (let j = 1; j <= cols; j++) {
            // 비교하는 두 문자가 같다면 대각선 위 (변경 x)
            if (word1[i - 1] === word2[j - 1]) {
                dp[i][j] = dp[i - 1][j - 1];
            } else {
                dp[i][j] = Math.min(
                    dp[i - 1][j], // 삭제
                    dp[i - 1][j - 1], // 교체
                    dp[i][j - 1] // 삽입
                ) + 1;
            }
        }
    }

    return dp[rows][cols];
};

결론

bfs와 같은 형태로 문제를 해결할 순 있지만, 문자의 길이가 길어지면 시간 오류가 발생하게 된다.

따라서, DP와 같은 알고리즘으로 접근을 해서 해결을 해야한다.

위 문제도 DP를 이용해 접근을 해야 하지만, 문제를 이해하는 과정이 생각보다 쉽지 않다고 느껴졌다.

왜 2차원 배열의 특정 위치가 삽입, 삭제, 교체가 되는지 이해를 하는게 이 문제를 해결할 수 있는 방법인 것 같다.

만약 위 설명들로도 이해가 잘 가지 않는다면 아래 영상을 참고하면 이해가 될 수 있을 것 같다.

https://www.youtube.com/watch?v=6jvSfC2-JDo

LeetCode Unique Paths ll (JavaScript), DP

의현 — Tue, 24 Mar 2026 15:50:13 +0900

링크 : https://leetcode.com/problems/unique-paths-ii/description/

문제 설명

You are given an m x n integer array grid. There is a robot initially located at the top-left corner (i.e., grid[0][0]). The robot tries to move to the bottom-right corner (i.e., grid[m - 1][n - 1]). The robot can only move either down or right at any point in time.

An obstacle and space are marked as 1 or 0 respectively in grid. A path that the robot takes cannot include any square that is an obstacle.

Return the number of possible unique paths that the robot can take to reach the bottom-right corner.

The testcases are generated so that the answer will be less than or equal to 2 * 109.

Example 1:

Input: obstacleGrid = [[0,0,0],[0,1,0],[0,0,0]]
Output: 2
Explanation: There is one obstacle in the middle of the 3x3 grid above.
There are two ways to reach the bottom-right corner:
1. Right -> Right -> Down -> Down
2. Down -> Down -> Right -> Right

Example 2:

Input: obstacleGrid = [[0,1],[0,0]]
Output: 1

Constraints:

m == obstacleGrid.length
n == obstacleGrid[i].length
1 <= m, n <= 100
obstacleGrid[i][j] is 0 or 1.

문제 풀이

1. DFS 로 접근 (실패, 시간 초과)

접근 방식

- (0, 0)부터 시작해 배열의 끝에 도달했을 경우 answer을 1씩 증가 시켜주도록 로직을 작성 (dfs)

- 배열의 길이가 길어지면 시간 초과 오류가 발생

/**
 * @param {number[][]} obstacleGrid
 * @return {number}
 */
var uniquePathsWithObstacles = function(obstacleGrid) {
    let answer = 0;

    if (obstacleGrid[0][0] === 1) {
        return 0;
    }

    let move = [[0, 1], [1, 0]];

    const dfs = (x, y) => {
        if (x === obstacleGrid[0].length - 1 && y === obstacleGrid.length - 1) {
            answer++;
            return;
        }

        for (let i = 0; i < move.length; i++) {
            const mx = x + move[i][0];
            const my = y + move[i][1];

            if (mx < obstacleGrid[0].length && my < obstacleGrid.length && obstacleGrid[my][mx] === 0) {
                dfs(mx, my);
            }
        }
    }

    dfs(0, 0);
    return answer;
};

2. DP로 접근 (성공)

접근 방식

- 오른쪽, 아래로만 이동이 가능하므로 특정 위치에서 올 수 있는 경우의 수는 왼쪽, 위에서 오는 경우를 합한 값임

- 즉, 특정 위치에서 왼쪽의 경우의 수 + 위쪽 경우의 수를 합한 값이 현재 위치에서 올 수 있는 경우의 수이다.

- 단, 1씩 더하게되면 장애물이 1을 나타내므로 로직에 잘못된 판단이 될 수 있어. 경우의 수는 2씩 더하고, 최종적으로 2를 나눈 값이 끝지점에 도달할 수 있는 모든 경우의 수를 의미한다.

/**
 * @param {number[][]} obstacleGrid
 * @return {number}
 */
var uniquePathsWithObstacles = function(obstacleGrid) {
    if (obstacleGrid[0][0] === 1) {
        return 0;
    }
    
    let before = [[-1, 0], [0, -1]]; // 왼쪽, 위

    for (let y = 0; y < obstacleGrid.length; y++) {
        for (let x = 0; x < obstacleGrid[0].length; x++) {
            if (x === 0 && y === 0) {
                obstacleGrid[0][0] = 2;
                continue;
            }

            if (obstacleGrid[y][x] === 1) {
                continue;
            }

            for (let i = 0; i < before.length; i++) {
                const bx = x + before[i][0];
                const by = y + before[i][1];

                if (bx >= 0 && by >= 0 && obstacleGrid[by][bx] !== 1) {
                    obstacleGrid[y][x] += obstacleGrid[by][bx];
                }
            }
        }
    }

    return Math.floor(obstacleGrid[obstacleGrid.length - 1][obstacleGrid[0].length - 1] / 2);
};

3. DP 개선 (성공)

접근 방식

- 2번째와 유사하게 특정 위치의 경우의 수는 왼쪽, 위쪽의 경우를 더한 값을 의미

- for문 안에 반복문 제거하여 더 깔끔하게 로직 작성

- 반복문 설명

x, y => 0 인 경우 처음 위치를 나타내므로 1로 치환
특정 위치가 1인 경우 장애물이므로 0으로 치환
- 0으로 치환하는 이유는 다음 값에서 해당 위치를 읽어 더해야 하기 때문
y가 0인 경우 -> x기준 왼쪽에서 오는 경로만 계산하면 됨
x가 0인 경우 -> y기준 위쪽에서 오는 경로만 계산하면 됨
(3, 4)가 아닌 경우 -> 왼쪽, 위에서 오는 경로를 합해주면 됨

- 최종적으로 배열의 끝을 리턴해주면 됨.

/**
 * @param {number[][]} obstacleGrid
 * @return {number}
 */
var uniquePathsWithObstacles = function(obstacleGrid) {
    const [rows, cols] = [obstacleGrid[0].length, obstacleGrid.length];
    if (obstacleGrid[0][0] || obstacleGrid[cols - 1][rows - 1]) {
        return 0;
    }

    for (let y = 0; y < cols; y++) {
        for (let x = 0; x < rows; x++) {
            if (x === 0 && y === 0) {
                obstacleGrid[y][x] = 1;
                continue;
            }

            if (obstacleGrid[y][x] === 1) {
                obstacleGrid[y][x] = 0;
                continue;
            }

            if (y === 0) {
                obstacleGrid[y][x] = obstacleGrid[y][x - 1];
                continue;
            }

            if (x === 0) {
                obstacleGrid[y][x] = obstacleGrid[y - 1][x];
                continue;
            }

            obstacleGrid[y][x] = obstacleGrid[y - 1][x] + obstacleGrid[y][x - 1];
        }
    }

    return obstacleGrid[cols - 1][rows - 1];
};

결론

모든 경로를 계산하기 위해 가장 쉬운 방법은 dfs를 이용하는 것이지만, 이는 시간 초과 오류가 발생할 수 있다.

따라서, 특정 위치의 경로를 어떻게 계산하는지 DP형태의 문제로 접근을 해서 해결해야 한다.

LeetCode Longest Substring Without Repeating Characters (JavaScript)

의현 — Thu, 19 Mar 2026 16:14:32 +0900

링크 : https://leetcode.com/problems/longest-substring-without-repeating-characters/description/

문제 설명

Given a string s, find the length of the longest substring without duplicate characters.

Example 1:

Input: s = "abcabcbb"
Output: 3
Explanation: The answer is "abc", with the length of 3. Note that "bca" and "cab" are also correct answers.

Example 2:

Input: s = "bbbbb"
Output: 1
Explanation: The answer is "b", with the length of 1.

Example 3:

Input: s = "pwwkew"
Output: 3
Explanation: The answer is "wke", with the length of 3.
Notice that the answer must be a substring, "pwke" is a subsequence and not a substring.

Constraints:

0 <= s.length <= 5 * 104
s consists of English letters, digits, symbols and spaces.

문제 풀이

접근 방식

포인터를 2개 두어 해당 포인터의 길이 차이를 구하도록 함 (left, right)
두 포인터 안에는 중복되는 문자가 존재하지 않아야 함 -> set 을 통해 관리
- 특정 문자가 없어질 때까지 set 배열에서 제거 (while 문)
현재 위치의 문자를 넣고 길이의 최댓값 계산 (right - left + 1)

/**
 * @param {string} s
 * @return {number}
 */
var lengthOfLongestSubstring = function(s) {
    let answer = 0;
    const str = new Set();
    let left = 0;

    for (let right = 0; right < s.length; right++) {
        while (str.has(s[right])) {
            str.delete(s[left]);
            left++;
        }

        str.add(s[right]);
        answer = Math.max(answer, right - left + 1);
    }

    return answer;
};

결론

O(n)의 시간복잡도로 해결.

중간에 문자열을 자르고 하는 메서드를 사용할 경우 길이가 길어짐에 따라 시간 초과 오류가 발생할 수 있음.

set을 통해 O(1)로 검색을 하도록 했고, for문을 한 번만 탐색해도 최대 길이를 구할 수 있도록 했음

* for문 안에 while문이 있으면 O(n^2)이 아닌가? 아니다.

for문 안에 while문으로 O(n^2)처럼 보일 수 있지만 실제 동작을 보면 다른걸 알 수 있다.

right 포인터 : 문자열을 처음부터 끝까지 한 번만 탐색 (n번)
left 포인터 : while 문 안에서 동작하지만, 전체 과정을 보면 문자열의 각 인덱스를 최대 한 번씩만 탐색함 (n번)
- 즉, 한 번 left가 지나간 자리는 다시 돌아가지 않음 -> O(n^2)이 안되는 이유

따라서 모든 문자는 최대 두 번씩만 처리되기 때문에 연산 횟수는 2n에 비례해서 O(n)의 시간복잡도를 가지게 된다.

LeetCode Median of Two Sorted Arrays (JavaScript), Binary Search, Two Pointer

의현 — Wed, 18 Mar 2026 19:54:43 +0900

링크 : https://leetcode.com/problems/median-of-two-sorted-arrays/description/

문제 설명

Given two sorted arrays nums1 and nums2 of size m and n respectively, return the median of the two sorted arrays.

The overall run time complexity should be O(log (m+n)).

Example 1:

Input: nums1 = [1,3], nums2 = [2]
Output: 2.00000
Explanation: merged array = [1,2,3] and median is 2.

Example 2:

Input: nums1 = [1,2], nums2 = [3,4]
Output: 2.50000
Explanation: merged array = [1,2,3,4] and median is (2 + 3) / 2 = 2.5.

Constraints:

nums1.length == m
nums2.length == n
0 <= m <= 1000
0 <= n <= 1000
1 <= m + n <= 2000
106 <= nums1[i], nums2[i] <= 106

문제 풀이

중앙 값을 구하는 문제로 O(log (m + n))의 시간복잡도로 해결을 해야한다.

결국 일반적인 sort로 접근을 하면 위 시간복잡도로 문제를 해결할 수 없다.

1. Two Pointer 이용 (투 포인터, O(m + n))

조건

두 배열을 합친 길이가 짝수인 경우 중앙 값은 2개를 더한 값으로 구해야 한다.
홀수인 경우 1개의 중앙 값만 존재한다.

접근 방식

prev, curr로 이전 값, 현재 값을 구한다. (짝수 / 홀수를 대비하기 위해)
두 개의 포인터 p1, p2로 각 nums1, nums2의 배열의 index 값을 나타낸다.
모든 배열 탐색하는 것이 아닌 두 배열의 길이의 합의 절반 만큼만 진행
- 각 위치에서 작은 값을 기준으로 포인터 값을 1씩 증가 시켜 나감
최종적으로 중앙 값을 계산
- 전체 길이가 짝수인 경우 (prev + curr) / 2 가 중앙값
- 홀수인 경우 curr이 중앙값 (1개 이므로 2로 나눌 필요 없음)

/**
 * @param {number[]} nums1
 * @param {number[]} nums2
 * @return {number}
 */
var findMedianSortedArrays = function(nums1, nums2) {
    const len1 = nums1.length;
    const len2 = nums2.length;
    const totalLen = len1 + len2

    const mid = Math.floor(totalLen / 2);
    let [prev, curr] = [0, 0];
    let [p1, p2] = [0, 0];
    
    for (let i = 0; i <= mid; i++) {
        prev = curr;

        if (p1 < len1 && (p2 >= len2 || nums1[p1] <= nums2[p2])) {
            curr = nums1[p1];
            p1++;
        } else {
            curr = nums2[p2];
            p2++;
        }
    }

    if (totalLen % 2 === 0) {
        return (prev + curr) / 2;
    } else {
        return curr;
    }
};

2. Binary Search (이분 탐색 이용, O(log(min(m, n)))

변수 정리

part1 : nums1에서 왼쪽으로 보내는 원소 개수
part2 : nums2에서 왼쪽으로 보내는 원소 개수 (총 길이 절반 - part1)
maxLeft1 : nums1 왼쪽 부분의 최댓값
minRight1 : nums1 오른쪽 부분의 최솟값
maxLeft2 : nums2 왼쪽 부분의 최댓값
minRight2 : nums2 오른쪽 부분의 최솟값

핵심 방법

중앙값이란 결국 "전체 원소의 절반은 왼쪽, 절반은 오른쪽"이 되는 경계이다. 이를 이용해 문제를 다르게 바라볼 수 있다.
두 배열 nums1, nums2를 각각 왼쪽/오른쪽으로 나누는 분할점(partition)을 잡고, 아래 두 조건을 만족하면 된다.
- maxLeft1 <= minRight2 (nums1의 왼쪽 최댓값 <= nums2의 오른쪽 최솟값)
- maxLeft2 <= minRight1 (nums2의 왼쪽 최댓값 <= num1의 오른쪽 최솟값)
위 두 조건을 만족하면 두 배열을 합쳐서 정렬했을 때 왼쪽 절반과 오른쪽 절반을 정렬된 상태로 나눌 수 있다.

왜 위와 같은 조건을 만족해야 하나? (보충 설명)

위 문제의 핵심은 정렬된 상태를 만드는게 아니라 분할점을 기준으로 정렬이 된다고 가정을 했을 경우 왼쪽에 오는 값들의 집합 + 오른쪽에 오른 값들의 집합을 구하는 것이 핵심임.

결국 분할점을 기준으로 왼쪽 집합, 오른쪽 집합을 만들었을 때, 왼쪽 집합의 최댓값이 오른쪽 집합의 최솟값보다 작거나 같으면 실제로 정렬하지 않아도 "이 분할은 올바르다"고 확신할 수 있다. 두 조건(maxLeft1 ≤ minRight2, maxLeft2 ≤ minRight1)은 바로 그것을 두 배열에 교차로 검증하는 것이다.

주의 사항

이진 탐색을 긴 배열을 기준으로 하게되면 part2가 음수가 될 수 있으므로, 항상 짧은 배열이 nums1이 되도록 해야한다.
경계값 (-Infinity, Infinity) 처리를 안하게되면 part1 = 0 이거나 part2 = len1일 때 잘못된 index를 참조하게 된다.
part2 계산 시 (len1 + len2 + 1) / 2에서 +1을 안하면 홀수 길이일 때 잘못된 중앙값을 갖게된다.

[ [1, 3, 8] / [7, 9, 10, 11] 의 중앙값 찾는 과정 시각화 ]

중앙값 구하는 방법

홀수 길이인 경우
- 올바른 분할이 완성된 순간 위 예제의 경우 { 1, 3, 7, 8 } | {9, 10, 11} 로 나뉘어진다.
- 즉, 중앙값은 8의 위치한 자리로 왼쪽 집합을 기준 가장 끝 값을 나타낸다.
  - Math.max(maxLeft1, maxLeft2)를 구하면 된다.

짝수 길이인 경우
- 올바른 분할이 완성된 순간 { ... , a } | { b, ... }로 나뉘어지고 중앙 값은 ( a + b ) / 2의 값을 나타낸다.
  - (Math.max(maxLeft1, maxLeft2) + Math.min(minRight1, minRight2)) / 2를 구하면 된다.

/**
 * @param {number[]} nums1
 * @param {number[]} nums2
 * @return {number}
 */
var findMedianSortedArrays = function(nums1, nums2) {
    if (nums1.length > nums2.length) {
        [nums1, nums2] = [nums2, nums1];
    }

    const len1 = nums1.length;
    const len2 = nums2.length;
    let [left, right] = [0, len1];

    while (left <= right) {
        const part1 = Math.floor((left + right) / 2);
        const part2 = Math.floor((len1 + len2 + 1) / 2) - part1;

        const maxLeft1 = part1 === 0 ? -Infinity : nums1[part1 - 1];
        const minRight1 = part1 === len1 ? Infinity : nums1[part1];
        const maxLeft2 = part2 === 0 ? -Infinity : nums2[part2 - 1];
        const minRight2 = part2 === len2 ? Infinity : nums2[part2];

        if (maxLeft1 <= minRight2 && maxLeft2 <= minRight1) {
            if ((len1 + len2) % 2 === 0) {
                return (Math.max(maxLeft1, maxLeft2) + Math.min(minRight1, minRight2)) / 2;
            } else {
                return Math.max(maxLeft1, maxLeft2);
            }
        } else if (maxLeft1 > minRight2) {
            right = part1 - 1;
        } else {
            left = part1 + 1;
        }
    }
};

결론

이 문제의 핵심은 "중앙값을 찾는 문제"를 "올바른 분할점을 찾는 문제"로 재정의한 것이 핵심이다.

문제를 재정의하고 이 문제를 Binary Search를 통해 해결해야 하는 문제로 생각보다 어려운 Binary Search 문제라고 생각이 든다.

최대한 이해하기 쉽게 작성은 했지만 생각보다 이해하기가 어려운 문제인 것 같다.

LeetCode Trapping Rain Water (JavaScript), Two pointer

의현 — Thu, 12 Mar 2026 19:53:31 +0900

링크 : https://leetcode.com/problems/trapping-rain-water/description/

문제 설명

Given n non-negative integers representing an elevation map where the width of each bar is 1, compute how much water it can trap after raining.

Example 1:

Input: height = [0,1,0,2,1,0,1,3,2,1,2,1]
Output: 6
Explanation: The above elevation map (black section) is represented by array [0,1,0,2,1,0,1,3,2,1,2,1]. In this case, 6 units of rain water (blue section) are being trapped.

Example 2:

Input: height = [4,2,0,3,2,5]
Output: 9

Constraints:

n == height.length
1 <= n <= 2 * 104
0 <= height[i] <= 105

문제 풀이

접근 방법 (투 포인터를 이용하여 해결)

맨 왼쪽, 맨 오른쪽의 포인터를 2개 두어 범위를 좁혀 오면서 계산
- 범위를 좁히는 기준 -> 둘 중 더 작은 곳을 이동
해당 위치에서 계산을 하기 위해 leftMax, rightMax를 설정 -> 어떠한 높이 기준으로 계산을 할 건지 필요하기 때문
- 만약 Max 값보다 현재 위치가 더 클 경우 Max값 조정
- 더 작다면 물을 채울 공간이 있다는 의미이므로 계산 (Max값 - 현재 위치의 높이)
- 위치 이동

로직 진행에 따른 변화 (빨강 : 이전, 파랑 : 이후)

/**
 * @param {number[]} height
 * @return {number}
 */
var trap = function(height) {
    let [left, right] = [0, height.length - 1];
    let [leftMax, rightMax] = [0, 0];
    let answer = 0;

    while (left < right) {
        if (height[left] <= height[right]) {
            if (height[left] > leftMax) {
                leftMax = height[left];
            } else {
                answer += leftMax - height[left];
            }
            left++;
        } else {
            if (height[right] > rightMax) {
                rightMax = height[right];
            } else {
                answer += rightMax - height[right];
            }
            right--;
        }
    }

    return answer;
};

결론

해당 문제는 O(n)의 시간 복잡도로 해결할 수 있고, 이를 위해 투 포인터 알고리즘을 활용하여 풀어야 한다.

단순히 left, right의 두 개의 포인터만 이용해서 해결할 수 없고, 각 위치에서 어떠한 기준으로 계산할지에 대한 값이 필요

따라서 왼쪽, 오른쪽 각 Max값을 저장해 특정 위치에서 높이차이를 이용해 계산을 해야함.

[SQLD] SQL 개발자 60회차 후기 (합격) : 공부 방법부터 유용한 사이트 공유까지

의현 — Wed, 11 Mar 2026 17:23:45 +0900

시험 정보 (2026년도)

2026년 SQL 시험 일정

https://www.dataq.or.kr/www/accept/schedule.do#none

데이터자격검정 - 데이터자격시험, DAP, DAsP, SQLP, SQLD, ADP, ADsP.

데이터자격시험, DAP, DAsP, SQLP, SQLD, ADP, ADsP.

www.dataq.or.kr

기본 정보

SQL 개발자 시험은 총 2과목으로 구성

데이터 모델링의 이해
SQL 기본 및 활용

개정된 이후 주관식은 없고 전부 객관식으로 이루어져있는 시험이다.

응시료는 5만원이며, 응시자격 제한은 없다.

1과목 10문제, 2과목 40문제로 총 50문제가 출제되며, 각 문제당 2점씩 총 100점으로 구성되어있다.

60점이상 합격, 각 과목 40% 미만이면 과락이다.

시험 시간은 총 90분이 주어지며, 시험 시작 30분 후 부터 퇴실이 가능.

공부 방법

실무에서도 SQL 관련해서 다룬 경험이 있어 엄청 빡세게 준비하지는 않았다. (개발자 기준으로 보면 좋을 것 같다.)

대략 2주 정도의 시간으로 하루에 2시간 정도씩 공부를 진행했다.

1주는 내용 파악 및 개념 정리
1주는 기출 문제 풀이 및 부족한 개념 정리

먼저 SQLD 관련 나오는 내용을 대략적으로 파악하기 위해 유튜브나 요약된 PDF를 찾아보았다.

[유튜브 채널 추천]

유명한 '홍쌤의 데이터랩' 이라는 채널을 통해 SQLD 1과목, 2과목에 대해 대략적으로 파악했다. (현재는 유료로 바뀌어 모든 내용을 볼 수 없는 것 같음)

비개발자 기준이라면 홍쌤의 데이터랩을 보고 공부를 하는 것이 좋을 것 같다.

https://www.youtube.com/watch?v=FsyBH7NHY-c&list=PLbflMVhwy2jMaJbOd1hvC3UMsmRQX24mo

빠르게 요약을 하고 싶은 경우 'IT의 답을 터득하다, 아답터'라는 채널에서 요약 강의를 보는 것도 좋을 것 같다. (어느정도 내용을 알고 있을 경우 해당 채널이 더 좋을 것 같다 생각함)

https://www.youtube.com/watch?v=Rv4Q4ZrPS94

[ 요약 PDF 추천 ]

여러 요약된 pdf 공유 사이트들이 많지만 아래 사이트에서 공유해준 pdf를 통해 공부를 했다.

https://bruders.tistory.com/173

[SQLD] 2024년 개정 SQLD 합격 후기, SQLD 개정판 개념정리 pdf 공유

[ 목차 ]1. SQLD 시험• 정보• 유의사항• 시험 후기2. 공부 방법• 교재• 추천 강의• 자료 및 웹사이트#. 개념정리 PDF 공유 SQLD 합격을 하게 되어, 준비하는 분들에게 조금이나마 도움이 될까해

bruders.tistory.com

[ 기출 문제 ]

SQL 시험으로 유명한 '노랭이 책'이라는 것을 구매해 문제를 풀었다. 가격은 18,000원이다.

SQLP에 대한 내용 (3과목)도 있어서 책을 구매한다면 1, 2 과목 (대략 180문제?) 정도만 풀어 보면 된다.

책에 대한 해설을 보고 잘 이해가 안된다면 카페를 이용해서 더 자세한 해설을 찾아볼 수 있다.

https://cafe.naver.com/sqlpd

데이터 전문가 포럼 (빅데이터분석기사... : 네이버 카페

빅데이터분석기사, ADP, ADsP, SQLP, SQLD, DAP, DAsP, BIS 자격증 취득 등 데이터 전문가 커뮤니티입니다.

cafe.naver.com

노랭이 책 외에도 https://www.sqld.kr/ 에 접속해서 문제를 풀어 볼 수 있다.

SQLD 문제은행

SQLD 기출문제들과 예상문제들을 마음껏 풀 수 있는 문제은행 사이트

www.sqld.kr

개인적으로는 '이지패스 2026 SQLD SQL 개발자' 라는 책을 구매하면 앱을 통해 모의고사, 기출들을 풀어볼 수 있는데 앱을 활용해서 푸는게 좋았던 것 같다. (책을 사야 인증번호를 알 수 있음)

책 가격은 26,000원이다.

시험 후기

2026.03.07 (토)에 진행된 60회차 SQLD 개발자 시험에 합격을 했다.

난이도는 이전 기출들과 비슷한 난이도로 출제가 된 것 같다. (이전 기출들을 풀었을 때 70~90점 사이의 점수대가 나왔다.)

기출은 직전 2개의 회차인 58, 59회차만 풀었고, 틀린 문제는 간단하게 오답노트 정리를 했다.

노랭이 문제집 만큼의 난이도로는 나오지는 않는다고 생각을 하긴하는데 유사한 문제들이 꽤 있는 것 같아서 노랭이 문제집을 사서 풀어보는게 시험을 준비하는데 도움이 될 것 같다. (60회차 문제를 풀면서 노랭이 문제집에 있는 한 문제가 거의 똑같이 나온 느낌?이 들었다.)

위에서 언급한 요약 pdf, 요약 유튜브 강의, 기출 문제들로 충분히 SQLD 개발자 시험에 합격할 수 있다.

이미 SQL에 대해 어느정도 지식이 있는 사람이라면

요약 pdf 1회독 & 요약 유튜브 시청 -> 직전 기출 2개분 풀이 정도만 해도 충분히 합격할 수 있을 것이라 생각한다.

포트폴리오 SSR에서 ISR로 전환하기

의현 — Tue, 10 Mar 2026 18:55:50 +0900

개요

기존 SSR 형태로 구성되어있던 포트폴리오 웹 사이트를 ISR을 적용한 과정을 정리하고자 한다.

ISR을 적용하려고하는 이유는 메인 페이지에서 프로젝트 카드의 자세히 보기 버튼을 눌렀을 때 상세 페이지로 전환되는 과정이 생각보다 오래 걸렸고, 네트워크 탭을 열어보니 RSC payload 요청이 약 3초 가까이 소요되고 있었다.

기존 SSR 방식은 매번 사용자가 페이지를 요청할 때마다 서버에서 DB에 접근해 데이터를 조회하고, 렌더링해서 응답하기 때문에 오래 걸리는 이슈가 발생했고 이를 개선하고자 한다.

포트폴리오 특성상 각 프로젝트의 내용은 자주 변경되지 않기 때문에 데이터를 매 요청마다 새로 조회하는 건 불필요하다 생각했고, 이를 정적 페이지로 미리 생성해두고 캐시에서 빠르게 제공하는 방식으로 개선하는 것이 목표이다.

SSR vs SSG vs ISR 비교

SSR (Server-Side Rendering)

사용자 요청 → DB 조회 → 렌더링 → 응답 (매 요청마다 반복)

매 요청마다 서버에서 데이터를 새로 조회하고 렌더링한다. 항상 최신 데이터를 제공할 수 있지만, 그만큼 응답이 느리다.

SSG (Static Site Generation)

빌드 시 → DB 조회 → 렌더링 → HTML 저장 (딱 한 번)
사용자 요청 → 저장된 HTML 즉시 반환

빌드 시점에 모든 페이지를 미리 생성해둔다. 응답은 가장 빠르지만, 배포없이는 데이터를 갱신할 수 없다.

ISR (Incremental Static Regeneration)

빌드 시 → DB 조회 → 렌더링 → HTML 저장
사용자 요청 → 캐시 반환 ⚡
(설정한 시간 경과 후)
사용자 요청 → 캐시 반환 ⚡ + 백그라운드에서 페이지 재생성
재생성 완료 → 이후 요청부터 새 HTML 반환

SSG의 빠른 응답 속도를 유지하면서, 주기적으로 페이지를 재생성해 데이터를 갱신할 수 있다.

SSR과 SSG의 장점을 결합한 방식으로 포트폴리오처럼 데이터가 자주 바뀌지는 않지만, 재배포 없이도 변경사항이 반영되어야 하는 경우 ISR이 적합하다.

적용 방법

1. 페이지 레벨 revalidate 설정

Next.js App Router에서 ISR을 적용하는 가장 간단한 방법은 `page.tsx`에 `revalidate`를 export하는 방법이 있다.

// app/page.tsx
export const revalidate = 86400; // 24시간(초 단위)

동작 방식

Next.js는 빌드(`next build`) 시점에 `revalidate` 값이 설정된 페이지를 감지해 정적 HTML로 미리 생성해둔다.

이후 사용자가 해당 페이지에 접근하면 미리 만들어진 HTML을 즉시 반환하고, 설정한 시간이 지난 후 다음 요청이 들어오면 백그라운드에서 페이지를 재생성한다. 재생성이 완료되면 다음 방문자부터 새로 생성된 HTML을 받게 된다.

`revalidate` 값은 페이지 단위로 동작하기 때문에, 해당 페이지 내 하위 컴포넌트에서 데이터를 fetch 하더라도 `page.tsx`의 설정이 전체에 적용된다.

적용한 부분

// app/page.tsx - 메인 페이지
export const revalidate = 86400;

// app/[slug]/page.tsx - 프로젝트 상세 직접 접근
export const revalidate = 86400;

// app/@modal/(.).[slug]/page.tsx - 모달로 열릴 때
export const revalidate = 86400;

2. Prisma 함수 캐싱 - unstable_cache

1번의 설정만 할 경우 ISR이 제대로 동작하지 않는 문제가 발생한다.

Next.j의 `revalidate`는 `fetch` API 기반의 캐싱과 연동되는데, Prisma는 자체 DB 커넥션을 사용하기 때문에 Next.js의 fetch 캐싱이 적용되지 않는다.

결국, 페이지 레벨의 `revalidate`는 페이지 전체 HTML을 캐싱하지만, 페이지 내에서 동적으로 데이터를 조회하는 함수는 별도로 캐싱해줘야 한다.

이를 위해 Next.js에서 제공하는 `unstable_cache`를 사용했다.

기존 데이터 조회 코드 (`lib/projects.ts`)

import prisma from "@/lib/prisma";

export async function getProjectBySlug(slug: string) {
  try {
    const project = await prisma.project.findUnique({
      where: { slug },
      include: {
        info: true,
        tasks: { orderBy: { id: "asc" } },
      },
    });
    return project;
  } catch (error) {
    console.error("프로젝트를 찾을 수 없습니다:", error);
    return null;
  }
}

변경 후 코드

import { unstable_cache } from "next/cache";
import prisma from "@/lib/prisma";

export const getProjectBySlug = unstable_cache(
  async (slug: string) => {
    try {
      const project = await prisma.project.findUnique({
        where: { slug },
        include: {
          info: true,
          tasks: { orderBy: { id: "asc" } },
        },
      });
      return project;
    } catch (error) {
      console.error("프로젝트를 찾을 수 없습니다:", error);
      return null;
    }
  },
  ["project-by-slug"], // 캐시 키
  { revalidate: 86400 } // 24시간 캐싱
);

`unstable_cache`는 세 가지 인자를 받는다.

첫 번째 인자 : 캐싱할 함수. 기존 로직 그대로 작성
두 번째 인자 : 캐시 키. 해당 캐시를 식별하는 고유한 이름
- 추후 `revalidateTag("project-by-slug")`로 특정 캐시만 즉시 무효화할 때 사용한다.
세 번째 인자 : 캐시 옵션. `revalidate` 값으로 캐시 유효 시간을 초 단위로 설정
- 변경 빈도가 낮은 포트폴리오 특성 상 유효 시간 기준을 하루(86400)으로 설정하였다.

3. DB 데이터 수정 즉시 반영이 필요할 경우 (참고)

만약 데이터 수정 즉시 반영이 필요하다면 On-demand Revalidateion을 사용할 수 있다.

// app/api/revalidate/route.ts
import { revalidatePath, revalidateTag } from "next/cache";

export async function POST(req: Request) {
  revalidateTag("project-by-slug"); // 특정 캐시만 무효화
  revalidatePath("/"); // 특정 경로 무효화
  return Response.json({ revalidated: true });
}

DB 수정 후 이 API를 호출하면 캐시가 즉시 무효화되고, 다음 요청 시 새로운 데이터로 페이지가 재생성된다.

적용 결과

(티스토리 동영상 패치로인해.. 파일로 업로드 -> 추후 바로 재생가능하다면 변경할 예정)

데이터 fetch 하는 시간이 200 ~ 300ms 로 단축된 것을 확인할 수 있다.

fetch 시간 확인

Vercel 배포 오류(CVE-2025-55182, CVE-2025-66478) 및 해결 방안

의현 — Tue, 10 Mar 2026 18:05:09 +0900

2025년 12월 초에 React, Next.js 관련 취약점이 발견되었다.

https://www.youtube.com/watch?v=7YWRDRjz4jU

이로인해 오류가 발생하는 버전으로 Vercel에서 배포를 할 경우 다음과 같은 빌드 오류가 발생했다.

오류 메시지를 간단하게 살펴보면 불안정한 버전 사용으로 Vercel에서 배포를 막고있는 것

Vercel 오류 메시지
Error: Vulnerable version of Next.js detected, please update immediately. Learn More:
https://vercel.link/CVE-2025-66478

React2Shell Security Bulletin | Vercel Knowledge Base

CVE-2025-55182 is a critical vulnerability in React, Next.js, and other frameworks that requires immediate action

vercel.com

위 문제점들로 인해 발생할 수 있는 문제점을 간단하게 정리해보면 다음 그림과 같이 볼 수 있다.

보안 취약점으로 인해 발생할 수 있는 문제 상황

문제가 발생하는 버전 확인

해결 방안

문제가 발생하는 React, Next.js 버전을 업데이트를 해주어야 한다.

다음 명령을 통해 최신 보안 패치가 된 버전으로 올려 다시 배포를 해주면 이후 정상적인 배포가 가능하다.

// next, react, react-dom 을 최신 버전으로 업데이트
npm install next@latest react@latest react-dom@latest

// 문제가 해결된 버전 이용 (next)
npm fix-react2shell-next

LeetCode Repeated DNA Sequences (JavaScript), Sliding window

의현 — Fri, 6 Mar 2026 18:15:51 +0900

링크 : https://leetcode.com/problems/repeated-dna-sequences/description/

문제 설명

The DNA sequence is composed of a series of nucleotides abbreviated as 'A', 'C', 'G', and 'T'.

For example, "ACGAATTCCG" is a DNA sequence.

When studying DNA, it is useful to identify repeated sequences within the DNA.

Given a string s that represents a DNA sequence, return all the 10-letter-long sequences (substrings) that occur more than once in a DNA molecule. You may return the answer in any order.

Example 1:

Input: s = "AAAAACCCCCAAAAACCCCCCAAAAAGGGTTT"
Output: ["AAAAACCCCC","CCCCCAAAAA"]

Example 2:

Input: s = "AAAAAAAAAAAAA"
Output: ["AAAAAAAAAA"]

Constraints:

1 <= s.length <= 105
s[i] is either 'A', 'C', 'G', or 'T'.

문제 풀이

10글자의 문자열이 전체 문자열에 2번이상 나오는 문자열을 구하는 문제

접근 방식

(슬라이딩 윈도우 기법을 활용하여 풀이 -> 해당 문제에서는 간단한게 하기위해 substring 메서드를 이용)

2개의 set 배열 선언
- 한 번 등장할 경우 저장할 배열, 두 번 이상 등장할 경우 저장할 배열
현재 index를 기준으로 10개의 문자열을 만듦(substring활용)
해당 문자열이 한 번 등장 했다면 tmp에 저장
- tmp에 이미 있다면 2번 이상 등장한 문자열이므로 repeat 배열에 저장
최종적으로 repeat에 저장된 문자열이 위 문제의 조건을 만족하는 문자열임.
- 리턴 값은 배열형태이기 때문에 ... 연산을 이용해 set -> array로 변환

/**
 * @param {string} s
 * @return {string[]}
 */
var findRepeatedDnaSequences = function(s) {
    const tmp = new Set();
    const repeat = new Set();

    for (let i = 0; i <= s.length - 10; i++) {
        const target = s.substring(i, i + 10);

        if (tmp.has(target)) {
            repeat.add(target);
        } else {
            tmp.add(target);            
        }
    }

    return [...repeat];
};

결론

두 번 이상 등장 이라는 조건을 쉽게 파악하기 위해 set 배열을 두개 만들어 관리하는 방식이 이 문제의 핵심

LeetCode Restore IP Addresses (JavaScript), DFS

의현 — Thu, 5 Mar 2026 18:15:34 +0900

링크 : https://leetcode.com/problems/restore-ip-addresses/description/

문제 설명

A valid IP address consists of exactly four integers separated by single dots. Each integer is between 0 and 255 (inclusive) and cannot have leading zeros.

For example, "0.1.2.201" and "192.168.1.1" are valid IP addresses, but "0.011.255.245", "192.168.1.312" and "192.168@1.1" are invalid IP addresses.

Given a string s containing only digits, return all possible valid IP addresses that can be formed by inserting dots into s. You are not allowed to reorder or remove any digits in s. You may return the valid IP addresses in any order.

Example 1:

Input: s = "25525511135"
Output: ["255.255.11.135","255.255.111.35"]

Example 2:

Input: s = "0000"
Output: ["0.0.0.0"]

Example 3:

Input: s = "101023"
Output: ["1.0.10.23","1.0.102.3","10.1.0.23","10.10.2.3","101.0.2.3"]

Constraints:

1 <= s.length <= 20
s consists of digits only.

문제 풀이

접근 방식

dfs 함수 인자
- ip : 현재 저장된 ip 문자열
- index : 현재 검사할 s의 index
- part : .의 갯수 (총 4개의 파트로 구성됨)
dfs 로직
1. part가 4인 경우 4개의 파트로 ip 구성이 되었으므로 index가 LENGTH와 같다면 answer에 추가 (맞는 ip)
2. ip를 만들 수 있는 경우의 수 (최대 3개)
  1. 현재 index를 기준으로 최대 3개까지 설정 가능
    - 2글자 이상인 경우 시작이 0이 아니여야 함
    - 0 ~ 255 사이의 숫자 값으로 되어 있어야 함
  2. 다음 ip를 넘겨줄 때 첫 번째 part(맨 앞 부분의 숫자)가 아니라면 . 을 추가해 ip로 넘겨줌

/**
 * @param {string} s
 * @return {string[]}
 */
var restoreIpAddresses = function(s) {
    const LENGTH = s.length;
    const answer = [];

    const dfs = (ip, index, part) => {
        if (part === 4) {
            if (index === LENGTH) {
                answer.push(ip);
            }
            return;
        }

        for (let len = 1; len <= 3; len++) {
            const nextIndex = index + len;
            if (nextIndex > LENGTH) break;

            const word = s.slice(index, nextIndex);

            if (word.length > 1 && word[0] === '0') continue;
            if (parseInt(word) > 255) continue;

            const nextIp = part === 0 ? word : `${ip}.${word}`;
            dfs(nextIp, nextIndex, part + 1);
        }
    }

    dfs('', 0, 0);

    return answer;
};

결론

part를 사용한 부분이 문제를 좀 더 쉽게 해결할 수 있는 방법 중 하나라고 생각한다.

문제는 DFS로 접근해 해결

LeetCode Sudoku (JavaScript), Backtracking

의현 — Thu, 5 Mar 2026 17:38:30 +0900

링크 : https://leetcode.com/problems/sudoku-solver/description/

문제 설명

Write a program to solve a Sudoku puzzle by filling the empty cells.

A sudoku solution must satisfy all of the following rules:

Each of the digits 1-9 must occur exactly once in each row.
Each of the digits 1-9 must occur exactly once in each column.
Each of the digits 1-9 must occur exactly once in each of the 9 3x3 sub-boxes of the grid.

The '.' character indicates empty cells.

Example 1:

Input: board = [["5","3",".",".","7",".",".",".","."],["6",".",".","1","9","5",".",".","."],[".","9","8",".",".",".",".","6","."],["8",".",".",".","6",".",".",".","3"],["4",".",".","8",".","3",".",".","1"],["7",".",".",".","2",".",".",".","6"],[".","6",".",".",".",".","2","8","."],[".",".",".","4","1","9",".",".","5"],[".",".",".",".","8",".",".","7","9"]]
Output: [["5","3","4","6","7","8","9","1","2"],["6","7","2","1","9","5","3","4","8"],["1","9","8","3","4","2","5","6","7"],["8","5","9","7","6","1","4","2","3"],["4","2","6","8","5","3","7","9","1"],["7","1","3","9","2","4","8","5","6"],["9","6","1","5","3","7","2","8","4"],["2","8","7","4","1","9","6","3","5"],["3","4","5","2","8","6","1","7","9"]]
Explanation: The input board is shown above and the only valid solution is shown below:

Constraints:

board.length == 9
board[i].length == 9
board[i][j] is a digit or '.'.
It is guaranteed that the input board has only one solution.

문제 풀이

접근 방식

각 행, 열, 박스 내부에 1~9 숫자가 있는지 판단하기 위해 2차원 배열 선언 (각 자리 숫자가 쓰였는지 판단하기 위해)
- 좌표에 따른 박스(squares)의 특정 위치 계산하는 법은 다음과 같음
  - (x, y) -> (x/9) * 3 + (y/9)
  - x를 9로 나눈 몫에 3을 곱한 값 + y를 9로 나눈 몫
입력된 board를 토대로 rows, cols, squares 정보를 채워 넣음
Backtracking을 통해 board를 채워나감

Backtracking 로직

n (0 ~ 81)을 기준으로 재귀를 돎
n 값을 기준으로 좌표 구하는 법
- n / 9 = x좌표
- n % 9 = y좌표
특정 좌표가 '.'일 때 1~9사이의 숫자를 하나 씩 대입하면서 board를 채워나감.
- 주의 사항 (return 값)
  - board를 채워나가는 solution 함수를 단순히 재귀만 돌렸을 경우 재귀가 끝나고 백트래킹 로직에 의해 모든 곳이 '.'로 초기화 되기 때문에 제대로 구해지지 않음
  - 따라서, 재귀를 진행하는 과정에서 true를 리턴한다면 롤백 시키지 않도록 조건을 설정해줘야 함
    - `if (solution(index + 1)) { return true ; }` 부분

/**
 * @param {character[][]} board
 * @return {void} Do not return anything, modify board in-place instead.
 */
var solveSudoku = function(board) {
    const LENGTH = 9;
    // 각 행에 대한 정보
    const rows = Array.from({ length: LENGTH }, () => Array(LENGTH).fill(false));
    // 각 열에 대한 정보
    const cols = Array.from({ length: LENGTH }, () => Array(LENGTH).fill(false));
    // 특정 board 3 x 3 에 대한 정보
    const squares = Array.from({ length: LENGTH }, () => Array(LENGTH).fill(false));

    // 입력된 정보를 토대로 rows, cols, squares 정보 채우기
    for (let i = 0; i < LENGTH; i++) {
        for (let j = 0; j < LENGTH; j++) {
            if (board[i][j] !== '.') {
                const target = parseInt(board[i][j]);
                rows[i][target] = true;
                cols[j][target] = true;
                squares[Math.floor(j / 3) * 3 + Math.floor(i / 3)][target] = true;
            }       
        }
    }

    const solution = (index) => {
        if (index === 81) {
            return true;
        }

        const x = Math.floor(index / LENGTH);
        const y = index % LENGTH;

        if (board[y][x] === '.') {
            for (let i = 1; i <= LENGTH; i++) {
                const s_id = Math.floor(x / 3) * 3 + Math.floor(y / 3);
                if (!rows[y][i] && !cols[x][i] && !squares[s_id][i]) {
                    rows[y][i] = cols[x][i] = squares[s_id][i] = true;
                    board[y][x] = i.toString();

                    if (solution(index + 1)) {
                        return true;
                    };

                    rows[y][i] = cols[x][i] = squares[s_id][i] = false;
                    board[y][x] = '.';
                }
            }
        } else {
            return solution(index + 1);
        }

        return false;
    }

    solution(0);
};

결론

재귀를 돌면서 리턴을 하는 과정에서 백트래킹에 의해 롤백되는 부분의 로직을 처리하는 것이 중요
특정 좌표를 어떻게 관리할지 -> rows, cols, squares 각각 2차원 배열로 관리
n (0 ~ 81)의 값을 토대로 x, y 좌표 구하는 법
- x 좌표 : n / 9
- y 좌표 : n % 9
x, y 좌표를 통해 특정 squares의 위치(0~8)를 구하는 법
- (x / 9) * 3 + (y / 9)

LeetCode Combinations (JavaScript), Backtracking

의현 — Thu, 5 Mar 2026 15:56:41 +0900

링크 : https://leetcode.com/problems/combinations/description/

문제 설명

Given two integers n and k, return all possible combinations of k numbers chosen from the range [1, n].

You may return the answer in any order.

Example 1:

Input: n = 4, k = 2
Output: [[1,2],[1,3],[1,4],[2,3],[2,4],[3,4]]
Explanation: There are 4 choose 2 = 6 total combinations.
Note that combinations are unordered, i.e., [1,2] and [2,1] are considered to be the same combination.

Example 2:

Input: n = 1, k = 1
Output: [[1]]
Explanation: There is 1 choose 1 = 1 total combination.

Constraints:

1 <= n <= 20
1 <= k <= n

문제 풀이

1. 일반 DFS를 통한 풀이

/**
 * @param {number} n
 * @param {number} k
 * @return {number[][]}
 */
var combine = function(n, k) {
    const answer = [];

    const findNums = (arr) => {
        if (arr.length === k) {
            answer.push(arr);
            return;
        }

        for (let i = arr[arr.length - 1] + 1; i <= n; i++) {
            findNums([...arr, i]);
        }
    }

    for (let i = 1; i <= n; i++) {
        findNums([i]);
    }

    return answer;
};

2. Backtracking을 통한 풀이

일반 DFS를 통한 풀이에서 findNums를 하는 과정에서 arr을 계속해서 복제하는 로직으로 매번 새로운 배열을 생성 -> 배열을 복사하는 과정이 O(n)의 시간복잡도를 가지기 때문에 이를 좀 더 효율적으로 만들기 위해 Backtracking을 사용

접근 방식

- Backtracking을 이용하여 매번 배열을 생성하지 않고 하나의 배열을 통해 답을 구하도록 함.

- 따라서 배열을 생성하는 부분이 없으므로 시간복잡도 측면에서 더 효율적임.

/**
 * @param {number} n
 * @param {number} k
 * @return {number[][]}
 */
var combine = function(n, k) {
    const answer = [];
    const comb = [];

    const backtracking = (index) => {
        if (comb.length === k) {
            answer.push([...comb]);
            return;
        }

        for (let i = index; i <= n; i++) {
            comb.push(i);
            backtracking(i + 1);
            comb.pop();
        }
    }

    backtracking(1);

    return answer;
};

결론

일반 dfs를 좀 더 효율적으로 만들 수 있는 방식도 고민하면 좋을 것 같다.

LeetCode Gas Station (JavaScript), Greedy

의현 — Wed, 4 Mar 2026 20:40:38 +0900

링크 :

문제 설명

문제

내용

입력

내용

출력

내용

문제 풀이

1. (시간초과) 특정 index를 기준으로 순환이 가능한 구조인지 판단하는 로직을 통해 검사 -> 값이 많아지게되면 시간초과 오류가 발생

/**
 * @param {number[]} gas
 * @param {number[]} cost
 * @return {number}
 */
var canCompleteCircuit = function(gas, cost) {
    let answer = -1;

    const calCost = (index) => {
        let tank = gas[index];

        for (let i = index + 1; i < gas.length; i++) {
            if (tank - cost[i - 1] < 0) {
                return -1;
            }
            tank = tank - cost[i - 1] + gas[i];
        }

        for (let i = 0; i <= index; i++) {
            let tmp = 0;
            if (i === 0) {
                tmp = tank - cost[gas.length - 1];
            } else {
                tmp = tank - cost[i - 1];
            }

            if (tmp < 0) {
                return -1;
            }
            tank = tmp + gas[i];
        }

        return index;
    }

    for (let i = 0; i < gas.length; i++) {
        answer = calCost(i);
        if (answer !== -1) {
            return answer;
        }
    }

    return answer;
};

2. 로직 개선 (그리디)

모든 가스의 합이 모든 이동 비용의 합보다 크거나 같다면, 반드시 완주할 수 있는 시작점이 최소 1개는 존재한다.
0부터 검사하다가 중간에 실패하면 그 사이의 값은 전부 불가능한 값이다.
- A 지점에서 출발 -> B 지점에서 가스가 모자라서 멈춘다면 (tank < 0)
  - A와 B 사이의 어떤 지점에서 출발해도 B를 넘길 수 없다.
  - 따라서, B지점에서 실패한다면 그 다음 후보지인 B + 1로 가서 검사를 시작

e.g)

gas = [1, 2, 3, 4, 5], cost = [3, 4, 5, 1, 2]

시작점(0번 인덱스)에서 출발:
- gas[0] - cost[0] = 1 - 3 = -2.
- 0보다 작기 때문에 탈락
- 다음 시작점은 1번으로. (currentTank는 0으로 초기화)
1번 인덱스에서 출발:
- gas[1] - cost[1] = 2 - 4 = -2.
- 0보다 작기 때문에 탈락
- 다음 시작점은 2번으로.
3번 인덱스(가스 4, 비용 1)에서 출발:
- gas[3] - cost[3] = 4 - 1 = 3. (현재 currentTank = 3)
- 다음 칸: gas[4] - cost[4] = 5 - 2 = 3. (현재 currentTank = 6)
- 배열 끝까지 검사할 경우 일단 후보자는 3번.
마지막 확인:
- 총 누적 값인 totalTank가 0 이상인지 확인합니다.
- 0 이상이면 이전에 찾았던 후보자가 정답
- 아니라면 -1

Q. index 3번에서 출발했는데 왜 한 바퀴를 다시 안 돌아도 되는지?

처음에 언급했던 전체 가스 >= 전체 비용 조건이 만족된다면 최소 하나의 경로가 존재한다라는 조건이 만족한다면,
3번에서 출발해서 끝까지 도착했을 때 남은 가스(currentTank)가, 앞에서 모자랐던 가스들을 충분히 채울 수 있다는게 보장이 된다.
결국, totalTank가 0보다 크다는 것은 순환이 가능하다는 의미이고 이때 구했던 index를 리턴해주면 된다.

/**
 * @param {number[]} gas
 * @param {number[]} cost
 * @return {number}
 */
var canCompleteCircuit = function(gas, cost) {
    let index = 0;
    let totalTank = 0;
    let currentTank = 0;

    for (let i = 0; i < gas.length; i++) {
        const diff = gas[i] - cost[i];
        totalTank += diff;
        currentTank += diff;

        if (currentTank < 0) {
            index = i + 1;
            currentTank = 0;
        }
    }

    return totalTank >= 0 ? index : -1;
};

결론

그리디 문제이지만 최적화를 통해 시간 복잡도를 줄일 수 있는 방안을 찾아야 함.

LeetCode Find Minimum in Rotated Sorted Array (JavaScript), Binary Search

의현 — Wed, 4 Mar 2026 19:53:03 +0900

링크 : https://leetcode.com/problems/find-minimum-in-rotated-sorted-array/description/

문제 설명

Suppose an array of length n sorted in ascending order is rotated between 1 and n times. For example, the array nums = [0,1,2,4,5,6,7] might become:

[4,5,6,7,0,1,2] if it was rotated 4 times.
[0,1,2,4,5,6,7] if it was rotated 7 times.

Notice that rotating an array [a[0], a[1], a[2], ..., a[n-1]] 1 time results in the array [a[n-1], a[0], a[1], a[2], ..., a[n-2]].

Given the sorted rotated array nums of unique elements, return the minimum element of this array.

You must write an algorithm that runs in O(log n) time.

Example 1:

Input: nums = [3,4,5,1,2]
Output: 1
Explanation: The original array was [1,2,3,4,5] rotated 3 times.

Example 2:

Input: nums = [4,5,6,7,0,1,2]
Output: 0
Explanation: The original array was [0,1,2,4,5,6,7] and it was rotated 4 times.

Example 3:

Input: nums = [11,13,15,17]
Output: 11
Explanation: The original array was [11,13,15,17] and it was rotated 4 times.

Constraints:

n == nums.length
1 <= n <= 5000
5000 <= nums[i] <= 5000
All the integers of nums are unique.
nums is sorted and rotated between 1 and n times.

문제 풀이

접근 방식

정렬되지 않은 배열에서 최소 값을 구하기위해 Binary Search를 이용 (O(log n)으로 해결해야 하므로 일반적인 알고리즘은 시간 초과)
현재 mid값을 기준으로 left, right를 어떻게 움직일 것인가?
- mid 값보다 right값이 더 작다면 -> 더 작은 숫자가 우측에 있음 -> left 값을 mid + 1로 변경
- mid 값 < right 값 이라면 -> 좌측에 존재 -> right 값을 mid - 1로 변경

/**
 * @param {number[]} nums
 * @return {number}
 */
var findMin = function(nums) {
    let answer = Infinity;

    let [left, right] = [0, nums.length - 1];

    while (left <= right) {
        const mid = Math.floor((left + right) / 2);
        answer = Math.min(answer, nums[mid]);

        if (nums[mid] > nums[right]) {
            left = mid + 1;
        } else {
            right = mid - 1;
        }
    }

    return answer;
};

결론

left, right 값을 조정하기위해 어떤 값(mid)을 기준으로 할 것인지 판단하고,

그 값을 기준으로 left, right를 어떻게 이동할 건지를 생각해야 하는 문제

LeetCode Search a 2D Matrix (JavaScript), Binary Search

의현 — Wed, 4 Mar 2026 19:25:54 +0900

링크 : https://leetcode.com/problems/search-a-2d-matrix/description/

문제 설명

You are given an m x n integer matrix matrix with the following two properties:

Each row is sorted in non-decreasing order.
The first integer of each row is greater than the last integer of the previous row.

Given an integer target, return true if target is in matrix or false otherwise.

You must write a solution in O(log(m * n)) time complexity.

Example 1:

Input: matrix = [[1,3,5,7],[10,11,16,20],[23,30,34,60]], target = 3
Output: true

Example 2:

Input: matrix = [[1,3,5,7],[10,11,16,20],[23,30,34,60]], target = 13
Output: false

Constraints:

m == matrix.length
n == matrix[i].length
1 <= m, n <= 100
104 <= matrix[i][j], target <= 104

문제 풀이

접근 방식

target이 어떤 행에 속해있는지 구하기 (index)
문제에 포함 여부를 판단하는 시간 복잡도가 O(log(m * n))의 시간 복잡도를 가져야 함 -> 일반적인 탐색으로는 불가 -> Binary Search 이용

/**
 * @param {number[][]} matrix
 * @param {number} target
 * @return {boolean}
 */
var searchMatrix = function(matrix, target) {
    let index = -1;
    for (let i = 0; i < matrix.length; i++) {
        if (matrix[i][0] <= target && target <= matrix[i][matrix[0].length - 1]) {
            index = i;
            break;
        }
    }

    if (index === -1) {
        return false;
    }

    if (index !== -1 && matrix[index].length === 1) {
        return true;
    }

    let [left, right] = [0, matrix[0].length - 1];

    while (left <= right) {
        const mid = Math.floor((left + right) / 2);
        if (matrix[index][mid] === target) {
            return true;
        }

        if (target < matrix[index][mid]) {
            right = mid - 1;
        } else {
            left = mid + 1;
        }
    }

    return false;
};

결론

주어진 O(log(m * n))의 시간 복잡도로 해결하기 위해 이분탐색을 이용하여 특정 숫자를 찾는 문제.

프로그래머스 아이템 줍기 (JavaScript), BFS

의현 — Wed, 4 Mar 2026 18:49:24 +0900

링크 : https://school.programmers.co.kr/learn/courses/30/lessons/87694#

문제 설명

다음과 같은 다각형 모양 지형에서 캐릭터가 아이템을 줍기 위해 이동하려 합니다.

지형은 각 변이 x축, y축과 평행한 직사각형이 겹쳐진 형태로 표현하며, 캐릭터는 이 다각형의 둘레(굵은 선)를 따라서 이동합니다.

만약 직사각형을 겹친 후 다음과 같이 중앙에 빈 공간이 생기는 경우, 다각형의 가장 바깥쪽 테두리가 캐릭터의 이동 경로가 됩니다.

단, 서로 다른 두 직사각형의 x축 좌표 또는 y축 좌표가 같은 경우는 없습니다.

즉, 위 그림처럼 서로 다른 두 직사각형이 꼭짓점에서 만나거나, 변이 겹치는 경우 등은 없습니다.

다음 그림과 같이 지형이 2개 이상으로 분리된 경우도 없습니다.

한 직사각형이 다른 직사각형 안에 완전히 포함되는 경우 또한 없습니다.

지형을 나타내는 직사각형이 담긴 2차원 배열 rectangle, 초기 캐릭터의 위치 characterX, characterY, 아이템의 위치 itemX, itemY가 solution 함수의 매개변수로 주어질 때, 캐릭터가 아이템을 줍기 위해 이동해야 하는 가장 짧은 거리를 return 하도록 solution 함수를 완성해주세요.

제한사항

rectangle의 세로(행) 길이는 1 이상 4 이하입니다.
rectangle의 원소는 각 직사각형의 [좌측 하단 x, 좌측 하단 y, 우측 상단 x, 우측 상단 y] 좌표 형태입니다.
- 직사각형을 나타내는 모든 좌표값은 1 이상 50 이하인 자연수입니다.
- 서로 다른 두 직사각형의 x축 좌표, 혹은 y축 좌표가 같은 경우는 없습니다.
- 문제에 주어진 조건에 맞는 직사각형만 입력으로 주어집니다.
charcterX, charcterY는 1 이상 50 이하인 자연수입니다.
- 지형을 나타내는 다각형 테두리 위의 한 점이 주어집니다.
itemX, itemY는 1 이상 50 이하인 자연수입니다.
- 지형을 나타내는 다각형 테두리 위의 한 점이 주어집니다.
캐릭터와 아이템의 처음 위치가 같은 경우는 없습니다.

전체 배점의 50%는 직사각형이 1개인 경우입니다.
전체 배점의 25%는 직사각형이 2개인 경우입니다.
전체 배점의 25%는 직사각형이 3개 또는 4개인 경우입니다.

입출력 예

rectangle characterX characterY itemX itemY result

[[1,1,7,4],[3,2,5,5],[4,3,6,9],[2,6,8,8]]	1	3	7	8	17
[[1,1,8,4],[2,2,4,9],[3,6,9,8],[6,3,7,7]]	9	7	6	1	11
[[1,1,5,7]]	1	1	4	7	9
[[2,1,7,5],[6,4,10,10]]	3	1	7	10	15
[[2,2,5,5],[1,3,6,4],[3,1,4,6]]	1	4	6	3	10

입출력 예 설명

입출력 예 #1

캐릭터 위치는 (1, 3)이며, 아이템 위치는 (7, 8)입니다. 위 그림과 같이 굵은 선을 따라 이동하는 경로가 가장 짧습니다.

입출력 예 #2

캐릭터 위치는 (9, 7)이며, 아이템 위치는 (6, 1)입니다. 위 그림과 같이 굵은 선을 따라 이동하는 경로가 가장 짧습니다.

입출력 예 #3

캐릭터 위치는 (1, 1)이며, 아이템 위치는 (4, 7)입니다. 위 그림과 같이 굵은 선을 따라 이동하는 경로가 가장 짧습니다.

입출력 예 #4, #5 설명 생략

문제 풀이

사각형이 주어질 때 외각으로 캐릭터의 위치에서 아이템의 위치의 최단거리를 구하는 문제.

접근 방식

라인 정보를 그릴 배열 선언 (최대 길이가 50이므로 51인 배열 생성)
주어진 사각형 정보를 토대로 외각 라인만 그림
모든 사각형의 라인을 그리고 내부에 포함(겹쳐진)되는 부분을 제거
캐릭터의 위치에서 아이템의 위치의 최단거리 구하기 (BFS)

위의 방식대로 구현할 경우 문제가 생김 -> 바로 배열의 길이를 51로 선언한 부분에서 로직의 오류가 발생함.

e.g.) [[2,2,5,5], [1,3,6,4], [3,1,4,6]] 을 좌표로 그릴 경우 다음과 같이 그릴 수 있음

빨간좌표 (1,4) -> (7,3)으로 가는 최단거리를 구하는 과정에서 문제가 발생

보라색 위치(3,5)에서 다음 길을 선택할 때 우측(4,5)으로 가는 길도 가능한 걸로 판단하여 최단거리가 제대로 구해지지 않는 문제가 발생함 .

이러한 문제를 해결하기 위해 모든 좌표를 * 2하여 문제를 해결 (거리를 2배로 늘릴 경우 위에서 언급했던 문제들이 발생하지 않음.)

즉, 좌표상의 문제는 없지만 가는 경로상의 잘못된 판단을 없애기 위해 길이를 2배로 늘려 검사하도록 함.

function solution(rectangle, characterX, characterY, itemX, itemY) {
    const map = Array.from({length: 102}, () => Array.from({length: 102}, () => false));
    const visited = Array.from({length: 102}, () => Array.from({length: 102}, () => false));
    
    // 사격형 그리기 (외부 라인)
    for (const [lx, ly, rx, ry] of rectangle) {
        // 가로 선 연결
        for (let row = lx * 2; row <= rx * 2; row++) {
            map[ly * 2][row] = true;
            map[ry * 2][row] = true;
        }
        
        // 세로 선 연결
        for (let col = ly * 2; col <= ry * 2; col++) {
            map[col][lx * 2] = true;
            map[col][rx * 2] = true;
        }
    }
    
    // 겹치는 부분 제거
    for (const [lx, ly, rx, ry] of rectangle) {
        for (let col = ly * 2 + 1; col < ry * 2; col++) {
            for (let row = lx * 2 + 1; row < rx * 2; row++) {
                map[col][row] = false;
            }
        }
    }
    
    // 탐색
    const queue = [[characterX * 2, characterY * 2, 0]];
    visited[characterY * 2][characterX * 2] = true;
    const d = [[-1, 0], [1, 0], [0, -1], [0, 1]];
    
    while (queue.length > 0) {
        const [cx, cy, cnt] = queue.shift();
        
        if (cx === itemX * 2 && cy === itemY * 2) {
            return cnt / 2;
        }
        
        for (let i = 0; i < d.length; i++) {
            const mx = cx + d[i][0];
            const my = cy + d[i][1];
            
            if (mx > 0 && mx < 102 && my > 0 && my < 102 &&
               map[my][mx] && !visited[my][mx]) {
                queue.push([mx, my, cnt + 1]);
                visited[my][mx] = true;
            }
        }
    }
    
    return -1;
}

결론

최단거리를 구하는 과정에서 길이를 *2하여 잘못된 경로로 가지 않도록 하는 것이 정답을 맞출 수 있는 핵심인 것 같음.

프로그래머스 다리를 지나는 트럭 (JavaScript), (stack/queue)

의현 — Tue, 3 Mar 2026 19:45:46 +0900

링크 : https://school.programmers.co.kr/learn/courses/30/lessons/42583

문제 설명

트럭 여러 대가 강을 가로지르는 일차선 다리를 정해진 순으로 건너려 합니다. 모든 트럭이 다리를 건너려면 최소 몇 초가 걸리는지 알아내야 합니다. 다리에는 트럭이 최대 bridge_length대 올라갈 수 있으며, 다리는 weight 이하까지의 무게를 견딜 수 있습니다. 단, 다리에 완전히 오르지 않은 트럭의 무게는 무시합니다.

예를 들어, 트럭 2대가 올라갈 수 있고 무게를 10kg까지 견디는 다리가 있습니다. 무게가 [7, 4, 5, 6]kg인 트럭이 순서대로 최단 시간 안에 다리를 건너려면 다음과 같이 건너야 합니다.

경과 시간 다리를 지난 트럭 다리를 건너는 트럭 대기 트럭

0	[]	[]	[7,4,5,6]
1~2	[]	[7]	[4,5,6]
3	[7]	[4]	[5,6]
4	[7]	[4,5]	[6]
5	[7,4]	[5]	[6]
6~7	[7,4,5]	[6]	[]
8	[7,4,5,6]	[]	[]

따라서, 모든 트럭이 다리를 지나려면 최소 8초가 걸립니다.

solution 함수의 매개변수로 다리에 올라갈 수 있는 트럭 수 bridge_length, 다리가 견딜 수 있는 무게 weight, 트럭 별 무게 truck_weights가 주어집니다. 이때 모든 트럭이 다리를 건너려면 최소 몇 초가 걸리는지 return 하도록 solution 함수를 완성하세요.

제한 조건

bridge_length는 1 이상 10,000 이하입니다.
weight는 1 이상 10,000 이하입니다.
truck_weights의 길이는 1 이상 10,000 이하입니다.
모든 트럭의 무게는 1 이상 weight 이하입니다.

입출력 예

bridge_length weight truck_weights return

2	10	[7,4,5,6]	8
100	100	[10]	101
100	100	[10,10,10,10,10,10,10,10,10,10]	110

문제 풀이

문제를 보면 1초에 트럭이 올라가고, 지나가고 하는 행동이 이루어짐.

다리의 길이를 모든 트럭이 다 지날 경우 몇초가 걸리는지 리턴하는 문제.

접근 방식.

크게 3부분으로 나눔

다리 위에 있는 트럭이 1초마다 한 칸 씩 이동
지나간 트럭은 제거
트럭 추가

queue를 이용해 트럭의 현재 상황을 저장 [트럭 무게, 남은 길이] 형태로 저장

while문은 모든 트럭이 올라갈 경우 종료가 됨. 즉 queue에 남아있는 트럭에 대한 계산이 필요.

-> queue의 가장 마지막에 남아있는 트럭이 가장 긴 길이를 가짐(가장 마지막에 추가가 되었으므로)

따라서, queue의 마지막 트럭의 남은 길이만큼 answer에 더해주면 총 걸리는 시간을 구할 수 있음.

function solution(bridge_length, weight, truck_weights) {
    var answer = 0;
    let queue = [];
    
    let index = 0;
    let sum = 0;
    while (index < truck_weights.length) {
        answer += 1;
        
        // 다리 위에 있는 트럭 1초마다 이동
        for (let i = 0; i < queue.length; i++) {
            queue[i][1] -= 1;
        }
        
        // 지니간 트럭 제거
        while (queue.length > 0 && queue[0][1] <= 0) {
            sum -= queue[0][0];
            queue.shift();
        }
        
        // 트럭 추가
        if (sum + truck_weights[index] <= weight) {
            queue.push([truck_weights[index], bridge_length]);
            sum += truck_weights[index];
            index++;
        }
    }
    
    answer += queue[queue.length - 1][1];
    
    return answer;
}

결론

stack/queue를 이용해 문제를 접근하는 방식.

트럭이 매초 어떻게 움직이는지 로직을 구하는 문제.

프로그래머스 최고의 집합 (JavaScript)

의현 — Tue, 3 Mar 2026 19:02:44 +0900

링크 : https://school.programmers.co.kr/learn/courses/30/lessons/12938#

문제 설명

자연수 n 개로 이루어진 중복 집합(multi set, 편의상 이후에는 "집합"으로 통칭) 중에 다음 두 조건을 만족하는 집합을 최고의 집합이라고 합니다.

각 원소의 합이 S가 되는 수의 집합
위 조건을 만족하면서 각 원소의 곱 이 최대가 되는 집합

예를 들어서 자연수 2개로 이루어진 집합 중 합이 9가 되는 집합은 다음과 같이 4개가 있습니다.

{ 1, 8 }, { 2, 7 }, { 3, 6 }, { 4, 5 }

그중 각 원소의 곱이 최대인 { 4, 5 }가 최고의 집합입니다.

집합의 원소의 개수 n과 모든 원소들의 합 s가 매개변수로 주어질 때, 최고의 집합을 return 하는 solution 함수를 완성해주세요.

제한사항

최고의 집합은 오름차순으로 정렬된 1차원 배열(list, vector) 로 return 해주세요.
만약 최고의 집합이 존재하지 않는 경우에 크기가 1인 1차원 배열(list, vector) 에 1 을 채워서 return 해주세요.
자연수의 개수 n은 1 이상 10,000 이하의 자연수입니다.
모든 원소들의 합 s는 1 이상, 100,000,000 이하의 자연수입니다.

입출력 예

n s result

2	9	[4, 5]
2	1	[-1]
2	8	[4, 4]

입출력 예 설명

입출력 예#1

문제의 예시와 같습니다.

입출력 예#2

자연수 2개를 가지고는 합이 1인 집합을 만들 수 없습니다. 따라서 -1이 들어있는 배열을 반환합니다.

입출력 예#3

자연수 2개로 이루어진 집합 중 원소의 합이 8인 집합은 다음과 같습니다.

{ 1, 7 }, { 2, 6 }, { 3, 5 }, { 4, 4 }

그중 각 원소의 곱이 최대인 { 4, 4 }가 최고의 집합입니다.

문제 풀이

s의 합을 n개로 나눴을 때 최대 곱이 되는 경우를 구하는 문제.

접근 방식

s = 13, n = 3인 경우 최고의 경우는 [4, 4, 5]

다른 경우도 봤을 때 제일 마지막으로 만들 수 있는 수의 조합이 최대가 됨.

따라서,

index 0 번째 부터 가능한 최고의 수를 찾아서 넣으면됨.

현재 길이 len 을 기준으로 s를 나눴을 때 몫이 해당 index에 올 수 있는 최대 값.

이후 한 자리는 채워졌으므로 len을 1 감소 시킴(2자리에서 남은 수를 비교하기 위해)

최종적으로 남은 수 s를 answer에 넣어주면 됨.

function solution(n, s) {
    if (n > s) {
        return [-1];
    }
    
    let answer = [];
    let len = n;
    for (let i = 1; i < n; i++) {
        answer.push(Math.floor(s / len));
        len -= 1;
        s -= answer[answer.length - 1];
    }
    
    answer.push(s);
    
    return answer;
}

결론

수의 조합중 크게 만들 수 있는 경우를 생각하고

이를 구할 수 있는 로직을 작성하면 됨

프로그래머스 2 x n 타일링 (JavaScript)

의현 — Tue, 3 Mar 2026 18:37:09 +0900

링크 : https://school.programmers.co.kr/learn/courses/30/lessons/12900?language=javascript

문제 설명

가로 길이가 2이고 세로의 길이가 1인 직사각형모양의 타일이 있습니다. 이 직사각형 타일을 이용하여 세로의 길이가 2이고 가로의 길이가 n인 바닥을 가득 채우려고 합니다. 타일을 채울 때는 다음과 같이 2가지 방법이 있습니다.

타일을 가로로 배치 하는 경우
타일을 세로로 배치 하는 경우

예를들어서 n이 7인 직사각형은 다음과 같이 채울 수 있습니다.

직사각형의 가로의 길이 n이 매개변수로 주어질 때, 이 직사각형을 채우는 방법의 수를 return 하는 solution 함수를 완성해주세요.

제한사항

가로의 길이 n은 60,000이하의 자연수 입니다.
경우의 수가 많아 질 수 있으므로, 경우의 수를 1,000,000,007으로 나눈 나머지를 return해주세요.

입출력 예

n result

입출력 예 설명

입출력 예 #1

다음과 같이 5가지 방법이 있다.

문제 풀이

처음에 dfs를 이용해 가로, 세로 타일을 만들어 구하려고 했음.

위 방법으로도 해결할 순 있지만 효율성이 낮음. -> 다른 방안 탐색

n = 1부터 하나씩 증가시켜 방법의 수를 구하면

1, 2, 3, 5, 8... 형태로 증가함. 즉 이거는 피보나치 수열로 문제를 해결 할 수 있음

function solution(n) {
    let arr = Array.from({length: n + 1}, () => 0);
    arr[0] = 1;
    arr[1] = 2;
    
    for (let i = 2; i < n; i++) {
        arr[i] = arr[i - 2] + arr[i - 1];
        arr[i] > 1000000007 ? arr[i] %= 1000000007 : arr[i];
        
    }
    
    return arr[n - 1];
}

결론

문제를 해결할 수 있는 방안에 대해 고민을 좀 더 해야할 것 같음.

LeetCode Number of Islands (JavaScript), DFS

의현 — Tue, 27 Jan 2026 17:03:15 +0900

링크 : https://leetcode.com/problems/number-of-islands/description/

문제 설명

Given an m x n 2D binary grid grid which represents a map of '1's (land) and '0's (water), return the number of islands.

An island is surrounded by water and is formed by connecting adjacent lands horizontally or vertically. You may assume all four edges of the grid are all surrounded by water.

Example 1:

Input: grid = [
  ["1","1","1","1","0"],
  ["1","1","0","1","0"],
  ["1","1","0","0","0"],
  ["0","0","0","0","0"]
]
Output: 1

Example 2:

Input: grid = [
  ["1","1","0","0","0"],
  ["1","1","0","0","0"],
  ["0","0","1","0","0"],
  ["0","0","0","1","1"]
]
Output: 3

Constraints:

m == grid.length
n == grid[i].length
1 <= m, n <= 300
grid[i][j] is '0' or '1'.

문제 풀이

dfs를 이용하여 접근

- 2중 for문을 돌며 '1'인 위치에 dfs를 검사 및 answer 1증가 -> 이어진 경로 탐색하기 위해

- dfs 함수 : 상, 하, 좌, 우 기준 연결된 모든 지역 검사 및 지나온 구역 '0'으로 초기화

- 최종적으로 answer 리턴

/**
 * @param {character[][]} grid
 * @return {number}
 */
var numIslands = function(grid) {
    let answer = 0;
    let direction = [
        [0, 1],
        [1, 0],
        [-1, 0],
        [0, -1]
    ];
    
    function dfs(y, x) {
        grid[y][x] = '0';

        for (const [dx, dy] of direction) {
            const mx = x + dx;
            const my = y + dy;

            if (
                mx >= 0 && mx < grid[0].length && 
                my >= 0 && my < grid.length &&
                grid[my][mx] === '1'
            ) {
                dfs(my, mx);
            }
        }
    }

    for (let i = 0; i < grid.length; i++) {
        for (let j = 0; j < grid[0].length; j++) {
            if (grid[i][j] === '1') {
                dfs(i, j);
                answer++;
            }
        }
    }

    return answer;
};

결론

기본적인 dfs 문제

LeetCode Valid Palindrome (JavaScript)

의현 — Mon, 26 Jan 2026 12:54:17 +0900

링크 : https://leetcode.com/problems/valid-palindrome/description/

문제 설명

A phrase is a palindrome if, after converting all uppercase letters into lowercase letters and removing all non-alphanumeric characters, it reads the same forward and backward. Alphanumeric characters include letters and numbers.

Given a string s, return true if it is a palindrome, or false otherwise.

Example 1:

Input: s = "A man, a plan, a canal: Panama"
Output: true
Explanation: "amanaplanacanalpanama" is a palindrome.

Example 2:

Input: s = "race a car"
Output: false
Explanation: "raceacar" is not a palindrome.

Example 3:

Input: s = " "
Output: true
Explanation: s is an empty string "" after removing non-alphanumeric characters.
Since an empty string reads the same forward and backward, it is a palindrome.

Constraints:

1 <= s.length <= 2 * 105
s consists only of printable ASCII characters.

문제 풀이

문자열 비교를 쉽게 하기 위해 전부 대문자로 변경

이후 left, right 2개의 포인터를 두어 각각 왼쪽, 오른쪽에서 같은 값을 가지는지 검사

-> 중간에 실패할 경우 palindrome 문자가 아님 return false

while 문이 끝나면 palindrome 문자로 return true

/**
 * @param {string} s
 * @return {boolean}
 */
var isPalindrome = function(s) {
    s = s.toUpperCase();
    let [left, right] = [0, s.length - 1];

    while (left < right) {
        while (left < right && !(s[left] >= '0' && s[left] <= '9') && !(s[left] >= 'A' && s[left] <= 'Z')) {
            left++;
        }

        while (left < right && !(s[right] >= '0' && s[right] <= '9') && !(s[right] >= 'A' && s[right] <= 'Z')) {
            right--;
        }

        if (s[left] !== s[right]) {
            return false;
        }
        
        left++;
        right--;
    }

    return true;
};

결론

O(n)의 시간복잡도로 해결하기 위해 left, right 의 포인터를 적절하게 이용하면 됨.

while 문 내부에 0~9, A~Z를 탐색하기 위한 while 문을 쉽게 적용하려면 정규 표현식으로 숫자 또는 문자만 포함되게 설정하면 더 짧게 코드를 작성할 수 있음

// 0~9, A~Z만 포함하는 문자열
s.toUpperCase().replace(/[^0-9A-Z]/g, '');

LeetCode Best Time to Buy and Sell Stock (JavaScript)

의현 — Sun, 28 Dec 2025 16:28:34 +0900

링크 : https://leetcode.com/problems/best-time-to-buy-and-sell-stock/description/

문제 설명

You are given an array prices where prices[i] is the price of a given stock on the ith day.

You want to maximize your profit by choosing a single day to buy one stock and choosing a different day in the future to sell that stock.

Return the maximum profit you can achieve from this transaction. If you cannot achieve any profit, return 0.

Example 1:

Input: prices = [7,1,5,3,6,4]
Output: 5
Explanation: Buy on day 2 (price = 1) and sell on day 5 (price = 6), profit = 6-1 = 5.
Note that buying on day 2 and selling on day 1 is not allowed because you must buy before you sell.

Example 2:

Input: prices = [7,6,4,3,1]
Output: 0
Explanation: In this case, no transactions are done and the max profit = 0.

Constraints:

1 <= prices.length <= 105
0 <= prices[i] <= 104

문제 풀이

1. (시간 초과)

최대 수익을 계산하기 위해 현재 값(i)와 i 이후의 배열의 최대 값을 구해서 계산하는 방식

prices에서 i 다음 값들 중 최대 값을 구하기 위해 `slice`를 통해 계산하는 방식은 총 O(n^2)의 시간 복잡도를 가지기 때문에

prices의 길이가 길면 시간 초과의 문제가 발생

/**
 * @param {number[]} prices
 * @return {number}
 */
var maxProfit = function(prices) {
    let profit = 0;

    for (let i = 0; i < prices.length; i++) {
        const price = Math.max(...prices.slice(i + 1));
        profit = Math.max(profit, price - prices[i]);
    }

    return profit;
};

2. (해결)

O(n)의 시간 복잡도로 문제를 해결할 수 있는 로직으로 수정

배열의 뒤 부터 계산하면서 최대 이윤을 계산하기 위해 maxPrice를 통해 현재 타겟이될 최대 값을 갱신하도록 함

이후 i번째와 maxPrice의 차이를 통해 최대 이윤 profit을 계산하도록 함

/**
 * @param {number[]} prices
 * @return {number}
 */
var maxProfit = function(prices) {
    let profit = 0;

    let maxPrice = prices[prices.length - 1];

    for (let i = prices.length - 2; i >=0; i--) {
        profit = Math.max(profit, maxPrice - prices[i]);

        maxPrice = Math.max(maxPrice, prices[i]);
    }

    return profit;
};

결론

최대 이윤을 계산하기 위해 maxPrice를 최대로 갱신해주는 부분이 이 문제를 해결하는 핵심부분

npm install vs npm ci 차이점

의현 — Mon, 22 Dec 2025 17:56:20 +0900

개요

의존성 목록을 설치하기위해 `npm install` 또는 `npm ci` 를 활용하여 의존성 목록을 설치한다.

이번 글에서는 `npm install` / `npm ci`가 무엇이고 어떠한 차이점이 있는지 살펴볼 것이다.

npm install

`npm install`은 패키지를 설치하고 의존성 트리를 구성하는 가장 기본적인 명령어이다.

동작 방식 : `package.json` 파일의 버전 범위를 확인하고, `package-lock.json`이 있다면 이를 참고하지만 필요에 따라 내용을 수정한다.
용도 : 새로운 패키지를 추가하거나, 기존 패키지를 최신 버전으로 업데이트하고 싶을 때 사용
특징 : 설치 과정에서 `package-lock.json`이 업데이트될 수 있고, `node_modules` 폴더를 삭제하지 않고 필요한 부분만 변경한다.

즉, `npm install`은 유연한 업데이트라고 할 수 있다.

npm ci

`npm ci`(clear-install)은 패키지를 설치하고 의존성 트리를 구성하는 명령어이다.

동작 방식 : `package.json`이 아닌 `package-lock.json`에 기록된 정보만을 토대로 설치한다.
용도 : 배포 서버 빌드, 테스트 환경, 혹은 팀원들과 완전히 동일한 개발 환경을 맞추고 싶을 때 사용
특징 :
1. 기존 `node_modules`를 자동으로 삭제하고 새로 설치
2. `package-lock.json`을 절대 수정하지 않음 (두 파일 간 버전 불일치 시 에러 발생)
3. 개별 패키지를 설치할 수 없다. (`npm ci <package-name>` 불가능)

즉, `npm ci`는 엄격한 업데이트라고 할 수 있다.

차이점

두 명령어는 크게 3가지의 차이점이 있다.

`npm install`은 `package.json`에 명시된 버전 범위 내에서 다른 버전을 설치할 가능성이 있지만, `npm ci`는 오직 `package-lock.json`에 정확히 표기된 특정 버전을 따른다.
- `npm ci`는 정확한 버전을 따르기 때문에 다른 버전의 의존성을 설치하는 일을 방지할 수 있다.
- 또한, 버전을 결정하기 위한 연산을 수행할 필요가 없어 설치 속도에서 유리한 측면이 있다.
`npm install`은 `package-lock.json`을 변경할 가능성이 있지만, `npm ci`는 절대 변경하지 않는다.
- 이러한 특징으로 `npm ci`는 의존성 목록의 버전을 변경없이 일관되게 유지할 수 있게 해준다.
`npm ci`는 매번 `node_modules`를 삭제한 후 새로 설치한다. 이를 통해 이전에 설치된 의존성과 충돌로 인한 문제를 방지한다. 또한, `package-lock.json`에 따라서 매번 동일한 의존성을 설치할 것을 확실하게 보장한다.

이러한 차이로인해 `npm ci`는 CI/CD 환경에서 빌드 과정의 일관성을 보장하기 위한 목적으로 사용되는 경우가 많다.

그렇다면 npm ci를 로컬 개발 환경에서 사용하는 것이 좋을까?

정답은 없다. 상황에 따라 `npm install`, `npm ci`를 선택해서 사용하면 된다.

`npm ci`의 경우는 `node_modules`를 매번 삭제하고 새로 설치하기 때문에 불필요한 시간이 소요될 수 있다.

일반적으로 로컬에서는 `npm install`을 사용하고, CI/CD 환경에서는 `npm ci`를 사용하는 경우가 많다.

정리

구분	npm install	npm ci
주요 목적	패키지 추가 및 업데이트	일관된 환경 구축 (배포/테스트)
lock 파일 수정	상황에 따라 업데이트함	절대 수정 안함 (읽기 전용)
node_modules	기존 파일 유지하며 업데이트	기존 폴더 삭제 후 재설치
속도	보통 (의존성 계산 과정 필요)	빠름 (이미 계산된 lock 파일 기반)
안정성	버전 범위에 따라 달라질 수 있음	매우 높음 (항상 동일한 버전)

LeetCode Decode Ways (JavaScript), (DFS, Memoization)

의현 — Mon, 22 Dec 2025 17:15:44 +0900

링크 : https://leetcode.com/problems/decode-ways/description/

문제 설명

You have intercepted a secret message encoded as a string of numbers. The message is decoded via the following mapping:

"1" -> 'A' "2" -> 'B' ... "25" -> 'Y' "26" -> 'Z'

However, while decoding the message, you realize that there are many different ways you can decode the message because some codes are contained in other codes ("2" and "5" vs "25").

For example, "11106" can be decoded into:

"AAJF" with the grouping (1, 1, 10, 6)
"KJF" with the grouping (11, 10, 6)
The grouping (1, 11, 06) is invalid because "06" is not a valid code (only "6" is valid).

Note: there may be strings that are impossible to decode.

Given a string s containing only digits, return the number of ways to decode it. If the entire string cannot be decoded in any valid way, return 0.

The test cases are generated so that the answer fits in a 32-bit integer.

Example 1:

Input: s = "12"

Output: 2

Explanation:

"12" could be decoded as "AB" (1 2) or "L" (12).

Example 2:

Input: s = "226"

Output: 3

Explanation:

"226" could be decoded as "BZ" (2 26), "VF" (22 6), or "BBF" (2 2 6).

Example 3:

Input: s = "06"

Output: 0

Explanation:

"06" cannot be mapped to "F" because of the leading zero ("6" is different from "06"). In this case, the string is not a valid encoding, so return 0.

Constraints:

1 <= s.length <= 100
s contains only digits and may contain leading zero(s).

문제 풀이

일반적인 dfs방식으로 문제를 접근할 경우 (1글자, 2글자 의 선택에 대해 재귀적으로 반복하게되면 O(2^n)의 시간 복잡도를 가진다.

결국 문자열이 길어지면 시간 초과라는 오류가 발생한다.

이러한 문제를 해결하기 위해 DFS에 Memoization을 적용하여 불필요한 연산을 줄일 수 있다. (O(n)의 시간 복잡도를 가짐)

접근 방법

특정 index에서 검사하는 부분을 중복해서 검사하지 않도록 memo(Map)을 통해 특정 index의 res값을 저장해두어 사용
dfs 리턴 조건
- index가 s길이인 경우 끝에 도달한 것이므로 1리턴 (가능한 경로)
- memo에 특정 index가 이미 존재하는 경우 (해당 index를 통한 검사는 이미 이루어짐, memo에 값을 읽어와 사용)
- s문자열의 index값이 0인 경우 불가능한 값이므로 0리턴
dfs 재귀 경로
1. 한 글자 검사 (`dfs(index + 1)`)
2. 두 글자 검사(`dfs(index + 2)`)
  - 단, 두 글자 검사는 index가 유효한 범위내에 존재하고 2글자가 유효한 범위내(10~26사이)인 경우 탐색 진행
현재 index를 기준으로 한 글자, 두 글자 탐색을 진행한 뒤 res 값을 memo에 저장 (추후 불필요한 연산을 막기 위해)
최종적으로 res값 리턴

/**
 * @param {string} s
 * @return {number}
 */
var numDecodings = function(s) {
    if (s[0] === '0') {
        return 0;
    }

    const memo = new Map();

    const dfs = (index) => {
        // 끝까지 도달 -> 1증가
        if (index === s.length) {
            return 1;
        }

        // 이미 계산된 적이 있다면 저장 값 반환
        if (memo.has(index)) {
            return memo.get(index);
        }

        // 0이면 진행 불가
        if (s[index] === '0') {
            return 0;
        }

        // 한 글자 선택
        let res = dfs(index + 1);

        // 두 글자 선택
        if (index + 1 < s.length) {
            const tmp = parseInt(s.substring(index, index + 2));
            if (tmp >= 10 && tmp <= 26) {
                res += dfs(index + 2);
            }
        }

        memo.set(index, res);
        return res;
    }

    return dfs(0);
};

결론

일반 적인 dfs로 쉽게 접근했지만 문자열이 길어질수록 O(2^n)의 시간 복잡도의 알고리즘으로 인해 시간 초과 문제가 발생했고,

이러한 문제를 Memoization을 적용하여 불필요한 연산을 줄여 O(n)의 시간 복잡도로 문제를 해결.

재귀를 도는 과정에서 불필요한 연산을 줄이는게 문제의 핵심

LeetCode Triangle (JavaScript)

의현 — Fri, 19 Dec 2025 17:14:31 +0900

링크 : https://leetcode.com/problems/triangle/description/

문제 설명

Given a triangle array, return the minimum path sum from top to bottom.

For each step, you may move to an adjacent number of the row below. More formally, if you are on index i on the current row, you may move to either index i or index i + 1 on the next row.

Example 1:

Input: triangle = [[2],[3,4],[6,5,7],[4,1,8,3]]
Output: 11
Explanation: The triangle looks like:
23 4
 65 7
41 8 3
The minimum path sum from top to bottom is 2 + 3 + 5 + 1 = 11 (underlined above).

Example 2:

Input: triangle = [[-10]]
Output: -10

Constraints:

1 <= triangle.length <= 200
triangle[0].length == 1
triangle[i].length == triangle[i - 1].length + 1
104 <= triangle[i][j] <= 104

문제 풀이

1. dfs로 풀이 (시간 초과)

/**
 * @param {number[][]} triangle
 * @return {number}
 */
var minimumTotal = function(triangle) {
  const dfs = (depth, index, sum, minimum) => {
    if (minimum < sum) return;
    if (depth === triangle.length - 1) {
      return Math.min(minimum, sum);
    }

    return Math.min(
      dfs(depth + 1, index, sum + triangle[depth + 1][index], minimum), 
      dfs(depth + 1, index + 1, sum + triangle[depth + 1][index + 1], minimum)
    );
  }
    
  return dfs(0, 0, triangle[0][0], Infinity);
};

2. dp (top-down) - 성공

최상단에서 다음 row에 대해 각 요소에서 가장 작은 값을 계산하며 마지막 row까지 계산하고, 최종적으로 마지막 row에 가장 작은 값을 리턴하면 됨

/**
 * @param {number[][]} triangle
 * @return {number}
 */
var minimumTotal = function(triangle) {
  for (let i = 1; i < triangle.length; i++) {
    for (let j = 0; j < triangle[i].length; j++) {
      if (j === 0) {
        triangle[i][j] += triangle[i - 1][j];
      } else if (j === triangle[i].length - 1) {
        triangle[i][j] += triangle[i - 1][j - 1];
      } else {
        triangle[i][j] += Math.min(triangle[i - 1][j - 1], triangle[i - 1][j]);
      }
    }
  }

  return Math.min(...triangle[triangle.length - 1]);
};

3. dp (bottom-up) - 성공

top-down 방식에서 불필요한 if-else 문을 지우고 더 최적화하여 bottom-up형태로 수정

/**
 * @param {number[][]} triangle
 * @return {number}
 */
var minimumTotal = function(triangle) {
    for (let i = triangle.length - 2; i >=0; i--) {
        for (let j = 0; j < triangle[i].length; j++) {
            triangle[i][j] += Math.min(
                triangle[i + 1][j],
                triangle[i + 1][j + 1]
            )
        }
    }

    return triangle[0][0];
};

결론

dfs로는 depth가 깊어지면 시간 초과 오류가 발생.

dp를 이용해 top-down, bottom-up 형태로 문제를 해결할 수 있고 bottom-up 형태가 불필요한 if-else 문이 없어 더 빠른 시간안에 해결이 가능하다.

LeetCode Subsets ll (JavaScript), backtracking

의현 — Thu, 18 Dec 2025 18:04:18 +0900

링크 : https://leetcode.com/problems/subsets-ii/description/

문제 설명

Given an integer array nums that may contain duplicates, return all possible subsets (the power set).

The solution set must not contain duplicate subsets. Return the solution in any order.

Example 1:

Input: nums = [1,2,2]
Output: [[],[1],[1,2],[1,2,2],[2],[2,2]]

Example 2:

Input: nums = [0]
Output: [[],[0]]

Constraints:

1 <= nums.length <= 10
10 <= nums[i] <= 10

문제 풀이

1. set 자료구조를 이용해 중복 제거

중복되는 subset에 대해서 넘어가기 위해 set에 저장하여 중복 저장이 안되도록 함.

/**
 * @param {number[]} nums
 * @return {number[][]}
 */
var subsetsWithDup = function(nums) {
    const answer = [];
    const set = new Set();
    nums.sort((a, b) => a - b);

    const dfs = (index, arr) => {
        answer.push([...arr]);

        for (let i = index; i < nums.length; i++) {
            if (!set.has(JSON.stringify([...arr, nums[i]]))) {
                dfs(i + 1, [...arr, nums[i]]);
                set.add(JSON.stringify([...arr, nums[i]]));
            }
        }
    }

    dfs(0, []);

    return answer;
};

2. backtracking 이용 (권장)

subset을 만드는 과정을 backtracking을 이용해서 표현해보면 위에 그림과 같다.

특정 요소를 선택할 경우 / 안 할 경우로 나눠서 탐색을 진행

핵심은 탐색을 하는 과정에서 중복된 subset이 존재할 수 있다는 것이다. (파란색 부분)

즉, 0번째 요소 2에서 만들어지는 [2, 3], [2]는 1번째 요소 2로 만들어지는 [2, 3], [2]와 중복되는 문제가 발생한다.

이러한 중복을 방지하기 위해 특정 요소를 선택 안할 경우에 대해 탐색을 진행한 요소와 겹치는 값은 건너뛰도록 index를 조정해주면 된다.

-> 0번째에서 2를 검사했으면 1번째에 나오는 2에 대해 탐색을 진행 안해도 됨.

/**
 * @param {number[]} nums
 * @return {number[][]}
 */
var subsetsWithDup = function(nums) {
    const answer = [];
    const subset = [];
    nums.sort((a, b) => a - b);

    const backtracking = (index) => {
        if (index === nums.length) {
            answer.push([...subset]);
            return;
        }

        subset.push(nums[index]);
        backtracking(index + 1);
        subset.pop();

        // 중복 숫자 건너 뛰기
        while (index < nums.length && nums[index] === nums[index + 1]) {
            index++;
        }

        backtracking(index + 1);
    }

    backtracking(0);

    return answer;
};

결론

1번의 경우 매번 배열을 문자열로 바꾸는 비용과 set함수를 관리하는 비용을 고려해볼 때

O(N*(2^N)*N)의 시간 복잡도와 O(N*(2^N))의 공간 복잡도를 가진다.

1번을 좀 더 효율적으로 변경하기 위해 backtracking을 이용하여 풀이하게 되면

O(N*(2^N))의 시간 복잡도와 O(N)의 공간 복잡도로 문제를 해결 할 수 있다.

TodoList 만들기 - 성능 개선 (2)

의현 — Wed, 17 Dec 2025 19:29:27 +0900

개요

이전 글에서 불필요한 리렌더링, 불필요한 메모리 낭비 방지를 위해 `useCallback`, `React.memo`를 활용하여 개선을 진행하였다.

하지만 추가/삭제/토글 버튼에 대해서 모든 todo가 리렌더링되는 문제가 계속 발생했다.

이번 글에서는 `useCallback`의 설정 개선과 `React.memo`가 왜 제대로 동작하지 않았는지를 살펴보고 개선할 예정이다.

useCallback 의존성 배열 설정의 문제

리렌더링 시 함수 재생성을 방지하기 위해 `useCallback` 훅을 이용하여 설정을 해두었다.

하지만 추가/삭제/토글 버튼을 클릭할 경우 todo가 바뀌면서 `useCallback`의 의존성 배열로 설정해둔 todo의 영향을 받아 함수가 다시 생성되는 문제가 발생되었던 것이다.

즉, 함수가 재생성되면서 함수의 참조 값이 달라져 `React.memo`로 설정해두었던 `TodoItem`이 리렌더링되는 문제가 발생했던 것이다.

그러면 의존성 배열에 todos를 빼면 함수가 다시 생성되지 않고 `TodoItem` 컴포넌트 리렌더링에 영향을 주지 않을까?

// TodoList.tsx
...

  const toggleTodo = useCallback((id: number) => {
    setTodos(
      todos.map((todo) =>
        todo.id === id ? { ...todo, completed: !todo.completed } : todo,
      ),
    );
  }, []); // 의존성 배열에 todos 제거
  ...

답은 그렇다이다.

toggleTodo 함수가 재생성되지 않아 결국 같은 참조 값을 사용하므로 `TodoItem` 리렌더링에 영향을 주지 않게된다.

하지만 여기에는 문제가 있다. 과연 저 toggleTodo를 통해 completed 상태를 변경하는게 제대로 동작할까?

답은 아니다이다.

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

이와 같은 현상이 일어나는 이유는 다음과 같다.

함수의 재생성 방지를 위해 의존성 배열을 비워두어 completed 상태가 제대로 변경되지 않았는데 `useCallback`의 클로저(Closure)문제 때문이다.

`useCallback`의 의존성 배열을 비워둘 경우 생기는 문제 상황

첫 렌더링 시점의 기억 : `useCallback`은 처음에 만들어진 함수를 메모리에 저장한다. 이때 함수 내부의 `todos` 변수는 초기값(빈 배열이나 첫 상태)를 참조하게 된다.
업데이트의 부재 : 이후 새로운 todo가 추가되어 `todos` 상태가 바뀌어도, 메모리에 저장된 `toggleTodo` 함수는 여전히 맨 처음의 `todos`만 참조하고 있다.
결과 : 결국 함수를 실행하면 예전의 `todos`를 바탕으로 업데이트를 시도하기 때문에 최신 데이터가 반영되지 않거나, 상태가 꼬이게 되는 문제가 발생한다.

이와 같은 문제를 해결하기 위해서는 의존성 배열에 `[todos]`를 넣어야 한다. 하지만 이렇게 되면 결국 리렌더링 할 때마다 함수가 재생성되어 결국 메모리 낭비가 발생되고 `useCallback`을 사용하는 의미가 없어진다.

그러면 `useCallback`을 사용해 함수의 재생성을 방지하면서 `todos`의 최신 상태를 참조할 수 있는 방법은 없을까?

`todos`의 최신 상태를 참조하기 위해 함수형 업데이트를 이용할 수 있다.

참조값 문제 해결
- 함수형 업데이트를 사용하면 리액트가 현재 시점의 최신 상태 값을 함수의 인자로 직접 넣어주기 때문에 `useCallback` 함수는 외부 변수인 `todos`를 직접 참조할 필요가 없어진다.
의존성 배열 문제 해결
- 최신 상태를 인자로 받기 때문에 의존성 배열에 `todos`를 넣지 않아도 된다. 즉, 함수의 주소값을 영구적으로 고정하면서 데이터는 항상 최신으로 유지할 수 있게 된다.

함수형 업데이트란?
기존 상태 값을 직접 참조하지 않고, 이전 상태를 인자로 받는 함수로 다음 상태를 계산하는 방식을 말한다.
e.g. `setTodos(prev => ...)` 형태로 사용
즉, React가 prev를 통해 최신 상태 값을 보장해준다.

// TodoList.tsx
...

  const toggleTodo = useCallback((id: number) => {
    // 함수형 업데이트(prev)를 통한 todos 업데이트
    setTodos((prev) =>
      prev.map((todo) =>
        todo.id === id ? { ...todo, completed: !todo.completed } : todo,
      ),
    );
  }, []);
  
  ...

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

마무리

이번 개선을 통해 단순히 `useCallback`, `React.memo`를 사용하는 것만으로는 리렌더링 최적화가 완성되지 않는다는 점을 다시 한 번 확인할 수 있었다.

`useCallback`은 함수의 재생성을 막는 도구일 뿐이고 의존성 배열과 클로저 특성을 제대로 이해하지 못하면 오히려 상태 불일치나 버그를 만들어낼 수 있다.

함수형 업데이트를 사용함으로써

함수의 참조값은 안정적으로 유지하고
상태는 항상 최신 값을 기준으로 업데이트하며
`React.memo`가 의도한 대로 동작할 수 있는 구조를 만들 수 있었다.

결국 리렌더링 최적화의 핵심은 메모이제이션 자체가 아니라 상태 흐름을 어떻게 설계하느냐 라는 점을 다시 한 번 느끼게 되었다.

TodoList 만들기 - 성능 개선 (1)

의현 — Wed, 17 Dec 2025 18:40:03 +0900

개요

이전 글에서 간단한 Todo App을 만들어보았다. 하지만 이러한 앱은 성능상 많은 문제가 존재한다.

이번 글에서는 이러한 문제들과 어떻게 해결할 수 있을지에 대해 다뤄볼 예정이다.

기존 Todo App의 문제점

1. 불필요한 리렌더링

먼저 React의 특성상 state의 값이 변경되면 React가 변경을 감지하고 관련 컴포넌트를 리렌더링 하게 된다.

즉, 최신 데이터 값으로 다시 화면을 그리게 된다.

현재 state값으로 설정되어있는 값은 `todos`, `newTodo` 두 개가 존재한다.

또한 todos를 추가하거나 삭제, completed 값을 변경하기 위한 `addTodo`, `deleteTodo`, `toggleTodo` 세 개가 존재한다.

위 함수는 `setTodos`를 통해 todos의 값을 변경하므로 위 함수가 불리게 되면 todos에 영향을 줘 리렌더링이 이루어진다.

결국, 새로운 todo를 추가하기 위해 input에 입력하는과정과 새로운 투두를 추가하거나 삭제, completed를 변경하는 함수를 호출하면 모든 todos가 리렌더링 되게 된다. 이러한 상황은 모든 todo가 불필요하게 리렌더링되는 문제가 발생한다.

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

2. 함수 재생성 (불필요한 메모리 낭비)

TodoList 컴포넌트가 리렌더링이 이루어질 때 `addTodo`, `deleteTodo`, `toggleTodo` 함수가 매번 새로 생성되는 걸 확인할 수 있다. 즉, 불필요하게 함수를 재생성하여 메모리를 낭비하는 문제가 발생한다.

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

해결 방안

먼저 렌더링 때마다 함수가 재생성되는 걸 방지하기 위해 `useCallback` 훅을 이용하여 함수가 재생성되는 걸 방지할 수 있다.

또한, 특정 todo만 리렌더링이 이루어지게 하기 위해 `React.memo` 를 이용하여 `TodoItem` 컴포넌트가 리렌더링 되는 걸 방지할 수 있다.

React.memo 란?
React.memo로 설정한 컴포넌트는 Props의 값이 변경되지 않는다면 리렌더링이 되지 않는다.

useCallback 이란?
특정 조건(의존성 배열)이 바뀌지 않는 한, 이 함수를 새로 만들지 않고 기존에 만든 함수를 그대로 사용

TodoList, TodoItem 컴포넌트 개선

// TodoList.tsx
...
const addTodo = useCallback(() => {
    const item: Todo = {
      userId: Date.now(),
      id: Date.now(),
      title: newTodo,
      completed: false,
    };

    setTodos([...todos, item]);
    setNewTodo("");
  }, [newTodo, todos]);

  const deleteTodo = useCallback(
    (id: number) => {
      setTodos(todos.filter((todo) => todo.id !== id));
    },
    [todos],
  );

  const toggleTodo = useCallback(
    (id: number) => {
      setTodos(
        todos.map((todo) =>
          todo.id === id ? { ...todo, completed: !todo.completed } : todo,
        ),
      );
    },
    [todos],
  );
  ...

// TodoItem.tsx
import { Todo } from "./types";
import React from "react";

interface TodoItemProps {
  todo: Todo;
  deleteTodo: (id: number) => void;
  toggleTodo: (id: number) => void;
}

export const TodoItem = React.memo(
  ({ todo, deleteTodo, toggleTodo }: TodoItemProps) => {
    return (
      <div>
        <input
          type="checkbox"
          checked={todo.completed}
          onChange={() => toggleTodo(todo.id)}
        />
        {todo.title}
        <button onClick={() => deleteTodo(todo.id)}>삭제</button>
      </div>
    );
  },
);

실행 결과

`TodoItem` 컴포넌트를 `React.memo`로 설정하여 Props가 변하지 않으면 리렌더링이 이루어지지않도록 설정을 하면 더 이상 새로운 todo를 추가하기 위해 input을 입력하는 과정에서 todos가 리렌더링이 이루어지지 않는다.

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

마무리

위의 개선으로 불필요한 리렌더링, 불필요한 메모리 낭비를 모두 개선할 수 있을까 생각을 했지만

새로운 input 입력에 대해서 TodoItem이 리렌더링이 이루어지지 않게 개선을 하였지만, 추가/삭제/토글 버튼을 클릭할 경우 다시 모든 todo가 리렌더링이 되는 문제가 계속해서 발생하고 있는 걸 볼 수 있다.

왜 추가/삭제/토글 버튼을 클릭하면 모든 todo가 리렌더링이 이루어지는 것일까?

`useCallback`의 문제와 이로 인한 `React.memo`가 제대로 동작하지 않는 이유를 다음 글에서 살펴 볼 예정이다.

TodoList 만들기

의현 — Wed, 17 Dec 2025 18:03:35 +0900

개요

React를 이용하여 간단한 TodoList를 만들어보고 `useCallback`, `React.memo`, `함수형 업데이트` 등을 이용해 하나씩 개선해 볼 예정이다.

TodoList 만들기 - 초기 세팅

초기 React 앱을 만들기 위해 터미널에 아래와 같은 명령어를 통해 간단한 React App을 생성한다.

npm create vite@latest my-todo-app -- --template react

TodoList 정보는 아래 todos 정보를 이용할 예정이다.

https://jsonplaceholder.typicode.com/

JSONPlaceholder - Free Fake REST API

{JSON} Placeholder Free fake and reliable API for testing and prototyping. Powered by JSON Server + LowDB. Serving ~3 billion requests each month.

jsonplaceholder.typicode.com

TodoList.tsx, TodoItem.tsx 생성

// TodoList.tsx
import { useEffect, useState } from "react";
import { Todo } from "./types";
import { TodoItem } from "./TodoItem";

export const TodoList = () => {
  const [todos, setTodos] = useState<Todo[]>([]);
  const [newTodo, setNewTodo] = useState("");

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(
          "https://jsonplaceholder.typicode.com/todos",
        );

        if (!response.ok) {
          throw new Error("Response Error");
        }

        const data: Todo[] = await response.json();
        setTodos(data);
      } catch (error) {
        console.log(error);
      }
    };

    fetchData();
  }, []);

  const addTodo = () => {
    const item: Todo = {
      userId: Date.now(),
      id: Date.now(),
      title: newTodo,
      completed: false,
    };

    setTodos([...todos, item]);
    setNewTodo("");
  };

  const deleteTodo = (id: number) => {
    setTodos(todos.filter((todo) => todo.id !== id));
  };

  const toggleTodo = (id: number) => {
    setTodos(
      todos.map((todo) =>
        todo.id === id ? { ...todo, completed: !todo.completed } : todo,
      ),
    );
  };

  return (
    <div>
      <h1>Todo List</h1>

      <input
        type="text"
        value={newTodo}
        onChange={(e) => setNewTodo(e.target.value)}
      />
      <button onClick={addTodo}>추가</button>

      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>
            <TodoItem
              todo={todo}
              deleteTodo={deleteTodo}
              toggleTodo={toggleTodo}
            />
          </li>
        ))}
      </ul>
    </div>
  );
};

// TodoItem.tsx
import { Todo } from "./types";

interface TodoItemProps {
  todo: Todo;
  deleteTodo: (id: number) => void;
  toggleTodo: (id: number) => void;
}

export const TodoItem = ({ todo, deleteTodo, toggleTodo }: TodoItemProps) => {
  console.log(todo.id);
  return (
    <div>
      <input
        type="checkbox"
        checked={todo.completed}
        onChange={() => toggleTodo(todo.id)}
      />
      {todo.title}
      <button onClick={() => deleteTodo(todo.id)}>삭제</button>
    </div>
  );
};

// types.ts
export interface Todo {
  userId: number;
  id: number;
  title: string;
  completed: boolean;
}

실행 결과

`npm run dev` 명령어를 통해 앱을 실행하면 다음과 같은 화면 구성을 볼 수 있다.

마무리

todos 정보를 불러와 간단하게 화면에 출력하는 todo app을 만들었다.

현재 만들어진 todo app은 성능상 여러 문제가 존재한다.

다음 글에서 위 앱의 문제점들과 어떻게 개선할 수 있는지에 대해 다뤄볼 예정이다.

LeetCode Search in Rotated Sorted Array (JavaScript)

의현 — Wed, 17 Dec 2025 17:16:31 +0900

링크 : https://leetcode.com/problems/search-in-rotated-sorted-array/description/

문제 설명

There is an integer array nums sorted in ascending order (with distinct values).

Prior to being passed to your function, nums is possibly left rotated at an unknown index k (1 <= k < nums.length) such that the resulting array is [nums[k], nums[k+1], ..., nums[n-1], nums[0], nums[1], ..., nums[k-1]] (0-indexed). For example, [0,1,2,4,5,6,7] might be left rotated by 3 indices and become [4,5,6,7,0,1,2].

Given the array nums after the possible rotation and an integer target, return the index of target if it is in nums, or -1 if it is not in nums.

You must write an algorithm with O(log n) runtime complexity.

Example 1:

Input: nums = [4,5,6,7,0,1,2], target = 0
Output: 4

Example 2:

Input: nums = [4,5,6,7,0,1,2], target = 3
Output: -1

Example 3:

Input: nums = [1], target = 0
Output: -1

Constraints:

1 <= nums.length <= 5000
104 <= nums[i] <= 104
All values of nums are unique.
nums is an ascending array that is possibly rotated.
104 <= target <= 104

문제 풀이

mid를 기준으로 왼쪽, 오른쪽 둘 중 하나는 정렬이 되어있다를 이용하여 문제를 접근

1. mid를 기준으로 좌측이 정렬되어 있는 경우 (nums[left] <= nums[mid])

target이 좌측안에 존재하는지 판단
- 있다면 right 값을 mid - 1로
- 없다면 우측에 있으므로 left 값을 mid + 1로

2. mid를 기준으로 우측이 정렬되어 있는 경우 (nums[mid] <= nums[right])

target이 우측안에 존재하는지 판단
- 있다면 left 값을 mid + 1로
- 없다면 좌측에 있으므로 right 값을 mid - 1로

3. mid 값이 target과 같다면 mid 리턴

4. while 문이 끝나면 발견을 하지 못하는 값이므로 -1 리턴

/**
 * @param {number[]} nums
 * @param {number} target
 * @return {number}
 */
var search = function(nums, target) {
    let [left, right] = [0, nums.length - 1];

    while (left <= right) {
        const mid = Math.floor((left + right) / 2);

        if (nums[mid] === target) {
            return mid;
        }

        // mid 기준 좌측이 정렬되어있다.
        if (nums[left] <= nums[mid]) {
            // 좌측 정렬 안에 값이 존재하는지 확인
            if (nums[left] <= target && target < nums[mid]) {
                right = mid - 1;
            } else {
                left = mid + 1;
            }
        } else { // mid 기준 우측이 정렬되어있다.
            // 우측 정렬 안에 값이 존재하는지 확인
            if (nums[mid] < target && target <= nums[right]) {
                left = mid + 1;
            } else {
                right = mid - 1;
            }
        }
    }

    return -1;
};

결론

Binary Search를 어떻게 진행할 건지를 판단하는게 핵심

보통은 모두 정렬된 상태에서 Binary Search를 진행하지만 이 문제는 정렬이 되어있지 않음.

따라서 정렬된 구간을 통해 값을 구해나가는 방식으로 문제를 접근해야 함.

LeetCode Remove Duplicates from Sorted Array ll (JavaScript)

의현 — Wed, 17 Dec 2025 16:55:24 +0900

링크 : https://leetcode.com/problems/remove-duplicates-from-sorted-array-ii/description/

문제 설명

Given an integer array nums sorted in non-decreasing order, remove some duplicates in-place such that each unique element appears at most twice. The relative order of the elements should be kept the same.

Since it is impossible to change the length of the array in some languages, you must instead have the result be placed in the first part of the array nums. More formally, if there are k elements after removing the duplicates, then the first k elements of nums should hold the final result. It does not matter what you leave beyond the first k elements.

Return k after placing the final result in the first k slots of nums.

Do not allocate extra space for another array. You must do this by modifying the input array in-place with O(1) extra memory.

Custom Judge:

The judge will test your solution with the following code:

int[] nums = [...]; // Input array
int[] expectedNums = [...]; // The expected answer with correct length

int k = removeDuplicates(nums); // Calls your implementation

assert k == expectedNums.length;
for (int i = 0; i < k; i++) {
    assert nums[i] == expectedNums[i];
}

If all assertions pass, then your solution will be accepted.

Example 1:

Input: nums = [1,1,1,2,2,3]
Output: 5, nums = [1,1,2,2,3,_]
Explanation: Your function should return k = 5, with the first five elements of nums being 1, 1, 2, 2 and 3 respectively.
It does not matter what you leave beyond the returned k (hence they are underscores).

Example 2:

Input: nums = [0,0,1,1,1,1,2,3,3]
Output: 7, nums = [0,0,1,1,2,3,3,_,_]
Explanation: Your function should return k = 7, with the first seven elements of nums being 0, 0, 1, 1, 2, 3 and 3 respectively.
It does not matter what you leave beyond the returned k (hence they are underscores).

Constraints:

1 <= nums.length <= 3 * 104
104 <= nums[i] <= 104
nums is sorted in non-decreasing order.

문제 풀이

2개의 포인터를 이용하여 문제를 풀이

1. 최대 2개의 연속된 수를 가질 수 있으므로 시작은 2부터 시작

2. 현재 요소가 유효한지 확인

nums[i] !== nums[index - 2]
현재 요소(nums[i])가 nums[index - 2]와 같다면 3개 이상 존재하는 것

3. 배열 업데이트

nums[index] = nums[i]; index++;

/**
 * @param {number[]} nums
 * @return {number}
 */
var removeDuplicates = function(nums) {
    let index = 2;

    for (let i = 2; i < nums.length; i++) {
        if (nums[i] !== nums[index - 2]) {
            nums[index] = nums[i];
            index++;
        }
    }

    return index;
};

결론

배열의 원소를 최대 2개만 보이도록 하는 로직을 생각하는게 핵심

LeetCode Set Matrix Zeroes (JavaScript)

의현 — Tue, 16 Dec 2025 18:27:09 +0900

링크 : https://leetcode.com/problems/set-matrix-zeroes/description/

문제 설명

Given an m x n integer matrix matrix, if an element is 0, set its entire row and column to 0's.

You must do it in place.

Example 1:

Input: matrix = [[1,1,1],[1,0,1],[1,1,1]]
Output: [[1,0,1],[0,0,0],[1,0,1]]

Example 2:

Input: matrix = [[0,1,2,0],[3,4,5,2],[1,3,1,5]]
Output: [[0,0,0,0],[0,4,5,0],[0,3,1,0]]

Constraints:

m == matrix.length
n == matrix[0].length
1 <= m, n <= 200
231 <= matrix[i][j] <= 231 - 1

Follow up:

A straightforward solution using O(mn) space is probably a bad idea.
A simple improvement uses O(m + n) space, but still not the best solution.
Could you devise a constant space solution?

문제 풀이

첫 번째 반복문

각 row를 돌면서 0의 index (j)를 set에 저장, 해당 row에 0이 있다면 zero를 true로 바꿈
zero가 true라면 해당 라인은 0으로 채워야 하기 때문에 row의 모든 col을 0으로 변환

두 번째 반복문

각 row의 0 index를 저장해 두었고 해당 index의 위, 아래도 0으로 변환해야 하기 때문에 matrix를 돌면서 해당 col index가 set에 속해 있다면 0으로 변환

최종적으로 matrix 반환

/**
 * @param {number[][]} matrix
 * @return {void} Do not return anything, modify matrix in-place instead.
 */
var setZeroes = function(matrix) {
    const set = new Set();

    for (let i = 0; i < matrix.length; i++) {
        let zero = false;
        for (let j = 0; j < matrix[i].length; j++) {
            if (matrix[i][j] === 0) {
                set.add(j);
                zero = true;
            }
        }

        if (zero) {
            for (let j = 0; j < matrix[i].length; j++) {
                matrix[i][j] = 0;
            }
        }
    }

    for (let i = 0; i < matrix.length; i++) {
        for (let j = 0; j < matrix[i].length; j++) {
            if (set.has(j)) {
                matrix[i][j] = 0;
            }
        }
    }

    return matrix;
};

결론

0으로 변환하는 부분을 2개로 나누어 해결

단순 구현 문제

LeetCode Simplify Path (JavaScript)

의현 — Mon, 15 Dec 2025 18:32:38 +0900

링크 : https://leetcode.com/problems/simplify-path/description/

문제 설명

You are given an absolute path for a Unix-style file system, which always begins with a slash '/'. Your task is to transform this absolute path into its simplified canonical path.

The rules of a Unix-style file system are as follows:

A single period '.' represents the current directory.
A double period '..' represents the previous/parent directory.
Multiple consecutive slashes such as '//' and '///' are treated as a single slash '/'.
Any sequence of periods that does not match the rules above should be treated as a valid directory or file name. For example, '...' and '....' are valid directory or file names.

The simplified canonical path should follow these rules:

The path must start with a single slash '/'.
Directories within the path must be separated by exactly one slash '/'.
The path must not end with a slash '/', unless it is the root directory.
The path must not have any single or double periods ('.' and '..') used to denote current or parent directories.

Return the simplified canonical path.

Example 1:

Input: path = "/home/"

Output: "/home"

Explanation:

The trailing slash should be removed.

Example 2:

Input: path = "/home//foo/"

Output: "/home/foo"

Explanation:

Multiple consecutive slashes are replaced by a single one.

Example 3:

Input: path = "/home/user/Documents/../Pictures"

Output: "/home/user/Pictures"

Explanation:

A double period ".." refers to the directory up a level (the parent directory).

Example 4:

Input: path = "/../"

Output: "/"

Explanation:

Going one level up from the root directory is not possible.

Example 5:

Input: path = "/.../a/../b/c/../d/./"

Output: "/.../b/d"

Explanation:

"..." is a valid name for a directory in this problem.

Constraints:

1 <= path.length <= 3000
path consists of English letters, digits, period '.', slash '/' or '_'.
path is a valid absolute Unix path.

문제 풀이

'/' 를 기준으로 문자열을 나눈 뒤, 나눈 문자열을 가지고 최종 path를 생성

1. 빈 문자열이거나 .(현재 디렉토리) 인 경우 처리가 필요없으므로 continue

2. ..(이전 디렉토리)인 경우 answer(현재 경로)의 길이가 1이상일 경우 맨 위의 원소를 뺌

3. 아닌 경우 answer에 경로 추가

최종적으로 answer를 '/'로 이어 붙이면 됨

/**
 * @param {string} path
 * @return {string}
 */
var simplifyPath = function(path) {
    const p = path.split('/');
    const answer = [];

    for (let i = 0; i < p.length; i++) {
        if (p[i] === '' || p[i] === '.') continue;
        
        if (p[i] === '..') {
            if (answer.length > 0) {
                answer.pop();
            }
        } else {
            answer.push(p[i]);
        }
    }

    return '/' + answer.join('/'); 
};

결론

stack을 이용한 구현 문제

LeetCode Minimum Path Sum (JavaScript)

의현 — Thu, 11 Dec 2025 18:11:36 +0900

링크 : https://leetcode.com/problems/minimum-path-sum/description/

문제 설명

Given a m x n grid filled with non-negative numbers, find a path from top left to bottom right, which minimizes the sum of all numbers along its path.

Note: You can only move either down or right at any point in time.

Example 1:

Input: grid = [[1,3,1],[1,5,1],[4,2,1]]
Output: 7
Explanation: Because the path 1 → 3 → 1 → 1 → 1 minimizes the sum.

Example 2:

Input: grid = [[1,2,3],[4,5,6]]
Output: 12

Constraints:

m == grid.length
n == grid[i].length
1 <= m, n <= 200
0 <= grid[i][j] <= 200

문제 풀이

DP를 이용하여 풀이

핵심 : 각 자리에서 도달할 수 있는 최단 거리를 저장해 나가면서 계산

1. 첫 번째 row는 이전 row의 값을 더해주면 됨, 첫 번째 col은 이전 col의 값을 더해주면 됨.

2. 오른쪽, 아래로 이동이 가능하므로 위, 왼쪽에서 올 수 있는 최단거리의 값을 자리에 더해줌.

3. 최종적으로 m - 1, n - 1좌표는 최단 거리가 저장되어있음.

/**
 * @param {number[][]} grid
 * @return {number}
 */
var minPathSum = function(grid) {
    const m = grid.length;
    const n = grid[0].length;

    for (let i = 0; i < m; i++) {
        for (let j = 0; j < n; j++) {
            if (i === 0) {
                if (j > 0) {
                    grid[i][j] += grid[i][j - 1];
                }
            } else if (j === 0) {
                if (i > 0) {
                    grid[i][j] += grid[i - 1][j];
                }
            } else {
                grid[i][j] += Math.min(grid[i - 1][j], grid[i][j - 1]);
            }
        }
    }

    return grid[m - 1][n - 1];
};

결론

DP를 활용해 각 자리를 어떠한 방식으로 관리를 할 것인가가 중요

LeetCode Unique Paths (JavaScript)

의현 — Wed, 10 Dec 2025 10:56:00 +0900

링크 : https://leetcode.com/problems/unique-paths/description/

문제 설명

There is a robot on an m x n grid. The robot is initially located at the top-left corner (i.e., grid[0][0]). The robot tries to move to the bottom-right corner (i.e., grid[m - 1][n - 1]). The robot can only move either down or right at any point in time.

Given the two integers m and n, return the number of possible unique paths that the robot can take to reach the bottom-right corner.

The test cases are generated so that the answer will be less than or equal to 2 * 109.

Example 1:

Input: m = 3, n = 7
Output: 28

Example 2:

Input: m = 3, n = 2
Output: 3
Explanation: From the top-left corner, there are a total of 3 ways to reach the bottom-right corner:
1. Right -> Down -> Down
2. Down -> Down -> Right
3. Down -> Right -> Down

Constraints:

1 <= m, n <= 100

문제 풀이

1. (시간 초과) BFS를 활용하여 문제 풀이 -> 0,0 부터 오른쪽, 아래 가능한 경로를 stack에 쌓으면서 최종 목적지 까지 가는 횟수를 카운트

-> 2가지의 경우의 수가 존재하고 m x n 행을 전부 탐색해야 하므로 O(2^(m+n))의 시간복잡도를 가짐

/**
 * @param {number} m
 * @param {number} n
 * @return {number}
 */
var uniquePaths = function(m, n) {
    const move = [[1, 0], [0, 1]];
    let answer = 0;

    const stack = [[0, 0]];

    while (stack.length > 0) {
        let [x, y] = stack.pop();

        if ((x === n - 1) && (y === m - 1)) {
            answer++;
            continue;
        }

        for (let i = 0; i < move.length; i++) {
            const mx = x + move[i][0];
            const my = y + move[i][1];

            if (mx < n && my < m) {
                stack.push([mx, my]);
            }
        }
    }

    return answer;
};

2. 2차원 배열을 한번만 순회하여 정답을 구하는 방법으로 O(m + n)으로 해결

각 위치는 현재 위치까지 도달할 수 있는 갯수를 의미. 즉, 아래, 오른쪽으로 이동이 가능하므로

현재 위치(x, y)기준 왼쪽(x - 1, y), 위(x, y - 1)의 값을 더한 값이 현재 위치의 도달 가능 횟수임.

최종적으로 (m - 1, n - 1)을 리턴해주면 됨.

/**
 * @param {number} m
 * @param {number} n
 * @return {number}
 */
var uniquePaths = function(m, n) {
    let arr = Array.from({length: m}, () => Array.from({length: n}, () => 1));

    for (let i = 1; i < m; i++) {
        for (let j = 1; j < n; j++) {
            arr[i][j] = arr[i - 1][j] + arr[i][j - 1];
        }
    }

    return arr[m - 1][n - 1];
};

결론

BFS를 이용해 쉽게 해결할 순 있지만 시간복잡도 초과 문제가 발생하고,

문제를 좀 더 생각해보면 각 위치가 어떠한 방식으로 생성이 될 수 있는지 파악할 수 있다.