takeU

11. 클라우드 리버스 프록시 설정

takeU — Thu, 6 Nov 2025 20:47:17 +0900

구축 이유

기존에는 Hosting.kr에서 도메인을 관리하면서 api.maplemworlds.kr과 maplemworlds.kr 두 도메인 모두의 요청을 로컬 PC로 전달하도록 설정해 로컬 환경에서 트래픽을 분기 처리하고 있었음.

api.maplemworlds.kr 요청은 로컬에서 PM2로 실행 중인 서버로,
maplemworlds.kr 요청은 Netlify에서 호스팅 중인 웹으로 전달되도록 구성했는데

모든 트래픽이 로컬 컴퓨터를 한 번씩 거치기 때문인지 다른 이유때문인지 정확히는 모르겠지만, 집에서 사용하는 와이파이가 프록시 서버를 구축한 이후에 간헐적으로 끊기는 문제가 생겨 클라우드 프록시 서버를 따로 두기로 결정.

옮기는게 유의미한 효과가 있을진 모르겠지만..일단 옮기긴 해놨음

Cloudflare로 도메인 연결

Cloudflare 무료 가입 → “Add Site” → maplemworlds.kr 추가
요금제는 “Free Plan” 선택 (무과금 짱)
Cloudflare에서 네임서버 2개 확인 (예: ns1.cloudflare.com, ns2.cloudflare.com)
Hosting.kr 접속 → 도메인 관리 → 네임서버 설정 → 사용자 지정 네임서버 선택 (기존 hostingkr에서 제공하던 네임서버 4개는 삭제)
이후 cloudflare에 active가 떠있고, nslookup -type=ns maplemworlds.kr 를 체크했을때 설정한 네임서버가 있으면 완료

Github Pages next.js 에셋 404 뜰 때

takeU — Mon, 2 Jun 2025 14:47:38 +0900

원인

GitHub Pages는 기본적으로 Jekyll이라는 정적 사이트 생성기를 사용합니다.
그리고 Jekyll은 _next/, _site/, _includes/처럼 밑줄(_)로 시작하는 폴더를 무시합니다.

즉, _next/ 폴더가 있어도 서빙되지 않습니다.

해결 방법: `.nojekyll` 파일 추가

.nojekyll이라는 빈 파일을 GitHub Pages 루트에 추가하면 Jekyll 처리를 비활성화할 수 있습니다.

touch docs/.nojekyll
git add docs/.nojekyll
git commit -m "fix: add .nojekyll to serve _next static files"
git push origin main

JWT 인증과 인가 흐름

takeU — Wed, 12 Mar 2025 00:16:28 +0900

JWT 인증과 인가 흐름

1. Axios 인터셉터를 활용한 자동 토큰 갱신 예시

Axios 인터셉터 설정

Axios를 사용하여 Access Token의 만료를 감지하고, Refresh Token을 사용하여 새로운 Access Token을 발급받는 방식으로 자동화할 수 있음.

import axios from 'axios';

// Axios 인스턴스 생성
const api = axios.create({
  baseURL: 'https://example.com/api',
  timeout: 10000,
  headers: { 'Content-Type': 'application/json' },
});

// 요청 인터셉터 (요청이 보내지기 전에 처리)
api.interceptors.request.use(
  config => {
    // localStorage에서 Access Token을 가져와 Authorization 헤더에 넣음
    const accessToken = localStorage.getItem('accessToken');
    if (accessToken) {
      config.headers['Authorization'] = `Bearer ${accessToken}`;
    }
    return config;
  },
  error => Promise.reject(error)
);

// 응답 인터셉터 (응답이 돌아왔을 때 처리)
api.interceptors.response.use(
  response => {
    // 정상적인 응답 처리
    return response;
  },
  async error => {
    // 401 에러 (Access Token 만료된 경우) 처리
    if (error.response && error.response.status === 401) {
      try {
        // Refresh Token을 사용하여 새로운 Access Token 요청
        const refreshToken = localStorage.getItem('refreshToken');
        const response = await axios.post('/api/refresh-token', { refreshToken });

        // 새로운 Access Token을 localStorage에 저장
        const { accessToken } = response.data;
        localStorage.setItem('accessToken', accessToken);

        // 원래의 요청을 새로운 Access Token으로 재요청
        const originalRequest = error.config;
        originalRequest.headers['Authorization'] = `Bearer ${accessToken}`;

        return api(originalRequest);  // 재요청
      } catch (refreshError) {
        // Refresh Token이 만료되었거나 에러가 발생한 경우, 로그아웃 처리
        console.error('Refresh Token도 만료되었거나 에러가 발생했습니다.');
        // 예: 로그아웃 처리
        window.location.href = '/login';
      }
    }

    // 401 외의 오류는 그대로 처리
    return Promise.reject(error);
  }
);

export default api;

작동 원리

요청 인터셉터: 모든 API 요청 전에 Access Token을 Authorization 헤더에 추가.
응답 인터셉터: 응답에서 401 Unauthorized 에러가 발생하면, Refresh Token을 사용하여 새로운 Access Token을 요청하고, 이를 사용해 원래 요청을 재전송.
자동 토큰 갱신: Access Token이 만료되면, Refresh Token을 통해 새로운 토큰을 발급받아 자동으로 재요청함.

2. Access Token과 Refresh Token의 정의 및 저장 방법

Access Token

정의:
- 인증된 사용자의 권한을 증명하는 짧은 유효 기간을 가진 JWT 토큰.
- 서버에서 생성하고, 클라이언트는 이를 사용하여 보호된 리소스에 접근할 수 있음.
저장 방법:
- 보통 localStorage 또는 쿠키에 저장됨.
장점:
- 서버에 요청 시 빠르게 인증을 처리할 수 있음.
- 클라이언트에서 쉽게 헤더에 추가하여 요청할 수 있음.
단점:
- 유효 기간이 짧아, 만료 후 갱신이 필요함.
- localStorage에 저장 시 XSS 공격에 취약할 수 있음.
- 쿠키에 저장 시 CSRF 공격에 취약할 수 있음.

Refresh Token

정의:
- Access Token의 만료 후, 새로운 Access Token을 발급받기 위한 긴 유효 기간을 가진 JWT 또는 임의의 문자열.
- 일반적으로 서버에서만 저장되며, 클라이언트는 이를 통해 Access Token을 갱신할 수 있음.
저장 방법:
- 보통 httpOnly 쿠키에 저장하여 XSS 공격으로부터 보호.
장점:
- 긴 유효 기간을 가지므로 Access Token의 만료 시 계속해서 새로운 Access Token을 발급받을 수 있음.
- httpOnly 쿠키에 저장하면 XSS 공격에 강한 보안을 제공함.
단점:
- Refresh Token의 탈취가 발생하면 액세스 권한을 부여받은 상태로 새로운 Access Token을 발급받을 수 있기 때문에 보안상 위험이 있음.
- 만약 로그아웃 처리가 제대로 되어 있지 않으면, Refresh Token이 계속해서 사용될 수 있음.

3. Access Token과 Refresh Token의 저장 방법 비교

저장 방법	장점	단점
localStorage	- 쉽게 접근 가능하고, 다른 요청에서 사용하기 용이함.	- XSS 공격에 취약함.
쿠키 (일반 쿠키)	- CSRF 공격에 취약할 수 있음.	- 쿠키의 크기에 제한이 있어, 저장할 수 있는 정보에 제한이 있음.
쿠키 (httpOnly)	- XSS 공격에 강함.	- CSRF 공격에 취약할 수 있음.
세션 저장소	- 세션이 끝날 때 토큰이 자동으로 삭제됨.	- 페이지 새로 고침 시 토큰이 삭제됨.

4. 요약

프런트엔드는 Access Token을 Authorization 헤더에 포함하여 API 요청을 보냄.
서버는 Access Token을 검증하여 유효하면 요청을 처리하고, 유효하지 않으면 401 Unauthorized를 반환함.
401 오류가 발생하면, 프런트엔드는 Refresh Token을 사용하여 새로운 Access Token을 발급받고, 이를 사용해 원래의 요청을 다시 보냄.
Access Token은 짧은 유효 기간을 가지며 localStorage 또는 쿠키에 저장됨.
Refresh Token은 긴 유효 기간을 가지며, 보통 httpOnly 쿠키에 저장됨.

서버 증설 횟수 ( Level 2, JavaScript, 2025 프로그래머스 코드챌린지 2차 예선 )

takeU — Thu, 13 Feb 2025 18:48:02 +0900

const solution = (players, m, k) => {
    let res = 0
    const computer = []
    for (let i = 0; i < players.length; i++) {
        while (computer[0] === i) computer.shift()
        if (Math.floor(players[i] / m) > computer.length) {
            let count = Math.floor(players[i] / m) - computer.length
            res += count
            while (count--) computer.push(i + k)
        }
    }
    return res
}

시뮬레이션

그냥 구현하면됨

택배 상자 꺼내기 ( Level 1, JavaScript, 2025 프로그래머스 코드챌린지 2차 예선 )

takeU — Thu, 13 Feb 2025 18:34:52 +0900

const solution = (n, w, num) => {
    let res = 1
    const total = Math.ceil(n / w)
    const target = Math.ceil(num / w)
    const nRemain = n % w || n
    const numRemain = num % w || num
    if (total % 2 === target % 2 && nRemain < numRemain) res -= 1 
    if (total % 2 !== target % 2 && nRemain + numRemain <= w) res -= 1
    return total - target + res
}

total - 전체 쌓여지는 층 수
target - num이 쌓인 층 수

total과 target이 같은 방향인지, 반대 방향인지 확인 후 타겟의 위에 상자가 있는지 체크하는 코드를 통해 위에 없는 경우 -1을 해줌

지게차와 크레인 ( Level 2, JavaScript, 2025 프로그래머스 코드챌린지 1차 예선 )

takeU — Mon, 10 Feb 2025 23:50:02 +0900

const check = (storage, x, y) => {
    const [xlen, ylen] = [storage.length, storage[0].length]
    const dx = [-1, 1, 0, 0]
    const dy = [0, 0, -1, 1]
    const queue = [[x, y]]
    const visited = Array.from({ length: xlen }, () => Array(ylen).fill(0))
    visited[x][y] = 1

    while (queue.length) {
        const cur = queue.shift()
        const [x, y] = cur
        for (let i = 0; i < 4; i++) {
            const [nx, ny] = [x + dx[i], y + dy[i]]
            if (x === 0 || x === xlen - 1
               || y === 0 || y === ylen - 1) {
                return true
            }
            if (0 <= nx && nx < xlen && 0 <= ny && 0 < ylen &&
                !visited[nx][ny] && storage[nx][ny] === '0') {
                queue.push([nx, ny])
                visited[nx][ny] = 1
            }
        }
    }
    return false
}
const solution = (storage, requests) => {
    storage = storage.map(row => row.split(''))
    const [xlen, ylen] = [storage.length, storage[0].length]
    let res = 0

    for (let request of requests) {
        const remove = []
        if (request.length === 1) {
            for (let i = 0; i < xlen; i++) {
                for (let j = 0; j < ylen; j++) {
                    if (storage[i][j] === request && check(storage, i, j)) {
                        res += 1
                        remove.push([i, j])
                    }
                }
            }
        } else {
            for (let i = 0; i < xlen; i++) {
                for (let j = 0; j < ylen; j++) {
                    if (storage[i][j] === request[0]) {
                        res += 1
                        remove.push([i, j])
                    }
                }
            }
        }

        for (let r of remove) {
            const [x, y] = r
            storage[x][y] = '0'
        }
    }
    return xlen * ylen - res                           
}

시뮬레이션 + bfs

조각을 뽑은곳은 0으로 채우고 길이 뚫려있는지 확인하는 check함수를 만들음
check 함수 true 조건은 0을 타고 가장 바깥에 도착했는지 여부
더 깔끔하게 짤 수 있어보이는데 처음생각난대로 우다다하니까 통과됨

비밀 코드 해독 ( Level 2, JavaScript, 2025 프로그래머스 코드챌린지 1차 예선 )

takeU — Mon, 10 Feb 2025 23:15:23 +0900

const combinations = (arr, k) => {
    const result = []
    const combine = (start, combo) => {
        if (combo.length === k) {
            result.push([...combo])
            return
        }
        for (let i = start; i < arr.length; i++) {
            combo.push(arr[i])
            combine(i + 1, combo)
            combo.pop()
        }
    }

    combine(0, [])
    return result
}

const solution = (n, q, ans) => {
    let com = combinations(Array(n).fill(1).map((num, i) => num + i), 5)
    let res = 0
    for (let c of com) {
        for (let i = 0; i < q.length; i++) {
            if (c.filter(num => q[i].includes(num)).length !== ans[i]) break
            if (i === q.length - 1) res += 1
        }
    }
    return res
}

조합 + 브루트포스

n이 적어서 하나하나 대보면 나옴

유연근무제 ( Level 1, JavaScript, 2025 프로그래머스 코드챌린지 1차 예선 )

takeU — Mon, 10 Feb 2025 23:14:04 +0900

const timeToMin = (time) => {
    return Number(String(time).slice(0, -2)) * 60 + Number(String(time).slice(-2))
}

const solution = (schedules, timelogs, startday) => {
    return timelogs.filter((log, logIdx) => {
        return log.filter((time, timeIdx) => {
            if ((timeIdx + startday) % 7 === 6 || ((timeIdx + startday) % 7 === 0)) return true
            return timeToMin(time) <= timeToMin(schedules[logIdx]) + 10
        }).length === 7
    }).length
}

구현

시간 처리하고 모듈러만 적용하면 됨

유사 칸토어 비트열 ( Level 2, JavaScript, 연습문제 )

takeU — Mon, 10 Feb 2025 12:18:47 +0900

const recur = (num) => {
    if (num % 5 === 2) return 0
    if (num < 5) return 1
    return recur(parseInt(num / 5))
}

const solution = (n, l, r) => {
    let res = 0
    for (let i = l - 1; i < r; i++) {
        res += recur(i)
    }
    return res
}

재귀

처음에 n을 같이 넘기니 시간이 몇배로 더걸려서 number만 체크하는 로직으로 변경하니 통과

테이블 해시 함수 ( Level 2, JavaScript, 연습문제 )

takeU — Sun, 9 Feb 2025 20:11:20 +0900

const solution = (data, col, row_begin, row_end) => {
    return data
        .sort((a, b) => {
            const [x, y] = [a[col - 1], b[col - 1]];
            return x !== y ? x - y : b[0] - a[0];
        })
        .slice(row_begin - 1, row_end)
        .map((row, i) => row.reduce((acc, cur) => acc + (cur % (row_begin + i)), 0))
        .reduce((res, cur) => res ^ cur, 0);
}

배열 단순 가공

우박수열 정적분 ( Level 2, JavaScript, 연습문제 )

takeU — Sat, 8 Feb 2025 15:11:40 +0900

const solution = (k, ranges) => {
    const dp = [0], res = []
    while (k > 1) {
        let next = k
        next = k % 2 ? 3 * next + 1 : k / 2
        dp.push((dp.at(-1) ?? 0) + (k + next) / 2)
        k = next
    }

    const len = dp.length - 1
    for (let range of ranges) {
        let [start, end] = range
        res.push(len + end < start ? -1 : dp[len + end] - dp[start])
    }
    return res
}

구간합 문제

전력망을 둘로 나누기 ( Level 2, JavaScript, 연습문제 )

takeU — Sat, 8 Feb 2025 14:40:19 +0900

const check = (hash, start, n) => {
    let count = 0
    const queue = [start]
    const visited = Array(n).fill(0)
    visited[start] = 1
    while (queue.length) {
        count += 1
        const cur = queue.shift()
        for (let num of hash[cur]) {
            if (!visited[num]) {
                queue.push(num)
                visited[num] = 1
            }
        }
    }
    return count
}

const solution = (n, wires) => {
    let res = 100
    for (let i = 0; i < wires.length; i++) {
        let [left, right] = wires[i]
        const hash = Array(n).fill(0).map((el, idx) => idx + 1).reduce((acc, cur) => {
                            acc[cur] = []
                            return acc
                        }, {})
        for (let j = 0; j < wires.length; j++) {
            if (i === j) continue
            const [x, y] = wires[j]
            hash[x].push(y)
            hash[y].push(x)
        }
        res = Math.min(res, Math.abs(check(hash, left, n) - check(hash, right, n)))
    }
    return res
}

완탐은 풀면서도 항상 뭔가 찝찝한 느낌..
hash + bfs

연속된 부분 수열의 합 ( Level 2, JavaScript, 연습문제 )

takeU — Mon, 3 Feb 2025 18:27:47 +0900

const solution = (sequence, k) => {
    let [left, right, acc] = [0, 0, sequence[0]]
    const res = []
    while (right < sequence.length && left <= right) {
        if (acc < k) {
            right += 1
            acc += sequence[right]
        } else {
            if (acc === k) res.push([right - left, left, right])
            acc -= sequence[left]
            left += 1
        }

    }
    return res.sort((a, b) => a[0] - b[0] || a[1] - b[1])[0].slice(1)
}

투포인터

10. Github Actions 배포 자동화

takeU — Sun, 2 Feb 2025 15:34:49 +0900

배포 설정

.github/workflows/deploy.yml

name: Deploy on Push

on:
  push:
    branches:
      - main  # main 브랜치에 푸시될 때 실행

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      # 1. 리포지토리 체크아웃 / 저장소 코드를 워크플로 실행 환경에 복사하는 GitHub에서 제공하는 공식 액션
      - name: Checkout repository
        uses: actions/checkout@v3

      # 2. SSH 키 설정 및 서버에 접속하여 빌드 실행
      - name: Deploy to server
        env:
          SSH_PRIVATE_KEY: ${{ secrets.SSH_PRIVATE_KEY }}
        run: |
          # SSH 키 설정
          mkdir -p ~/.ssh
          echo "$SSH_PRIVATE_KEY" > ~/.ssh/id_rsa
          chmod 600 ~/.ssh/id_rsa

          # SSH 접속 및 빌드 실행
          ssh -p 포트 -o StrictHostKeyChecking=no 이름@IP "
            cd ~/Desktop/playground/apps/maplem/frontend &&
            git pull &&
            pnpm install &&
            pnpm build
          "

빌드 실행 이후 빌드파일을 nginx로 이동시키는 과정까지 빌드 커맨드에 들어있어 자동으로 새로운 버전을 서빙하게 됨.

`SSH_PRIVATE_KEY` 키 등록 방법

ssh 비밀키 복사 cat ~/.ssh/id_rsa 후 복사
GitHub Repository로 이동
Settings → Secrets and Variables → Actions로 이동
New repository secret을 클릭
이름을 SSH_PRIVATE_KEY로 설정하고 복사한 개인 키를 붙여넣기

서버에 공개키를 등록하는 과정

ssh 공개키 복사 cat ~/.ssh/id_rsa.pub 후 복사
ssh 접속 후 ~/.ssh/authorized_keys에 내용 복사

추가적으로 테스트코드를 도입하는 경우 수정될 여지가 있음

코딩테스트를 위한 JavaScript 알고리즘

takeU — Mon, 27 Jan 2025 15:30:03 +0900

bfs

start - [x, y, time]
end - [x, y]
board - 이차원 배열 (O - 이동 가능 / X - 불가능)
visited - 방문 기록 (방문 확인 1 / 미방문 0)

start에서 end까지 가는 시간 계산
시작시간은 start의 세번째 인자 기준으로 도달하지 못하는 경우 -1

const bfs = (start, end, board) => {
    const dx = [-1, 1, 0, 0]
    const dy = [0, 0, -1, 1]
    const visited = Array.from({ length: board.length }, () => Array(board[0].length).fill(0))
    visited[start[0]][start[1]] = 1
    const queue = [start]

    while (queue.length) {
        const [x, y, time] = queue.shift()
        for (let i = 0; i < 4; i++) {
            const [nx, ny] = [x + dx[i], y + dy[i]]
            if (0 <= nx && nx < board.length &&
                0 <= ny && ny < board[0].length &&
                !visited[nx][ny] &&
                board[nx][ny] !== 'X'
               ) {
                       if (nx === end[0] && ny === end[1]) {
                        return time + 1
                    }
                    queue.push([nx, ny, time + 1])
                    visited[nx][ny] = 1
            }
        }
    }
    return -1
}

dfs

const dfs = (x, y, time, end, board, visited) => {
    if (x === end[0] && y === end[1]) return time

    for (let i = 0 i < 4 i++) {
        const [nx, ny] = [x + dx[i], y + dy[i]]
        if (
            0 <= nx && nx < board.length &&
            0 <= ny && ny < board[0].length &&
            !visited[nx][ny] &&
            board[nx][ny] !== 'X'
        ) {
            visited[nx][ny] = 1
            const result = dfs(nx, ny, time + 1, end, board, visited)
            if (result !== -1) {
                return result
            }
            visited[nx][ny] = 0
        }
    }

    return -1
}

const solveDFS = (start, end, board) => {
    const dx = [-1, 1, 0, 0]
    const dy = [0, 0, -1, 1]
    const visited = Array.from({ length: board.length }, () => Array(board[0].length).fill(0))
    visited[start[0]][start[1]] = 1

    return dfs(start[0], start[1], 0, end, board, visited)
}

최대 힙 (우선순위 큐, heap)

class MaxHeap {
  constructor() {
    this.heap = [];
  }

  getParentIndex(index) {
    return Math.floor((index - 1) / 2);
  }

  getLeftChildIndex(index) {
    return 2 * index + 1;
  }

  getRightChildIndex(index) {
    return 2 * index + 2;
  }

  swap(index1, index2) {
    [this.heap[index1], this.heap[index2]] = [this.heap[index2], this.heap[index1]];
  }

  insert(value) {
    this.heap.push(value);
    this.heapifyUp(this.heap.length - 1);
  }

  heapifyUp(index) {
    let currentIndex = index;
    let parentIndex = this.getParentIndex(currentIndex);

    while (currentIndex > 0 && this.heap[currentIndex] > this.heap[parentIndex]) {
      this.swap(currentIndex, parentIndex);
      currentIndex = parentIndex;
      parentIndex = this.getParentIndex(currentIndex);
    }
  }

  extractMax() {
    if (this.heap.length === 0) return null;

    const max = this.heap[0];
    const end = this.heap.pop();

    if (this.heap.length > 0) {
      this.heap[0] = end;
      this.heapifyDown(0);
    }

    return max;
  }

  heapifyDown(index) {
    let largest = index;
    const leftChildIndex = this.getLeftChildIndex(index);
    const rightChildIndex = this.getRightChildIndex(index);

    if (leftChildIndex < this.heap.length && this.heap[leftChildIndex] > this.heap[largest]) {
      largest = leftChildIndex;
    }

    if (rightChildIndex < this.heap.length && this.heap[rightChildIndex] > this.heap[largest]) {
      largest = rightChildIndex;
    }

    if (largest !== index) {
      this.swap(index, largest);
      this.heapifyDown(largest);
    }
  }

  peek() {
    return this.heap.length > 0 ? this.heap[0] : null;
  }

  size() {
    return this.heap.length;
  }
}

최소 힙

class MinHeap {
  constructor() {
    this.heap = [];
  }

  getParentIndex(index) {
    return Math.floor((index - 1) / 2);
  }

  getLeftChildIndex(index) {
    return 2 * index + 1;
  }

  getRightChildIndex(index) {
    return 2 * index + 2;
  }

  swap(index1, index2) {
    [this.heap[index1], this.heap[index2]] = [this.heap[index2], this.heap[index1]];
  }

  insert(value) {
    this.heap.push(value);
    this.heapifyUp(this.heap.length - 1);
  }

  heapifyUp(index) {
    let currentIndex = index;
    let parentIndex = this.getParentIndex(currentIndex);

    while (currentIndex > 0 && this.heap[currentIndex] < this.heap[parentIndex]) {
      this.swap(currentIndex, parentIndex);
      currentIndex = parentIndex;
      parentIndex = this.getParentIndex(currentIndex);
    }
  }

  extractMin() {
    if (this.heap.length === 0) return null;

    const min = this.heap[0];
    const end = this.heap.pop();

    if (this.heap.length > 0) {
      this.heap[0] = end;
      this.heapifyDown(0);
    }

    return min;
  }

  heapifyDown(index) {
    let smallest = index;
    const leftChildIndex = this.getLeftChildIndex(index);
    const rightChildIndex = this.getRightChildIndex(index);

    if (leftChildIndex < this.heap.length && this.heap[leftChildIndex] < this.heap[smallest]) {
      smallest = leftChildIndex;
    }

    if (rightChildIndex < this.heap.length && this.heap[rightChildIndex] < this.heap[smallest]) {
      smallest = rightChildIndex;
    }

    if (smallest !== index) {
      this.swap(index, smallest);
      this.heapifyDown(smallest);
    }
  }

  peek() {
    return this.heap.length > 0 ? this.heap[0] : null;
  }

  size() {
    return this.heap.length;
  }
}

미로 탈출 ( Level 2, JavaScript, 연습문제 )

takeU — Mon, 27 Jan 2025 14:15:35 +0900

const bfs = (start, end, maps) => {
    const dx = [-1, 1, 0, 0]
    const dy = [0, 0, -1, 1]
    const visited = Array.from({ length: maps.length }, () => Array(maps[0].length).fill(0))
    visited[start[0]][start[1]] = 1
    const queue = [start]

    while (queue.length) {
        const [x, y, time] = queue.shift()
        for (let i = 0; i < 4; i++) {
            const [nx, ny] = [x + dx[i], y + dy[i]]
            if (0 <= nx && nx < maps.length
               && 0 <= ny && ny < maps[0].length
               && !visited[nx][ny]
                && maps[nx][ny] !== 'X'
               ) {
                    if (nx === end[0] && ny === end[1]) {
                        return time + 1
                    }
                    queue.push([nx, ny, time + 1])
                    visited[nx][ny] = 1
            }
        }
    }
    return -1
}

const solution = (maps) => {
    let s, l, e
    for (let i = 0; i < maps.length; i++) {
        for (let j = 0; j < maps[0].length; j++) {
            if (maps[i][j] === 'S') s = [i, j, 0]
            else if (maps[i][j] === 'L') l = [i, j, 0]
            else if (maps[i][j] === 'E') e = [i, j]
        }
    }
    const sTol = bfs(s, l, maps)
    const lToe = bfs(l, e, maps)
    if (sTol === -1 || lToe === -1) return -1
    return sTol + lToe
}

bfs -ㅠ-

뒤에 있는 큰 수 찾기 ( Level 2, JavaScript, 연습문제 )

takeU — Wed, 15 Jan 2025 22:48:00 +0900

const solution = (numbers) => {
    const stack = [[0, numbers[0]]], res = Array(numbers.length).fill(-1)
    for (let i = 1; i < numbers.length; i++) {
        while (stack.length && stack.at(-1)[1] < numbers[i]) {
            const [idx, cur] = stack.pop()
            res[idx] = numbers[i]
        }
        stack.push([i, numbers[i]])
    }
    return res
}

스택

교점에 별 만들기 ( Level 2, JavaScript, 위클리 챌린지 )

takeU — Wed, 15 Jan 2025 20:34:56 +0900

function solution(line) {
    const spot = []
    let [minX, maxX, minY, maxY] = [Infinity, -Infinity, Infinity, -Infinity] 
    for (let i = 0; i < line.length; i++) {
        for (let j = i + 1; j < line.length; j++) {
            const [a1, b1, c1] = line[i]
            const [a2, b2, c2] = line[j]
            if (a1 / b1 !== a2 / b2) {
                const x = (b1 * c2 - c1 * b2) / (b2 * a1 - b1 * a2)
                const y = (c1 * a2 - a1 * c2) / (b2 * a1 - b1 * a2)
                if (x === parseInt(x) && y === parseInt(y)) {
                    spot.push([x, y])
                    if (x < minX) minX = x
                    if (x > maxX) maxX = x
                    if (y < minY) minY = y
                    if (y > maxY) maxY = y
                }
            }
        }
    }
    const res = Array.from({ length: maxY - minY + 1 }, () => Array(maxX - minX + 1).fill('.'))
    for (let [x, y] of spot) {
        res[y - minY][x - minX] = '*'
    }
    return res.reverse().map(row => row.join(''))
}

구현인데..의미없는 구현

무인도 여행 ( Level 2, JavaScript, 연습문제)

takeU — Wed, 15 Jan 2025 18:58:46 +0900

const dx = [-1, 0, 1, 0]
const dy = [0, -1, 0, 1]        

const dfs = (maps, visited, x, y, sum) => {
    visited[x][y] = 1
    for (let i = 0; i < 4; i++) {
        const [nx, ny] = [x + dx[i], y + dy[i]]
        if (0 <= nx && nx < maps.length &&
            0 <= ny && ny < maps[0].length &&
            maps[nx][ny] !== 'X' && !visited[nx][ny]) {
            sum += dfs(maps, visited, nx, ny, +maps[nx][ny])
        }
    }
    return sum
}
const solution = (maps) => {
    const res = []
    const [x, y] = [maps.length, maps[0].length]
    const visited = Array.from({ length: x }, () => Array(y).fill(0)) 
    for (let i = 0; i < x; i++) {
        for (let j = 0; j < y; j++) {
            if (maps[i][j] !== 'X' && !visited[i][j]) {
                res.push(dfs(maps, visited, i, j, +maps[i][j]))
            } 
            visited[i][j] = 1
        }
    }
    return res.length ? res.sort((a, b) => a - b) : [-1]
}

dfs

디펜스 게임 ( Level 2, JavaScript, 연습문제)

takeU — Tue, 14 Jan 2025 18:39:14 +0900

class MaxHeap {
  constructor() {
    this.heap = [];
  }

  getParentIndex(index) {
    return Math.floor((index - 1) / 2);
  }

  getLeftChildIndex(index) {
    return 2 * index + 1;
  }

  getRightChildIndex(index) {
    return 2 * index + 2;
  }

  swap(index1, index2) {
    [this.heap[index1], this.heap[index2]] = [this.heap[index2], this.heap[index1]];
  }

  insert(value) {
    this.heap.push(value);
    this.heapifyUp(this.heap.length - 1);
  }

  heapifyUp(index) {
    let currentIndex = index;
    let parentIndex = this.getParentIndex(currentIndex);

    while (currentIndex > 0 && this.heap[currentIndex] > this.heap[parentIndex]) {
      this.swap(currentIndex, parentIndex);
      currentIndex = parentIndex;
      parentIndex = this.getParentIndex(currentIndex);
    }
  }

  extractMax() {
    if (this.heap.length === 0) return null;

    const max = this.heap[0];
    const end = this.heap.pop();

    if (this.heap.length > 0) {
      this.heap[0] = end;
      this.heapifyDown(0);
    }

    return max;
  }

  heapifyDown(index) {
    let largest = index;
    const leftChildIndex = this.getLeftChildIndex(index);
    const rightChildIndex = this.getRightChildIndex(index);

    if (leftChildIndex < this.heap.length && this.heap[leftChildIndex] > this.heap[largest]) {
      largest = leftChildIndex;
    }

    if (rightChildIndex < this.heap.length && this.heap[rightChildIndex] > this.heap[largest]) {
      largest = rightChildIndex;
    }

    if (largest !== index) {
      this.swap(index, largest);
      this.heapifyDown(largest);
    }
  }

  peek() {
    return this.heap.length > 0 ? this.heap[0] : null;
  }

  size() {
    return this.heap.length;
  }
}


function solution(n, k, enemy) {
    let res = 0, i = 0
    const maxHeap = new MaxHeap();

    while (k >= 0 && n >= 0 && i < enemy.length) {
        n -= enemy[i]
        maxHeap.insert(enemy[i])
        if (n < 0 && k > 0) {
            const max = maxHeap.extractMax()
            n += max 
            k -= 1
        }
        res += 1
        i += 1
    }
    return n >= 0 ? res : res - 1
}

자바스크립트 최대힙 구현

n에서 일단 병사 제거 + 힙에 추가 한 뒤 n이 0 아래로 내려가면 heap에서 최대값을 더해주고 k를 소모하는 방식

takeU

11. 클라우드 리버스 프록시 설정

구축 이유

Cloudflare로 도메인 연결

Github Pages next.js 에셋 404 뜰 때

원인

해결 방법: .nojekyll 파일 추가

JWT 인증과 인가 흐름

JWT 인증과 인가 흐름

1. Axios 인터셉터를 활용한 자동 토큰 갱신 예시

Axios 인터셉터 설정

작동 원리

2. Access Token과 Refresh Token의 정의 및 저장 방법

Access Token

Refresh Token

3. Access Token과 Refresh Token의 저장 방법 비교

추천

4. 요약

서버 증설 횟수 ( Level 2, JavaScript, 2025 프로그래머스 코드챌린지 2차 예선 )

택배 상자 꺼내기 ( Level 1, JavaScript, 2025 프로그래머스 코드챌린지 2차 예선 )

지게차와 크레인 ( Level 2, JavaScript, 2025 프로그래머스 코드챌린지 1차 예선 )

비밀 코드 해독 ( Level 2, JavaScript, 2025 프로그래머스 코드챌린지 1차 예선 )

유연근무제 ( Level 1, JavaScript, 2025 프로그래머스 코드챌린지 1차 예선 )

유사 칸토어 비트열 ( Level 2, JavaScript, 연습문제 )

테이블 해시 함수 ( Level 2, JavaScript, 연습문제 )

우박수열 정적분 ( Level 2, JavaScript, 연습문제 )

전력망을 둘로 나누기 ( Level 2, JavaScript, 연습문제 )

연속된 부분 수열의 합 ( Level 2, JavaScript, 연습문제 )

10. Github Actions 배포 자동화

배포 설정

SSH_PRIVATE_KEY 키 등록 방법

코딩테스트를 위한 JavaScript 알고리즘

bfs

dfs

최대 힙 (우선순위 큐, heap)

최소 힙

미로 탈출 ( Level 2, JavaScript, 연습문제 )

뒤에 있는 큰 수 찾기 ( Level 2, JavaScript, 연습문제 )

교점에 별 만들기 ( Level 2, JavaScript, 위클리 챌린지 )

무인도 여행 ( Level 2, JavaScript, 연습문제)

디펜스 게임 ( Level 2, JavaScript, 연습문제)

해결 방법: `.nojekyll` 파일 추가

`SSH_PRIVATE_KEY` 키 등록 방법