Coding Note

Next.js 16에서 useSearchParams() 사용 시 should be wrapped in a suspense boundary 에러가 발생한 이유와 해결 방법

KimMinJun — Tue, 16 Dec 2025 17:50:51 +0900

문제 상황

Next.js 16(App Router)을 사용하는 프로젝트에서 `searchbar`컴포넌트를 구현하던 중,

URL 쿼리 스트링을 읽기 위해 `useSearchParams()`훅을 사용했다.

"use client";

import { useEffect, useState } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import style from "./serachbar.module.css";

export default function Searchbar() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const [search, setSearch] = useState("");

  const q = searchParams.get("q");

  // 이후 렌더링 ...
}

에디터와 개발 모드(`npm run dev`)에서 에러는 없었지만,

프로덕션 모드에서도 확인하기 위해 빌드(`npm run build`)를 수행하자 다음과 같은 에러가 발생했다.

에러 증상

⨯ useSearchParams() should be wrapped in a suspense boundary at page "/".
Read more: https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout

개발 서버에서는 에러가 발생하지 않음
빌드 시에 위 문구가 뜨면서 빌드 실패
- suspense boundary로 감싸야 한다는 에러가 출력됨

원인 분석 과정

1. `useSearchParams()`에 대해 알아보기

먼저, `useSearchParams()`에 관한 오류이기 때문에 해당 훅에 대해 알아보는게 먼저라고 생각했다.

물론, 에러 메시지에 참고할 링크도 친절하게 나와있지만 해당 훅부터 공식문서를 참고해보자고 생각했다.

https://nextjs.org/docs/app/api-reference/functions/use-search-params

Functions: useSearchParams | Next.js

API Reference for the useSearchParams hook.

nextjs.org

조금 내리다보면, 'Static Rendering' 부분에 `<SearchBar />` 컴포넌트를 구현한 예제가 있다.

그리고 그 바로 밑에 보면 `<SearchBar />` 컴포넌트를 사용하는 Page 컴포넌트가 있다.

import { Suspense } from 'react'
import SearchBar from './search-bar'
 
// This component passed as a fallback to the Suspense boundary
// will be rendered in place of the search bar in the initial HTML.
// When the value is available during React hydration the fallback
// will be replaced with the `<SearchBar>` component.
function SearchBarFallback() {
  return <>placeholder</>
}
 
export default function Page() {
  return (
    <>
      <nav>
        <Suspense fallback={<SearchBarFallback />}>
          <SearchBar />
        </Suspense>
      </nav>
      <h1>Dashboard</h1>
    </>
  )
}

코드를 보면, `<SearchBar />` 컴포넌트를 `<Suspense>`로 감싸서 구현한 것을 볼 수 있다.

2. Suspense Boundary

에러 문구를 해석해보면 다음과 같다.

`useSearchParams()`는 '/' 페이지에서 suspense boundary로 감싸져 있어야 한다.

위 예제로 suspense boundary를 어떻게 적용해야하는지 알았다.

그런데, suspense boundary란 무엇일까?

https://react.dev/reference/react/Suspense

<Suspense> – React

The library for web and native user interfaces

react.dev

리액트에서 제공하는 기능으로,

자식 요소들이 모두 로딩이 끝날때까지 fallback을 보여주는 컴포넌트이다.

3. 왜 <Suspense>를 사용해야 할까?

  const router = useRouter();
  const q = searchParams.get("q");

렌더링 중에 search params가 아직 준비되지 않으면,

Next.js는 렌더링을 멈추려 하지만 이를 감싸는 `<Suspense />`가 없어서 에러가 발생하는 것이다.

더 자세히 알아보기 위해서,

기존 에러메시이제 출력된 링크를 참고해보기로 했다.

https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout

Missing Suspense boundary with useSearchParams

Using App Router Features available in /app

nextjs.org

들어가자마자 가장 위에 왜 이런 에러가 발생하는지 이유가 나온다.

Reading search parameters through useSearchParams() without a Suspense boundary
will opt the entire page into client-side rendering.
This could cause your page to be blank until the client-side JavaScript has loaded.

해석해보면 다음과 같다.

Suspense boundary 없이 useSearchParams()를 이용해서 search parameter를 읽는것은
모든 페이지를 CSR 방식으로 렌더링하게 한다.
이로 인해서 클라이언트에서 JavaScript가 로딩될때까지 페이지가 비어있을 수 있다.

1) Next.js(App Router)의 기본 렌더링은 "서버가 먼저 그려준다"

App Router에서는 기본적으로 서버 컴포넌트(RSC) 중심으로 렌더링된다.

즉, HTML이 서버에서 먼저 만들어져서 내려오고, 클라이언트 JS는 나중에 로딩된 후, 하이드레이션 된다.

2) 그런데 `useSearchParams()`는 '클라이언트 훅'이고, 경우에 따라 렌더링을 멈출 수 있다.

https://nextjs.org/docs/messages/deopted-into-client-rendering

Entire page deopted into client-side rendering

Using App Router Features available in /app

nextjs.org

공식문서에 따르면, Suspense boundary가 없으면

정적 렌더링시에 모든 페이지가 클라이언트 사이드에서 렌더링된다고 적혀있다.

정적 라우팅의 경우에, `useSearchParams()`훅을 호출하면

가장 가까운 Suspense boundary까지의 트리를 클라이언트 사이드에서 렌더링하게 한다.

Suspense가 없으면 대체 UI를 보여줄 방법이 없기 때문에,

이 상태로 서버가 HTML을 만들다가 중단되면, 사용자에게 보낼 완성된 HTML이 애매해진다.

그래서 Next.js는 해당 페이지는 서버에서 미리 렌더링하지 말고,

클라이언트에서 JS가 로드된 다음에 전부 렌더링, 즉 CSR이 되는것이다.

3) Suspense를 사용하면?

가장 가까운 Suspense Boundary까지만 CSR로 만들기 때문에,

나머지는 서버 SSR, 혹은 정적 렌더링을 유지할 수 있다.

즉, '페이지 전체 CSR'을 막고, 동적인 부분만 격리하는 용도로 사용되는것이다.

해결 방법

`<Searchbar />` 컴포넌트를 Suspense로 감싸서 렌더링한다.

import { ReactNode, Suspense } from 'react';
import Searchbar from '../../components/searchbar';

export default function Layout({ children }: { children: ReactNode }) {
  return (
    <div>
      <Suspense>
        <Searchbar />
      </Suspense>
      {children}
    </div>
  );
}

[스위프 웹 11기 후기] - 팀 빌딩부터 네트워킹까지

KimMinJun — Sat, 13 Dec 2025 19:52:03 +0900

스위프란?

https://swyp.im/

스위프 | IT 직군을 위한 취업·커리어 성장 플랫폼

실전 프로젝트로 배우고 협업하며 성장하는 IT 커리어, 스위프에서 포트폴리오와 실무 역량을 완성하세요.

swyp.im

스위프는 기획자(PM), 개발자, 디자이너 등

IT 직군이 실전형 팀 프로젝트를 경험하면서 취업과 커리어 성장을 준비할 수 있도록 돕는 플랫폼이다.

웹/앱 프로젝트 기수제로 운영되면서 지원자들을 팀으로 매칭해주는데,

나는 웹 11기 프론트엔드 직군으로 참여해서 프로젝트를 수행했다.

최종적으로 우리 팀은 PM 1명, 디자이너 1명, 프론트엔드 2명, 백엔드 3명으로 이루어졌다.

뭐니뭐니해도 가장 좋았던 점은 '다양한 직군과 협업할 수 있는 기회'이다.

항상 사이드 프로젝트 팀원을 구하거나 수행할때마다,

개발자들끼리 모여서 누군가는 PM 역할을 수행하고,

누군가는 디자이너 역할을 수행해야 했다.

하기싫은건 둘째치고, 아무래도 그 직군의 작업에 대한 전문성이 떨어졌었다.

하지만, PM님과 디자이너님과 하니 개발에만 집중할 수 있었고,

퀄리티있는 산출물과 디자인으로 개발할 수 있어서 매우 좋았다.

팀 빌딩

처음에는 팀 빌딩 기간이 주어진다.

무작위로 팀 빌딩이 이루어지는 것이 아니라,

본인을 나타내는 프로필 카드를 작성하게 된다.

그 후에는 다른 사람의 직군, 선호 도메인, 기술 스택, 등...을 보면서 자유롭게 팀 빌딩을 하면 된다.

아무래도 개발 직군에서는 백엔드 개발자가 많고, 프론트 개발자가 상대적으로 적다.

또한, PM 인원도 굉장히 적기 때문에 PM 분이랑 꼭 같이 협업해보고 싶었는데...

감사하게도 PM 님이 있는 팀에서 먼저 연락이 와서 같이할 수 있게 되었다.

좋게 봐주셔서 감사합니다...!

Tip!
팀 빌딩은 굉장히 빠른 시간내에 거의 완성됩니다.
같이하고 싶은 분이 있다면, 적극적으로 빠르게 연락을 하시는것을 추천드려요!
또한, PM과 디자이너 직군이 상대적으로 적기 때문에 빠르게 포섭을...

6주 간의 과정

총 개발 기간은 6주 + 고도화 2주로 진행된다.

총 8주라고 생각할 수 있겠지만,

수료 기준은 6주 개발 후의 완성도를 보기 때문에 MVP는 6주안에 꼭 만들어야 한다.

그 외의 고정적인 일정은 매주 목요일 진행되는 '리뷰데이'가 있다.

각 팀이 한 주간 어떤것을 했는지,

어떤 것을 할건지 짧게 공유하는 스프린트 회고 시간이라고 생각하면 된다.

이 '리뷰데이' 참석도 수료기준에 들어가있기 때문에 참석해야 한다!

귀찮을수도 있겠지만, 다른 팀들은 어떤것을 만들고 있는지 알아보는게 재밌었다.

그 외에는, 팀 자체적으로 일정을 진행하면 된다.

뤼이도(Riido)

스위프에 참여하게 되면 2가지의 혜택이 주어지는데, 그 중 하나가 '뤼이도'이다.

뤼이도는 프로젝트 관리 툴으로, 흔히 많이 사용하는 Jira와 비슷한 툴이라고 생각하면 된다.

그냥 사용권이 아닌 유료 플랜 사용권이 주어진다.

이런 관리 툴을 사용하면,

확실히 내가 하고있지 않은 작업 포함 프로젝트 전체의 진행을 트래킹하기 편해진다.

다만,,, 본격적으로 개발 시작하고 나서는 github issue로 작업을 트래킹하다보니

아무래도 중후반엔 자주 사용하지 않게 되어 아쉬움이 있다...

네이버 클라우드 크레딧

배포를 하게되면 AWS나 기타 클라우드 서비스를 요즘 많이 이용한다.

그래서 당연히 비용처리에 대한 부분도 생각할 수 밖에 없는데,

네이버 클라우드 크레딧을 최대 100만원까지 받을 수 있다.

이러한 혜택 덕분에 서버 비용에 대한 걱정은 거의 하지 않아도 되서 좋았다.

두드림 - AI 팀 빌딩 서비스

프로젝트는 AI를 활용해서 팀 빌딩을 쉽게 해주는 '두드림'이라는 서비스를 만들었다.

프로젝트에 대한 자세한 정보는 다음 게시글에서 다룰것이기 때문에,

완성하기까지의 과정에 대한것만 담아보려 한다.

팀 그라운드룰

첫 자체적 팀 회의에서는 '팀 그라운드룰'을 정했다.

팀 문화 규칙, 소통같은 부분은 어쩌면 당연하다고 생각될 수 있겠지만,

확실히 문서화를 해놓으면 다같이 지키게 되므로 필수라고 생각한다.

아이디에이션

아이디에이션 과정에서도 재밌는 아이디어들이 많았다.

내 아이디어가 채택되지 못했지만,

다음과 같은 형식으로 각자의 아이디어를 간략하게 소개하는 노션 페이지를 만들어서 공유했다.

다음에 기회되면 혼자서라도 구현해보고 싶은 아이디어인데,

네이버가 평점 시스템을 없앤점,

별점을 얻는 API가 없는 플랫폼이 있는데 데이터를 어떻게 얻을것인지 등...

여러 문제점이 있어서 조금 더 생각해보고 해보려고한다.

이 후 개발 시작전까지의 과정

이 다음에도 아이디어 구체화, 기능 명세 등...

개발 전 산출물들을 만들어내는데 약 3주의 시간을 쏟았다.

그러다보니 개발을 할 시간이 생각보다 충분치 않았다.

물론 기획과 디자인이 탄탄해야 개발 과정에서 수정사항이 줄어 좋다고 하지만...

아무래도 결국 시간에 쫓기게 되었다 ㅎ...

개발 과정

몇개만 간략히 설명하자면, 일단 기술스택은 다음과 같다.

기본: Next.js, TypeScript
스타일링: Emotion, Radix UI, svgr
상태관리: Tanstack Query, (Zustand)
폼: React Hook Form, Zod
Linting/Formatting: Biome, husky
에디터: Tiptap Editor
테스트: Jest (시간 부족 이슈...)
날짜: date-fns
알림: SSE(Sever Sent Event), EventSourcePolyfill

그리고 프로젝트를 시작하게 되면 항상 내가 맡아서 해왔던 작업이 있는데,

컨벤션 정리와 프로젝트 세팅 가이드를 만드는 것이다.

컨벤션에는 다음과 같은 것들을 정리한다.

Git Convention
- Branch Convention
- Commit Convention
- Issue Template
- PR Template
- Labels
Naming Convention
Folder Structure
Code Style

정할게 많지만, 이전 프로젝트에서 사용했던 것들을 가져오면서 생각보다 금방 끝났다.

프로젝트 세팅 가이드는 대충 아래와 같은 순서로 이미지와 함께 간단 설명을 적어놓는다.

이후 컨벤션에 따라 쭉 개발을 진행했는데,

약 한 달 정도의 짧은 시간에도 불구하고 650개정도의 커밋을...

같이 프론트엔드를 맡으신 분과 정말 슬랙으로 활발히 소통하고

오늘은 이정도까지만 하자며 아침 6시정도에 merge후 테스트를 하고 잠들었다 ㅎ...

가장 좋았던 점은 그렇게 바쁜 일정에도 불구하고,

코드리뷰가 활발히 이루어져서 정말 좋았다.

사실 어떤것을 구현하고 기술을 적용할 때 보다,

코드리뷰를 주고 받으며 수정해나갈때 실력이 상승한다고 생각하는데 그런 의미로 정말 감사했다...

데모데이 및 마무리

스위프는 마무리까지도 정말 좋은 경험이었다.

단순히 만든 프로젝트에 대해 발표하고 끝나는 것이 아니라,

위 사진처럼 우리 서비스를 다른 사람이 사용해볼 수 있게 하고,

다른 팀들의 서비스를 사용해볼 수 있는 시간을 갖는다.

아쉽게도 수상은 하지 못했지만,

다양한 직군과의 협업
단기간에 몰입
실사용자의 피드백

위 세가지만으로도 충분히 좋은 경험이라고 생각한다.

그리고 제일 중요한 네트워킹!

사실 낯을 좀 가리기도 해서 하기전엔 탈출하고 싶은 생각이 들었지만,

프론트엔드끼리 모여서 네트워킹 하고,

다양한 직군끼리 모여서 네트워킹 하는 시간이 생각보다 재밌고 시간이 잘갔다.

초상권 때문에 사진은 못올리지만... 재밌는 경험이었다.

데모데이를 마치고,

간단히 팀 회식을 하며 프로젝트 방향에 대한 이야기를 나눴다.

아쉽게도 일정상 고도화에는 같이 못하시는 분이 생겼지만,

프로젝트는 계속해서 고도화해보려고 한다.

6주간 정말 힘들고 재밌는 경험이었으며,

참여를 고민하는 사람들에겐 여건이 되면 꼭 해보라고 말씀드리고 싶다.

궁금한 점은 댓글로 남겨주시길 바라며 포스팅 끝!

프로젝트에 Ncloud를 사용해보자

KimMinJun — Tue, 25 Nov 2025 16:41:07 +0900

Ncloud란?

https://www.ncloud.com/intro/feature

NAVER CLOUD PLATFORM

cloud computing services for corporations, IaaS, PaaS, SaaS, with Global region and Security Technology Certification

www.ncloud.com

Ncloud는 클라우드 서비스 플랫폼으로,

서버, 스토리지, 네트워킹, 데이터베이스, AI 서비스 등

다양한 IT 인프라와 소프트웨어 서비스를 클라우드 형태로 제공합니다.

우리 서비스에서는 위 이미지와 같이 사용중입니다.

하나씩 간단히 어떤 서비스인지에 대해 설명을 드리자면,

먼저, Cloud Log Analytics는 다음과 같이 한 문장으로 나타낼 수 있습니다.

"네이버 클라우드 플랫폼의 상품을 이용하면서 발생하는 다양한 로그를 손쉽게 저장하고 분석 데이터를 제공하는 시스템"

물론 대시보드에서 본인이 이용중인 서비스를 UI로 한 눈에 볼 수 있지만,

모두 모아서 로그로 빠르게 보고싶을 때나 서비스 이용중에 이슈가 생겼을 시 트래킹하기 편합니다.

다음으로, Server와 Public IP 서비스는 다음과 같이 나타낼 수 있습니다.

"빠르게 생성하여 원하는 분야에 효율적으로 활용하는 서버"

많은 분들이 필수, 혹은 주로 이용할 서비스라고 생각됩니다.

직접 서버를 구축하는것보다, 클라우드에서 제공하는 서버를 이용해 간편히 인프라를 구축할 수 있었습니다.

Software 서비스 또한 서버 구축시에 연관된 서비스인데,

서버 이미지(종류)를 선택하고, 관리할 수 있습니다.

마지막으로, CLOVA Studio 입니다.

"비즈니스에 최적화된 하이퍼스케일 AI 개발 도구"라고 나타낼 수 있습니다.

우리 서비스에는 'AI를 이용한 자기소개 생성' 서비스를 이용하고 있는데,

CLOVA와 연동하여 쉽게 연결 및 관리할 수 있었습니다.

프로젝트 - 두드림

(아직 개발중입니다.)

https://dodream.store/

두드림

놓치고 있는 기회가 있을지 몰라요! AI가 회원님의 프로필과 관심사를 분석하여 최적의 글을 추천해 드립니다. 지금 로그인하고 숨겨진 기회를 두드려보세요.

dodream.store

두드림은,

"사이드 프로젝트/스터디를 함께할 팀원을 찾는 과정을 AI 추천으로 간소화하는 협업 매칭 서비스입니다."

기존의 여러 팀원을 찾는 플랫폼들은

지원자가 지원하면 보통 카카오톡 오픈채팅이나 디스코드 등 외부 서비스를 이용해 소통하는 방식입니다.

모집부터 매칭까지, 사용자는 수동적인 탐색과 외부 채널 이동을 반복해야 하죠.

이 과정에서 탐색 피로가 누적되고 신뢰 검증이 불가능해지는 포인트들이 있습니다.

위와 같은 불편함을 해소하기 위해 다음 기능을 넣어 이 프로젝트를 제작하게 되었습니다.

지원자에게는 : 가입 시 입력한 기술 스택, 관심사를 AI가 분석 후 모집글 추천
모집글 작성자에게는 : 모집글을 AI가 분석 후 최적의 유저를 추천
모두에게: 지원 전에 궁금한점은 서비스 내 1:1 채팅 기능을 이용해서 해소

AI 기능이 필요했고,

여러 기능들과 웹 소켓을 이용한 채팅 기능등 여러 기능들이 얽힌 서버를 관리해야 했기 때문에,

NCP의 CLOVA와 Server 기능들을 이용해서 간단히 구축할 수 있었습니다.

NCloud 후기

모든 후기는 둘러보면서 느낀것과, 팀원들의 사용 및 설정 후기를 취합하여 작성되었습니다.

좋았던 점

같은 클라우드 서비스인 AWS보다 전반적으로 사용 방식이 직관적이라 편리했습니다.
NCP 콘솔, 가이드, 문서가 한국어로 제공되어 국내 개발자 입장에서 이해하기 편했습니다.
한국 리전이 있어서 '국내망', '낮은 지연'이라는 점에서 국내 서비스 목적이라면 편리할 수 있다고 생각했습니다.
UI과 콘솔 또한 한국어로 되어있어 비교적 직관적이라 편리했습니다.

좋았던 점을 취합해보면,
아무래도 네이버가 한국 서비스이기 때문에 한국인들이 사용하기 편하다는것이 전반적입니다.
또한, UI로도 많은 정보를 보고 관리할 수 있어서 사용법이 직관적이라는 후기 입니다.

아쉬웠던 점

기존에 공개된 이용 안내문과 실제 화면이 달라 혼란스러운 부분이 있었습니다.
서브계정 생성시에 sudo 설정, root 접속 잠금 등의 절차가 복잡한 부분이 있었습니다.
vectorDB 관련 임베딩이 눈에 띄지 않아서 찾기 힘들었습니다.
NCP ObjectStorage
- aws s3와 호환이 된다고 설명이 되어있음에도,
  엔드포인트 변경 / 키 인증 / 권한 설정 / 네트워크 구조 등 번거로운 부분이 너무 많았습니다.
- 세부설정 조차도 다르고, 기본 엔드포인트가 아닌 액세스키 별도 생성등이 요구되는데 너무 불편했습니다.
대부분의 문서가 한국어로 되어있는건 좋았지만,
사실상 엣지케이스가 상세하게 다뤄지지는 않아서 정보 부족으로 더 많이 구글링하고 찾아봐야 했습니다.
Clova 임베딩이 모델마다 차원수가 강하게 고정되어 있어서 정확하게 설정하지 않으면 오류가 발생했습니다.
대량 임베딩 처리시 rate-limit 문제가 발생해서 불편했습니다. (약 500개 정도의 데이터에서도 발생)

아쉬웠던 점을 취합해보면,
공식문서가 UI/UX 업데이트나 기능 업데이트를 따라오지 못하는 느낌이었습니다.
한국어로 되어있어 보기 편함에도, 오히려 더 많이 찾아봐야 했습니다.
또한, 편리한 서비스들을 제공한다는 느낌이지만
막상 사용해보면 세부 설정등 안내된것보다 복잡하거나 어려운것이 많았습니다.

Green Developers

네이버클라우드 예비 개발자 지원 프로그램 Green Developer에 참여해 크레딧을 받아서 NCloud를 사용해봤습니다.

확실히 클라우드 서비스라 인프라 구축에서 많은 도움을 직관적으로 받을 수 있어서 편리했습니다.

개발자들에게 제일 귀찮고도 어려운 부분이 이런 환경 구축이라고 생각되는데,

좋은 기회를 통해 좋은 경험을 할 수 있었습니다.

Next.js + node.js로 간단한 Web Scoket 채팅 구현하기 - 1

KimMinJun — Tue, 7 Oct 2025 18:58:27 +0900

개요

그동안 여러 프로젝트를 진행해오면서

SSE(Server Sent Event), CRUD API 연동은 진행해봤지만,

Web Socket을 다뤄본적은 없었다.

Web Socket 대신 SSE를 사용했던 이유는 알림 기능을 구현하기 위해서였다.

물론 Web Socket을 사용해도 되지만,

클라이언트는 단순히 알림조회를 하므로 양방향 소통이 필요하지 않았다.

그래서 단방향인 SSE를 다뤘었다.

그래서 Web Socket을 한번쯤은 다뤄보고 싶었는데,

언젠간 분명히 사용할 것 같아서 그냥 간단한 채팅을 구현하면서 트러블 슈팅을 해보려한다.

Server

평소에 프론트엔드를 주로 공부하고, 프로젝트도 모두 프론트엔드로 참여를 했다.

그리고 프론트엔드 직무로 프론트엔드를 준비중이기도 하다.

따라서 서버를 다룬 경험은 거의 없어서 고민했는데,

어차피 일단은 단순히 맛보기만 할것이기 때문에 node.js를 사용해서 서버를 구성하였다.

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8080 });
console.log('웹소켓 서버가 8080 포트에서 실행되었습니다.');

wss.on('connection', (ws) => {
  console.log('클라이언트가 연결되었습니다.');

  ws.on('message', (message) => {
    wss.clients.forEach((client) => {
      if (client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });

  ws.on('close', () => {
    console.log('클라이언트 연결이 끊어졌습니다.');
  });
});

wss.on('error', (error) => {
  console.error('웹소켓 에러:', error);
});

1. 기본 설정

초기 설정은 아래 영상 참고해서 했습니다!

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

먼저 client와 server 폴더를 나눠서 만들어주었다.

다음으로, 터미널에서 server 폴더로 들어간 뒤,

프로젝트를 다음 명령어로 초기화해주었다.

# server 폴더로 이동
cd server
# 프로젝트 초기화
npm init

명령어를 입력하게 되면 여러 옵션을 선택하는것이 나오는데,

일단은 모두 기본값으로 하기 위해 계속 엔터를 눌러준다.

정상적으로 모두 마쳤다면, server 폴더 밑에 package.json 파일이 생성된다.

이후에 소켓을 직접 구현해도 되지만,

비트 연산을 활용해서 소켓 프레임을 직접 구상하는 등 복잡하기 때문에

다음 명령어로 웹 소켓 라이브러리를 설치해준다.

npm i ws

2. server.js 구현

설정을 모두 마쳤다면 server.js 파일을 만들어준다.

그리고 다음과 같이 코드를 작성해준다.

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8080 });
console.log('웹소켓 서버가 8080 포트에서 실행되었습니다.');

// ws는 클라이언트와 연결된 웹소켓 인스턴스
wss.on('connection', (ws) => {
  console.log('클라이언트가 연결되었습니다.');

  ws.on('message', (message, isBinary) => {
    wss.clients.forEach((client) => {
      if (client.readyState === WebSocket.OPEN) {
        client.send(message, { binary: false });
      }
    });
  });

  ws.on('close', () => {
    console.log('클라이언트 연결이 끊어졌습니다.');
  });
});

wss.on('error', (error) => {
  console.error('웹소켓 에러:', error);
});

wss.on('close', () => {
  console.log('웹소켓 서버가 종료되었습니다.');
});

하나씩 살펴보자.

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8080 });
console.log('웹소켓 서버가 8080 포트에서 실행되었습니다.');

서버는 8080 포트에서 열리도록 했다.

만약 포트가 다른것과 충돌난다면, 포트번호를 바꿔서 하면 된다.

// ws는 클라이언트와 연결된 웹소켓 인스턴스
wss.on('connection', (ws) => {
  console.log('클라이언트가 연결되었습니다.');

  ws.on('message', (message, isBinary) => {
    wss.clients.forEach((client) => {
      if (client.readyState === WebSocket.OPEN) {
        client.send(message, { binary: false });
      }
    });
  });

  ws.on('close', () => {
    console.log('클라이언트 연결이 끊어졌습니다.');
  });
});

`on`이벤트를 통해서 웹 소켓관련 액션들을 처리하는데,

'connection'은 클라이언트가 연결되었을 때 실행된다.

여기서 콜백의 인자로 넘겨주는 `ws`는 클라이언트와 연결된 웹소켓 객체(인스턴스)이다.

연결이 완료된 후,

각 클라이언트 별로 이벤트 처리를 할 수 있다.

여기서 'message' 이벤트는 클라이언트로부터 어떠한 메시지를 받았을 때 실행되는 이벤트이다.

이를 처리할 콜백인자로 `message`와 `isBinary`를 넘겨주었는데,

`message`는 클라이언트로부터 받은 메시지,

`isBinary`는 받은 메시지가 바이너리 형식인지 판단하는 boolean 값이다.

모두가 같은 채팅방에 있다는 가정하에,

한 클라이언트가 보낸 메시지는 다른 모든 클라이언트에게 보여야한다.

따라서 연결된 모든 클라이언트를 순회하면서 메시지를 보내준다.

여기서 메시지는 문자열이기 때문에, binary는 false로 지정해준다.

(기본값이 false이므로 따로 지정해주지 않아도 된다.)

마지막으로 클라이언트의 연결이 끊어졌을 때인 'close' 이벤트를 처리해주면 된다.

3. server 구동

서버를 모두 구현한 후,

서버를 구동하려면 터미널에서 다음 명령어를 입력해주면 된다.

node server.js

정상적으로 작동이 되었다면, 터미널에서 다음 메시지를 확인할 수 있다.

Client

클라이언트는 Next.js로 구현하였다.

사실 어떠한 서비스를 만드는것이 아니라 연습하는 것이므로,

단순 JS나 React로 구성해도 상관이없다.

CSS는 Tailwind CSS와 shadcn/ui로 작성하였다.

최대한 복잡한 db나 서버가 필요하지 않는 범위에서 카카오톡 채팅방을 클론해보며 하려한다.

다음은 1차로 구현한 전체 코드이다.

'use client';

import useSocket from '@/hooks/useSocket';
import { Avatar, AvatarFallback, AvatarImage } from '@radix-ui/react-avatar';
import { SearchIcon } from 'lucide-react';
import { useState } from 'react';

export default function Home() {
  const { messages, socket } = useSocket();
  const [message, setMessage] = useState('');

  function handleSend(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();

    socket?.send(message);
    setMessage('');
  }

  return (
    <div className="bg-blue-300 w-1/3 h-3/5 rounded-lg flex flex-col border border-gray-300 justify-between">
      <header className="p-2 flex items-center gap-2 justify-between">
        <div className="flex items-center gap-2">
          <Avatar>
            <AvatarImage
              src="https://github.com/shadcn.png"
              className="rounded-full w-5 h-5"
            />
            <AvatarFallback>CN</AvatarFallback>
          </Avatar>

          <p>유저1</p>
        </div>

        <div className="flex items-center gap-2">
          <button>
            <SearchIcon className="w-4 h-4" />
          </button>
        </div>
      </header>

      <div className="p-2 overflow-y-auto">
        {messages.map((item, index) => (
          <div key={index}>{item}</div>
        ))}
      </div>

      <form className="h-1/5 flex flex-col p-2 bg-white" onSubmit={handleSend}>
        <textarea
          className="w-full h-full resize-none focus:outline-none text-sm p-1"
          value={message}
          onChange={(e) => setMessage(e.target.value)}
          placeholder="메시지 입력"
          onKeyDown={(e) => {
            if (e.key === 'Enter' && !e.shiftKey) {
              e.preventDefault();
              e.currentTarget.form?.requestSubmit();
            }
          }}
        />
        <div className="flex justify-end">
          <button
            type="submit"
            className={`font-semibold text-sm rounded-lg py-2 px-4 ${
              message.length > 0
                ? 'bg-yellow-300 '
                : 'bg-gray-100 text-gray-400'
            }`}
            disabled={message.length === 0}
          >
            전송
          </button>
        </div>
      </form>
    </div>
  );
}

<textarea
  className="w-full h-full resize-none focus:outline-none text-sm p-1"
  value={message}
  onChange={(e) => setMessage(e.target.value)}
  placeholder="메시지 입력"
  onKeyDown={(e) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      e.currentTarget.form?.requestSubmit();
    }
  }}
/>

socket 관련 로직 부분은 조금 길어서 커스텀 훅으로 별도로 분리했다.

그 전에, UI 조금만 살펴보자면 메시지 입력 부분에 <textarea>를 사용했다.

onKeyDown 이벤트에 엔터를 눌렀을 때 처리를 해주었는데,

엔터를 누르면 입력한 메시지가 전송이 되도록 폼 제출을 하도록 해주었다.

shift 키를 같이 누르면, 카카오톡과 똑같이 전송은 안되고 줄바꿈이 되도록 조건을 걸어주었다.

<div className="flex justify-end">
  <button
    type="submit"
    className={`font-semibold text-sm rounded-lg py-2 px-4 ${
      message.length > 0
        ? 'bg-yellow-300 '
        : 'bg-gray-100 text-gray-400'
    }`}
    disabled={message.length === 0}
  >
    전송
  </button>
</div>

전송버튼은 입력한 메시지가 없을 때 disable 되도록 해놨다.

또한, 입력한 메시지가 있는지 여부에 따라 디자인도 바뀌도록 해놨다.

완성하면 다음과 같은데, 여러 브라우저에서 실행해서 테스트해보면 된다.

다음에는 각 유저 구별을 위한 기능을 추가해봐야겠다!

백준 / 4195번 / 친구 네트워크 / JS

KimMinJun — Tue, 23 Sep 2025 17:42:00 +0900

https://www.acmicpc.net/problem/4195

풀이

const fs = require('fs');
const filePath = process.platform === 'linux' ? 0 : './input.txt';
const input = fs.readFileSync(filePath).toString().trim().split('\n');

const T = +input.shift();

function* idGenerator() {
  let id = 0;

  while (true) {
    yield id++;
  }
}

class UnionFind {
  constructor() {
    this.parent = [];
    this.count = [];
    this.nameMap = new Map();
    this.idGenerator = idGenerator();
  }

  getId(name) {
    if (!this.nameMap.has(name)) {
      const newId = this.idGenerator.next().value;

      this.nameMap.set(name, newId);
      this.parent.push(newId);
      this.count.push(1);
    }

    return this.nameMap.get(name);
  }

  getParent(id) {
    if (this.parent[id] === id) {
      return id;
    }

    return (this.parent[id] = this.getParent(this.parent[id]));
  }

  union(id1, id2) {
    const rootId1 = this.getParent(id1);
    const rootId2 = this.getParent(id2);

    if (rootId1 === rootId2) {
      return this.count[rootId1];
    }

    if (this.count[rootId1] < this.count[rootId2]) {
      this.parent[rootId1] = rootId2;
      this.count[rootId2] += this.count[rootId1];
    } else {
      this.parent[rootId2] = rootId1;
      this.count[rootId1] += this.count[rootId2];
    }

    return this.count[this.getParent(id1)];
  }
}

function solution() {
  const result = [];

  for (let testCase = 0; testCase < T; testCase++) {
    const F = +input.shift();
    const uf = new UnionFind();

    for (let i = 0; i < F; i++) {
      const [user1, user2] = input.shift().split(' ');

      const user1Id = uf.getId(user1);
      const user2Id = uf.getId(user2);

      const count = uf.union(user1Id, user2Id);

      result.push(count);
    }
  }

  console.log(result.join('\n'));
}

solution();

Union Find를 활용하는 문제였다.

기본 Union Find와 다른 점은, 문자열로 입력을 받기 때문에 그에 해당하는 숫자를 만들어주어야 했다.

그래야 기존 배열에서 인덱스로 바로 접근 가능하도록 하는 구현이 가능하기 때문이다.

`idGenerator()`

function* idGenerator() {
  let id = 0;

  while (true) {
    yield id++;
  }
}

입력받는 문자열 이름의 숫자 id를 만들어주는 제너레이터 함수이다.

사실 id를 전역 변수로 만든 후에, 일반 함수로 만들어서 써도 상관은 없지만

제너레이터 함수를 써본적이 없어서 이번에 한 번 써보기로 했다.

간단히 설명하자면, 제너레이터 함수는 함수를 선언하는 것도 약간 다른데,

' * ' 문자를 붙여줘야 한다.

그리고 하나의 값을 반환하는 것이 아니라, 여러 개의 값을 필요에 따라 반환할 수 있다.

`next()` 메서드를 부를 때 마다 가장 가까운 yield 문을 만날 때까지 실행이 된다.

`next()`는 `value`와 `done`을 가지는 객체를 반환한다.

자세한 건 아래에서!

https://ko.javascript.info/generators

제너레이터

ko.javascript.info

`class UnionFind`

다음으로 문제 풀이에 필요한 Union Find에 관련된 것을 한 군데서 관리하기 위해 클래스를 만들어주었다.

class UnionFind {
  constructor() {
    this.parent = [];
    this.count = [];
    this.nameMap = new Map();
    this.idGenerator = idGenerator();
  }

  getId(name) {
    if (!this.nameMap.has(name)) {
      const newId = this.idGenerator.next().value;

      this.nameMap.set(name, newId);
      this.parent.push(newId);
      this.count.push(1);
    }

    return this.nameMap.get(name);
  }

  getParent(id) {
    if (this.parent[id] === id) {
      return id;
    }

    return (this.parent[id] = this.getParent(this.parent[id]));
  }

  union(id1, id2) {
    const rootId1 = this.getParent(id1);
    const rootId2 = this.getParent(id2);

    if (rootId1 === rootId2) {
      return this.count[rootId1];
    }

    if (this.count[rootId1] < this.count[rootId2]) {
      this.parent[rootId1] = rootId2;
      this.count[rootId2] += this.count[rootId1];
    } else {
      this.parent[rootId2] = rootId1;
      this.count[rootId1] += this.count[rootId2];
    }

    return this.count[this.getParent(id1)];
  }
}

`UnionFind.constructor()`

  constructor() {
    this.parent = [];
    this.count = [];
    this.nameMap = new Map();
    this.idGenerator = idGenerator();
  }

UnionFind 클래스를 만드는 생성자 함수이다.

각 초기변수가 의미하는 것은 다음과 같다.

parent : 각 요소의 부모 id를 나타내는 배열
count : 현재 id가 속한 네트워크의 친구 수를 저장하는 배열
nameMap : key는 이름, value는 id를 가지는 Map
idGenerator : 위에서 선언한 id 제너레이터 함수

`UnionFind.getId(name)`

  getId(name) {
    if (!this.nameMap.has(name)) {
      const newId = this.idGenerator.next().value;

      this.nameMap.set(name, newId);
      this.parent.push(newId);
      this.count.push(1);
    }

    return this.nameMap.get(name);
  }

이름을 인자로 받아 해당 이름에 해당하는 id를 반환해주는 함수이다.

코드를 보면 `next()`를 호출하면 제너레이터 함수의 다음 yield를 만나고,

그 때 해당하는 value값을 얻을 수 있다.

제너레이터 함수에서 whie(true)로 무한 반복을 하고 있기 때문에,

1씩 증가된 id를 `next()`로 부르면 계속 생성할 수 있다.

만약 `nameMap`에 인자로 들어온 이름이 없다면,

`nameMap`에 이름과 생성한 아이디를 넣어주고,

`parent`에 생성한 id를 넣어준다.

이 때, 배열의 인덱스와 id 모두 0부터 시작하기 때문에,

기본 Union Find 문제 풀 때 처럼 자기 인덱스를 값으로 가지는 배열을 생성하는 것과 같다.

그 후, 초기에는 네트워크에 본인만 있으므로, `count`에 1을 넣어준다.

마지막으로 id를 반환해준다.

`UnionFind.getParent(id)`

  getParent(id) {
    if (this.parent[id] === id) {
      return id;
    }

    return (this.parent[id] = this.getParent(this.parent[id]));
  }

인자로 id를 받고, 해당 id의 루트 부모를 찾아주는 함수이다.

기본 Union Find의 함수와 똑같이 구현하면 된다.

`UnionFind.union(id1, id2)`

  union(id1, id2) {
    const rootId1 = this.getParent(id1);
    const rootId2 = this.getParent(id2);

    if (rootId1 === rootId2) {
      return this.count[rootId1];
    }

    if (this.count[rootId1] < this.count[rootId2]) {
      this.parent[rootId1] = rootId2;
      this.count[rootId2] += this.count[rootId1];
    } else {
      this.parent[rootId2] = rootId1;
      this.count[rootId1] += this.count[rootId2];
    }

    return this.count[this.getParent(id1)];
  }
}

합칠 id 두 개를 인자로 받아, 하나로 합쳐주는 함수이다.

주의할 점은 두 id의 부모가 같을 때이다.

이미 부모가 같으면 합쳐져있다는 의미이므로, 한 쪽의 수를 더하는 행위를 할 필요가 없다.

따라서 아무 부모의 수를 반환해주면 된다.

그 외에는 대소비교를 해서 한쪽에 합쳐주면된다.

`solution()`

function solution() {
  const result = [];

  for (let testCase = 0; testCase < T; testCase++) {
    const F = +input.shift();
    const uf = new UnionFind();

    for (let i = 0; i < F; i++) {
      const [user1, user2] = input.shift().split(' ');

      const user1Id = uf.getId(user1);
      const user2Id = uf.getId(user2);

      const count = uf.union(user1Id, user2Id);

      result.push(count);
    }
  }

  console.log(result.join('\n'));
}

solution();

메인 함수에서는 위에서 만든 클래스를 잘 활용해 답을 구해주면 된다.

주의할 것은 테스트케이스가 여러개이기 때문에 초기화를 잘 해줘야 한다.

2025 FEConf 후기

KimMinJun — Fri, 19 Sep 2025 19:12:28 +0900

2025년 FEConf에 참가한 개인적인 후기입니다.
간단히 어떤 내용들이 있었고, 개인적인 느낌을 적다보니 사진과 조금의 발표자료가 포함되어 있습니다.
초상권, 발표내용을 업로드하는데 문제가 있을 경우,
댓글 남겨주시면 삭제하겠습니다.

늦었지만, FEConf 후기를 올려보려고 한다.

그동안 규모가 작은 밋업이나 컨퍼런스는 가봤지만, 이런 대규모 컨퍼런스는 처음이라 신기하기도 했다.

프론트엔드 개발을 주로 하는 사람으로써, 프론트엔드만을 주제로 한 컨퍼런스라 기대되기도 했다.

세션이 진행되는 홀도 좁지 않았는데,

늦지 않았음에도 빨리 안가면 앉을 자리도 없을 정도였다.

다만 의자에 음료나 본인 짐을 두고 자리를 오래 비우는 사람들이 많았는데,

음료는 가지고 들어갈 수 없었고, 짐을 두고 자리를 오래 비우지 말라는 스태프들의 말이 있었는데 하나도 안지켜진 것 같았다...

결국, 앞 줄에서 자리있냐고 다섯 번 정도는 물어보면서 점점 뒤로 와서 맨 뒤에 앉게됐다 ㅎ,,,

자리가 없어서 뒤에서 서서 보는 사람들도 많았는데,

잘 안보여서 빠르게 자리 선점하는 것이 좋을 것 같다.

첫 세션으로 "'memo'를 지울 결심" 이라는 세션을 들었다.

Memoization도 메모리를 사용하고,

매 렌더링마다 의존성 배열을 비교하기 때문에 런타임 오버헤드가 발생한다.

이 Memoization이 React Compiler를 거치면 코드가 어떻게 변하는지에 대해 알아보았다.

컴파일 과정, React Compiler의 한계와 문제에 대해서도 알아보았다.

사실 프로젝트를 거치면서 Memoization을 많이 써본적은 아직은 없다.

불필요한 리렌더링을 줄여주기 때문에 좋은거 아닌가? 라는 생각이 항상 들었지만,

과연 지금 상황에서 Memoization을 굳이 써야할지,

쓴다고 해서 극적인 효과가 날지도 미지수 였어서 확실하지 않으면 굳이 쓰진 않았던 것 같다.

이런 고민들이 있어서 이 세션을 선택해서 들었는데, 좋은 선택이었던 것 같다.

"앞으로는 수동 메모이제이션에서 해방된 흐름에 집중해야 한다."

를 마무리로 좋은 인사이트를 얻는 세션이었다.

그 다음으로는 "모두를 위한 웹 접근성 무엇이고, 어떻게 하나요?"라는 주제의 세션을 들었다.

사실 접근성을 위한 HTML Attribute들은 알고 있었다.

스크린 리더를 지원하는 aria 속성들이었는데,

당시에 생각날때만 잠깐 추가했었지 처음부터 웹 접근성을 신경쓰면서 했던 적은 없던것 같았다.

"때론 심미성 보다, 접근성 고려가 우선이다."

이 소주제가 확 와닿았다.

UI를 고려하다 보면 어떻게 깔끔하게 할지, 어떻게 예쁘게 디자인할지만 생각하게 된다.

왼쪽 - 코레일 앱 '코레일 톡' 예매화면, 오른쪽 - 리뉴얼 된 웹서비스 예매 화면

왼쪽이 코레일 앱 '코레일 톡' 예매화면이고,

오른쪽이 리뉴얼 된 웹서비스 예매화면이다.

열차 항목을 티켓 형태로 디자인을 리뉴얼하면서 화면에 표시되는 개수가 6개에서 3개로, 절반 줄어들었다.

이게 뜻하는 것은, 동일한 정보를 얻기 위해 더 많은 스크롤과 탐색이 필요하다는 것이다.

그러므로 탐색에 할애하는 시간이 증가되고, 여러 선택지를 같이 비교하기가 어려워진다.

이처럼 디자인은 오른쪽이 예뻐보일 수 있지만,

사용자 입장에서 생각했을 때는 오히려 전의 디자인이 더 편하다는 것이다.

이 내용이 여태까지 생각했던 디자인의 개념을 바꿔놓게 되었다.

나는 UX를 향상시키는 디자인이, 예쁘게 디자인하면서 편해야한다. 라고만 생각했지만,

어떨 때는 예쁜 디자인은 후순위의 고려사항일수도 있다는 것이다.

그 다음으로는, 라이트닝 톡으로 "지속 가능한 개발" 관련 세션을 들었다.

라이트닝 톡은 짧은 시간(20분 정도?)동안 가벼운 주제로 여러 연사자들이 릴레이 형식으로 진행된다.

주제가 '지속 가능한 개발'이기도 하고,

기억상으로 시니어분이 나오셔서 어떠한 개발 방법론에 대해 얘기해주실줄 알았다.

그런데 의외로 '건강'을 강조하는게 뜬금없어서 웃기면서도 공감이 가는 내용이었다.

아무래도 개발자들은 앉아있는 시간이 길고, 모니터를 오래 본다.

그래서 눈건강, 목건강, 허리건강을 걱정하는 사람들도 많을 것이다.

건강해야 계속 개발한다.

이게 진정한 지속 가능한 개발이라고 말하시는데,

처음엔 약간 웃겼지만 완전 공감되는 내용이었다.

마지막으로는 "Tanstack Query 너머를 향해! - 쿼리를 라우트까지 전파시키기"라는 주제의 세션을 들었다.

이 때는 사진찍는걸 깜빡해서 못찍었다...

React Server Component(RSC)와 Tanstack Query가 함께하는 법에 대한 세션이었다.

RSC와 Tanstack Query를 같이 사용하려면,

queryClient만 설정해주는 것이 아니라 prefetch도 해주어야 한다.

그 이유는, 서버에서 미리 데이터를 가져와(dehydrate) 클라이언트로 전달하면,

클라이언트 컴포넌트에서 즉시 캐시된 데이터를 사용해 초기에 바로 렌더링이 가능하기 때문이다.

그렇게 되면 하위 컴포넌트에서 쿼리를 사용할 수 있다.

하지만, 하위 컴포넌트가 멀어진다면 불필요한 prefetch가 남을 수 있다.

이럴 때 서버 컴포넌트를 같이 두면 지우는 것도 동시라서 해결되는데,

이러면 또 RSC가 쌓일 수록 병렬화가 어려워진다...

그래서 대안으로 개발중인 것이 있다고 하는데,

10월 중에 오픈소스로 전환예정이라고 하니 기대된다!

아무래도 React로 개발하면서 Tanstack Query는 이제는 뗄 수 없게 되어버려서 더 기대된다.

위에 소개한 세션들뿐만 아니라 다른 홀에서 동시간대에 진행한 세션들도 많았다.

시간이 겹치고, 내 흥미가 좀 더 돋는쪽으로 가서 들은것이기 때문에,

다른 세션들도 주제는 물론 좋은 주제들이 많아서 아쉬웠다.

세션을 참가하면서 여러 인사이트를 얻을 수 있었는데,

전체적으로 프론트엔드 관련 새로운 라이브러리나 흐름이 계속해서 나올수록

오히려 기본에 충실해야 한다는 느낌을 받았다.

그냥 좋다고 사용하지말고,

왜 써야하는지, 혹은 굳이 써야할까? 라는 고민을 가져야 하는 것 같다.

사실 React로 하다가 Next.js가 유행처럼 번져갈 때 내가 딱 이상태였다.

Next.js 굳이 써야하나? React 만으로 충분한데?

Next.js도 알아갈수록 SEO, 최적화 등 좋은 기능들도 많이 있지만,

오히려 눈을 끈건 편한 라우팅이었다 ㅋㅋㅋ

그리고 좋은 기능들이 많아도 이해를 못하면 제 때 못써먹는다.

여튼, 여러모로 느낀점이 많고 의욕도 생겼던 것 같다.

다음 FEConf도 기대되고, 시간되면 무조건 참여할 것이다.

-끝-

백준 / 16935번 / 배열 돌리기 3

KimMinJun — Tue, 16 Sep 2025 17:28:14 +0900

풀이

const fs = require('fs');
const filePath = process.platform === 'linux' ? '/dev/stdin' : './input.txt';
// const filePath = process.platform === 'linux' ? '/dev/stdin' : 'BOJ/input.txt';
const input = fs.readFileSync(filePath).toString().trim().split('\n');

const [N, M, R] = input.shift().split(' ').map(Number);
const opList = input.pop().split(' ').map(Number);
let arr = input.map((row) => row.split(' ').map(Number));

/**
 * 1. 배열을 상하 반전시키는 함수이다.
 */
function flipUD() {
  const totalRow = arr.length;
  const result = [];

  for (let i = totalRow - 1; i >= 0; i--) {
    result.push([...arr[i]]);
  }

  arr = result;
}

/**
 * 2. 배열을 좌우 반전시키는 함수이다.
 */
function flipLR() {
  const totalRow = arr.length;
  const result = [];

  for (let i = 0; i < totalRow; i++) {
    result.push([...arr[i]].reverse());
  }

  arr = result;
}

/**
 * 3. 오른쪽으로 90도 회전시키는 함수이다.
 */
function rotateRight() {
  const totalRow = arr.length;
  const totalCol = arr[0].length;
  const result = [];

  for (let j = 0; j < totalCol; j++) {
    const row = [];
    for (let i = totalRow - 1; i >= 0; i--) {
      row.push(arr[i][j]);
    }
    result.push(row);
  }

  arr = result;
}

/**
 * 4. 왼쪽으로 90도 회전시키는 함수이다.
 */
function rotateLeft() {
  const totalRow = arr.length;
  const totalCol = arr[0].length;
  const result = [];

  for (let j = totalCol - 1; j >= 0; j--) {
    const row = [];
    for (let i = 0; i < totalRow; i++) {
      row.push(arr[i][j]);
    }
    result.push(row);
  }

  arr = result;
}

/**
 * 5, 6번 연산을 수행하려면 배열을 크기가 N/2×M/2인 4개의 부분 배열로 나눠야 한다.
 *
 * 5. 1번 그룹의 부분 배열을 2번 그룹 위치로, 2번을 3번으로, 3번을 4번으로, 4번을 1번으로 이동시키는 함수이다.
 */
function rotateQuadrantsClockwise() {
  const totalRow = arr.length;
  const totalCol = arr[0].length;
  const rowHalf = totalRow / 2;
  const colHalf = totalCol / 2;
  const result = Array.from({ length: totalRow }, () =>
    Array.from({ length: totalCol })
  );

  // 1번 그룹 -> 2번 그룹 위치로 이동
  for (let i = 0; i < rowHalf; i++) {
    for (let j = 0; j < colHalf; j++) {
      result[i][j + colHalf] = arr[i][j];
    }
  }

  // 2번 그룹 -> 3번 그룹 위치로 이동
  for (let i = 0; i < totalRow / 2; i++) {
    for (let j = colHalf; j < totalCol; j++) {
      result[i + rowHalf][j] = arr[i][j];
    }
  }

  // 3번 그룹 -> 4번 그룹 위치로 이동
  for (let i = rowHalf; i < totalRow; i++) {
    for (let j = colHalf; j < totalCol; j++) {
      result[i][j - colHalf] = arr[i][j];
    }
  }

  // 4번 그룹 -> 1번 그룹 위치로 이동
  for (let i = rowHalf; i < totalRow; i++) {
    for (let j = 0; j < colHalf; j++) {
      result[i - rowHalf][j] = arr[i][j];
    }
  }

  arr = result;
}

/**
 * 6. 1번 그룹의 부분 배열을 4번 그룹 위치로, 4번을 3번으로, 3번을 2번으로, 2번을 1번으로 이동시키는 함수이다.
 */
function rotateQuadrantsCounterClockwise() {
  const totalRow = arr.length;
  const totalCol = arr[0].length;
  const rowHalf = totalRow / 2;
  const colHalf = totalCol / 2;
  const result = Array.from({ length: totalRow }, () =>
    Array.from({ length: totalCol })
  );

  // 1번 그룹 -> 4번 그룹 위치로 이동
  for (let i = 0; i < rowHalf; i++) {
    for (let j = 0; j < colHalf; j++) {
      result[i + rowHalf][j] = arr[i][j];
    }
  }

  // 2번 그룹 -> 1번 그룹 위치로 이동
  for (let i = 0; i < rowHalf; i++) {
    for (let j = colHalf; j < totalCol; j++) {
      result[i][j - colHalf] = arr[i][j];
    }
  }

  // 3번 그룹 -> 2번 그룹 위치로 이동
  for (let i = rowHalf; i < totalRow; i++) {
    for (let j = colHalf; j < totalCol; j++) {
      result[i - rowHalf][j] = arr[i][j];
    }
  }

  // 4번 그룹 -> 3번 그룹 위치로 이동
  for (let i = rowHalf; i < totalRow; i++) {
    for (let j = 0; j < colHalf; j++) {
      result[i][j + colHalf] = arr[i][j];
    }
  }

  arr = result;
}

/**
 * 결과를 출력하는 함수이다.
 */
function printResult() {
  const result = arr.map((row) => row.join(' ')).join('\n');

  console.log(result);
}

function solution() {
  opList.forEach((op) => {
    switch (op) {
      case 1:
        flipUD();
        break;
      case 2:
        flipLR();
        break;
      case 3:
        rotateRight();
        break;
      case 4:
        rotateLeft();
        break;
      case 5:
        rotateQuadrantsClockwise();
        break;
      case 6:
        rotateQuadrantsCounterClockwise();
        break;
      default:
        break;
    }
  });

  printResult();
}

solution();

정말 문제 그대로 구현하면 되는 문제이다.

다만, 주어지는 배열이 정사각형이 아닐 수 있으므로 인덱스를 다루는데 조심해야 한다.

회전하면 행의 개수와 열의 개수가 달라질 수도 있기 때문이다.

`flipUD()`

/**
 * 1. 배열을 상하 반전시키는 함수이다.
 */
function flipUD() {
  const totalRow = arr.length;
  const result = [];

  for (let i = totalRow - 1; i >= 0; i--) {
    result.push([...arr[i]]);
  }

  arr = result;
}

먼저, 1번 연산인 배열을 상하 반전시키는 연산이다.

기존 배열의 마지막 행부터 거꾸로 새로운 배열에 넣어주었다.

`flipLR()`

/**
 * 2. 배열을 좌우 반전시키는 함수이다.
 */
function flipLR() {
  const totalRow = arr.length;
  const result = [];

  for (let i = 0; i < totalRow; i++) {
    result.push([...arr[i]].reverse());
  }

  arr = result;
}

2번 연산인 배열을 좌우 반전시키는 연산이다.

여기서 주의할 것은 reverse() 함수는 원본 배열을 바꾸기 때문에,

전개 연산자를 이용해 얕은 복사를 해준 후, 반전시켜주었다.

물론, 연산 후의 배열로 원본 배열을 대체하기 때문에 상관은 없지만

중간에 한 번 꼬이면 힘들어지기 때문에 방어적으로 코드를 작성하였다.

`rotateRight()`

/**
 * 3. 오른쪽으로 90도 회전시키는 함수이다.
 */
function rotateRight() {
  const totalRow = arr.length;
  const totalCol = arr[0].length;
  const result = [];

  for (let j = 0; j < totalCol; j++) {
    const row = [];
    for (let i = totalRow - 1; i >= 0; i--) {
      row.push(arr[i][j]);
    }
    result.push(row);
  }

  arr = result;
}

3번 연산인 배열을 오른쪽으로 90도 회전시키는 연산이다.

앞으로 계속 나오겠지만, `N`과 `M`이 입력에도 주어졌음에도 `totalRow`랑 `totalCol`을 따로 선언해주었다.

배열이 정사각형이 아닐 경우, 이전 연산에 의해서 회전하면서 행과 열이 바뀔 수 있기 때문이다.

오른쪽으로 90도 회전하게 되면,

첫 번째 열이 첫 번째 행에 오게 되므로, 그 방향을 생각하면서 구현하면 된다.

`rotateLeft()`

/**
 * 4. 왼쪽으로 90도 회전시키는 함수이다.
 */
function rotateLeft() {
  const totalRow = arr.length;
  const totalCol = arr[0].length;
  const result = [];

  for (let j = totalCol - 1; j >= 0; j--) {
    const row = [];
    for (let i = 0; i < totalRow; i++) {
      row.push(arr[i][j]);
    }
    result.push(row);
  }

  arr = result;
}

4번 연산인 배열을 왼쪽으로 90도 회전시키는 연산이다.

마지막 열이 첫 번째 행에 오게 되므로, 그 방향을 생각하면서 구현하면 된다.

`rotateRight()` 연산을 구현했으면 똑같은 방법으로 구현하면 되서 어렵지 않다.

`rotateQuadrantsClockwise()`

/**
 * 5, 6번 연산을 수행하려면 배열을 크기가 N/2×M/2인 4개의 부분 배열로 나눠야 한다.
 *
 * 5. 1번 그룹의 부분 배열을 2번 그룹 위치로, 2번을 3번으로, 3번을 4번으로, 4번을 1번으로 이동시키는 함수이다.
 */
function rotateQuadrantsClockwise() {
  const totalRow = arr.length;
  const totalCol = arr[0].length;
  const rowHalf = totalRow / 2;
  const colHalf = totalCol / 2;
  const result = Array.from({ length: totalRow }, () =>
    Array.from({ length: totalCol })
  );

  // 1번 그룹 -> 2번 그룹 위치로 이동
  for (let i = 0; i < rowHalf; i++) {
    for (let j = 0; j < colHalf; j++) {
      result[i][j + colHalf] = arr[i][j];
    }
  }

  // 2번 그룹 -> 3번 그룹 위치로 이동
  for (let i = 0; i < totalRow / 2; i++) {
    for (let j = colHalf; j < totalCol; j++) {
      result[i + rowHalf][j] = arr[i][j];
    }
  }

  // 3번 그룹 -> 4번 그룹 위치로 이동
  for (let i = rowHalf; i < totalRow; i++) {
    for (let j = colHalf; j < totalCol; j++) {
      result[i][j - colHalf] = arr[i][j];
    }
  }

  // 4번 그룹 -> 1번 그룹 위치로 이동
  for (let i = rowHalf; i < totalRow; i++) {
    for (let j = 0; j < colHalf; j++) {
      result[i - rowHalf][j] = arr[i][j];
    }
  }

  arr = result;
}

5번 연산인 시계 방향으로 각 그룹을 회전하는 연산이다.

문제 그대로 네 그룹으로 나눈 뒤, 각 그룹을 따로따로 새로운 배열에 값을 넣어주었다.

인덱스만 조심하면 크게 어려울 것 없다.

`rotateQuadrantsCounterClockwise()`

/**
 * 6. 1번 그룹의 부분 배열을 4번 그룹 위치로, 4번을 3번으로, 3번을 2번으로, 2번을 1번으로 이동시키는 함수이다.
 */
function rotateQuadrantsCounterClockwise() {
  const totalRow = arr.length;
  const totalCol = arr[0].length;
  const rowHalf = totalRow / 2;
  const colHalf = totalCol / 2;
  const result = Array.from({ length: totalRow }, () =>
    Array.from({ length: totalCol })
  );

  // 1번 그룹 -> 4번 그룹 위치로 이동
  for (let i = 0; i < rowHalf; i++) {
    for (let j = 0; j < colHalf; j++) {
      result[i + rowHalf][j] = arr[i][j];
    }
  }

  // 2번 그룹 -> 1번 그룹 위치로 이동
  for (let i = 0; i < rowHalf; i++) {
    for (let j = colHalf; j < totalCol; j++) {
      result[i][j - colHalf] = arr[i][j];
    }
  }

  // 3번 그룹 -> 2번 그룹 위치로 이동
  for (let i = rowHalf; i < totalRow; i++) {
    for (let j = colHalf; j < totalCol; j++) {
      result[i - rowHalf][j] = arr[i][j];
    }
  }

  // 4번 그룹 -> 3번 그룹 위치로 이동
  for (let i = rowHalf; i < totalRow; i++) {
    for (let j = 0; j < colHalf; j++) {
      result[i][j + colHalf] = arr[i][j];
    }
  }

  arr = result;
}

6번 연산인 반시계 방향으로 각 그룹을 회전시키는 연산이다.

5번 연산을 구현했다면, 똑같은 형태로 구현이 가능하다.

`printResult()`

/**
 * 결과를 출력하는 함수이다.
 */
function printResult() {
  const result = arr.map((row) => row.join(' ')).join('\n');

  console.log(result);
}

결과를 출력하는 함수이다.

배열을 순회하면서 출력해줘도 되지만, 한 문자열로 만든뒤 한번에 출력한 이유가 있다.

`console.log()`도 함수이기 때문에, 연산 비용이 존재한다.

실제로 출력해야 할 값이 많은 문제에서 따로따로 출력할 경우 시간초과가 발생하는 경우가 있다.

그러기에 한 문자열로 만든 뒤 출력하는 것을 추천한다.

`solution()`

function solution() {
  opList.forEach((op) => {
    switch (op) {
      case 1:
        flipUD();
        break;
      case 2:
        flipLR();
        break;
      case 3:
        rotateRight();
        break;
      case 4:
        rotateLeft();
        break;
      case 5:
        rotateQuadrantsClockwise();
        break;
      case 6:
        rotateQuadrantsCounterClockwise();
        break;
      default:
        break;
    }
  });

  printResult();
}

메인 함수인 solution 함수이다.

각 번호에 맞는 연산 함수를 호출해주면 된다.

마지막으로 `printResult()` 함수를 호출해 결과를 출력해주면 완성!

백준 / 3190번 / 뱀 / JS

KimMinJun — Tue, 16 Sep 2025 14:50:18 +0900

풀이

const fs = require('fs');
const filePath = process.platform === 'linux' ? '/dev/stdin' : './input.txt';
// const filePath = process.platform === 'linux' ? '/dev/stdin' : 'BOJ/input.txt';
const input = fs.readFileSync(filePath).toString().trim().split('\n');

let N, K, L;
const snakeDirInfo = [];
let snakeDirInfoIndex = 0;

const APPLE = 1;
const EMPTY = 0;
const SNAKE = -1;
let board;

// 상, 우, 하, 좌
const dr = [-1, 0, 1, 0];
const dc = [0, 1, 0, -1];

function init() {
  N = +input.shift();
  K = +input.shift();

  board = Array.from({ length: N }, () =>
    Array.from({ length: N }, () => EMPTY)
  );

  for (let i = 0; i < K; i++) {
    const [row, col] = input.shift().split(' ').map(Number);
    board[row - 1][col - 1] = APPLE;
  }

  L = +input.shift();

  for (let i = 0; i < L; i++) {
    const [X, C] = input.shift().split(' ');
    snakeDirInfo.push([+X, C]);
  }
}

function isValid(row, col) {
  return 0 <= row && row < N && 0 <= col && col < N;
}

function play() {
  const queue = [[0, 0]];
  let curDir = 1; // 뱀은 처음에 오른쪽을 향한다.
  let seconds = 0;

  board[0][0] = SNAKE;

  while (true) {
    seconds++;

    const [headRow, headCol] = queue.at(-1);
    const [tailRow, tailCol] = queue[0];
    const [nr, nc] = [headRow + dr[curDir], headCol + dc[curDir]];

    // 벽에 부딪히면 게임을 종료한다.
    if (!isValid(nr, nc)) {
      return seconds;
    }

    // 뱀이 자기 몸에 부딪히면 게임을 종료한다.
    if (board[nr][nc] === SNAKE) {
      return seconds;
    } else if (board[nr][nc] === APPLE) {
      // 만약 이동한 칸에 사과가 있다면, 그 칸에 있던 사과가 없어지고 꼬리는 움직이지 않는다.
      board[nr][nc] = SNAKE;
    } else {
      // 만약 이동한 칸에 사과가 없다면, 몸 길이를 줄여서 꼬리가 위치한 칸을 비워준다. 즉, 몸 길이는 변하지 않는다.
      board[nr][nc] = SNAKE;
      board[tailRow][tailCol] = EMPTY;
      queue.shift();
    }

    queue.push([nr, nc]);

    // 방향 전환 정보가 있으면 방향 전환한다.
    if (snakeDirInfoIndex < snakeDirInfo.length) {
      const [X, C] = snakeDirInfo[snakeDirInfoIndex];

      // 방향 전환 시간이 되면 방향 전환한다.
      if (X === seconds) {
        if (C === 'L') {
          // 왼쪽으로 방향 전환한다.
          curDir = curDir - 1 < 0 ? 3 : curDir - 1;
        } else if (C === 'D') {
          // 오른쪽으로 방향 전환한다.
          curDir = (curDir + 1) % 4;
        }
        // 다음 방향 전환 정보 인덱스를 증가시킨다.
        snakeDirInfoIndex++;
      }
    }
  }
}

function solution() {
  init();
  const seconds = play();

  console.log(seconds);
}

solution();

일반적인 구현 문제이다.

구현하다보니 코드가 길어져서 함수를 분리해서 작성했다.

변수들

const fs = require('fs');
const filePath = process.platform === 'linux' ? '/dev/stdin' : './input.txt';
// const filePath = process.platform === 'linux' ? '/dev/stdin' : 'BOJ/input.txt';
const input = fs.readFileSync(filePath).toString().trim().split('\n');

let N, K, L;
const snakeDirInfo = [];
let snakeDirInfoIndex = 0;

const APPLE = 1;
const EMPTY = 0;
const SNAKE = -1;
let board;

// 상, 우, 하, 좌
const dr = [-1, 0, 1, 0];
const dc = [0, 1, 0, -1];

N: 보드의 크기
K: 사과의 개수
L: 뱀의 방향 변환 횟수
snakeDirInfo: 뱀의 방향 전환 정보를 담는 배열
snakeDirInfoIndex: snakeDirInfo 배열에서 현재 어느 방향 전환 정보를 참조하고 있는지 확인하는 인덱스
APPLE, EMPTY, SNAKE: 각각 board에 사과, 빈 공간, 뱀인지 상태를 나타낼 변수
board: 보드의 상태를 나타내는 2차원 배열
dr, dc: 사방으로 이동하는 정보

`init()`

function init() {
  N = +input.shift();
  K = +input.shift();

  board = Array.from({ length: N }, () =>
    Array.from({ length: N }, () => EMPTY)
  );

  for (let i = 0; i < K; i++) {
    const [row, col] = input.shift().split(' ').map(Number);
    board[row - 1][col - 1] = APPLE;
  }

  L = +input.shift();

  for (let i = 0; i < L; i++) {
    const [X, C] = input.shift().split(' ');
    snakeDirInfo.push([+X, C]);
  }
}

각 필요한 정보들을 문제의 입력에 맞게 초기화하는 함수이다.

`board`는 일단 빈 칸으로 모두 초기화해준 뒤, 주어진 사과 위치에 맞춰서 값을 초기화해준다.

문제는 좌상단이 1행 1열로 주어지지만, 배열은 0행 0열로 시작하므로 1씩 빼주어야 하는것에 주의하자.

그 다음으로는 X는 숫자지만, 입력받을 때 문자열로 되기 때문에 숫자로 바꿔서 저장해주자.

`isValid()`

function isValid(row, col) {
  return 0 <= row && row < N && 0 <= col && col < N;
}

배열을 다루게 된다면 꼭 구현하게 되는 범위 체크 함수이다.

많이 사용하는 함수니, 본인 스타일대로 구현하면 된다.

사실 예전엔 명확히 하기 위해 다음과 같이 구현했었다.

function isValid(row, col) {
  if (row < 0 || row >= N) {
    return false;
  }
  if (col < 0 || col >= N) {
    return false;
  }

  return true;
}

나중엔 빠르게 짜고 싶어서 한줄로 구현했지만,

만약 알고리즘에 익숙하지 않는 초보자라면 명확히 나타내주는게 좋은 것 같다.

알고리즘이라 그렇지, 만약에 프로젝트에서 유틸함수를 구현한다고 하면 위와 같이 구현할 것 같다.

`play()`

function play() {
  const queue = [[0, 0]];
  let curDir = 1; // 뱀은 처음에 오른쪽을 향한다.
  let seconds = 0;

  board[0][0] = SNAKE;

  while (true) {
    seconds++;

    const [headRow, headCol] = queue.at(-1);
    const [tailRow, tailCol] = queue[0];
    const [nr, nc] = [headRow + dr[curDir], headCol + dc[curDir]];

    // 벽에 부딪히면 게임을 종료한다.
    if (!isValid(nr, nc)) {
      return seconds;
    }

    // 뱀이 자기 몸에 부딪히면 게임을 종료한다.
    if (board[nr][nc] === SNAKE) {
      return seconds;
    } else if (board[nr][nc] === APPLE) {
      // 만약 이동한 칸에 사과가 있다면, 그 칸에 있던 사과가 없어지고 꼬리는 움직이지 않는다.
      board[nr][nc] = SNAKE;
    } else {
      // 만약 이동한 칸에 사과가 없다면, 몸 길이를 줄여서 꼬리가 위치한 칸을 비워준다. 즉, 몸 길이는 변하지 않는다.
      board[nr][nc] = SNAKE;
      board[tailRow][tailCol] = EMPTY;
      queue.shift();
    }

    queue.push([nr, nc]);

    // 방향 전환 정보가 있으면 방향 전환한다.
    if (snakeDirInfoIndex < snakeDirInfo.length) {
      const [X, C] = snakeDirInfo[snakeDirInfoIndex];

      // 방향 전환 시간이 되면 방향 전환한다.
      if (X === seconds) {
        if (C === 'L') {
          // 왼쪽으로 방향 전환한다.
          curDir = curDir - 1 < 0 ? 3 : curDir - 1;
        } else if (C === 'D') {
          // 오른쪽으로 방향 전환한다.
          curDir = (curDir + 1) % 4;
        }
        // 다음 방향 전환 정보 인덱스를 증가시킨다.
        snakeDirInfoIndex++;
      }
    }
  }
}

메인 로직인 함수이다.

핵심 아이디어는, queue에 뱀이 있는 좌표를 모두 넣어주는 것이다.

처음에 뱀은 0행 0열에서 시작하므로 queue에 [0, 0]을 넣어주고 시작한다.

그 뒤로는 문제대로 쭉 구현해주면 된다.

주의할 것은 방향전환 할 때이다.

문제에서 방향 전환은 X초가 끝난 후에 한다고 나와있기 때문에 마지막에 해주어야 한다.

그리고 어이없이 헤맸던게 있는데...

왼쪽 방향전환이 'L'이라서 Left의 첫번째 알파벳이고,

오른쪽이 당연히 'R'인줄 알고 'R'로 문제를 풀다가 계속 답이 틀렸다...

오른쪽은 'R'이 아니라 'D'입니다!!!

`solution()`

function solution() {
  init();
  const seconds = play();

  console.log(seconds);
}

함수를 분리해놔서 메인 함수는 깔끔하게 구성할 수 있었다.

Programmers / Level 3 / 단속카메라 / JS

KimMinJun — Fri, 12 Sep 2025 17:06:08 +0900

https://school.programmers.co.kr/learn/courses/30/lessons/42884

프로그래머스

SW개발자를 위한 평가, 교육의 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프

programmers.co.kr

문제분석

이 문제는 전형적인 구간 스케줄링 문제이다.

여러 구간이 주어졌을 때, 모든 구간을 커버하는 최소한의 점을 찾는 것과 같다.

직관적인 접근법

차량들의 경로를 구간으로 생각한다.
겹치는 구간들은 하나의 카메라로 처리가 가능하다.
겹치지 않는 구간들은 각각 별도의 카메라가 필요하다.

풀이

핵심 아이디어: 진출 기점을 기준으로 정렬한 후, greedy하게 카메라 위치를 선택한다.

function solution(routes) {
  routes.sort((a, b) => a[1] - b[1]);
  let cameraCount = 0;
  let cameraPosition = -30001;

  for (const [from, to] of routes) {
    if (from > cameraPosition) {
      cameraPosition = to;
      cameraCount++;
    }
  }

  return cameraCount;
}

왜 진출 기점 기준일까?

해당 구간을 반드시 커버해야 한다.
진출 지점에 카메라를 두면, 이후 구간들과의 겹침을 최대화한다.

Programmers / Level 3 / 정수 삼각형 / JS

KimMinJun — Wed, 10 Sep 2025 23:32:45 +0900

https://school.programmers.co.kr/learn/courses/30/lessons/43105

프로그래머스

SW개발자를 위한 평가, 교육의 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프

programmers.co.kr

풀이

function solution(triangle) {
  const height = triangle.length;
  const dp = Array.from({ length: height }, (_, i) => Array(i + 1));
  dp[0][0] = triangle[0][0];

  for (let i = 1; i < height; i++) {
    for (let j = 0; j < triangle[i].length; j++) {
      dp[i][j] =
        Math.max(dp[i - 1][j - 1] ?? 0, dp[i - 1][j] ?? 0) + triangle[i][j];
    }
  }

  return Math.max(...dp[height - 1]);
}

문제 자체는 간단하다.

주어진 triangle 배열과 똑같은 형태의 배열을 선언해주고 dp로 풀었다.

dp로 이전 행의 좌, 우를 비교해서 더 큰 값에 현재 위치의 값을 더해주면 된다.

여기서, 각 행의 가장 왼쪽과 오른쪽에 있는 값들은 각각 이전 행의 왼쪽과 오른쪽은 범위를 벗어나게 된다.

따라서 범위를 벗어나게 될 경우의 처리가 중요하다.

여기서 '널 병합 연산자(??)'를 사용하였다.

'널 병합 연산자'는 왼쪽 피연산자가 `null`또는 `undefined`일 때 오른쪽 피연산자를 반환하고,

그렇지 않으면 왼쪽 피연산자를 반환하는 논리 연산자이다.

배열의 범위를 벗어난 인덱스를 참조할 경우, `undefined`가 나온다.

따라서 널 병합 연산자를 통해서 그럴 경우엔 0으로 임시 값을 주는 것이다.

(삼각형 주변에 0 padding을 둘러싼 효과라고 생각하면 편할 것 같다.)

물론 falsy 값을 잡아내는 그냥 `or(||)`연산자를 사용해도 되지만,

이 문제에서는 정확히 `undefined`의 값만 판별하면 되므로 '??'를 사용하였다.

Programmers / Level 2 / 가장 큰 수 / JS

KimMinJun — Tue, 9 Sep 2025 23:01:36 +0900

https://school.programmers.co.kr/learn/courses/30/lessons/42746

프로그래머스

SW개발자를 위한 평가, 교육의 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프

programmers.co.kr

풀이

function solution(numbers) {
  const result = numbers
    .map(String)
    .sort((a, b) => (b + a).localeCompare(a + b))
    .join('');

  return result[0] === '0' ? '0' : result;
}

풀이는 정말 간단하고, 특히 sort 부분에는 정말 다양한 풀이가 있다.

하지만, 여기서는 localeCompare를 사용했는데, 그 이유는 다음과 같다.

기본적으로 sort() 메서드는 반환값이 음수, 0, 양수인지에 따라 정렬이 달라지게 된다.

우리가 보통 숫자 배열을 정렬할 때 다음과 같이 많이 사용한다.

numbers.sort((a, b) => a - b);

만약 numbers 배열이 [3,4,1,5,8] 라고 할 때, 결과는 [1,3,4,5,8]과 같이 오름차순으로 정렬된다.

첫 순회에서 3과 4를 비교해서 (3 - 4)를 하면 음수가 나오기 때문에 3이 4보다 작다고 판단해서 그대로 있게 된다.

그 다음 순회는 (4 - 1)을 해서 양수기 때문에 앞에 있는 4가 1보다 크다고 판단해서 자리가 바뀌게 된다.

기본적으로 sort() 메서드는 문자열 비교를 하기 때문에,

문자열 연산이 아니라 숫자 크기 비교를 위해서 뺄셈 연산으로 크기 비교를 해주는 것이다.

하지만, 이 문제는 숫자를 더하는 것이 아니라 '붙여서' 비교를 해야한다.

그래서 문자열로 모두 바꾼 뒤에, (앞 + 뒤)와 (뒤 + 앞)을 붙여서 비교를 해준다.

이때 단순히 '>'와 같은 부등호를 사용하게 되면 true나 false값이 나오기 때문에 제대로 된 비교가 안된다.

왜냐하면 sort는 양수, 음수로 정렬을 판단하기 때문이다.

따라서 `localeCompare()`를 사용하면 반환값이 음수, 0, 양수 중 하나이기 때문에 제대로 된 정렬이 가능하다.

Programmers / Level 2 / 양궁대회 / JS

KimMinJun — Mon, 8 Sep 2025 23:42:50 +0900

https://school.programmers.co.kr/learn/courses/30/lessons/92342

프로그래머스

SW개발자를 위한 평가, 교육의 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프

programmers.co.kr

문제 분석

이 문제는 고려할 것이 많기 때문에, 문제를 잘 읽어야 헷갈리지 않고 풀 수 있다.

더 많이 맞춘쪽이 해당 점수를 가져간다.
여러발 맞춰도 맞춘만큼 가져가는 것이 아닌, 해당 점수 한 번만 가져간다.
똑같이 맞췄다면 어피치가 해당 점수를 가져간다.
'최대 점수'가 아닌, '최대 점수 차이'를 가지는 결과를 구해야 한다.
'최대 점수 차이'를 가지는 방법이 여러개라면, 낮은 점수를 많이 맞춘 방법을 반환한다.

위에 보라색으로 된 것을 놓치거나, 헷갈릴 수 있으니 주의하면서 문제를 풀어야 한다.

풀이

function solution(n, info) {
  const apeachInfo = [...info];
  const lionInfo = Array.from({ length: 11 }, () => 0);
  let result = [-1];
  let maxDiff = -Infinity;

  function getTotalScore() {
    let apeachTotalScore = 0;
    let lionTotalScore = 0;

    for (let i = 0; i < 11; i++) {
      const curScore = 10 - i;

      if (lionInfo[i] > apeachInfo[i]) {
        lionTotalScore += curScore;
      } else if (apeachInfo[i] > 0) {
        apeachTotalScore += curScore;
      }
    }

    return { apeachTotalScore, lionTotalScore };
  }

  function isMoreLowerScore(arr1, arr2) {
    for (let i = 10; i >= 0; i--) {
      if (arr1[i] !== arr2[i]) {
        return arr1[i] > arr2[i];
      }
    }

    return false;
  }

  function dfs(scoreIndex, remainArrows, lionInfo) {
    if (scoreIndex === 11) {
      lionInfo[10] = remainArrows;

      const { apeachTotalScore, lionTotalScore } = getTotalScore();
      const diff = lionTotalScore - apeachTotalScore;

      if (
        diff > 0 &&
        (diff > maxDiff ||
          (diff === maxDiff && isMoreLowerScore(lionInfo, result)))
      ) {
        maxDiff = diff;
        result = [...lionInfo];
      }

      return;
    }

    // 현재 점수를 포기하는 경우
    dfs(scoreIndex + 1, remainArrows, lionInfo);

    // 현재 점수를 가져가는 경우
    const needArrows = apeachInfo[scoreIndex] + 1;

    // 남은 화살이 필요한 화살만큼 있을경우
    if (remainArrows >= needArrows) {
      lionInfo[scoreIndex] = needArrows;
      dfs(scoreIndex + 1, remainArrows - needArrows, lionInfo);
      lionInfo[scoreIndex] = 0;
    }
  }

  dfs(0, n, lionInfo);

  return result;
}

`getTotalScore()`

  function getTotalScore() {
    let apeachTotalScore = 0;
    let lionTotalScore = 0;

    for (let i = 0; i < 11; i++) {
      const curScore = 10 - i;

      if (lionInfo[i] > apeachInfo[i]) {
        lionTotalScore += curScore;
      } else if (apeachInfo[i] > 0) {
        apeachTotalScore += curScore;
      }
    }

    return { apeachTotalScore, lionTotalScore };
  }

어피치와 라이언의 총 점수를 구하는 함수이다.

만약 라이언이 어피치보다 더 많이 맞췄으면 라이언이 해당 점수를 가져간다.

그렇지 않고, 어피치가 라이언과 똑같이 맞췄거나 더 많이 맞췄을 경우에는 어피치가 점수를 가져간다.

둘다 0개로 맞추지 않았을 경우에는 둘다 점수를 얻지 않으므로,

else if에 0보다 클 때의 조건을 넣어주었다.

`isMoreLowerScore(arr1, arr2)`

  function isMoreLowerScore(arr1, arr2) {
    for (let i = 10; i >= 0; i--) {
      if (arr1[i] !== arr2[i]) {
        return arr1[i] > arr2[i];
      }
    }

    return false;
  }

"라이언이 가장 큰 점수 차이로 우승할 수 있는 방법이 여러 가지 일 경우, 가장 낮은 점수를 더 많이 맞힌 경우를 return 해주세요."

라는 조건이 있다.

현재 배열은 10점, 9점, 8점, ... , 0점이 0, 1, 2, ... 10의 인덱스를 가지므로 역순으로 순회한다.

만약 arr1과 arr2가 과녁의 맞춘 화살의 개수가 다를 경우, arr1이 더 많이 맞췄다면 true를 반환한다.

모두 arr2가 더 많이 맞췄다면 false를 반환한다.

`dfs(scoreIndex, remainArrows, lionInfo)`

  function dfs(scoreIndex, remainArrows, lionInfo) {
    if (scoreIndex === 11) {
      lionInfo[10] = remainArrows;

      const { apeachTotalScore, lionTotalScore } = getTotalScore();
      const diff = lionTotalScore - apeachTotalScore;

      if (
        diff > 0 &&
        (diff > maxDiff ||
          (diff === maxDiff && isMoreLowerScore(lionInfo, result)))
      ) {
        maxDiff = diff;
        result = [...lionInfo];
      }

      return;
    }

    // 현재 점수를 포기하는 경우
    dfs(scoreIndex + 1, remainArrows, lionInfo);

    // 현재 점수를 가져가는 경우
    const needArrows = apeachInfo[scoreIndex] + 1;

    // 남은 화살이 필요한 화살만큼 있을경우
    if (remainArrows >= needArrows) {
      lionInfo[scoreIndex] = needArrows;
      dfs(scoreIndex + 1, remainArrows - needArrows, lionInfo);
      lionInfo[scoreIndex] = 0;
    }
  }

dfs로 풀이를 했다.

만약 배열 끝까지 도달했을 경우, 즉 scoreIndex가 11일 경우에 남은 화살을 전부 0점으로 설정해준다.

그리고 위에서 구현한 getTotalScore() 함수를 통해서 라이언과 어피치의 점수차를 구해준다.

점수차가 현재까지 구한 최대 점수차보다 크거나,

최대 점수차와 같지만 더 낮은 점수를 많이 맞춘 경우에는 답을 교체해준다.

그리고 다음 dfs로 넘어가는 경우에는 두 가지 경우가 있다.

현재 점수를 얻거나, 얻지 않는 경우.

현재 점수를 가져가지 않는 경우에는 단순히 인덱스만 하나 더해주고 다음 재귀로 넘어가면 된다.

현재 점수를 가져가는 경우에는 남은 화살이 어피치를 이기기 위해 필요한 화살만큼 있을 경우에는,

남아있는 화살에서 필요한 화살만큼 빼준 후에 다음 재귀로 넘어가면 된다.

물론 다음으로 넘어가는 재귀가 답이 아닐 수도 있기 때문에,

재귀가 끝나고 다시 돌아왔을 때는 0으로 다시 초기화해준다.

Programmers / Level 2 / 전력망을 둘로 나누기 / JS

KimMinJun — Fri, 5 Sep 2025 11:49:58 +0900

https://school.programmers.co.kr/learn/courses/30/lessons/86971

프로그래머스

SW개발자를 위한 평가, 교육의 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프

programmers.co.kr

풀이

/**
 * 인접리스트를 초기화하는 함수이다.
 *
 * @param {number[][]} wires 전선 정보
 * @returns {Map<number, Set<number>>} 인접리스트
 */
function initAdjList(wires) {
  const adjList = new Map();

  wires.forEach(([tower1, tower2]) => {
    if (adjList.has(tower1)) {
      adjList.get(tower1).add(tower2);
    } else {
      adjList.set(tower1, new Set([tower2]));
    }

    if (adjList.has(tower2)) {
      adjList.get(tower2).add(tower1);
    } else {
      adjList.set(tower2, new Set([tower1]));
    }
  });

  return adjList;
}

/**
 * bfs를 이용해 한 쪽 송전탑의 개수를 구하는 함수이다.
 *
 * @param {number} n 송전탑의 개수
 * @param {Map<number, Set<number>>} adjList 인접리스트
 * @returns 두 전력망으로 나누었을 때, 한 쪽의 송전탑의 개수
 */
function bfs(n, adjList) {
  // 임의로 1번 송전탑에서 시작한다.
  const queue = [1];
  const visited = Array.from({ length: n + 1 }, () => false);
  let count = 1;

  visited[1] = true;

  while (queue.length > 0) {
    const curTower = queue.shift();

    for (const nextTower of adjList.get(curTower)) {
      if (visited[nextTower]) {
        continue;
      }

      visited[nextTower] = true;
      queue.push(nextTower);
      count++;
    }
  }

  return count;
}

function solution(n, wires) {
  const adjList = initAdjList(wires);
  let result = Infinity;

  for (const [tower1, tower2] of wires) {
    // tower1과 tower2에 연결된 전선을 끊어준다.
    adjList.get(tower1).delete(tower2);
    adjList.get(tower2).delete(tower1);
    const count1 = bfs(n, adjList);
    const count2 = n - count1;
    // 위에서 끊어준 전선을 다시 이어준다.
    adjList.get(tower1).add(tower2);
    adjList.get(tower2).add(tower1);

    const diff = Math.abs(count1 - count2);
    result = Math.min(result, diff);
  }

  return result;
}

핵심 로직은 모든 전선을 하나씩 끊어보면서 나뉘어진 송전탑의 개수를 세주었다.

그래프는 인접리스트로 구현해주었는데,

수정, 삭제가 용이하도록 Map과 Set 자료구조를 이용해주었다.

`initAdjList(wires)`

/**
 * 인접리스트를 초기화하는 함수이다.
 *
 * @param {number[][]} wires 전선 정보
 * @returns {Map<number, Set<number>>} 인접리스트
 */
function initAdjList(wires) {
  const adjList = new Map();

  wires.forEach(([tower1, tower2]) => {
    if (adjList.has(tower1)) {
      adjList.get(tower1).add(tower2);
    } else {
      adjList.set(tower1, new Set([tower2]));
    }

    if (adjList.has(tower2)) {
      adjList.get(tower2).add(tower1);
    } else {
      adjList.set(tower2, new Set([tower1]));
    }
  });

  return adjList;
}

인접리스트를 초기화하는 함수이다.

Map 자료구조를 이용해주었다.

key는 송전탑, value는 key와 이어진 송전탑들을 Set 자료구조로 저장해주었다.

Set을 사용한 이유는,

delete()로 전선을 끊고, add()로 다시 전선을 붙이기 용이하기 때문이다.

`bfs(n, adjList)`

/**
 * bfs를 이용해 한 쪽 송전탑의 개수를 구하는 함수이다.
 *
 * @param {number} n 송전탑의 개수
 * @param {Map<number, Set<number>>} adjList 인접리스트
 * @returns 두 전력망으로 나누었을 때, 한 쪽의 송전탑의 개수
 */
function bfs(n, adjList) {
  // 임의로 1번 송전탑에서 시작한다.
  const queue = [1];
  const visited = Array.from({ length: n + 1 }, () => false);
  let count = 1;

  visited[1] = true;

  while (queue.length > 0) {
    const curTower = queue.shift();

    for (const nextTower of adjList.get(curTower)) {
      if (visited[nextTower]) {
        continue;
      }

      visited[nextTower] = true;
      queue.push(nextTower);
      count++;
    }
  }

  return count;
}

나뉘어진 전력망에서 연결된 송전탑의 개수는 bfs로 구해주었다.

첫 시작은 임의로 1번 송전탑에서 시작했는데,

어차피 이어진 송전탑은 다 탐색하기 때문에 아무 송전탑에서 시작해도 상관은 없다.

`solution(n, wires)`

function solution(n, wires) {
  const adjList = initAdjList(wires);
  let result = Infinity;

  for (const [tower1, tower2] of wires) {
    // tower1과 tower2에 연결된 전선을 끊어준다.
    adjList.get(tower1).delete(tower2);
    adjList.get(tower2).delete(tower1);
    const count1 = bfs(n, adjList);
    const count2 = n - count1;
    // 위에서 끊어준 전선을 다시 이어준다.
    adjList.get(tower1).add(tower2);
    adjList.get(tower2).add(tower1);

    const diff = Math.abs(count1 - count2);
    result = Math.min(result, diff);
  }

  return result;
}

모든 전선을 순회하면서, 하나씩 끊어보면서 개수를 세준다.

주의할 것은 다음 전선을 끊을 때는 이전에 끊었던 전선을 다시 붙여주어야 한다.

bfs로 한 쪽 전력망의 송전탑 개수를 구해줬다면,

총 송전탑의 개수에서 빼면 다른 쪽 전력망의 송전탑 개수를 구할 수 있다.

Programmers / Level 3 / 경주로 건설 / JS

KimMinJun — Thu, 4 Sep 2025 23:20:45 +0900

https://school.programmers.co.kr/learn/courses/30/lessons/67259

프로그래머스

SW개발자를 위한 평가, 교육의 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프

programmers.co.kr

문제분석

직선도로에서는 100의 비용이 들고,

코너에서는 500의 비용이 든다.

처음에 헷갈려서 틀렸었는데, '코너를 만드는데 드는 비용'이 500이므로,

코너를 만들고 앞으로 한 칸 나아가려면 총 600의 비용이 든다.

또한, 어느 방향에서 왔는지에 따라 같은 칸이라도 비용이 다르게 들 수 있다.

따라서 일반적인 방문처리를 하는 bfs로는 풀이가 불가능하다.

풀이

const EMPTY = 0;
const WALL = 1;

const STRAIGHT_COST = 100;
// 코너를 건설하는 값 + 앞으로 한 칸 나아가는 값
const CORNER_COST = 500 + STRAIGHT_COST;

// 상, 우, 하, 좌
const dr = [-1, 0, 1, 0];
const dc = [0, 1, 0, -1];

let N;

function isValid(row, col) {
  return 0 <= row && row < N && 0 <= col && col < N;
}

function bfs(board) {
  // [행, 열, 방향, 금액]
  const queue = [];
  const visited = Array.from({ length: N }, () =>
    Array.from({ length: N }, () => Array(4).fill(Infinity))
  );

  if (board[1][0] === EMPTY) {
    queue.push([1, 0, 2, STRAIGHT_COST]);
    visited[1][0][2] = STRAIGHT_COST;
  }
  if (board[0][1] === EMPTY) {
    queue.push([0, 1, 1, STRAIGHT_COST]);
    visited[0][1][1] = STRAIGHT_COST;
  }

  while (queue.length > 0) {
    const [curRow, curCol, curDir, curCost] = queue.shift();

    for (let d = 0; d < 4; d++) {
      const nr = curRow + dr[d];
      const nc = curCol + dc[d];

      // 배열 범위를 벗어날 경우 스킵한다.
      if (!isValid(nr, nc)) {
        continue;
      }
      // 벽일 경우 스킵한다.
      if (board[nr][nc] === WALL) {
        continue;
      }

      // 이전과 다른 방향일 경우, 코너이기 때문에 비용이 증가한다.
      const newCost =
        curDir === d ? curCost + STRAIGHT_COST : curCost + CORNER_COST;

      // 이미 더 적은 비용으로 방문한적이 있다면 스킵한다.
      if (visited[nr][nc][d] <= newCost) {
        continue;
      }

      visited[nr][nc][d] = newCost;
      queue.push([nr, nc, d, newCost]);
    }
  }

  let minCost = Math.min(...visited[N - 1][N - 1]);
  return minCost;
}

function solution(board) {
  N = board.length;

  let minCost = bfs(board);
  return minCost;
}

`isValid(row, col)`

function isValid(row, col) {
  return 0 <= row && row < N && 0 <= col && col < N;
}

현재 있는 행 또는 열이 배열의 범위를 벗어나지 않았는지 판단하는 함수이다.

`bfs(board)`

function bfs(board) {
  // [행, 열, 방향, 금액]
  const queue = [];
  const visited = Array.from({ length: N }, () =>
    Array.from({ length: N }, () => Array(4).fill(Infinity))
  );

  if (board[1][0] === EMPTY) {
    queue.push([1, 0, 2, STRAIGHT_COST]);
    visited[1][0][2] = STRAIGHT_COST;
  }
  if (board[0][1] === EMPTY) {
    queue.push([0, 1, 1, STRAIGHT_COST]);
    visited[0][1][1] = STRAIGHT_COST;
  }

  while (queue.length > 0) {
    const [curRow, curCol, curDir, curCost] = queue.shift();

    for (let d = 0; d < 4; d++) {
      const nr = curRow + dr[d];
      const nc = curCol + dc[d];

      // 배열 범위를 벗어날 경우 스킵한다.
      if (!isValid(nr, nc)) {
        continue;
      }
      // 벽일 경우 스킵한다.
      if (board[nr][nc] === WALL) {
        continue;
      }

      // 이전과 다른 방향일 경우, 코너이기 때문에 비용이 증가한다.
      const newCost =
        curDir === d ? curCost + STRAIGHT_COST : curCost + CORNER_COST;

      // 이미 더 적은 비용으로 방문한적이 있다면 스킵한다.
      if (visited[nr][nc][d] <= newCost) {
        continue;
      }

      visited[nr][nc][d] = newCost;
      queue.push([nr, nc, d, newCost]);
    }
  }

  let minCost = Math.min(...visited[N - 1][N - 1]);
  return minCost;
}

bfs로 얻은 결과를 반환해주는 함수이다.

코드가 한 번에 보기 어려우므로 쪼개서 살펴보자.

// [행, 열, 방향, 금액]
const queue = [];

bfs의 기본 시작은 큐를 만들어주고, 방문 처리할 배열을 만들어주는 것이다.

큐에는 [행, 열, 방향, 금액]을 넣어준다.

여기서 방향은 간단히 방향 배열의 인덱스로 판단해준다.

(상: 0, 우: 1, 하: 2, 좌: 3)

// 상, 우, 하, 좌
const dr = [-1, 0, 1, 0];
const dc = [0, 1, 0, -1];

const visited = Array.from({ length: N }, () =>
  Array.from({ length: N }, () => Array(4).fill(Infinity))
);

다만, 여기서 방문 처리할 배열은 기본 2차원이 아닌 3차원으로 만들어준다.

현재 칸에 도달하면, 몇 번의 코너를 거쳤는지에 따라 총 가격이 다르게 된다.

따라서 현재 칸의 어느 방향에서 왔는지를 각 4칸(상, 우, 하, 좌)에 저장해주는 것이다.

  if (board[1][0] === EMPTY) {
    queue.push([1, 0, 2, STRAIGHT_COST]);
    visited[1][0][2] = STRAIGHT_COST;
  }
  if (board[0][1] === EMPTY) {
    queue.push([0, 1, 1, STRAIGHT_COST]);
    visited[0][1][1] = STRAIGHT_COST;
  }

다음으로, 첫 시작을 넣어준다.

처음 시작은 무조건 [0][0]에서 한다고 문제에 나와있다.

그러면, 다음으로 갈 수 있는 칸은 바로 아래 칸이나 오른쪽 칸이다.

무조건 갈 수 있는건 아니고,

해당 칸이 벽으로 막혀있지 않은지, 즉 빈 칸인 경우에만 큐에 넣어주고 방문처리를 해준다.

  while (queue.length > 0) {
    const [curRow, curCol, curDir, curCost] = queue.shift();

    for (let d = 0; d < 4; d++) {
      const nr = curRow + dr[d];
      const nc = curCol + dc[d];

      // 배열 범위를 벗어날 경우 스킵한다.
      if (!isValid(nr, nc)) {
        continue;
      }
      // 벽일 경우 스킵한다.
      if (board[nr][nc] === WALL) {
        continue;
      }

      // 이전과 다른 방향일 경우, 코너이기 때문에 비용이 증가한다.
      const newCost =
        curDir === d ? curCost + STRAIGHT_COST : curCost + CORNER_COST;

      // 이미 더 적은 비용으로 방문한적이 있다면 스킵한다.
      if (visited[nr][nc][d] <= newCost) {
        continue;
      }

      visited[nr][nc][d] = newCost;
      queue.push([nr, nc, d, newCost]);
    }
  }

bfs의 핵심 로직이다.

다른건 다 같지만, 마지막 조건 검사 부분이 일반적인 bfs와 다르다.

만약 현재 진행중이던 방향과 다른 방향이라면,

코너를 돌았다는 뜻이므로, 해당 경우에만 코너 값을 더해준다.

그리고 이미 더 적은 비용으로 방문한적이 있다면 스킵한다.

let minCost = Math.min(...visited[N - 1][N - 1]);

마지막으로, 도착지점의 4칸중에서 최소값을 찾아서 반환해주면 된다.

Programmers / Level 3 / 네트워크 / JS

KimMinJun — Tue, 2 Sep 2025 22:59:59 +0900

https://school.programmers.co.kr/learn/courses/30/lessons/43162

프로그래머스

SW개발자를 위한 평가, 교육의 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프

programmers.co.kr

풀이

function solution(n, computers) {
  const visited = Array.from({ length: n }, () => false);
  let network = 0;

  for (let i = 0; i < n; i++) {
    // 아직 방문하지 않았다면 dfs로 네트워크를 탐색한다.
    if (!visited[i]) {
      dfs(i);
      network++;
    }
  }

  function dfs(cur) {
    for (let i = 0; i < n; i++) {
      if (visited[i]) {
        continue;
      }
      // 이어져 있지 않다면 건너뛴다.
      if (computers[cur][i] === 0) {
        continue;
      }

      visited[i] = true;
      dfs(i);
    }
  }

  return network;
}

문제는 간단히 말하면 이어져있는 그룹이 몇개인지 세는 문제이다.

Level3 이라기엔 상당히 쉬운 문제이다.

dfs로 현재의 컴퓨터와 이어져 있는 컴퓨터는 모두 방문처리를 한다.

따라서 dfs를 마치면 하나의 네트워크가 형성되게 된다.

아직 네트워크가 형성되지 않은 컴퓨터는 방문처리가 되어있지 않았을 것이기 때문에,

방문처리 되어있지 않은 컴퓨터에서 다시 dfs를 이용해 네트워크를 형성해주면 된다.

Programmers / Level 3 / 섬 연결하기 / JS

KimMinJun — Mon, 1 Sep 2025 17:59:21 +0900

https://school.programmers.co.kr/learn/courses/30/lessons/42861

프로그래머스

SW개발자를 위한 평가, 교육의 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프

programmers.co.kr

제한사항

다음과 같은 고려해볼만한 제한사항이 있다.

섬의 개수 n은 1 이상 100 이하입니다.

만약, 섬의 개수가 100을 넘어서 1,000 혹은 그 이상이라면,

간단한 kruscal 알고리즘 만으로는 풀이가 어려울 수 있다.

문제는 '시간복잡도' 때문이다.

kruscal 알고리즘에 사용되는 알고리즘인 union-find 알고리즘에서

부모노드를 찾기 위해, 계속해서 거슬러 올라가야 한다.

최악의 경우 여러 노드가 일렬로 연결되는데, 시간복잡도가 커지게 된다.

이 때, 'rank' 라는 개념을 도입해서 최적화를 진행하는데,

깊이가 작은 노드 집합을 깊이가 큰 노드 집합에 붙이게 된다.

이 문제는 이런 최적화까지는 하지 않아도,

범위가 작기 때문에 충분히 통과가 가능하니 다른 문제에서 설명하도록 하겠다.

풀이

function findParent(parent, n) {
  if (n === parent[n]) {
    return n;
  }

  parent[n] = findParent(parent, parent[n]);
  return parent[n];
}

function unionParent(parent, x, y) {
  const a = findParent(parent, x);
  const b = findParent(parent, y);

  if (a < b) {
    parent[a] = b;
  } else {
    parent[b] = a;
  }

  return parent;
}

function solution(n, costs) {
  const sortedCosts = [...costs].sort((a, b) => a[2] - b[2]);
  const parent = Array.from({ length: n }, (_, i) => i);

  let minCost = 0;

  for (const [x, y, cost] of sortedCosts) {
    const rootX = findParent(parent, x);
    const rootY = findParent(parent, y);

    if (rootX !== rootY) {
      unionParent(parent, rootX, rootY);

      minCost += cost;
    }
  }

  return minCost;
}

`findParent()`

function findParent(parent, n) {
  if (n === parent[n]) {
    return n;
  }

  parent[n] = findParent(parent, parent[n]);
  return parent[n];
}

`findParent()` 함수는 union-find 알고리즘에서 루트 노드를 찾는 함수이다.

`n`이 자기 자신을 부모로 가리키고 있다면,

그 노드가 해당 집합의 '루트'가 된다.

`unionParent()`

function unionParent(parent, x, y) {
  const a = findParent(parent, x);
  const b = findParent(parent, y);

  if (a < b) {
    parent[a] = b;
  } else {
    parent[b] = a;
  }

  return parent;
}

`unionParent()` 함수는 union-find 알고리즘에서 두 개의 서로 다른 집합을 하나로 합치는 역할을 한다.

먼저, 위에서 구현한 `findParent()` 함수로 두 노드의 루트 노드를 찾는다.

두 번째로, 인덱스가 더 큰 노드를 부모로 선택한다.

단순한 union 연산 구현으로, 최적화 할 시에 'rank' 개념을 도입해서 최적화가 가능하다.

`solution()`

function solution(n, costs) {
  const sortedCosts = [...costs].sort((a, b) => a[2] - b[2]);
  const parent = Array.from({ length: n }, (_, i) => i);

  let minCost = 0;

  for (const [x, y, cost] of sortedCosts) {
    const rootX = findParent(parent, x);
    const rootY = findParent(parent, y);

    if (rootX !== rootY) {
      unionParent(parent, rootX, rootY);

      minCost += cost;
    }
  }

  return minCost;
}

먼저, 간선의 cost 기준으로 오름차순으로 정렬해야 한다.

가장 저렴한 비용을 가진 간선부터 검토하기 위해서이다.

두 번째로, 자기 자신을 부모로 가지도록 초기화한다.

세 번째로, 사이클을 검사한다.

두 노드의 루트를 비교해서 다를 경우에 union 연산을 수행하게 된다.

만약 루트가 같다면, 같은 집합에 속해있다는 것이므로,

간선을 추가하면 사이클이 형성된다.

기존에 cost 기준 오름차순으로 정렬을 했고,

사이클이 형성되는지를 확인하기 때문에 cost를 더해주면 최소 비용을 얻을 수 있다.

Programmers / Level 3 / 표 편집 / JS

KimMinJun — Tue, 19 Aug 2025 18:24:56 +0900

https://school.programmers.co.kr/learn/courses/30/lessons/81303

프로그래머스

SW개발자를 위한 평가, 교육의 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프

programmers.co.kr

개요

이번 시간에는 Programmers의 Level 3,

'표 편집' 문제에 대해 알아보겠습니다.

먼저, 문제에 대해 간략히 설명드리고,

제한사항을 살펴본 뒤,

문제를 해결해보면서 마무리하겠습니다.

문제

문제에는 총 네 종류의 명령이 주어질 수 있습니다.

첫 번째, 'U' 명령을 수행하면, X칸 위에 있는 행을 선택합니다.

두 번째, 'D' 명령을 수행하면, X칸 아래에 있는 행을 선택합니다.

세 번째, 'C' 명령을 수행하면, 현재 선택된 행을 삭제한 후, 바로 아래 행을 선택합니다.

단, 삭제된 행이 가장 마지막 행인 경우에는 바로 윗 행을 선택합니다.

마지막으로 네 번째, 'Z' 명령을 수행하면, 가장 최근에 삭제된 행을 원래대로 복구합니다.

단, 현재 선택된 행은 바뀌지 않습니다.

문제에 나와 있는 예시를 하나씩 볼까요?

왼쪽의 표에서 'D 2'를 수행할 경우 오른쪽의 그림처럼 4행이 선택됩니다.

그 다음에 'C'를 수행하면 선택된 행을 삭제하고,

바로 아래 행이었던 '네오'가 적힌 행을 선택합니다.

4행이 삭제되면서 아래 있던 행들이 하나씩 밀려 올라오고,

수정된 표에서 다시 4행을 선택하는 것과 동일하죠.

다음으로, 'U 3'을 수행한 다음,

'C'를 수행한 후의 표 상태는 오른쪽 그림과 같습니다.

다음으로 'D 4'를 수행한 다음 'C'를 수행한 후의 표 상태는 오른쪽 그림과 같습니다.

5행이 표의 마지막 행이므로, 이 경우에는 바로 윗 행을 선택하는 점에 주의해주세요!

다음으로 'U 2'를 수행하면 현재 선택된 행은 2행이 됩니다.

이 상태에서 'Z'를 수행할 경우 가장 최근에 제거된 '라이언'이 적힌 행이 원래대로 복구됩니다.

여기서 다시 한번 'Z'를 수행하면 그 다음으로 최근에 제거된 '콘'이 적힌 행이 원래대로 복구됩니다.

이때, 현재 선택된 행은 바뀌지 않는다는 점에 주의해주세요!

최종 표의 상태와 처음 주어진 표의 상태를 비교해서 삭제되지 않은 행은 'O',

삭제된 행은 'X'로 표시하면 다음과 같습니다.

삭제 스택에 남아있는 '프로도'를 아직 되돌리지 않았으니 'X'로 표시되는 것이죠.

문제 이해를 완료하셨을까요?

이제, 매개변수로 처음 표의 행 개수인 n,

처음에 선택된 행의 위치인 k,

수행한 명령어들이 담긴 문자열 배열인 cmd가 주어질 때,

모든 명령어를 수행한 후 표의 상태와

처음 주어진 표의 상태를 비교하여

삭제되지 않은 행은 'O',

삭제된 행은 'X'로 표시하여 문자열 형태로 반환해주는 함수를 완성해주면 됩니다.

제한사항

문제가 복잡할수록 제한사항도 꼼꼼히 잘 봐주셔야 합니다.

만약, 문제를 풀다가 시간초과가 날 경우

제한사항에 있는 범위를 고려하지 못한 코드일 확률이 높기 때문입니다.

그럼 제한사항을 하나씩 볼까요?

먼저, 행의 개수는 최대 100만, cmd의 개수는 최대 20만인 것을 볼 수 있습니다.

만약 행의 삭제를 배열 메서드인 `splice()`나 `shift()`를 이용한다면 어떻게 될까요?

삭제된 빈자리를 채우기 위해 뒤에 있는 요소들을 앞으로 한 칸씩 이동시켜야 합니다.

O(N)의 시간 복잡도를 가지게 되겠죠.

다음으로,

이전 문제 설명에서 봤듯이, '이름' 열은 딱히 필요하지 않습니다.

'몇 번째'의 행을 조작하는지가 중요했죠.

여기서 '이름'같은 데이터의 값보다,

순서를 중요하게 고려해야 한다는 것을 알 수 있습니다.

마지막으로,

행동이 불가능하거나, 조건을 고려해야 하는 명령들은 주어지지 않습니다.

이를 통해, 특수 케이스에 대한 처리는 신경을 크게 쓰지 않아도 되겠죠.

이렇게 모든 제한사항을 살펴보았습니다.

그런데 배열로 처리가 불가능할 것 같은데, 어떤 자료구조를 써야할까요?

중간 요소를 삭제하고, 삭제된 요소를 다시 원래 자리로 되돌리는데 좋은 자료구조가 있습니다.

바로 '연결 리스트' 입니다.

해결방법

연결리스트

'왜' 연결리스트를 사용해야 하는지 알아보기에 앞서,

연결리스트가 무엇인지 간단하게 먼저 살펴볼게요.

연결리스트는

'각 노드가 데이터와 포인터를 가지고 한 줄로 연결되어 있는 방식으로 데이터를 저장하는 자료구조'에요.

만약, 중간에 있는 데이터를 삭제하고 싶다면 어떻게 할까요?

예를 들어 2번 노드를 지운다고 생각해볼게요.

보시는 것과 같이,

기존에 1번에서 2번으로 연결되어 있던 포인터를

3번으로 연결해주기만 하면 됩니다.

그리고 2번 노드의 전과 후는 null로 해주면

연결이 끊어지므로 삭제된 것과 같은 효과를 줄 수 있죠.

문제는 표에 관한 문제니까,

노드는 각 행,

연결리스트는 표 전체라고 보면 됩니다.

자, 그럼 이제 코드를 구현해볼까요?

`Row`

먼저, 각 행을 나타내는 자료구조를 만들어줄게요.

`Row`라는 클래스로 나타내줄건데,

몇 번째인지 나타내는 `index`와

이전 행과 다음 행을 나타내는 포인터 변수인 `prev`와 `next`를 선언해줍니다.

`Table`

다음으로 표 전체를 나타내는 자료구조인 Table 클래스입니다.

각 행을 저장할 배열인 `rows`와

현재 위치를 나타내는 `cursor`,

삭제된 행들을 저장하는 `deletedStack` 변수를 선언해줍니다.

그런 다음에, 표를 초기화해줘야겠죠?

문제에서 매개변수로 행의 개수인 `n`과,

현재 위치를 나타내는 `k`를 받으니 그 변수를 이용해서 표를 초기화해주는 함수

`initTable()` 함수를 만들어보겠습니다.

Table - `initTable()`

`initTable()` 함수는 앞서 말씀드렸다시피,

행의 개수를 나타내는 `n`과,

현재 위치인 `k`를 매개변수로 받아요.

그리고 반복문을 통해 `n`개의 `Row`를 생성해주죠.

`Row`를 생성했지만, 서로 연결해주지 않았죠?

다시 한번 반복문을 통해

각 `Row`의 `prev`와 `next`를 연결해줄게요.

인덱스가 0보다 클 때는 현재 `Row`의 `prev`를 '이전 Row'와 연결해줍니다.

인덱스가 0인경우에는 `prev`가 없으니까 null인 상태에서 굳이 연결해줄 필요가 없겠죠.

마찬가지로, 인덱스가 n - 1보다 작을 때는 현재 `Row`의 `next`를 '다음 Row'랑 연결해줄게요.

여기도 마지막 행은 `next`가 없으니까 null로 그대로 두면 됩니다.

마지막으로, 현재 커서를 매개변수로 받은 `k`번째 `Row`로 할당해주면 됩니다.

만약 `n`이 3이고, `k`가 1이라면 왼쪽 그림과 같겠죠?

이렇게 기본적인 구조는 갖춰졌으니,

각 명령을 수행하는 함수도 만들어야 합니다.

X칸 위에 있는 행을 선택하는 `up()`함수,

X칸 아래에 있는 행을 선택하는 `down()`함수,

선택된 행을 삭제하는 `remove()` 함수,

행을 원래대로 복구하는 `restore()` 함수를 차례대로 만들어볼게요.

Table - `up()`

먼저, `up()` 함수입니다.

`moveCount`는 몇 칸 움직일지 받기 위한 매개변수입니다.

위로 움직여야 하기 때문에 `moveCount` 만큼 `prev`로 계속 거슬러 올라가면 되겠죠?

거슬러 올라가면서 `cursor`를 `prev`로 계속 갱신해줍니다.

만약, 초기에 왼쪽 그림처럼 `cursor`가 4행에 있고,

`moveCount`가 2라면,

4행의 `prev`인 3행으로 거슬러 올라가고,

3행의 `prev`인 2행으로 거슬러 올라가서 최종적으로 왼쪽의 그림과 같은 상황이 될거에요.

그럼 밑으로 가는 함수인 `down()`도 어떻게 구현해야 할지 감이 오시나요?

Table - `down()`

`down()`은 다음 행으로 가야하니, `prev`대신 `next`를 사용해서 해주면 됩니다.

Table - `remove()`

다음으로, 선택된 행을 삭제하는 함수인 `remove()` 함수를 살펴볼게요.

먼저, 삭제할 행을 `deletedRow`라는 변수에 저장해줄게요.

그 다음으로, 삭제 스택에 현재 행을 넣어줍니다.

이 때, 중요한것은 삭제할 행의 `prev`와 `next`도 같이 저장해줘야 한다는 것이에요.

Row 클래스의 `prev`와 `next` 속성으로 접근할 수 있는데 왜 따로 또 저장할까요?

행이 삭제된다면, 연결을 재조정 해주어야 합니다.

이 과정에서 연결이 끊어지게 되는데,

원래 연결되어 있던 `prev`와 `next`를 나중에 복구할 때 참조하기 위함입니다.

연결을 재조정 해주었다면,

마지막행이 아니라면 다음행으로,

마지막행이라면 이전행으로 커서를 옮겨줍니다.

Table - `restore()`

마지막으로 삭제된 행을 복구하는 `restore()` 함수입니다.

'가장 최근에 삭제된 행'을 복구하는 것이니,

`deletedStack`의 맨 위에 있는 것을 `pop()` 해주면 되겠죠?

그 다음으로, 우리가 스택에 넣을 때 같이 저장했던 prevRow와 nextRow를 이용해서

연결을 복구해주면 됩니다.

Table - `getResult()`

결과를 얻는 함수는 이렇게 간단하게 구현해주면 되겠죠?

아직 `deletedStack`에 남아있는 행은

삭제된 후, 복구되지 않은 행이기 때문에 해당 행만 'X'로 바꿔주시면 됩니다.

이렇게 구현에 필요한 모든 함수를 완성했습니다!

이제 입력에 맞게 결과를 구해볼까요?

`solution()`

Table 클래스의 인스턴스를 생성해준 뒤,

반복문으로 각 명령에 맞게 `switch`로 분기처리를 해주면 됩니다.

몇 칸 이동할지 나타내는 변수는 `parseInt()`로 정수로 변환한 뒤에 넘겨주는걸 잊지마세요!

이상 프로그래머스 Level3.

'표 편집' 문제 자바스크립트 풀이였습니다.

감사합니다!

전체 코드

class Row {
  constructor(index) {
    this.index = index;
    this.prev = null;
    this.next = null;
  }
}

class Table {
  constructor(n, k) {
    this.rows = [];
    this.cursor = null;
    this.deletedStack = [];
    this.initTable(n, k);
  }

  initTable(n, k) {
    for (let i = 0; i < n; i++) {
      this.rows[i] = new Row(i);
    }

    for (let i = 0; i < n; i++) {
      if (i > 0) this.rows[i].prev = this.rows[i - 1];
      if (i < n - 1) this.rows[i].next = this.rows[i + 1];
    }

    this.cursor = this.rows[k];
  }

  up(moveCount) {
    for (let i = 0; i < moveCount; i++) {
      this.cursor = this.cursor.prev;
    }
  }

  down(moveCount) {
    for (let i = 0; i < moveCount; i++) {
      this.cursor = this.cursor.next;
    }
  }

  remove() {
    const deletedRow = this.cursor;

    // 삭제할 때 prev/next 정보를 저장해두기
    this.deletedStack.push({
      row: deletedRow,
      prevRow: deletedRow.prev,
      nextRow: deletedRow.next,
    });

    // 연결 끊기
    if (deletedRow.prev) {
      deletedRow.prev.next = deletedRow.next;
    }
    if (deletedRow.next) {
      deletedRow.next.prev = deletedRow.prev;
    }

    // 커서 이동
    if (deletedRow.next) {
      this.cursor = deletedRow.next;
    } else {
      this.cursor = deletedRow.prev;
    }
  }

  restore() {
    if (this.deletedStack.length === 0) return;

    const { row: restoredRow, prevRow, nextRow } = this.deletedStack.pop();

    // 저장된 연결 정보로 즉시 복구 (O(1))
    restoredRow.prev = prevRow;
    restoredRow.next = nextRow;

    if (prevRow) {
      prevRow.next = restoredRow;
    }
    if (nextRow) {
      nextRow.prev = restoredRow;
    }
  }

  getResult() {
    const result = new Array(this.rows.length).fill('O');

    for (const { row } of this.deletedStack) {
      result[row.index] = 'X';
    }

    return result.join('');
  }
}

/**
 * 표 편집
 * @description 표에서 행을 선택, 삭제, 복구하는 명령어들을 수행한 후 최종 표의 상태를 구하는 함수
 * @param {number} n 표의 행 개수
 * @param {number} k 처음 선택된 행의 위치
 * @param {string[]} cmd 수행할 명령어 배열
 * @returns {string} 최종 표의 상태 ('O': 존재, 'X': 삭제)
 * @constraints
 * - 표의 행 개수 n은 5 이상 1,000,000 이하입니다.
 * - 처음 선택된 행의 위치 k는 0 이상 n-1 이하입니다.
 * - 명령어 배열 cmd의 길이는 1 이상 200,000 이하입니다.
 * - 명령어는 "U X", "D X", "C", "Z" 형태입니다.
 */
function solution(n, k, cmd) {
  const table = new Table(n, k);

  for (let i = 0; i < cmd.length; i++) {
    const [command, x] = cmd[i].split(' ');

    switch (command) {
      case 'U':
        table.up(parseInt(x));
        break;
      case 'D':
        table.down(parseInt(x));
        break;
      case 'C':
        table.remove();
        break;
      case 'Z':
        table.restore();
        break;
    }
  }

  const result = table.getResult();
  return result;
}

Next.js 15 / Image Component

KimMinJun — Wed, 13 Aug 2025 18:48:11 +0900

개요

Next.js의 장점이 '간편한 라우팅'과, '이미지 및 폰트 최적화'라고 많이 들어봤을 것이다.

이미지 최적화 할 때, React랑은 다르게 `<Image>` 컴포넌트를 사용하는데, 어떻게 다른지 궁금하였다.

되게 많은 prop들이 있지만, 실제로 사용해본 것들 먼저 천천히 정리해보려 한다.

먼저, Image 컴포넌트에 대해 가볍게 설명하자면,

Image 컴포넌트는 HTML의 `<img>`를 확장하여 자동 이미지 최적화 기능을 제공한다.

원본 이미지를 직접 사용하는 것이 아니라, Next.js 서버를 거쳐서 최적화된 크기의 이미지를 전달한다.

Props

Prop	예시	타입	설명
src	src="/profile.png"	String	이미지 경로(필수)
alt	alt="저자 사진"	String	대체 텍스트(필수)
width	width={500}	Integer (px)	이미지 가로 픽셀값
height	height={500}	Integer (px)	이미지 세로 픽셀값
fill	fill={true}	Boolean	부모 요소 채우기
loader	loader={imageLoader}	Function	커스텀 로더 함수
sizes	sizes="(max-width:768px) 100vw, 33vw"	String	반응형 이미지 크기
quality	quality={80}	Integer (1-100)	이미지 품질 설정
priority	priority={true}	Boolean	우선 로딩
placeholder	placeholder="blur"	String	블러 등 플레이스홀더
style	style={{objectFit: "contain"}}	Object	인라인 CSS 스타일
onLoad	onLoad={event => done()}	Function	로드 완료 콜백
onError	onError={event => fail()}	Function	로드 실패 콜백
loading	loading="lazy"	String	로딩 방식
blurDataURL	blurDataURL="image/..."	String	블러 이미지 데이터
overrideSrc	overrideSrc="/seo.png"	String	src 직접 오버라이드

`src`

외부 URL은 remotePatterns 설정이 필요하다.
정적 import가 가능하다.

import profile from './profile.png'
 
export default function Page() {
  return <Image src={profile} />
}

`alt`

웹 접근성을 위한 스크린 리더가 읽을 수 있는 대체 텍스트이다.
단순 장식용 이미지라면 `alt=""`로 비워둔다.

`width` and `height`

이미지의 원본 크기를 의미하며, 단위는 px이다.
이미지의 실제 렌더링 사이즈를 결정하지 않는다.
Next.js는 이 정보를 사용해 이미지 비율을 파악하여,
이미지 로딩 시에 빈 공간을 미리 확보하고 레이아웃 시프트를 방지한다.
반드시 함께 지정해야 한다.
이미지가 정적으로 import 된 경우나 `fill` prop을 사용하는 경우에는 명시적으로 지정하지 않아도 된다.

[ 중요한 점 ]

만약 이미지가 원격 URL에서 오거나 동적으로 로드된다면, `width`와 `height`를 수동으로 지정한다.
`fill` prop은 이미지가 부모 컨테이너의 크기에 맞춰 늘어나며,
이 때는 부모 컨테이너에 `position: relative`등의 스타일이 필요하다.
브라우저는 `width`와 `height`를 보고 이미지 공간을 미리 설정하므로,
명확한 크기를 설정하여 시각적 안정성을 확보하는 것이 좋다.

import Image from 'next/image'

// 정적 import한 이미지 예시
import profile from './profile.png'

export default function Page() {
  return (
    <Image
      src={profile}
      alt="프로필 사진"
      // width, height는 profile 객체에 자동 포함되어 있으므로 따로 지정 안 해도 됨
    />
  )
}

// 원격 이미지 예시 (width, height 직접 지정 필요)
export function RemoteImage() {
  return (
    <Image
      src="https://example.com/photo.jpg"
      alt="원격 이미지"
      width={800}
      height={600}
    />
  )
}

// fill을 사용하는 경우 (부모 요소에 position: relative 필요)
export function FillImage() {
  return (
    <div style={{ position: 'relative', width: '400px', height: '300px' }}>
      <Image
        src="/bg.jpg"
        alt="배경 이미지"
        fill
        style={{ objectFit: 'cover' }}
      />
    </div>
  )
}

`priority`

`true`로 설정하면, 해당 이미지를 즉시 우선적으로 미리 로드하도록 브라우저에 지시한다.
`priority={true}`인 이미지는 lazy loading이 비활성화되고, 페이지 초기 렌더링 시 빠르게 표시된다.
페이지에서 처음 화면에 보여지는 이미지에 사용하는 것이 좋다.
페이지의 Largest Contentful Paint(LCP) 요소에 해당하는 이미지에 지정하여 초기 로딩 성능을 개선한다.
중요한 주요 배너, 로고, 히어로 이미지 등 즉시 사용자에게 보여져야 하는 이미지에 적합하다.

만약 개발자도구에서 위와 같은 경고 문구가 떴다면,

해당 이미지 컴포넌트에 priority를 설정해주면 된다.

* Largest Contentful Paint(LCP)란?

LCP는 웹 페이지에서 사용자가 보는 화면(뷰포트) 안에 렌더링되는

가장 큰 콘텐츠 요소가 화면에 나타나는 시간을 측정하는 성능 지표이다.

주로 큰 이미지, 배너, 텍스트 블록 같은 페이지의 주요 콘텐츠가 얼마나 빨리 로드되고 표시되는지를 의미한다.

LCP는 사용자 경험 측면에서 매우 중요하고, SEO 순위에도 영향을 미치는 중요한 지표로 보고 있다.

뷰표트 밖에 있거나 사용자가 스크롤하기 전까지 보이지 않는 콘텐츠는 LCP에 포함되지 않는다.

`loading`

`lazy`: 이미지를 뷰포트에 근접했을 때 로드한다.
`eager`: 이미지를 즉시 로드한다. 주로 페이지 첫 화면에 보여지는 중요한 이미지에 쓰인다.

Next.js 15 / CSS Modules

KimMinJun — Wed, 13 Aug 2025 15:14:49 +0900

개요

평소에는 Tailwind CSS를 사용하다가, 한번도 써보지 않았던 CSS Modules를 접하게 되어 정리해보려 한다.

Tailwind CSS는 Next.js를 설치할 때 터미널에서 선택하면 자동으로 설치되기도 하고,

Next.js 문서에서도 여러가지 CSS 적용 방법중에 볼드체로 권장되는 방법이기도 하다.

Getting Started: CSS | Next.js

Learn about the different ways to add CSS to your application, including Tailwind CSS, CSS Modules, Global CSS, and more.

nextjs.org

(무엇보다 한 번 사용하게 되면서 다른건 보지도 않게 되었다...)

다만, Tailwind CSS를 사용하면서 길어진 className으로 컴포넌트 코드가 조금 지저분해 보인다는 단점이 있기는 하다.

따라서 CSS 문법에 익숙하다면, 그냥 CSS Modules를 사용하는 것도 나쁘지 않다고 생각한다.

CSS Module

CSS Module은 CSS를 로컬 범위로 한정하여 고유한 클래스 이름을 생성한다.

이를 통해 서로 다른 파일에서 같은 클래스 이름을 사용해도 충돌을 걱정하지 않아도 된다.

문법은 일반 CSS와 같고, 사용방법은 다음과 같다.

/* app/blog/blog.module.css */
.blog {
  padding: 24px;
}

// app/blog/page.tsx
import styles from './blog.module.css'
 
export default function Page() {
  return <main className={styles.blog}></main>
}

위의 결과를 브라우저의 개발자 도구에서 확인해보면 아래와 같은 결과를 얻는다.

지정한 클래스명인 'blog'가 붙고, 그 뒤에 '-module',

마지막으로 해시값이 붙는다.

따라서 다른 CSS Module에서 blog 클래스명을 사용하더라도 중복 걱정을 할 필요가 없는것이다.

Ordering and Merging

Next.js는 프로덕션 빌드 시 CSS를 자동으로 chunking 하여 최적화한다.

CSS의 적용 순서는 코드에서 해당 스타일을 import한 순서에 따라 결정된다.

여기서 헷갈리면 안된다!!

적용 순서가 import한 순서에 따라 결정된다는 말은,

만약 여러 CSS 파일을 import 했는데 한 클래스에 대해 겹치는 스타일링이 있다면,

결국 가장 마지막에 import한 CSS가 적용된다는 것이다.

헷갈린다면, 겹치는 CSS는 가장 마지막에 import 한거로 덮어씌워진다고 생각하면 된다.

"CSS를 적용한 태그랑 가까울수록 우선순위가 크다"라고 생각해도 좋다.

Recommendations

CSS import는 가급적 한 곳의 파일(layout.js/ts)에서 관리
전역 스타일과 Tailwind CSS 스타일은 앱의 루트에서 import
스타일링은 대부분 Tailwind CSS 사용
- 유틸리티 클래스로 미리 정해진 스타일이기 때문에 공통적인 패턴으로 사용 가능
Tailwind CSS로 부족하면 CSS Modules 사용
CSS Modules는 `<name>.module.css` 네이밍 권장
중복 스타일은 공용 컴포넌트로 추출
ESLint의 `sort-imports` 등 import 순서를 강제로 바꾸는 도구는 비활성화
CSS chunking 제어는 `next.config.js/ts`의 `cssChunking` 옵션 활용 가능

Developments vs. Production

개발 환경에서는 Fash Refresh로 CSS 업데이트가 즉시 반영
프로덕션 환경에서는 CSS가 여러 개의 minified되고 code-split된 `.css` 파일로 병합되어,
라우트 별 최소 CSS만 로딩
프로덕션 빌드에서는 JS가 꺼져 있어도 CSS가 로드됨
(위에서 말했듯이, 개발 모드는 Fash Refresh 때문에 JS 필요)
CSS 순서는 개발과 프로덕션 환경에서 다를 수 있으므로 반드시 `next build`로 최종 CSS 적용 순서 확인

Next.js 15 / File system conventions - layout.js(ts)

KimMinJun — Tue, 12 Aug 2025 23:41:35 +0900

개요

Next.js의 'File system convention'은 프로젝트 폴더와 파일의 구조만으로

라우팅 및 주요 기능이 자동으로 결정되는 방식이다.

특히 Next.js 15.4.6 App Router 기준으로 20개가 넘는 컨벤션들이 있는데,

공식문서를 보고 하나씩 정리해보려 한다.

먼저, Next.js를 설치하게 되면 기본적으로 세팅이 되있기도 한 `layout.js`이다.

`layout` 파일은 레이아웃을 정의하기 위해 사용된다.

모든 페이지에서 공통적으로 사용되는 레이아웃은 가장 상위인 `app` 디렉터리에 만든다.

Reference

Props

`children` (필수)

레이아웃 컴포넌트는 `children` prop을 반드시 가져야 한다.

렌더링 되는동안, `children`은 레이아웃이 감싸고 있는 경로에 대한 자식들로 채워진다.

이 자식들은 보통 자식 레이아웃이나, 컴포넌트로 채워지지만,

loading.js나 error.js 같은 특별한 파일 일수도 있다.

`params` (선택)

`params`는 동적 라우팅 파라미터 객체를 담은 Promise이다.

만약, 경로가 `app/dashboard/[team]/layout.js`이고,

URL이 `/dashboard/1`이라면,

`params`는 `Promise<{ team: '1' }>`이 된다.

`params`는 Promise이므로 `async/await` 또는 React의 `use` 함수를 사용해 값을 접근해야 한다.

Root Layout

`app` 디렉터리는 반드시 루트 레이아웃이 있어야 한다.

일반적으로, `app/layout.js`가 루트 레이아웃이다.

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html>
      <body>{children}</body>
    </html>
  )
}

루트 레이아웃은 반드시 `<html>`과 `<body>` 태그를 정의해야 한다.

그리고, 메타데이터는 직접 작성하지 말고, Metatdata API를 사용해야 한다.

import './globals.css';

export const metadata = {
  title: '제목',
  description: '설명',
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html>
      <body>{children}</body>
    </html>
  );
}

라우트 그룹을 사용하면 여러 개의 루트 레이아웃을 만들 수 있다.

다만, 서로 다른 루트 레이아웃 간 이동은 전체 페이지 새로고침을 발생시킨다.

예를 들어, `/cart`(app/(shop)/layout.js)에서

`blog`(app/(marketing)/layout.js)로 이동하면 새로고침이 발생한다.

또한, 루트 레이아웃은 동적 세그먼트 하위에 있을 수도 있다.

예를 들어, `app/[lang]/layout.js`를 국제화(i8n)에 사용 가능하다.

주의 사항

Request Object

네비게이션 시 레이아웃은 캐싱되어 불필요한 서버 요청이 발생하지 않게 한다.
레이아웃은 다시 렌더링되지 않으므로 성능이 향상된다.
따라서 레이아웃에서는 원본 Request 객체에 접근할 수 없다.
대신 Server Component 및 서버 함수에서 `headers`와 `cookies` API를 사용해야 한다.

import { cookies } from 'next/headers'
 
export default async function Layout({ children }) {
  const cookieStore = await cookies()
  const theme = cookieStore.get('theme')
  return '...'
}

Query Params

레이아웃은 네비게이션 시 리렌더링되지 않으므로 쿼리 파라미터가 갱신되지 않는다.
만약 최신 쿼리 값을 얻고 싶다면,
- 페이지 컴포넌트에서 `searchParams` prop을 사용하거나,
- Client Component에서 `useSearchParams` 훅을 사용해야 한다.

'use client'
 
import { useSearchParams } from 'next/navigation'
 
export default function Search() {
  const searchParams = useSearchParams()
 
  const search = searchParams.get('search')
 
  return '...'
}

import Search from '@/app/ui/search'
 
export default function Layout({ children }) {
  return (
    <>
      <Search />
      {children}
    </>
  )
}

Pathname

레이아웃은 네비게이션 시 리렌더링되지 않으므로 최신 pathname에 접근할 수 없다.
최신 경로를 사용하려면 Client Component에서 `usePathname`훅을 사용해야 한다.

'use client'
 
import { usePathname } from 'next/navigation'
 
// Simplified breadcrumbs logic
export default function Breadcrumbs() {
  const pathname = usePathname()
  const segments = pathname.split('/')
 
  return (
    <nav>
      {segments.map((segment, index) => (
        <span key={index}>
          {' > '}
          {segment}
        </span>
      ))}
    </nav>
  )
}

import { Breadcrumbs } from '@/app/ui/Breadcrumbs'
 
export default function Layout({ children }) {
  return (
    <>
      <Breadcrumbs />
      <main>{children}</main>
    </>
  )
}

Fetching Data

레이아웃은 `children`에 데이터를 전달할 수 없다.
하지만, 동일한 데이터를 여러 라우트에서 가져와야 할 경우에는
- React의 `cache`를 사용해 중복을 제거하거나,
- Next.js의 `fetch`를 사용해 자동으로 요청을 중복을 제거할 수 있다.

아래와 같은 유저 데이터를 받아오는 함수가 있다고 할 때,

export async function getUser(id: string) {
  const res = await fetch(`https://.../users/${id}`)
  return res.json()
}

layout은 기본적으로 서버 컴포넌트이기 때문에 직접 fetch 또는 다른 데이터 조회 코드를 직접 호출할 수 있다.

// app/dashboard/layout.tsx
import { getUser } from '@/app/lib/data'
import { UserName } from '@/app/ui/user-name'
 
export default async function Layout({ children }) {
  const user = await getUser('1')
 
  return (
    <>
      <nav>
        {/* ... */}
        <UserName user={user.name} />
      </nav>
      {children}
    </>
  )
}

위의 layout에 children에 들어가는 page 컴포넌트에서 다시 한번 똑같은 데이터를 요청해도,

fetch를 사용할 경우, 같은 요청은 캐싱되어있기 때문에 성능 이슈가 없다.

// app/dashboard/page.tsx
import { getUser } from '@/app/lib/data'
import { UserName } from '@/app/ui/user-name'
 
export default async function Page() {
  const user = await getUser('1')
 
  return (
    <div>
      <h1>Welcome {user.name}</h1>
    </div>
  )
}

Accessing child segments

레이아웃 컴포넌트는 자신을 감싸는 segment는 알 수 있어도, 자식 segment 정보까지는 알 수 없다.
하위 segment를 사용하려면 Client Component에서
`useSelectedLayoutSegment` 또는
`useSelectedLayoutSegments` 훅을 사용해야 한다.

아래 코드에서 `useSelectedLayoutSegment()` 훅은

URL 경로에서 상위 레이아웃 바로 아래 레벨의 활성화된 경로를 문자열로 반환한다.

예를 들어 URL이 `/blog/hello-world`라면,

부모인 `blog` 바로 아래 segment인 `hello-world`를 반환한다.

// app/ui/nav-link.tsx
'use client'
 
import Link from 'next/link'
import { useSelectedLayoutSegment } from 'next/navigation'
 
export default function NavLink({
  slug,
  children,
}: {
  slug: string
  children: React.ReactNode
}) {
  const segment = useSelectedLayoutSegment()
  const isActive = slug === segment
 
  return (
    <Link
      href={`/blog/${slug}`}
      // Change style depending on whether the link is active
      style={{ fontWeight: isActive ? 'bold' : 'normal' }}
    >
      {children}
    </Link>
  )
}

따라서 만약에 아래 코드에서 `post.slug`가 'hello-world'라면,

`/blog/hello-world`로 접속했을 때, 위의 NavLink의 isActive가 true가 되면서,

bold로 스타일링 된다.

// app/blog/layout.tsx
import { NavLink } from './nav-link'
import getPosts from './get-posts'
 
export default async function Layout({
  children,
}: {
  children: React.ReactNode
}) {
  const featuredPosts = await getPosts()
  return (
    <div>
      {featuredPosts.map((post) => (
        <div key={post.id}>
          <NavLink slug={post.slug}>{post.title}</NavLink>
        </div>
      ))}
      <div>{children}</div>
    </div>
  )
}

Next.js 15 + Supabase로 Kakao 로그인 구현하기 - 2

KimMinJun — Mon, 11 Aug 2025 00:31:10 +0900

개요

지난 포스팅에서 코드를 구현하기전에 끝내야 할 모든 설정들을 완료했다.

2025.08.08 - [Web/Next.js] - Next.js 15 + Supabase로 Kakao 로그인 구현하기 - 1

Next.js 15 + Supabase로 Kakao 로그인 구현하기 - 1

개요사이드 프로젝트 진행중에 '카카오 로그인' 기능을 추가하고자 했다.Next.js를 사용하는것도 처음이고,Supbase로 OAuth를 이용해 카카오 로그인 기능을 구현하는 것도 처음이었다.시행착오를 거

jun-coding.tistory.com

이제 공식문서를 따라서 구현해보면서 카카오 로그인 기능을 구현해보려 한다.

Add Kakao OAuth to your Supabase project

supabase.com

UI는 최대한 간단하게 하고, 기능 완성만 해볼것이다.

로그인 코드 추가하기

공식문서를 보면 다음과 같은 문구가 있다.

만약 서버 사이드 렌더링(SSR)이나 쿠키 기반의 인증 방식을 사용하지 않는다면,
`@supabase/supabase-js`에 있는 `createClient`를 바로 사용하면 된다.
만약 SSR을 사용한다면, Supbase 클라이언트를 만드는데에 SSR 가이드를 참고해라.

위에서 말한 SSR 가이드로 들어가보자.

(Supabase를 이미 Next.js에 설정한 사람들은 가볍게 보면 될 것 같다.)

https://supabase.com/docs/guides/auth/server-side/creating-a-client?queryGroups=environment&environment=server

Creating a Supabase client for SSR | Supabase Docs

Configure your Supabase client to use cookies

supabase.com

`middleware.ts`

대부분의 예시 코드는 여기에 있는 'Connect'를 누르면 나오는 Next.js 설정 코드와 같다.

그런데 'middleware.ts' 파일을 추가로 보여주고 있다.

SSR 가이드에 보면 Middleware 예시 코드에 다음과 같이 설명이 되어있다.

Next.js에서 서버 컴포넌트는 쿠키를 설정할 수 없기 때문에,
클라이언트가 쿠키 갱신을 다루기 위해 미들웨어가 필요하다.
미들웨어는 Supabase에 접근이 필요하거나,
Supabase Auth에 의해 보호받을 모든 라우트 전에 실행된다.

그리고 두 가지 코드가 주어진다.

먼저 `middleware.ts` 파일의 코드다.

(프로젝트의 루트에 하나만 생성하는 것이 Next.js 공식 문서의 권장 방식이다.)

// middleware.ts
import { type NextRequest } from 'next/server'
import { updateSession } from '@/utils/supabase/middleware'

export async function middleware(request: NextRequest) {
  return await updateSession(request)
}

export const config = {
  matcher: [
    /*
     * Match all request paths except for the ones starting with:
     * - _next/static (static files)
     * - _next/image (image optimization files)
     * - favicon.ico (favicon file)
     * Feel free to modify this pattern to include more paths.
     */
    '/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)',
  ],
}

위 코드의 주석을 보면,

주석에 써있는 경로들을 제외한 모든 경로에서 미들웨어를 실행한다.

`_next/static`(Next.js 정적 파일)
`_next/image`(Next.js 이미지 최적화)
`favicon.icon`(파비콘)
이미지 파일들(svg, png, jpg 등)

`@/utils/supabase/middleware.ts`

이 미들웨어의 구현부는 `@/utils/supabase/middleware.ts`에 다음과 작성한다.

import { createServerClient } from '@supabase/ssr'
import { NextResponse, type NextRequest } from 'next/server'

export async function updateSession(request: NextRequest) {
  let supabaseResponse = NextResponse.next({
    request,
  })

  const supabase = createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        getAll() {
          return request.cookies.getAll()
        },
        setAll(cookiesToSet) {
          cookiesToSet.forEach(({ name, value, options }) => request.cookies.set(name, value))
          supabaseResponse = NextResponse.next({
            request,
          })
          cookiesToSet.forEach(({ name, value, options }) =>
            supabaseResponse.cookies.set(name, value, options)
          )
        },
      },
    }
  )

  // IMPORTANT: Avoid writing any logic between createServerClient and
  // supabase.auth.getClaims(). A simple mistake could make it very hard to debug
  // issues with users being randomly logged out.

  // IMPORTANT: Don't remove getClaims()
  const { data } = await supabase.auth.getClaims()

  const user = data?.claims

  if (
    !user &&
    !request.nextUrl.pathname.startsWith('/login') &&
    !request.nextUrl.pathname.startsWith('/auth')
  ) {
    // no user, potentially respond by redirecting the user to the login page
    const url = request.nextUrl.clone()
    url.pathname = '/login'
    return NextResponse.redirect(url)
  }

  // IMPORTANT: You *must* return the supabaseResponse object as it is. If you're
  // creating a new response object with NextResponse.next() make sure to:
  // 1. Pass the request in it, like so:
  //    const myNewResponse = NextResponse.next({ request })
  // 2. Copy over the cookies, like so:
  //    myNewResponse.cookies.setAll(supabaseResponse.cookies.getAll())
  // 3. Change the myNewResponse object to fit your needs, but avoid changing
  //    the cookies!
  // 4. Finally:
  //    return myNewResponse
  // If this is not done, you may be causing the browser and server to go out
  // of sync and terminate the user's session prematurely!

  return supabaseResponse
}

이 코드는 앞서 본 `middleware.ts`에서 호출되는 `updateSession()`함수이다.

Supabase 인증 세션을 관리하는 핵심 로직이다.

코드를 나눠서 살펴보자.

먼저, Supbase 서버 클라이언트를 생성하는 부분이다.

  const supabase = createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        getAll() {
          return request.cookies.getAll()
        },
        setAll(cookiesToSet) {
          cookiesToSet.forEach(({ name, value, options }) => request.cookies.set(name, value))
          supabaseResponse = NextResponse.next({
            request,
          })
          cookiesToSet.forEach(({ name, value, options }) =>
            supabaseResponse.cookies.set(name, value, options)
          )
        },
      },
    }
  )

서버 환경에서 Supabase와 통신할 클라이언트를 생성하고,

쿠키를 통해 인증 토큰을 주고 받도록 설정해준다.

요청에서 `getAll()`로 모든 쿠키를 읽고,

`setAll()`로 요청과 응답 모두에 쿠키를 설정해준다.

다음으로는 사용자 인증을 확인하는 부분이다.

const { data } = await supabase.auth.getClaims()
const user = data?.claims

현재 요청의 인증 토큰에서 사용자 정보를 추출해준다.

로그인 리다이렉트 로직 부분이다.

if (
  !user &&
  !request.nextUrl.pathname.startsWith('/login') &&
  !request.nextUrl.pathname.startsWith('/auth')
) {
  const url = request.nextUrl.clone()
  url.pathname = '/login'
  return NextResponse.redirect(url)
}

if문에서 세션을 체크해서 사용자가 로그인되어 있는지 확인한다.

여기서 만약 로그인하지 않은 사용자가 보호된 페이지에 접근하면,

`/login` 페이지로 자동으로 리다이렉트 한다.

`/login`이나 `/auth`로 시작하는 경로는 비회원도 접근해야 하기 때문에 리다이렉트 해주지 않는다.

그리고 주석에서 강조하는 것이 있는데,

다음을 꼭 지켜줘야 한다.

`createServerClient`와 `getClaims()` 사이에 다른 로직을 넣으면 안된다.
`supbaseResponse` 객체를 반드시 그대로 반환해야 한다.
쿠키를 임의로 수정하면 세션이 깨질 수 있다.

결론적으로, 이 코드는 '자동 로그인 보호 기능'을 구현하는 로직이다.

로그인 로직 코드 작성하기

유저가 로그인할 때, `signInWithOAuth()`를 'kakao' provider로 설정하여 호출하면 된다.

async function signInWithKakao() {
  const { data, error } = await supabase.auth.signInWithOAuth({
    provider: 'kakao',
  })
}

기본 형식은 위와 같고,

보통 로그인이 성공하면 어떤 페이지로 이동(리다이렉트)해야 하는데,

그 방법이 클라이언트에서 처리하는 것과 서버에서 처리하는 방식이 다르다.

클라이언트 컴포넌트에서는 다음과 같이 처리한다.

브라우저(클라이언트)에서는 자동으로 OAuth provider의 인증 엔드포인트로 리다이렉트 되고,

그 후, 내가 설정한 엔드포인트로 리다이렉트 된다.

async function signInWithKakao() {
  const { data, error } = await supabase.auth.signInWithOAuth({
    provider: 'kakao',
    options: {
      redirectTo: `http://example.com/auth/callback`,
    },
  })
}

내가 프로젝트에 작성한 코드로는 다음과 같다.

아래 코드를 본인이 만든 카카오 로그인 버튼에 이벤트 리스너로 달아주면 된다.

  const handleKakaoLogin = async () => {
    const supabase = createClient();
    const { data, error } = await supabase.auth.signInWithOAuth({
      provider: 'kakao',
      options: {
        redirectTo: `${window.location.origin}/auth/callback`,
      },
    });
  };

서버 컴포넌트에서는 다음과 같이 처리한다.

서버에서는, OAuth provider의 인증 엔드포인트로의 리디렉션을 처리해야 한다.

`signInWithOAuth()` 메서드는 리다이렉트 할 수 있는 url을 반환해준다.

const { data, error } = await supabase.auth.signInWithOAuth({
  provider,
  options: {
    redirectTo: 'http://example.com/auth/callback',
  },
})

if (data.url) {
  redirect(data.url) // use the redirect API for your server framework
}

callback 엔드포인트에서는, 인증 코드를 교환해서 사용자 세션을 저장해야 한다.

`app/auth/callback/route.ts`에 다음과 같은 코드를 만들면 된다.

import { NextResponse } from 'next/server'
// The client you created from the Server-Side Auth instructions
import { createClient } from '@/utils/supabase/server'

export async function GET(request: Request) {
  const { searchParams, origin } = new URL(request.url)
  const code = searchParams.get('code')
  // if "next" is in param, use it as the redirect URL
  // 만약 성공시에 '/gallery'로 이동하고 싶다면 마지막을 '/' 대신 '/gallery'로 바꿔준다.
  let next = searchParams.get('next') ?? '/'
  if (!next.startsWith('/')) {
    // if "next" is not a relative URL, use the default
    // 마찬가지로 여기도 '/gallery'로 바꿔준다.
    next = '/'
  }

  if (code) {
    const supabase = await createClient()
    const { error } = await supabase.auth.exchangeCodeForSession(code)
    if (!error) {
      const forwardedHost = request.headers.get('x-forwarded-host') // original origin before load balancer
      const isLocalEnv = process.env.NODE_ENV === 'development'
      if (isLocalEnv) {
        // we can be sure that there is no load balancer in between, so no need to watch for X-Forwarded-Host
        return NextResponse.redirect(`${origin}${next}`)
      } else if (forwardedHost) {
        return NextResponse.redirect(`https://${forwardedHost}${next}`)
      } else {
        return NextResponse.redirect(`${origin}${next}`)
      }
    }
  }

  // return the user to an error page with instructions
  return NextResponse.redirect(`${origin}/auth/auth-code-error`)
}

이것을 마지막으로 완료!

Next.js 15 + Supabase로 Kakao 로그인 구현하기 - 1

KimMinJun — Fri, 8 Aug 2025 02:30:55 +0900

개요

사이드 프로젝트 진행중에 '카카오 로그인' 기능을 추가하고자 했다.

Next.js를 사용하는것도 처음이고,

Supbase로 OAuth를 이용해 카카오 로그인 기능을 구현하는 것도 처음이었다.

시행착오를 거치면서 어떻게 구현했는지 남기고자 한다.

(Supabase에 프로젝트는 미리 생성했고, Supabase 사용법에 관련해서는 따로 다루지 않을 예정)

일단, Supabase의 공식문서에 방법이 나와있어서 참고하면서 했다.

(쉽고 자세하게 나와있으니, 영어 읽는데 거부감이 없다면 공식문서를 보고하는걸 추천!)

https://supabase.com/docs/guides/auth/social-login/auth-kakao

Add Kakao OAuth to your Supabase project

supabase.com

REST API 키 설정하기

일단 Kakao Developers에서 본인 카카오 계정으로 로그인 후, 키 생성을 해주어야 한다.

https://developers.kakao.com/

Kakao Developers

카카오 API를 활용하여 다양한 어플리케이션을 개발해 보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.

developers.kakao.com

일단 로그인 후에, 상단 네비게이션 바에 '앱'을 눌러준다.

그러면 이런 화면이 뜰텐데,

이미 생성한 키가 있다면 아래와 같이 뜨게 된다.

새로 만들것이기 때문에 '앱 생성' 버튼을 눌러주자.

그러면 다음과 같이 필수 정보들을 입력해줘야 한다.

사이드 프로젝트이기 때문에 아무렇게나 입력해줘도 상관없지만,

만약 회사 서비스 목적이라면 정확하게 입력해주는게 좋을 것 같다.

생성이 완료되었다면 바로 확인할 수 있다.

클릭해서 대시보드로 들어가자.

좌측의 '앱'의 '일반'탭을 눌러서 밑으로 조금 내러보면 '앱 키' 부분이 있다.

여기서 나중에 API 키를 사용할 때, 'REST API' 키를 사용할 것이기 때문에,

복사를 해놓거나 어디서 보는지 위치를 기억해놓으면 좋다.

Callback URL 설정하기

다음으로 'callback URL'이 필요하다.

이 'callback URL'은 카카오 로그인 화면에서 인증을 완료하면,
카카오 인증 서버는 인증 결과를 지정된 callback URL로 전달하며 사용자를 리다이렉트 해준다.
즉, "사용자가 인증 후 다시 우리 서비스로 안전하게 돌아오는 경로"를 의미하며,
이 경로에서 인증 코드 교환 및 세션 생성 등이 이루어져서 최종 로그인이 완성된다.

일단, Supabase에 있는 만들어둔 프로젝트의 대시보드로 이동해준 후,

사이드 바의 'Authentication'을 클릭해준다.

그 다음으로, 'Sign In / Providers'를 클릭해준다.

조금 내려보면, 'Auth Providers'에서 'Kakao'가 있는 것을 볼 수 있다.

활성화 하기 위해서 'Disabled'라고 적힌 버튼을 눌러주자.

아래와 같은 창이 뜨는데,

'Kakao enabled'로 토글 버튼을 on 해주고,

'REST API Key'에 아까 복사해둔 것을 넣어주면 된다.

'Client Secret Code'와 'Callback URL'은 다시 Kakao Developers로 가서 설정해주자.

'Callback URL'은 복사해두자.

사이드바의 '카카오 로그인'의 '일반'으로 들어와서,

모든 상태를 'on' 해주자.

그리고 조금 내려보면 '리다이렉트 URI 등록' 버튼이 있다.

눌러보면 다음과 같은 창이 뜨는데,

여기서 아까 Supabase에서 복사한 'Callback URL'을 넣어주고 저장해주면 된다.

Client Secret key 설정하기

그 밑에있는 'Client Secret'은 발급받은 후에 코드를 복사해주고,

꼭 '사용함'으로 설정해주자.

아래와 같이 다 입력해줬다면, 'Save'를 눌러 저장해주면 된다.

다시 Kakao Developers로 돌아오자.

만약 카카오 로그인 한 사용자의 정보들이 필요하다면

사용자의 동의를 얻어 사용할 수 있도록 설정해주어야 한다.

사이드바에서 '카카오 로그인' 탭의 '동의항목'을 클릭해주자.

그럼 이렇게 개인정보 동의항목들을 볼 수 있다.

여기서 서비스에 맞게 사용할 것들을 설정해주면 된다.

예시를 위해 닉네임 설정하는 것만 보여주면 다음과 같다.

먼저, 동의 단계를 설정해준다. (개발중인 서비스에 맞게 설정, 아래 '더보기'를 꼭 봐주세요!!)

나중에 개발할 때, 'account_email'이 동의되지 않았다고 에러가 났었다.

근데, 처음에 'account_email'을 동의항목으로 설정하려면 '추가 기능 신청'을 해야 한다.

같은 페이지에 '추가 기능 신청' 버튼이 있으니, 해당 페이지에서 수행해주면 된다.

개인 개발 목적으로 선택 항목들은 다 적지 않고 빈 칸으로 제출했는데도 됐다.

그렇다고 바로 승인되는 것은 아니고, 어느 순간 갑자기 되어있었다...! (하루안엔 무조건 되는것 같다.)

그 다음으로 동의 목적을 적어주는데,

여기에 적어주는 것은 우리가 회원가입할 때 체크하도록 뜨는것들이다.

동의 목적은 다음과 같이 적어주었다.

모든 설정을 마친 후, 하단의 '동의 화면 미리보기' 버튼을 클릭하면

어떻게 뜨는지 확인할 수 있으니 확인해보자!

마무리

이제 세팅을 모두 마치고 로그인 코드를 작성하는 일만 남았다!

지금 다른 웹 사이트 전혀 도움받지 않고 공식문서만 보고 하는중인데,

자세히 설명이 되어있어서 다행이다...

코드를 작성하는 것은 다음 포스팅에서 이어서 작성,,,

Docker로 MySQL 실행시켜보기 - 3

KimMinJun — Wed, 6 Aug 2025 21:43:27 +0900

도커 볼륨 이용해서 컨테이너 생성하기

이번에는 MySQL에 대한 데이터 정보를 호스트의 일부 어떤 공간의 데이터로 저장해보려고 한다.

따라서, 터미널에서 데이터를 저장할 경로에 들어가야 한다.

이 포스팅에서는 'dev'라는 폴더를 만들어서 사용할 것이다.

그리고, 기존의 컨테이너들은 모두 삭제해주었다.

그리고나서, 하위 폴더에 'docker-mysql'이라는 폴더를 또 만들어주었다.

`pwd`를 입력하면 현재 경로가 나오는데, 복사해두자.

그리고 다음 명령어로 볼륨을 만들어주자.

docker run -e MYSQL_ROOT_PASSWORD=[비밀번호] -d -p 3306:3306 -v [데이터를 저장할 경로] mysql

`-v` 이전까지는 전에 MySQL을 실행시켰을 때랑 같은 명령어이다.

`-v`는 볼륨을 만들겠다는 명령어이고,

그 뒤에 경로를 입력해준 후, 마지막에 이미지명인 'mysql'을 적어준다.

그런데, 위 경로에서 ':/var/lib/mysql'은 무엇일까?

Docker Hub의 MySQL에 있는 문서를 보자.

https://hub.docker.com/_/mysql#where-to-store-data

mysql - Official Image | Docker Hub

Quick reference 9.4.0, 9.4, 9, innovation, latest, 9.4.0-oraclelinux9, 9.4-oraclelinux9, 9-oraclelinux9, innovation-oraclelinux9, oraclelinux9, 9.4.0-oracle, 9.4-oracle, 9-oracle, innovation-oracle, oracle⁠ 8.4.6, 8.4, 8, lts, 8.4.6-oraclelinux9, 8.4-ora

hub.docker.com

'Where to Store Data'를 보면,

MySQL의 데이터 파일은 컨테이너 안에 `/var/lib/mysql` 경로에

저장된다고 적혀있기 때문에 똑같이 설정해주었다.

즉, 호스트의 `mysql_data` 폴더를 컨테이너 내부 MySQL 데이터 폴더에 연결해서,

컨테이너 내부의 MySQL 데이터가 이 폴더에 저장되고,

컨테이너가 삭제되어도 데이터는 호스트에 남아 유지되게 하는 것이다.

정확히 말하면, 컨테이너의 `/var/lib/mysql`에 저장되는 데이터가

호스트의 `mysql_data` 폴더에도 저장되는 것이다.

그러면 이제 볼륨을 만들어줬으니 한 번 확인해보자.

mysql로 들어가서 'mydb'라는 데이터베이스를 만들어주자.

정상적으로 확인된다면, 이제 나와서 컨테이너를 삭제해보자.

컨테이너를 다시 만들어줄것이다.

만약, 볼륨이 정상적으로 작동이 되었다면 똑같은 명령어로 컨테이너를 생성했을 때

다음과 같이 'mydb' 데이터베이스가 그대로 남아있을 것이다.

이 구조를 그림으로 보면 다음과 같다.

주의할 점

컨테이너 내부의 데이터와,

우리가 지정한 호스트의 폴더와 데이터를 동기화해놨으니 폴더 내부를 보면 데이터 파일들이 있다.

이 데이터 파일들은 MySQL 내부에서 데이터베이스 뿐만 아니라,

MySQL 설정 파일들도 같이 있다.

따라서 만약 이 데이터를 사용하도록 볼륨을 이용하고,

다른 비밀번호를 가진 컨테이너를 만들었다고 해보자.

하지만 이 폴더에는 이미 이전에 만들었던 비밀번호 설정도 저장되어 있기 때문에,

새로운 비밀번호로 접속되지 않는다.

따라서 비밀번호를 다르게 지정하고 싶다면,

MySQL에 접속해서 내부에서 비밀번호를 바꾸는 방법과

호스트에 있는 볼륨 폴더를 지우는 방법이 있다.

Docker로 MySQL 실행시켜보기 - 2

KimMinJun — Wed, 6 Aug 2025 19:43:10 +0900

지난 포스팅에서 했던 것처럼 MySQL 비밀번호를 설정해주고 run을 해주었다.

그리고 bash로 컨테이너에 접속해주었다.

2025.08.06 - [Docker] - Docker로 MySQL 실행시켜보기 - 1

Docker로 MySQL 실행시켜보기 - 1

MySQL 이미지 다운로드하기도커 컨테이너, 볼륨을 활용해서 MySQL을 한번 실행시켜보자.그 전에, 먼저 이미지를 다운받아줘야 한다.Docker Hub에 들어가서 MySQL 이미지를 먼저 검색해보자.https://hub.dock

jun-coding.tistory.com

컨테이너에 접속했으니, MySQL에 접속해주자.

다음 명령어로 접속할 수 있다.

mysql -u root -p

비밀번호를 입력하라고 뜨는데,

이전에 설정해준 비밀번호를 입력해주면 된다.

비밀번호를 타이핑하는 동안에 보이지 않는 것이 정상이니,

입력을 완료하고 엔터를 눌러주면 위 이미지와 같이 정상 연결이 된다.

데이터베이스 조회하기

MySQL에 정상 연결이 되면,

MySQL 명령어를 사용할 수 있다.

다음 명령어로 데이터베이스를 조회해보자.

show databases;

여기에 'mydb'라는 새로운 데이터베이스도 만들어보자.

create database mydb;

그러면 이렇게 이전에는 없었던 'mydb'라는 데이터베이스가 생성된 것을 볼 수 있다.

이제 MySQL에서 나와서 MySQL를 실행시키고 있는 컨테이너를 삭제해보자.

그런 다음, 새로운 MySQL 컨테이너를 띄우고, 접속해보자.

데이터베이스를 다시 조회해보면, 아까 만들었던 'mydb' 데이터베이스가 사라진 것을 볼 수 있다.

이와 같이, 컨테이너를 삭제하면 같은 이미지를 사용했더라도

이전 컨테이너에 있던 데이터는 모두 사라지는 것을 볼 수 있다.

Docker로 MySQL 실행시켜보기 - 1

KimMinJun — Wed, 6 Aug 2025 17:12:20 +0900

MySQL 이미지 다운로드하기

도커 컨테이너, 볼륨을 활용해서 MySQL을 한번 실행시켜보자.

그 전에, 먼저 이미지를 다운받아줘야 한다.

Docker Hub에 들어가서 MySQL 이미지를 먼저 검색해보자.

https://hub.docker.com/

Docker Hub Container Image Library | App Containerization

Software supply chain Secure Your Supply Chain with Docker Hardened Images Use Docker's enterprise-grade base images: secure, stable, and backed by SLAs for Ubuntu, Debian, Java, and more. Regularly scanned and maintained with CVE remediation and long-term

hub.docker.com

mysql을 검색하고나서, 빨간 박스의 mysql 이미지를 클릭해주자.

클릭하면, mysql 이미지에 대한 설명이 나와있다.

조금만 밑으로 내리면 다음과 같이 이 이미지를 어떻게 사용해야 하는지 가이드가 나와있다.

위 이미지에서 명령어를 한번 봐보자.

$ docker run --name some-mysql -e MYSQL_ROOT_PASSWORD=my-secret-pw -d mysql:tag

이 명령어를 보면, MySQL을 처음 생성할 때 비밀번호를 뭘로 설정할 건지 입력해야 한다.

그래야 이 이미지가 정상적으로 실행된다.

만약, 비밀번호를 설정하지 않으면 어떻게 될까?

다음과 같이 정상적으로 다운로드 받아졌지만 `run`명령어를 사용했음에도 실행되지 않았다.

그래서, `docker ps -a`로 모든 컨테이너를 조회해보면,

중단된 mysql 컨테이너를 볼 수 있다.

디버깅 하기

그런데 왜 종료됐는지 알 수 없기 때문에,

지난 포스팅에서 배웠던 로그를 활용해서 디버깅을 해 볼 것이다.

2025.07.31 - [Docker] - 컨테이너 로그 조회하기

컨테이너 로그 조회하기

개요로그(log)는 굉장히 중요한 정보이다.흔히 디버깅 할 때, 디버깅 툴도 많이 이용하지만,간단히 디버깅 하기 위해서는 `console.log()` 같은 명령어도 많이 이용했다.지금 이 글을 작성하기 전까지

jun-coding.tistory.com

docker logs [CONTAINER ID]

에러 로그를 보면,

"Database is uninitialized and password option is not specified" 라고 되어있다.

비밀번호 옵션이 정해지지 않아서 데이터베이스가 실행되지 않았다는 것이다.

그리고 그 바로 뒤에,

You need to specify one of the following as an environment variable:

- MYSQL_ROOT_PASSWORD

- MYSQL_ALLOW_EMPTY_PASSWORD

- MYSQL_RANDOM_ROOT_PASSWORD

라고 나오는데, 이 중에서 하나의 환경 변수를 설정하라고 나온다.

그래서 옵션을 설정해서 다시 실행해보자.

docker run -e MYSQL_ROOT_PASSWORD=[비밀번호] -d -p 3306:3306 mysql

그러면 위와 같이 컨테이너가 잘 실행중인 것을 볼 수 있다.

여기서 `-e` 옵션은 환경 변수를 설정하는 옵션이다.

`MYSQL_ROOT_PASSWORD` 라는 환경 변수를 읽어가서,

처음 환경 세팅을 할 때, 설정해준 비밀번호 값으로 MySQL을 세팅하도록 하는 것이다.

환경 변수도 잘 설정이 되었는지 알아보자.

`docker exec -it` 명령어를 통해서 컨테이너에 들어가준다.

그리고 다음 명령어로 설정한 환경변수를 조회해주면 된다.

echo $MYSQL_ROOT_PASSWORD

GUI로 연결 확인해보기(DBweaver 사용)

이렇게 확인까지 했으면, DB가 정상적으로 작동하는 것 처럼 보인다.

하지만, 좀 더 확실히 하기 위해 GUI로 확인해보자.

설치되어있는 MySQL Workbench나 여러 DB 툴 아무거나 사용해도 된다.

여기서는 'DBeaver' 라는 툴을 사용해보겠다.

https://dbeaver.io/

DBeaver Community | Free Universal Database Tool

DBeaver Universal Database Tool DBeaver Community is a free cross-platform database tool for developers, database administrators, analysts, and everyone working with data. It supports all popular SQL databases like MySQL, MariaDB, PostgreSQL, SQLite, Apach

dbeaver.io

운영체제에 맞게 다운로드 했으면, 실행시켜주면 된다.

실행하고, 왼쪽 위에 DB를 추가할 수 있는 버튼이 있다.

클릭해주면, 다음과 같은 여러 종류의 DB가 뜨는데

MySQL을 눌러주면 된다.

MySQL의 기본 Username은 'root'로 설정되어 있고,

Password 부분엔 설정해준 비밀번호를 눌러주면 된다.

그리고 하단의 'Test Connection'을 눌러주면 된다.

그러면, MySQL 드라이버가 없다고 다운로드 하라고 뜨는데 다운로드 해주자.

다운로드가 완료된 뒤,

다시 'Test Connection'을 해주면 아래와 같은 에러가 뜰 수 있다.

'Public Key Retrieval is not allowed'

이 에러는 MySQL 8.0 이상 버전에서 클라이언트, 즉 GUI 같은 툴로 DB 접속 시 나타나는 인증 방식 관련 에러이다.

이 에러는 보안 강화를 위해서 기본 인증 방식이 변경되었기 때문에 발생한다.

해결법은 다음과 같다.

먼저, 'Driver properties'에 들어간다.

비어있는 부분에 우클릭을 해서 'Add new property'를 눌러주자.

그 다음, 'allowPublicKeyRetrieval' 라는 property를 추가해주면 된다.

값은 true로 설정해주자.

그리고 다시 'Test Connection'을 눌러주면,

드디어 Connected가 뜨면서 연결이 잘 된것을 확인할 수 있다!

GUI로 연결 확인해보기 - 컨테이너 종료

이제 실행시켰을 때 연결은 잘 확인했으니,

컨테이너가 종료되었을 때도 어떻게 되는지 확인해보자.

먼저, 컨테이너를 종료시켜줌과 동시에 삭제까지 했다.

DBweaver에서 다시 'Test Connection'을 해보면,

'Connection refused'가 뜨면서 연결이 실패하는 것을 볼 수 있다.

마무리

지금까지의 과정을 그림으로 나타내면 아래와 같다.

하지만, 문제점이 하나 있다.

컨테이너를 종료시키고 삭제하거나,

새로운 컨테이너로 갈아끼우면 컨테이너 안에 있던 데이터가 모두 유실된다는 것이다.

따라서, 다음 포스팅부터는 '볼륨'을 통해서 이 문제를 해결해보도록 하겠다.

도커 볼륨이란?

KimMinJun — Mon, 4 Aug 2025 18:30:11 +0900

컨테이너가 가진 문제점

Docker를 활용하면 특정 프로그램을 컨테이너로 띄울 수 있다.

이 프로그램에 기능이 추가되면 새로운 이미지를 만들어서 컨테이너를 실행시켜야 한다.

이 때, Docker는 변경된 부분을 수정하는것이 아니라,

새로운 컨테이너를 만들어서 통째로 갈아 끼워야 한다.

이러한 특징 때문에 기존 컨테이너를 새로운 컨테이너로 교체하면,

기존 컨테이너에 있던 데이터도 같이 사라진다.

만약 이 컨테이너가 DB를 실행시키는 컨테이너였다면,

DB에 저장된 데이터도 같이 삭제되는것이다.

따라서 컨테이너 내부에 저장된 데이터가 삭제되면 안 되는 경우에는

'볼륨(Volume)'이라는 개념을 활용해야 한다.

도커 볼륨이란?

도커 컨테이너에서 데이터를 영속적으로 저장하기 위한 방법이다.

볼륨은 컨테이너 자체의 저장 공간을 사용하지 않고,

호스트 자체의 저장 공간을 공유해서 사용하는 형태이다.

컨테이너 내부에 있는 것이 지역 변수라면,

전역 변수 처럼, 컨테이너 외부에 데이터를 저장해서

다른 컨테이너들과 같이 사용할 수 있게 한다고 보면 될 것 같다.

볼륨 사용하기

명령어는 다음과 같이 사용하면 된다.

근데 이 명령어만 봐서는 어려우니, 실습해보면서 알아보자.

docker run -v [호스트의 디렉터리 절대경로]:[컨테이너의 디렉터리 절대경로] [이미지명]:[태그명]

일단, `[호스트의 디렉터리 절대경로]`에 디렉터리가 이미 존재할 경우,

호스트의 디렉터리가 컨테이너의 디렉터리를 덮어씌운다.

`[호스트의 디렉터리 절대경로]`에 디렉터리가 존재하지 않을 경우,

호스트의 디렉터리 절대 경로에 디렉터리를 새로 만들고,

컨테이너의 디렉터리에 있는 파일들을 호스트의 디렉터리로 복사해온다.

실행중인 컨테이너 내부에 접속하기

KimMinJun — Thu, 31 Jul 2025 17:26:18 +0900

개요

컨테이너는 호스트 컴퓨터 내부에 있는 각각의 독립된 공간이다.

따라서, 각각 본인의 운영체제, 실행환경, 저장공간 등 본인의 환경을 가지고 있다.

그래서 우리는 어떤 컨테이너 안의 어떤 파일을 보고싶을 때가 있다.

지금까지는 컨테이너를 조회하고 실행하는데 그쳤지만,

안의 파일들은 어떻게 볼 수 있을까?

컨테이너 접속하기

컨테이너는 다음과 같은 명령어로 접속할 수 있다.

docker exec -it [CONTAINTER ID] [컨테이너 내에서 실행할 명령어]

명령어를 하나씩 뜯어보면 다음과 같다.

`docker exec`은 이미 실행 중인 컨테이너 안에서 명령어를 실행할 때 사용하는 명령이다.

`-i` 옵션은 컨테이너의 표준 입력을 활성화해서 상호작용을 할 수 있게 해주고,

`-t` 옵션은 TTY 모드를 활성화해 터미널 세션처럼 사용할 수 있게 해준다.

보통 위와 같이 `-it`로 같이 사용해 터미널 환경을 만들어준다.

마지막으로 `bash`는 bash 셸을 실행해서 쉘 환경에 들어가겠다는 뜻이다.

참고로 TTY는 TeleTYperiter의 약자로,

컴퓨터와 연결된 가상의 터미널, 즉 사용자가 텍스트 입력과 출력을 할 수 있는 환경을 뜻한다.

모두 마친 뒤, `ls`로 파일 리스트를 보면,

여러 폴더와 파일들이 있는데 etc로 들어가주자.

그러면 우리가 설치했던 nginx가 있는 것을 볼 수 있다.

nginx로 들어가서 설정파일인 nginx.conf 파일의 코드를 봐보자.

`cat` 명령어를 사용해 위와 같이 내부 코드도 볼 수 있다.

만약 이제 컨테이너에서 나오고 싶으면 간단하다.

`exit`를 입력하면 본인 컴퓨터 환경으로 다시 돌아올 수 있다.

컨테이너 로그 조회하기

KimMinJun — Thu, 31 Jul 2025 11:10:06 +0900

개요

로그(log)는 굉장히 중요한 정보이다.

흔히 디버깅 할 때, 디버깅 툴도 많이 이용하지만,

간단히 디버깅 하기 위해서는 `console.log()` 같은 명령어도 많이 이용했다.

지금 이 글을 작성하기 전까지

왜 `console.print()`가 아닌 `console.log()`일까라는 생각을 못해봤다.

정말 단순히 콘솔에 '로그'를 남긴다는 의미이다.

'로그', 즉 '기록'을 남기면서

그 기록으로 어디가 잘못되었는지 디버깅을 하는것이다.

컨테이너도 마찬가지로,

이 컨테이너가 잘 실행되고 있는지,

혹은 에러가 났는지 알기위해서 로그를 읽어보는 것이 중요하다.

그런데, 우리는 사실 이미 로그를 봤다.

`docker run -d nginx` 명령어는 background에서 실행하는 명령어였다.

그런데, `-d` 없이 foreground에서 실행하면,

실시간 로그들을 볼 수 있었다.

컨테이너 로그 조회하기

하지만, 위 방법으로 실행할 경우에는 터미널에서 다른 명령어를 입력할 수 없다는 단점이 있었다.

만약 background로 실행중인 컨테이너의 로그를 보고 싶다면 어떻게 할까?

다음 명령어로 조회할 수 있다.

docker logs [CONTAINER ID]

하지만 로그가 쌓이다보면, 최신 로그들만 보고 싶을 수 있다.

그럴 때는 `--tail` 옵션으로 개수 제한을 할 수 있다.

docker logs --tail [개수] [CONTAINER ID]

`--tail 10`은 마지막 10개의 로그만 보겠다는 의미이다.

그리고 이번엔 기존에 foreground에서 실행했던 것 처럼

실시간으로 로그를 보고 싶을 경우가 있다.

그럴 때는 다음 명령어를 입력하면 된다.

docker logs -f [CONTAINER ID]

그런데, 실시간으로 계속 쌓였던 로그를 전부 보는것이 아니라

지금부터 생성되는 로그를 보고 싶을 수 있다.

그럴 때는 다음과 같이 위의 두 명령어를 조합해서 볼 수 있다.

docker logs --tail 0 -f [CONTAINER ID]

컨테이너 관련 명령어 알아보기

KimMinJun — Thu, 31 Jul 2025 10:07:23 +0900

개요

이번 포스팅에서는 그동안 알아보지 않고 무작정 썼던 명령어들을 조금 자세히 알아보려 한다.

컨테이너와 이미지 생성, 삭제 등 이미 모두 해보았지만,

명령어의 각 옵션이 무엇을 의미하는지 알아보자.

컨테이너 조회하기

컨테이너를 조회하기 위해서 기본적으로 다음 명령어를 사용했었다.

docker ps

여기서 중요하게 알아야 할 것이 있다.

위 명령어는 모든 컨테이너를 조회하는 것이 아니라,

'실행중인 컨테이너'를 조회하는 명령어이다.

아래 명령어는 위 명령어와 뭐가 다를까?

docker ps -a

여기서 `-a` 옵션을 붙였는데, 'all'의 약자라고 생각하면 된다.

실행중인 컨테이너, 중지된 컨테이너 '모두' 포함해서 조회하는 명령어이다.

STATUS를 보면 'Exited'라고 되어있는데,

중단된 컨테이너를 의미한다.

컨테이너 실행하기

이제 중단된 컨테이너를 실행해보자.

docker run -d nginx

여기서 `-d`는 'detached'의 약자라고 생각하면 된다.

'detached'는 '분리된' 이라는 의미를 가지고 있으며,

foreground가 아닌, background에서 실행해준다.

실행중인 컨테이너를 조회하는 명령어로 확인해보면,

중단된 상태였던 컨테이너가 잘 보이는 것을 확인할 수 있다.

컨테이너 중지하기

컨테이너를 중지하기 위해서는 다음 명령어를 사용했었다.

docker stop [CONTAINER ID]

이 때, CONTAINER ID는 다른 컨테이너와 구분이 가는 정도에서 일부만 입력해도 된다.

물론, NAMES를 지정해줬을 경우에는 컨테이너 이름을 입력해줘도 된다.

그런데, 만약 컨테이너가 멈추지 않거나, 응답이 없다면 어떻게할까?

우리가 컴퓨터를 전원 버튼을 꾹 눌러서 강제종료 하듯이,

컨테이너도 다음 명령어로 강제종료 할 수 있다.

docker kill [CONTAINER ID]

하지만 위 방법은 데이터가 손실되거나 비정상으로 종료될 위험이 있다.

그러므로, 최후의 수단으로 사용해야 한다.

일반적으로는 `docker stop`으로 안전하게 종료하고,

컨테이너가 멈추지 않거나, 응답이 완전히 없을 때만 `docker kill`을 사용하는게 좋다.

컨테이너 삭제하기

컨테이너를 삭제할 땐 다음 명령어를 사용했다.

docker rm [CONTAINER ID]

이렇게 중간에 공백을 두어서 여러 컨테이너를 한 번에 지울 수도 있다.

하지만, 컨테이너는 실행 중에 지울 수 없다.

테스트를 위해 컨테이너를 실행해서 다시 지워보자.

그러면 에러가 발생하는데,

에러메시지를 보면 컨테이너를 지우기 전에 컨테이너를 중지하라고 나온다.

컨테이너를 중지하고 삭제해보자.

위와 같이 잘 삭제가 된 것을 볼 수 있다.

만약 여러개의 컨테이너를 한 번에 지우고 싶다면 어떻게 할까?

다음과 같이 여러 컨테이너가 있다고 해보자.

물론 중간에 공백을 두고 CONTAINER ID를 모두 입력할 수 있다.

하지만, 컨테이너가 많아질수록 힘들어진다.

그럴땐 다음 명령어로 한 번에 지울 수 있다.

docker rm $(docker ps -qa)

여기서 `docker ps -qa`는 현재 호스트에 저장된 모든 컨테이너의 ID를 호출한다.

`-q` 옵션은 'quiet'로, ID만 추출하고,

`-a` 옵션은 'all'로, 실행 중이든 중지 상태든 모든 컨테이너를 포함한다.

마지막으로, 실행 중이던 컨테이너를 바로 삭제하는 법은 다음과 같다.

docker rm -f [CONTAINER ID]

여기서 `-f`는 'force'의 약자로, '강제로' 한다는 의미이다.

컨테이너 생성 / 실행하기

KimMinJun — Thu, 31 Jul 2025 07:17:26 +0900

컨테이너 생성하기

컨테이너는 이미지를 바탕으로 생성하게 된다.

다음 명령어로 이미지를 이용해서 컨테이너를 생성할 수 있다.

docker create <이미지명>

지난 포스팅에서 nginx 이미지를 삭제했었는데,

알아서 최신 버전으로 pull해서 설치까지 해준다.

컨테이너를 만들었으니 확인해보자.

다음 명령어로 로컬 시스템에 있는 모든 Docker 컨테이너 목록을 볼 수 있다.

docker ps -a

여기에 STATUS 부분에 'Created' 라는 상태가 보일 것이다.

'Created'는 생성은 했지만, 실행중인 컨테이너가 아닌 상태이다.

컨테이너 실행하기

다음 명령어로 nginx 컨테이너를 실행해주자.

docker start <CONTAINER ID>

실행해준 뒤, 다시 리스트를 보면 STATUS가 'Up'으로 된 것을 볼 수 있다.

'Up'은 실행중인 컨테이너라는 의미이다.

생성과 동시에 실행하기

지금은 create로 컨테이너를 만들고, start로 컨테이너를 실행시켜주었다.

그런데, run이라는 명령어로 한 번에 컨테이너를 만들고, 바로 실행시킬 수 있다.

이 run 명령어는 이전 포스팅에서 잠깐 보였던 적이 있다.

2025.07.30 - [Docker] - Docker를 활용해서 Nginx 설치 및 실행하기

Docker를 활용해서 Nginx 설치 및 실행하기

Nginx란?Nginx는 웹 서버, 리버스 프록시, 로드 밸런서, HTTP 캐시 등 다양한 역할을 하는 서버 중 하나이다.여기서 웹 서버는 HTML 웹 페이지를 렌더링 시키는 역할을 한다.나머지는 차차 알아보자. Ngi

jun-coding.tistory.com

일단, 설치되어 있는 이미지와 컨테이너를 모두 지워주었다.

지우는 명령어는 지난 포스팅에 언급해두었다!

2025.07.31 - [Docker] - 도커 이미지 조회 / 삭제하기

도커 이미지 조회 / 삭제하기

2025.07.30 - [Docker] - 도커 이미지 다운로드 하기 도커 이미지 다운로드 하기컨테이너를 실행하려면 도커 이미지가 필요하다.이미지를 다운받기 위해서는 다음과 같은 명령어를 입력하면 된다.docke

jun-coding.tistory.com

그리고 다음 명령어로 nginx 이미지를 설치하고, 실행해주면 된다.

docker run nginx

이미지가 없으니, 자동으로 이미지를 다운로드 하고,

실행까지 시켜주는 것을 볼 수 있다.

다만, foreground에서 실행되기 때문에 로그들이 터미널에 보이게 된다.

터미널에서는 실시간 로그들이 보이기 때문에,

만약 종료하고 싶으면 윈도우는 Ctrl + C,

Mac은 Command + C를 누르면 된다.

background에서 실행시키고 싶으면,

이전에 언급한 `-d` 플래그로 실행시켜주면 된다.

docker run -d nginx

컨테이너 목록까지 확인해보면 잘 실행되고 있는 것을 볼 수 있다.

컨테이너에 이름 붙이기

nginx 컨테이너에 이름을 붙이고 싶으면 다음과 같이 입력하면 된다.

docker run -d --name my-web-server nginx

확인해보면, NAMES에 'my-web-server'로 잘 지정된것을 볼 수 있다.

포트 연결하기

컨테이너를 보면 PORTS 부분에 '80/tcp'라고 적힌것을 볼 수 있다.

그러면 브라우저에서 80번 포트로 접속할 수 있을까?

웹 HTTP의 기본 포트가 80번이니 브라우저에서 localhost로 접속해보자.

위와 같이 nginx 페이지가 잘 보이는 것을 확인할 수 있다.

하지만, 이것은 캐싱된 페이지일 수 있으니 '시크릿 모드'로 접속해보자.

이처럼, 접속할 수 없는 것을 볼 수 있다.

무슨 이유일까?

컨테이너는 '독립된 공간' 이라고 했다.

이 말은, 호스트 컴퓨터와 컨테이너는 서로 다른 네트워크를 사용한다는 것이다.

따라서 우리의 컴퓨터에서는 '호스트 컴퓨터'에만 접근이 가능하고,

'컨테이너'로 접근할 수는 없는것이다.

따라서 이 '독립된 컨테이너'에 접근하려면,

포트를 연결해주어야 한다.

기존의 컨테이너는 지우고,

다음 명령어로 새로 만들어주자.

# docker run -d -p [호스트 포트]:[컨테이너 포트] 이미지명[:태그명]
docker run -d -p 4000:80 nginx

이렇게 생성한 뒤, PORTS를 보면 아까와는 다르게 표시되고 있다.

4000번 포트로 '호스트 컴퓨터'에 접근하면,

호스트 컴퓨터가 80번 포트로 '컨테이너'에 접근할 수 있게되는것이다.

그럼 브라우저에서 `localhost:4000`으로 접속해보자.

이와 같이, 4000번 포트로 접속하면 nginx 페이지가 잘 뜨는 것을 볼 수 있다.

브라우저(HTTP)의 기본 포트가 80이라고 했으니,

80:80으로 설정하면 그냥 localhost로 접속해도 되지 않을까?

기존 컨테이너를 지운 뒤, 다음과 같이 입력해보자.

# docker run -d -p [호스트 포트]:[컨테이너 포트] 이미지명[:태그명]
docker run -d -p 80:80 nginx

그리고 나서, 브라우저에는 캐싱된 페이지가 남을 수 있기 때문에,

브라우저 전체를 끄고 다시 시크릿 모드로 들어가주자.

기존에 4000번 포트로 다시 들어가보면 연결이 되지 않는 것을 볼 수 있다.

하지만 이제 80번 포트, 즉 그냥 localhost로 접속해보면 다음과 같이 정상적으로 보인다.

도커 이미지 조회 / 삭제하기

KimMinJun — Thu, 31 Jul 2025 04:39:49 +0900

2025.07.30 - [Docker] - 도커 이미지 다운로드 하기

도커 이미지 다운로드 하기

컨테이너를 실행하려면 도커 이미지가 필요하다.이미지를 다운받기 위해서는 다음과 같은 명령어를 입력하면 된다.docker pull 그리고 다운받은 이미지 리스트를 보고 싶으면 다음과 같은 명령어

jun-coding.tistory.com

지난 포스팅에서 이미지를 다운로드 하고, 조회를 하는 기능을 알아봤다.

이미지를 조회했을 때 어떤 정보들이 나오는지 아주 조금 더 자세히 알아보자.

이미지 조회하기

아래 명령어로 다운로드 받은 이미지를 조회할 수 있었다.

docker image ls

	설명
REPOSITORY	이미지 저장소 명을 나타낸다.
TAG	이미지의 버전을 나타낸다.
IMAGE ID	각 이미지에 부여된 고유한 ID를 나타낸다.
CREATED	이미지를 다운로드 한 날짜가 아닌 이미지가 생성된 날짜이다.
SIZE	이미지의 용량을 나타낸다.

이미지 삭제하기

기존에 있던 nginx 이미지를 삭제해보자.

IMAGE ID를 rm 명령어와 함께 입력하여 삭제할 수 있다.

ID의 일부만 입력해줘도, 입력한 ID로 시작하는 이미지가 삭제된다.

docker image rm <IMAGE ID>

그런데, 다음과 같은 에러가 뜨면서 삭제되지 않았다.

이전에 nginx 이미지가 실행중인 컨테이너를 stop 시켜놨었는데,

stop 중인 컨테이너에 있는 이미지이기 때문에 삭제할 수 없다는 에러가 뜬다.

왜 컨테이너가 stop 상태임에도 삭제할 수 없을까?

도커 이미지는 '컨테이너를 만들기 위한 설계도나 템플릿 같은 존재'라고 했었다.

컨테이너의 실행/정지 상태와 상관없이 컨테이너가 존재한다면 그 이미지를 참조중이다.

따라서 이미지가 사라지면 컨테이너 파일시스템이나 구조에 문제가 생기게 된다.

그래서 먼저 컨테이너를 삭제한 후, 이미지를 지워야 한다.

위 터미널 캡쳐본 마지막에 컨테이너 id가 보일 것이다.

다음과 같은 명령어로 컨테이너를 먼저 지워주자.

docker rm <CONTAINTER ID>

그리고 나서 다시 이미지를 삭제하고,

이미지 목록을 다시 보면 잘 삭제가 된 것을 볼 수 있다.

만약 중단된 컨테이너가 사용하는 이미지를 이런 과정 없이 삭제하고 싶다면,

다음 명령어로 강제로 삭제해주면 된다.

여기서 중요한 것은 이 명령어는 '중단된 컨테이너'가 사용하는 이미지만 삭제 가능하다는 것이다.

docker image rm -f <IMAGE ID>

만약 컨테이너가 사용하고 있지 않은 이미지들을 모두 삭제하고 싶다면 다음 명령어를 입력하면 된다.

docker image rm -f $(docker images -q)

여기서 `docker images -q`는 로컬에 있는 모든 이미지의 ID를 출력한다.

그리고 $()로 감싸주게 되면, 이것들을 앞에 있는 명령어의 인자로 넘겨주게 된다.

따라서 모든 도커 이미지의 ID를 불러와서,

모든 ID에 삭제 명령어를 내린다고 생각하면 된다.

도커 이미지 다운로드 하기

KimMinJun — Wed, 30 Jul 2025 23:32:03 +0900

컨테이너를 실행하려면 도커 이미지가 필요하다.

이미지를 다운받기 위해서는 다음과 같은 명령어를 입력하면 된다.

docker pull <이미지명>

그리고 다운받은 이미지 리스트를 보고 싶으면 다음과 같은 명령어를 입력했다.

docker image ls

지난 포스팅에서 nginx를 다운받고 설치까지 해서 실행을 해보았다.

2025.07.30 - [Docker] - Docker를 활용해서 Nginx 설치 및 실행하기

Docker를 활용해서 Nginx 설치 및 실행하기

jun-coding.tistory.com

그럼 다른 이미지를 다운 받고 싶다면 어디서 찾아야 할까?

Docker Hub

https://hub.docker.com/

Docker Hub Container Image Library | App Containerization

hub.docker.com

Docker Hub라는 사이트에서 사람들이 올린 이미지들을 확인하고 다운로드 할 수 있다.

Docker Hub는 "이미지를 저장, 다운받을 수 있는 역할을 하는 저장소 서비스이다."

github에서 프로젝트를 pull로 당겨오는 것 처럼,

dockerhub에서도 이미지를 pull로 가져올 수 있다.

이미 설치했지만, nginx를 찾아서 설치해본다고 가정해보자.

그럼 다음과 같이 dockerhub에서 nginx를 검색한다.

그럼 다음과 같이 결과가 나오는데,

가장 첫 번째꺼를 클릭해준다.

들어가보면, Overview에서는 전체적인 이미지에 대한 설명을 볼 수 있다.

그리고 Tags에서는 이미지의 버전을 확인할 수 있다.

들어가보면, 여러 버전의 이미지들이 있다.

만약 특정 버전의 이미지를 다운 받고 싶다면, 명령어를 복사해서 터미널에 입력해주면 된다.

' : ' 뒤에 붙는 것이 버전명, 즉 '태그명'이다.

지난 포스팅에서는 뒤에 아무것도 붙이지 않고 `docker pull`만 입력했다.

그럼 어떤 버전을 다운로드 한 것일까?

아무것도 붙이지 않을 경우 `:latest`가 붙은 효과를 나타낸다.

가장 최신 버전을 다운로드 하겠다는 것이다.

Docker를 활용해서 Nginx 설치 및 실행하기

KimMinJun — Wed, 30 Jul 2025 17:34:36 +0900

Nginx란?

Nginx는 웹 서버, 리버스 프록시, 로드 밸런서, HTTP 캐시 등 다양한 역할을 하는 서버 중 하나이다.

여기서 웹 서버는 HTML 웹 페이지를 렌더링 시키는 역할을 한다.

나머지는 차차 알아보자.

Nginx 설치하기

Docker가 설치되어 있다면,

터미널에서 다음과 같은 명령어로 설치해주자.

docker pull nginx

nginx라는 이미지를 docker로 다운받기

잘 설치되었는지 확인해보려면 다음 명령어를 입력하면 된다.

docker image ls

nginx라는 이미지가 있는 것을 볼 수 있다.

Nginx 실행하기

이미지를 실행하면 자동으로 컨테이너 환경에서 설치되고 실행된다고 했다.

위에서 nginx 이미지를 설치했으니, 한 번 실행해보자.

터미널에서 다음 명령어로 실행할 수 있다.

docker run --name webserver -d -p 80:80 nginx

명령어는 사용하면서 점차 익숙해지겠지만,

간략하게 무슨 의미인지 한 번 알아보자.

먼저, 새로운 컨테이너를 생성해서 실행하라는 명령어이다.

docker run

그 다음으로, 컨테이너의 이름을 'webserver'로 지정해준다.

--name webserver

모드를 지정해줄 수 있는데, 'detached' 모드로 실행해준다.

터미널을 차지하지 않고, 백그라운드에서 실행해 주는 것이다.

-d

만약, detached 모드로 안해주면 터미널에 로그들이 뜬다.

그 다음으로 어디서 실행할지 포트를 지정해주어야 한다.

왼쪽에 있는 80은 내 컴퓨터(호스트)의 80번 포트이고,

오른쪽에 있는 80은 컨테이너 내부의 80번 포트이다.

즉, `http://localhost:80`으로 접속하면,

컨테이너 안의 Nginx 웹 서버(80번 포트)에 접속하게 된다.

-p 80:80

마지막으로 nginx 이미지를 사용해 컨테이너를 생성해준다.

nginx

실행까지 마치고,

브라우저에서 `http://localhost:80`으로 접속하면 다음과 같은 화면을 확인할 수 있다.

구성은 다음과 같다.

호스트 컴퓨터, 즉 지금 내가 사용하고 있는 컴퓨터에서 컨테이너를 실행하게 된다.

지금은 nginx 이미지를 사용한 컨테이너만 있지만,

여러 컨테이너가 있을 수도 있다.

마지막으로, 이게 내가 실행한 것이 맞는지 확인하고 싶을 수 있다.

그러면 다음 명령어로 현재 실행중인 도커 컨테이너의 목록을 볼 수 있다.

docker ps

IMAGE에 nginx,

PORTS에 80번에서 80번 포트로 접속,

NAMES에서 지정한 이름까지 확인할 수 있다.

만약, 실행중인 컨테이너를 정지하고 싶다면,

우리가 설정해준 'webserver' 라는 이름을 활용해서 다음 명령어로 정지시킬 수 있다.

docker stop webserver

Docker 설치하기 (Mac OS)

KimMinJun — Wed, 30 Jul 2025 15:42:47 +0900

1. 설치파일 다운로드 하기

먼저, 아래의 docker 공식 사이트에 들어가준다.

애플 실리콘(M1~) 유저라면, 'Docker Desktop for Mac with Apple silicon'을 선택하고,

예전 Intel 칩셋이라면 'Docker Desktop for Mac with Intel chip'을 선택하면 된다.

Mac

Install Docker Desktop for Mac to get started. This guide covers system requirements, where to download, and instructions on how to install and update.

docs.docker.com

설치 파일 다운로드가 완료되면,

drag an drop으로 Applications 폴더로 설치 파일을 옮겨주면 된다.

2. 설치 확인하기

이제 설치된 파일을 실행하면, 세팅을 위한 창을 볼 수 있다.

처음 사용하는 거니까 'Use recommended settings'를 선택해주자.

그럼 다음과 같이 이렇게 다음 메뉴바의 맨 왼쪽에 있는 고래 모양 같은 아이콘이 표시된다.

만약 Docker가 잘 설치되었다면,

터미널에서 `docker -v`를 입력해보면 버전을 확인할 수 있다.

Docker란?

KimMinJun — Wed, 30 Jul 2025 13:38:12 +0900

Docker란?

컨테이너를 사용하여 각각의 프로그램을 분리된 환경에서 실행 및 관리할 수 있는 툴이다.

사실 아직 Docker의 이론만 공부하고, 사용해보기 전이라 크게 와닿지는 않는다.

Docker를 공부하는 '프론트엔드 개발'을 공부하는 사람으로써,

매번 사이드 프로젝트 할 때마다 같은 개발 환경을 설정하기 귀찮아서 찾아보다가 Docker를 공부하게 되었다.

앞으로도 '프론트엔드의 입장'에서 글을 정리해나갈 생각이다.

이론 공부하면서 Docker를 왜 배워야 하는지에 대한 궁금증 정리는 전 글에 정리해두었다.

2025.07.29 - [Docker] - <프론트가> Docker를 왜 배워야 할까.

<프론트가> Docker를 왜 배워야 할까.

Docker를 왜 배워야 할까결론부터 말하자면, 특정 프로그램을 다른 곳으로 쉽게 옮겨서 설치 및 실행할 수 있는 '이식성' 때문이다.이러한 이식성은 다음과 같은 상황에 장점이 보인다.환경 일관

jun-coding.tistory.com

컨테이너란?

컨테이너란 하나의 컴퓨터 환경 내에서 독립적인 컴퓨터 환경을 구성해서,

각 환경에 프로그램을 별도로 설치할 수 있게 만든 개념이다.

Windows 운영체제를 사용하면, 여러 사용자를 만들어서 사용할 수 있다.

각 사용자는 독립된 환경이기 때문에 필요한 프로그램을 각 사용자별로 설치해야 한다.

컨테이너도 이와 비슷한 개념이다.

하나의 컴퓨터 환경 내에서 여러 개의 '독립된 실행 환경'을 구성할 수 있는 형태이다.

이 '독립된 실행 환경'을 '컨테이너'라고 부른다.

그리고 이 컨테이너를 포함하고 있는 컴퓨터를 '호스트 컴퓨터'라고 부른다.

컨테이너의 독립성

위에서 컨테이너는 '독립된 실행 환경'이라고 했다.

구체적으로 어떤것이 독립된 환경일까?

먼저, 프로세스와 파일시스템이 독립적이다.

각 컨테이너는 자체 파일시스템, 네트워크, 런타임 환경을 가지고 돌아간다.

예를 들어, 한 컨테이너에서 `npm install`로 잘못된 패키지를 설치하거나 node_modules가 꼬여도,

옆에 있는 다른 컨테이너에는 전혀 영향이 없다.

또한, 파일시스템이 독립적이기 때문에 A컨테이너에서 B컨테이너에 있는 파일에 접근할 수 없다.

두 번째로, 의존성과 환경이 독립적이다.

컨테이너마다 Node.js, yarn, npm 등 설치 버전, 환경변수를 자유롭게 설정할 수 있다.

A컨테이너에 있는 프로젝트는 Node.js 20,

B컨테이너에 있는 프로젝트는 Node.js 16을 사용해도

서로 충돌 없이 각각 자기만의 환경을 쓴다.

세 번째로, 실행 중인 프로세스가 독립적이다.

컨테이너마다 독립된 PID 네임스페이스를 사용해서,

한 컨테이너에서 실행 중인 프로그램은

다른 컨테이너에 보이지 않고, 직접 접근하거나 통제할 수 없다.

마지막으로, 네트워크 영역이 독립적이다.

각 컨테이너마다 고유의 네트워크를 가지고 있다.

따라서 컨테이너는 각자의 IP 주소를 가지고 있다.

특히, 컨테이너마다 별도의 가상 네트워크를 구성할 수 있기 때문에,

특정 컨테이너끼리만 통신하게 제한하거나,

내부망/외부망을 세분화할 수도 있다.

도커 이미지란?

도커 이미지는 컨테이너라는 실행 환경을 만들기 위한 설계도나 템플릿 같은 존재이다.

예를 들어, React 프로젝트를 만들고,

자주쓰는 axios, Tanstack Query같은 라이브러리를 설치해서 이미지로 만들었다고 하자.

이 이미지를 Docker로 실행시키면 이 프로젝트가 컨테이너 환경에서 실행된다.

나중에 똑같이 세팅해야 할 때도, 복잡한 설치 과정을 거칠 필요 없이 실행할 수 있다.

즉, 이미지는 애플리케이션을 실행하는 데 필요한 코드,

라이브러리, 설정, 환경 등 프로그램을 실행하는 데 필요한 모든 것을 포함하고 있다.

도커 이미지의 특징

도커 이미지는 불변성, 재사용성 이란 특징을 가지고 있다.

도커 이미지는 한 번 만들어진 이미지는 변경되지 않고 그대로 유지된다.

만약 새로운 수정이 필요하면 새로운 이미지를 다시 만들어야 한다.

또한, 만들어둔 하나의 이미지로 여러 컨테이너를 실행할 수 있다.

따라서 개발 환경, 테스트, 배포 등에 일관성을 보장해준다.

IP와 Port

KimMinJun — Tue, 29 Jul 2025 18:33:14 +0900

IP의 개념

IP란 "Internet Protocol"의 약자로, 네트워크 상에서의 특정 컴퓨터를 가리키는 주소이다.

구글의 서버 IP 주소

위와 같이 `nslookup` 명령어를 이용해서 주소를 입력하면,

google.com도 168.126.63.1 이라는 서버 IP 주소를 가지고 있는 것을 볼 수 있다.

인터넷에 연결된 모든 장치는 반드시 자신의 IP 주소를 가지고 있어야 정보를 주고 받을 수 있다.

그리고 IP 주소는 데이터를 보낼 때 목적지(받는 쪽)와 출발지(보내는 쪽)을 지정하는 역할을 한다.

Port의 개념

Port는 한 컴퓨터 내에서 실행되고 있는 특정 프로그램의 주소이다.

인터넷 통신을 하려면 IP 주소가 컴퓨터의 '집 주소' 역할을 하지만,

하나의 컴퓨터에도 여러 프로그램이 동시에 네트워크를 쓸 수 있기 때문에,

어느 프로그램에 데이터를 전달할지 구분할 필요가 있다.

이때 포트 번호가 집 안의 각 방 번호처럼 작용해서,

들어오는 데이터가 어떤 프로그램으로 가야 할지 구체적으로 지정해준다.

예를 들어, 특정 컴퓨너 내부에 있는 Spring Boot 서버에 통신을 하고 싶다고 해보자.

하지만 외부에서 IP 주소만 알아서는 실행되고 있는 여러 프로그램 중에서

어떤 프로그램과 통신을 해야할지 알 수 없다.

그래서 특정 서버와 통신을 할 때는,

IP 주소와 서버가 실행되고 있는 포트 번호까지 알고 있어야 한다.

브라우저 창에 포트 번호를 입력하지 않는 이유

위에서 통신을 하려면 IP 주소와 포트 번호 모두 알아야 된다고 했는데,

주소창에 'google.com' 같이 포트 번호를 입력하지 않아도 접속이 가능하다.

그 이유는 웹 프로토콜별로 '기본 포트 번호'가 미리 정해져 있기 때문이다.

HTTP 프로토콜은 기본적으로 80번 포트를 사용한다.

그리고 HTTPS 프로토콜은 기본적으로 443번 포트를 사용한다.

그래서 브라우저는 URL에 포트 번호가 명시되지 않으면,

자동으로 HTTP는 80번, HTTPS는 443번으로 접속을 시도한다.

물론 위처럼 직접 포트번호를 명시해줘도 우리가 평소에 접속하는 google에 접속할 수 있다.

하지만, HTTPS가 HTTP보다 보안이 강화되어 있기 때문에

80번 포트로 접속해도 보안을 위해 자동으로 443번 포트, 즉 HTTPS로 리다이렉트 된다.

잘 알려진 포트(Well-Known Port)

포트 번호는 0번부터 65535번까지 총 65536개가 사용 가능하다.

이는 포트 번호가 16비트로 표현되기 때문이다.

포드 번호의 구간별 구분은 다음과 같다.

0 ~ 1023 (Well-Known 포트)
1024 ~ 49151 (등록된 포트, Registered Port)
49152 ~ 65535 (동적/사설 포트, Dynamic/Private Port)

이 중에서 Well-Known Port는 인터넷에서 시스템적으로 널리 쓰이는 서비스에 대해 정해놓은 포트 번호 범위이다.

포트 번호	대표 서비스	설명
20, 21	FTP	파일 전송 프로토콜(20: 데이터, 21: 제어)
22	SSH	보안 셸(원격 접속)
23	Telnet	원격 터미널 접속(암호화X, 비추천)
25	SMTP	이메일 송신
53	DNS	도메인 이름 -> IP 변환
67, 68	DHCP/BOOTP	IP 자동 할당(서버: 67, 클라이언트: 68)
69	TFTP	단순 파일 전송(보안 약함)
80	HTTP	일반 웹 서비스
110	POP3	이메일 수신(클라이언트 프로토콜)
123	NTP	네트워크 시간 동기화
143	IMAP	이메일 수신(고급 메일 프로토콜)
161, 162	SNMP	네트워크 관리
389	LDAP	디렉터리 서비스(조직 등 정보관리)
443	HTTPS	보안 웹 서비스(SSL/TLS 암호화)
445	SMB	윈도우 파일 공유

위 중에서 보라색으로 되어있는 것은 자주 사용되는 포트 번호이다.

포트 번호를 다르게 지정해도 동작은 가능하지만,

일반적으로 관례에 맞는 well-known 포트를 사용한다.

<프론트가> Docker를 왜 배워야 할까.

KimMinJun — Tue, 29 Jul 2025 15:43:56 +0900

Docker를 왜 배워야 할까

결론부터 말하자면, 특정 프로그램을 다른 곳으로 쉽게 옮겨서 설치 및 실행할 수 있는 '이식성' 때문이다.

이러한 이식성은 다음과 같은 상황에 장점이 보인다.

환경 일관성 확보
빠른 개발 환경 세팅 및 온보딩
배포 환경과 개발 환경의 완벽 동기화
의존성/버전 충돌 방지와 격리
백엔드/API, DB 등 다양한 서비스와 연동 용이
운영 자동화 및 스케일링

하나씩 간단하게 알아보자.

1. "내 PC에서는 되는데?" 문제 해결

Docker는 개발, 테스트, 배포에 필요한 Node.js 버전, 라이브러리, 환경변수 등을 모두 컨테이너 안에 캡슐화한다.

팀원이 각자 다른 OS, Node.js, 패키지 버전을 사용한다고 해보자.

협업 간에 각자 사용하는 버전 차이로 인해서 어떤 사람은 되고, 어떤 사람은 되지 않는 경우가 생길 수 있다.

하지만 Docker를 사용하면, 모두 같은 환경을 보장하기 때문에 예상치 못한 에러를 방지할 수 있다.

2. 빠른 개발 환경 세팅 및 온보딩

같은 역할로 여러 프로젝트를 진행하다보면,

지난 프로젝트에서 했던 프로젝트 세팅을 그대로 하고 있는 내 모습을 볼 수 있다.

하지만, 이미 설정된 Docker가 있다면, 소스만 클론 받아서 한 번에 개발 환경 전체를 바로 실행할 수 있다.

중간에 새로 들어온 개발자도 복잡한 환경설정 과정 및 온보딩 과정을 생략할 수 있는 것이다.

결과적으로 '개발 환경 구축 및 동기화'라는 가장 귀찮고 번거로운 장벽이 제거되는 장점이 있다.

3. 배포 환경과 개발 환경의 완벽 동기화

Docker 이미지는 로컬과 스테이징, 프로덕션 어디든 똑같이 실행된다.

개발 때 쓰던 이미지 그대로 실제 서버에 배포하기 때문에,

환경 차이로 인한 예상치 못한 배포 장애가 크게 줄어든다.

4. 의존성/버전 충돌 방지와 격리

여러 프로젝트를 동시에 개발/운영하거나,

레거시/최신 프로젝트가 섞여있을 때도 환경 충돌 없이 독립적 개발이 가능하다.

각각 아예 격리된 컨테이너에서 각각의 작업을 하면 되기 때문이다.

5. 백엔드/API, DB 등 다양한 서비스와 연동

실제 서비스는 프론트엔드만 단독으로 운영되는 경우는 거의 없다.

프론트엔드, 백엔드, 데이터베이스, Redis 등 다양한 컨테이너를 한 번에 띄울 수 있다.

그리고 로컬에서 여러 서비스를 연동하는 테스트를 해야하는데,

Docker가 있으면 실제 운영 서버와 거의 동일한 환경에서 개발 및 테스트가 가능하다.

Nginx와 같은 프록시와 연동해서 로컬에서도 실제 서비스 아키텍처를 그대로 재현할 수 있어서,

협업과 통합 테스트가 매우 쉬워진다.

6. 운영 자동화 및 스케일링

컨테이너는 여러 환경에 손쉽게 복제, 확장, 업데이트, 롤백이 가능하다.

프론트엔드 서버 부하가 늘어나면 컨테이너를 더 띄워 부하 분산을 하면 된다.

Programmers / 과제테스트 / [실무 역량 과제] 게시물 레이아웃 재구성하기 (FE)

KimMinJun — Fri, 30 May 2025 14:53:56 +0900

게시물 레이아웃 재구성하기

문제

테이블 형태로 나열되어 있는 게시물 조금 더 보기 좋게 카드 형태로 레이아웃을 수정하고, 정렬 및 북마크 기능을 추가하려고 합니다.

아래의 요구사항을 읽고 레이아웃 및 추가 기능을 완성해 주세요.

✅ 레이아웃

주어진 Card 컴포넌트를 활용하여 카드 형태로 레이아웃을 수정해 주세요.
- 이때, 카드 요소 마다 특정 id 값을 지정해 주어야 합니다.

✅ 정렬

우측 상단의 셀렉트 버튼을 사용하여 게시물의 정렬 형태를 변경할 수 있습니다.
게시물을 최근등록순과 조회순으로 정렬할 수 있으며, 게시물은 기본으로 최근등록순으로 정렬되어야 합니다.

✅ 북마크

카드 우측 상단의 북마크 아이콘 버튼을 사용하여 게시물을 북마크 할 수 있습니다.
게시물이 북마크 되었음을 나타내기 위해서 북마크 된 게시물의 경우 북마크 아이콘이 빨간색으로 표시되어야 합니다.
북마크된 게시물의 경우에는 제일 우선으로 정렬되어야 합니다.

1. 카드 형태로 레이아웃 수정하기

주어진 Card 컴포넌트를 활용하여 카드 형태로 레이아웃을 수정해 주세요.
이때, 카드 요소 마다 특정 id 값을 지정해 주어야 합니다.

초기엔 Table 컴포넌트로 렌더링이 되어있는데, 이미 주어진 Card 컴포넌트로 바꾸면 된다.

나는 여기에서 Card 리스트를 보여주는 CardList 컴포넌트를 따로 만들었다.

import { useState } from 'react';
import { ulid } from 'ulid';
import posts from '../data/posts.json';
import Card from './Card';
import './Card.css';

const initPostList = posts.map((post) => ({ id: ulid(), ...post }));

function CardList() {
  const [postList, setPostList] = useState(initPostList);

  return (
    <div className="card-list">
      {postList.map((post) => (
        <Card key={post.id} {...post} />
      ))}
    </div>
  );
}

export default CardList;

"카드 요소 마다 특정 id를 지정해 주어야 합니다." 라는 요구사항이 있다.

그래서 일단 주어진 posts.json 에서 데이터를 불러오고,

배열의 각 요소마다 id를 ulid로 넣어주었다.

대부분의 사람들은 ulid보다 uuid가 더 익숙할 것이다.

둘의 차이점은 뭘까?

가장 큰 차이점은 ulid는 정렬이 가능하다.

타임스탬프에 랜덤값이 붙기 때문에,

시간순 정렬, 사전식 정렬이 가능하다.

물론, 이 테스트엔 포스트 생성기능도 없고,

upload_date가 따로 주어지므로 굳이 사용할 필요는 없다.

그리고 가장 바깥의 div 태그에 .card-list 라는 클래스를 넣어주었는데,

다음과 같이 카드를 나열하는 css를 적용하기 위해서 넣어주었다.

.card-list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

이렇게 해주면, 다음과 같은 레이아웃을 구성할 수 있을것이다.

만약 flex-wrap을 wrap으로 안해주면,

카드들이 가로로 쭉 늘어져서 나열되게 되므로 주의하자.

2. 게시물 정렬 기능 구현하기

게시물을 최근등록순과 조회순으로 정렬할 수 있으며, 게시물은 기본으로 최근등록순으로 정렬되어야 합니다.

일단 기능을 구현하기 전에 타입부터 따로 정의해주었다.

나는 types 폴더에 따로 구현해놨다.

export type Post = {
  id: string;
  title: string;
  views: number;
  upload_date: string;
  bookmark: boolean;
};

그리고 드롭다운에서 선택하는 정렬 방법을 상태값으로 갖고 있어야 한다.

게시물에 관련한 정보는 CardList 컴포넌트에서 갖고 오기 때문에,

App 컴포넌트에서 변화하는 상태값을 props로 내려주어야 한다.

/* 여기에 주어진 요구 사항을 충족 시키기 위한 코드를 작성 및 수정해 주세요. */
import { useState } from 'react';
import './App.css';
import CardList from './components/CardList';

const NEWEST = '1';
const VIEWS = '2';

function App() {
  const [orderType, setOrderType] = useState(NEWEST);

  const handleOrderChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    setOrderType(e.target.value);
  };

  return (
    <div className="container">
      <div className="section __order">
        <select id="order_type" value={orderType} onChange={handleOrderChange}>
          <option value={NEWEST}>최근등록순</option>
          <option value={VIEWS}>조회순</option>
        </select>
      </div>
      <div className="section">
        <CardList orderType={orderType} />
      </div>
    </div>
  );
}

export default App;

NEWEST와 VIEWS라는 상수 변수를 정의해주었는데,

각각 option 태그의 value 속성의 값으로 쓰이는 변수이다.

그냥 '1', '2'로 쓰이는 것 보다는 확실하게 보이도록 따로 선언해주었다.

그리고 정렬 방법을 변경하는 함수인 handleOrderChange를 구현해주었다.

select 태그의 onChange 이벤트 핸들러로 달아주고,

정렬 방법인 orderType 상태값을 CardList 컴포넌트에 props로 내려주었다.

다음으로는 정렬 기능 구현이다.

import { useState } from 'react';
import { ulid } from 'ulid';
import posts from '../data/posts.json';
import type { Post } from '../types';
import Card from './Card';
import './Card.css';

const NEWEST = '1';
const VIEWS = '2';

const initPostList: Post[] = posts.map((post) => ({ id: ulid(), ...post }));

interface CardListProps {
  orderType: string;
}

function CardList({ orderType }: CardListProps) {
  const [postList, setPostList] = useState<Post[]>(initPostList);

  const sortedPostList = [...postList].sort((a, b) => {
    if (orderType === NEWEST) {
      return (
        new Date(b.upload_date).getTime() - new Date(a.upload_date).getTime()
      );
    } else {
      return b.views - a.views;
    }
  });

  return (
    <div className="card-list">
      {sortedPostList.map((post) => (
        <Card key={post.id} {...post} />
      ))}
    </div>
  );
}

export default CardList;

크게 어려울 것은 없었다.

정렬 방법에 맞게 최신순, 조회순으로 sort()를 이용해 정렬해주면 된다.

최신순 정렬을 할 때는 Date()의 getTime()을 이용하면 1970년 1월 1일 00:00:00 UTC 기준으로,

그 후로 몇 밀리초가 지났는지 숫자로 반환해준다.

클수록 오래지났다는 의미이니까, 최신순이 된다.

3. 북마크 토글 기능 구현하기

카드 우측 상단의 북마크 아이콘 버튼을 사용하여 게시물을 북마크 할 수 있습니다.
게시물이 북마크 되었음을 나타내기 위해서 북마크 된 게시물의 경우 북마크 아이콘이 빨간색으로 표시되어야 합니다.

먼저, 색을 변하게 하기 전에 북마크 상태를 토글하는 기능을 만들어주어야 한다.

const handleBookmarkToggle = (id: string) => {
  setPostList((prevPostList) =>
    prevPostList.map((post) =>
      post.id === id ? { ...post, bookmark: !post.bookmark } : post
    )
  );
};

모든 포스트를 순회하면서,

만약 북마크 아이콘을 클릭한 포스트의 아이디와 같다면 해당 포스트의 bookmark를 바꿔주면 된다.

이전 상태값에 의존해서 상태 변경이 일어나기 때문에,

함수형 업데이트를 사용해주어야 한다.

이렇게 만든 함수를 onBookmarkToggle 이라는 이름의 prop으로 넘겨주었다.

<Card key={post.id} {...post} onBookmarkToggle={handleBookmarkToggle} />

이제 이 넘겨준 함수를 북마크 아이콘에 달아주면 된다.

<span className="icon bookmark" onClick={() => onBookmarkToggle(id)}>
  <i className="fa fa-bookmark" style={{ color: bookmark ? 'red' : '#fff' }}></i>
</span>

그리고 북마크 상태에 따라서,

style에 color를 red로 주거나, 기본값인 흰색으로 주면 된다.

4. 북마크 우선 정렬 기능 구현하기

북마크된 게시물의 경우에는 제일 우선으로 정렬되어야 합니다.

마지막으로, 북마크된 게시물은 가장 앞으로 와야한다.

그리고 북마크된 게시물들끼리도 설정한 정렬 방법에 따라 정렬이 이루어져야 한다.

간단하게 정렬 조건에 하나만 추가해주면 된다.

const sortedPostList = [...postList].sort((a, b) => {
  if (a.bookmark !== b.bookmark) {
    return a.bookmark ? -1 : 1;
  }

  if (orderType === NEWEST) {
    return (
      new Date(b.upload_date).getTime() - new Date(a.upload_date).getTime()
    );
  } else {
    return b.views - a.views;
  }
});

앞, 뒤 게시물끼리 북마크 여부를 판단해서,

북마크 여부 상태가 다를 경우에 북마크 된 것을 앞으로 보내주면 된다.

만약, 둘 다 북마크가 되어있거나, 되어있지 않을 경우에는

기존에 설정해준 정렬 방법에 따른 조건에따라 정렬을 수행할 것이다.

이렇게 완성!

주의!
초기에 설정한 값이 아니라, 데이터대로 다 표시되어 있는지 확인하자.
특히, Card 컴포넌트에 id값 잘 확인하자!

백준 / 투 포인터 / 22862번 / 가장 긴 짝수 연속한 부분 수열 (large) / JS

KimMinJun — Mon, 7 Apr 2025 21:34:11 +0900

문제 간단설명

길이가 N인 수열 S가 있다.

수열 S는 1이상 정수로 이루어져 있는데,

최대 K개의 정수를 삭제할 수 있다.

최대 K개 삭제한 수열에서,

짝수로 이루어져 있는 연속한 부분 수열 중,

가장 긴 길이를 구하면 된다.

제한 사항

1 <= N <= 1,000,000
1 <= K <= 100,000
1 <= 원소의 값 <= 1,000,000

성공 코드

const fs = require('fs');
const filePath = process.platform === 'linux' ? '/dev/stdin' : '../input.txt';
// const filePath = process.platform === 'linux' ? '/dev/stdin' : 'BOJ/input.txt';
const input = fs
  .readFileSync(filePath)
  .toString()
  .trim()
  .split('\n')
  .map((el) => el.trim());

const [N, K] = input.shift().split(' ').map(Number);
const sequence = input.shift().split(' ').map(Number);

function solution() {
  let left = 0;
  let right = 0;
  let removeCount = 0; // 제거한 홀수의 개수
  let result = 0;

  while (right < N) {
    // 짝수일 경우
    if (sequence[right] % 2 === 0) {
      result = Math.max(result, right - left - removeCount + 1);
      right++;
    } else {
      // 홀수일 경우
      // 제거한 홀수의 개수가 K보다 작으면 제거한 홀수의 개수를 증가시키고 포인터를 오른쪽으로 이동
      if (removeCount < K) {
        removeCount++;
        right++;
      } else {
        // 더 이상 제거할 수 없으면 왼쪽 포인터를 오른쪽으로 이동
        while (removeCount === K) {
          // 왼쪽 포인터가 가리키는 수가 홀수일 경우
          // 제거한 홀수의 개수를 줄이고 왼쪽 포인터 한 칸 오른쪽으로 이동
          if (sequence[left] % 2 === 1) {
            removeCount--;
          }
          left++;
        }
      }
    }
  }

  console.log(result);
}

solution();

투 포인터 알고리즘에서 조금 더 응용이 들어간 문제였다.

기본적인 문제에서 다음 두 가지만 신경쓰면 된다.

제거 횟수 관리
더 이상 제거할 수 없을 때 어떻게 할것인지

제거 횟수 관리

먼저, 제거 횟수를 관리하는 부분부터 알아보자.

처음에 최대 제거 횟수 K가 주어진다.

우리는 이 횟수를 홀수를 제거하는데 써야한다.

오른쪽 포인터가 수열의 끝에 다다를 때 까지 반복문으로 탐색한다.

오른쪽 포인터가 가리키는 값이 짝수라면,

현재 저장되어 있는 최댓값과

현재 수열의 길이에서 제거한 수를 뺀만큼의 길이를 비교하면 된다.

그리고 오른쪽 포인터를 한 칸 옮겨준다.

만약 오른쪽 포인터가 가리키는 값이 홀수라면,

다음 두 가지 상황이 있다.

제거할 수 있는 횟수가 남았을 때
제거할 수 있는 횟수가 남지 않았을 때

제거할 수 있는 횟수가 남았을 때는 간단하다.

현재 가리키는 홀수를 제거하고,

포인터를 한 칸 옮겨주면 된다.

더 이상 제거할 수 없을 때 어떻게 할 것인지

그런데,

제거할 수 있는 횟수가 남지 않았을 때는 어떻게 할까?

일단 왼쪽 포인터를 짝수를 만날때까지 옮겨준다.

그러면 우리가 홀수를 제거할 때 썼던 횟수를 충전할 수 있다.

예시로 알아보자.

1, 2, 4, 4, 5, 6, 7, 8 이라는 수열이 있을 때,

현재 left가 1을 가리키고 있고,

right가 5를 가리키고 있다고 해보자.

'가장 긴 짝수 연속한 부분 수열'을 구해야 하므로,

1을 제거하는데 제거 횟수를 한 번 썼을 것이다.

그러니까 이 때 사용한 제거 횟수를 충전하기 위해서

left를 2로 옮겨준다.

그러면 1, 2, 4, 4, 5 에서 가장 긴 짝수 연속한 부분 수열이나,

2, 4, 4, 5에서 가장 긴 짝수 연속한 부분 수열은 같다.

다만, 전자는 제거 횟수를 1을 제거하는데에 썼고,

후자는 제거 횟수를 사용하지 않았다.

이런 식으로 계속해서 반복하다면,

단 한번의 순회로 문제를 해결할 수 있다.

시간 복잡도는 O(n)이 되는 것이다.

Programmers / Level 2 / 우박수열 정적분 / JS

KimMinJun — Wed, 2 Apr 2025 20:13:21 +0900

문제 간단설명

우박수열은 1을 만들기 위해 다음과 같은 단계를 거칩니다.

1-1. 입력된 수가 짝수라면 2로 나눕니다.
1-2. 입력된 수가 홀수라면 3을 곱하고 1을 더합니다.
2. 결과로 나온 수가 1보다 크다면 위 작업을 반복합니다.

은지는 우박수열을 좌표 평면 위에 꺾은선 그래프로 나타내보려고 합니다.

초항이 k인 우박수열이 있다면, x = 0일때 y = k이고,

다음 우박수는 x = 1에 표시합니다.

이렇게 만든 꺾은선 그래프를 정적분 하려고 합니다.

x에 대한 범위 [a, b]가 주어진다면,

처음부터 a만큼, 끝에서 b만큼 좌표사이의 넓이를 구하면 됩니다.

예를 들어,

좌표가 6개 주어졌고,

[a, b]가 [1, -2]라면,

x = 1부터 x = 5(배열은 0부터 시작하므로 6은 5번째이다)에서 2를 뺀 3까지의 넓이를 구하면 됩니다.

위 방법대로 주어진 ranges의 각 구간별 정적분(넓이)결과를 담아서 반환하면 됩니다.

제한 사항

2 <= k <= 10,000
1 <= ranges의 길이 <= 10,000
- ranges의 원소는 [a, b] 형식이며,
- 0 <= a < 200
- -200 < b <= a
주어진 모든 입력값의 정적분 결과는 2^27을 넘지 않습니다.

성공 코드

/**
 * 우박수열 정적분
 * @param {number} k 우박수열의 첫 번째 수
 * @param {number[][]} ranges 정적분을 구할 범위
 * @returns {number[]} 정적분 결과
 */
function solution(k, ranges) {
  const hailstoneSequence = [{ x: 0, y: k }];
  const areaList = [];
  const result = [];

  /**
   * 우박수열 생성
   */
  const getHailstoneSequence = () => {
    let order = 0;
    let curNumber = k;

    while (curNumber > 1) {
      if (curNumber % 2 === 0) {
        curNumber = curNumber / 2;
      } else {
        curNumber = curNumber * 3 + 1;
      }

      order++;
      hailstoneSequence.push({ x: order, y: curNumber });
    }
  };

  /**
   * 넓이 리스트 생성
   */
  const getAreaList = () => {
    for (let i = 1; i < hailstoneSequence.length; i++) {
      const prevCoords = hailstoneSequence[i - 1];
      const curCoords = hailstoneSequence[i];

      const upperBase = prevCoords.y;
      const lowerBase = curCoords.y;
      const height = 1;
      const area = ((upperBase + lowerBase) * height) / 2;

      areaList.push(area);
    }
  };

  /**
   * 정적분 계산
   * @param {number} a 시작 인덱스
   * @param {number} b 끝 인덱스
   * @returns {number} 정적분 결과
   */
  const getIntegral = (a, b) => {
    const start = a;
    const end = hailstoneSequence.length - 1 + b;

    if (start > end) {
      return -1;
    }

    if (start === end) {
      return 0;
    }

    let sum = 0;
    for (let i = start; i < end; i++) {
      sum += areaList[i];
    }

    return sum;
  };

  /**
   * 결과 생성
   */
  const getResult = () => {
    for (const [a, b] of ranges) {
      const integral = getIntegral(a, b);

      result.push(integral);
    }
  };

  getHailstoneSequence();
  getAreaList();
  getResult();

  return result;
}

문제에 나온대로 그대로 구현하였다.

처음에 넓이를 구할 때,

반으로 나눠서 사각형과 삼각형의 넓이를 따로 구해서 더하려고 했는데,

사다리꼴 넓이 공식을 까먹고 있었기 때문이다...

사다리꼴 넓이 공식은 다음과 같다.

(윗 변 + 아랫 변) * 높이 / 2

여기서 윗 변과 아랫 변은 각각 y좌표이며,

높이는 1로 고정되어 있다.

특별히 미리 조건처리하면 좋을 것들은 다음과 같다.

시작점의 x좌표가 끝점의 x좌표보다 클 때
- 유효하지 않으므로 -1을 반환한다.
시작점의 x좌표와 끝점의 x좌표와 같을 때
- 넓이가 0이므로 0을 반환한다.

이 조건들만 미리 처리해주면,

굳이 불필요한 계산을 하지 않고 쉽게 답을 구할 수 있다.

Programers / Level 3 / 양과 늑대 / JS

KimMinJun — Fri, 28 Feb 2025 13:16:39 +0900

문제 간단설명

"양과 늑대" 문제는 트리 구조에서 양과 늑대를 관리하며 최대한 많은 양을 모으는 문제입니다.

제한 사항

2 <= info의 길이 <= 17
- info의 원소는 0 또는 1입니다.
- info[i]는 i번 노드에 있는 양 또는 늑대를 나타냅니다.
- 0은 양, 1은 늑대를 의미합니다.
- info[0]의 값은 항상 0입니다.
  즉, 0번 노드(루트 노드)에는 항상 양이 있습니다.
edges의 세로(행)의 길이 = info의 길이 - 1
- edges의 가로(열)의 길이 = 2
- edges의 각 행은 [부모 노드 번호, 자식 노드 번호] 형태로,
  서로 연결된 두 노드를 나타냅니다.
- 동일한 간선에 대한 정보가 중복해서 주어지지 않습니다.
- 항상 하나의 이진 트리 형태로 입력이 주어지며, 잘못도니 데이터가 주어지는 경우는 없습니다.
- 0번 노드는 항상 루트 노드입니다.

성공 코드

/**
 * 주어진 정보와 엣지를 기반으로 최대 양의 수를 계산합니다.
 * @param {number[]} info - 각 노드가 양인지 늑대인지 나타내는 배열 (0: 양, 1: 늑대)
 * @param {number[][]} edges - 그래프의 엣지를 나타내는 배열 (각 엣지는 [from, to] 형태)
 * @returns {number} - 가능한 최대 양의 수
 */
function solution(info, edges) {
  const SHEEP = 0;
  const WOLF = 1;

  const graph = Array.from({ length: info.length }, () => []);

  let maxSheepCount = 0;

  /**
   * 엣지를 기반으로 그래프를 초기화합니다.
   * @description 이 함수는 전역 변수 `graph`를 엣지 정보로 채워 트리 구조를 생성합니다.
   */
  const initGraph = () => {
    for (const [from, to] of edges) {
      graph[from].push(to);
    }
  };

  /**
   * 깊이 우선 탐색을 통해 가능한 모든 경로를 탐색하며 양의 수를 최대화합니다.
   * @param {number} curNode - 현재 탐색 중인 노드의 인덱스
   * @param {number} sheepCount - 현재까지 만난 양의 수
   * @param {number} wolfCount - 현재까지 만난 늑대의 수
   * @param {Set<number>} possibleVisitSet - 방문 가능한 노드의 집합
   * @description 이 함수는 재귀적으로 호출되며, 늑대 수가 양의 수 이상이 되지 않는 경로에서 최대 양의 수를 계산합니다.
   */
  const dfs = (curNode, sheepCount, wolfCount, possibleVisitSet) => {
    let nextSheepCount = sheepCount;
    let nextWolfCount = wolfCount;

    if (info[curNode] === SHEEP) {
      nextSheepCount++;
    } else {
      nextWolfCount++;
    }

    if (nextWolfCount >= nextSheepCount) {
      return;
    }

    maxSheepCount = Math.max(maxSheepCount, nextSheepCount);

    // 원본이 수정되는것을 막기 위해 복사를해서 사용합니다.
    const nextPossibleVisitSet = new Set(possibleVisitSet);
    // 현재 노드는 방문중이므로 방문 가능한 노드 Set에서 삭제합니다.
    nextPossibleVisitSet.delete(curNode);

    for (const adjNode of graph[curNode]) {
      nextPossibleVisitSet.add(adjNode);
    }

    for (const nextPossibleNode of nextPossibleVisitSet) {
      dfs(
        nextPossibleNode,
        nextSheepCount,
        nextWolfCount,
        nextPossibleVisitSet
      );
    }
  };

  initGraph();
  dfs(0, 0, 0, new Set());

  return maxSheepCount;
}

기본 DFS 문제들과 비슷하지만, 하나 추가된게 있다면 갈 수 있는 후보 노드들을 저장해놔야 한다는 것이다.

중복되면 안되므로 Set 자료구조를 이용했는데, 그냥 배열로 처리해도 상관은 없다.

다만, 어떤 자료구조를 이용해도 조심해야 할 것은 같다.

다음 재귀를 진행하기 위해 인자를 넘기기 위해 현재 재귀에서 사용했던 자료구조를 그대로 넘기면 안된다.

배열이나 Set 등의 자료구조를 그냥 넘기게 되면 주소값을 넘기게 되므로, 원본이 바뀌기 때문이다.

따라서 복사해서 로직을 진행 한 후, 복사한 것을 넘겨줘야 한다.

백준 / 수학 / 11444번 / 피보나치 수 6 / JS

KimMinJun — Mon, 13 Jan 2025 20:19:36 +0900

문제 간단설명

n이 주어졌을 때, n번째 피보나치 수를 출력하면 된다.

제한 사항

n은 1,000,000,000,000,000,000보다 작거나 같은 자연수이다.

성공 코드

const fs = require('fs');
const filePath = process.platform === 'linux' ? '/dev/stdin' : '../input.txt';
// const filePath = process.platform === 'linux' ? '/dev/stdin' : 'BOJ/input.txt';
const input = fs
  .readFileSync(filePath)
  .toString()
  .trim()
  .split('\n')
  .map((el) => el.trim());

const n = BigInt(input.shift());

const DIVISOR = BigInt(1e9 + 7);
const memo = [];

function solution() {
  memo[0] = 0n;
  memo[1] = 1n;
  memo[2] = 1n;

  const result = fibonacci(n);
  console.log(result.toString());
}

function fibonacci(n) {
  if (memo[n]) {
    return memo[n];
  }

  const half = n / 2n;
  if (n % 2n === 0n) {
    memo[n] =
      (fibonacci(half) * (2n * fibonacci(half - 1n) + fibonacci(half))) %
      DIVISOR;
  } else {
    memo[n] =
      (fibonacci(half) * fibonacci(half) +
        fibonacci(half + 1n) * fibonacci(half + 1n)) %
      DIVISOR;
  }

  return memo[n];
}

solution();

도가뉴 항등식을 이용해 풀이했다.

피보나치 수 - 위키백과, 우리 모두의 백과사전

위키백과, 우리 모두의 백과사전. 피보나치 수를 이용한 사각형 채우기 수학에서 피보나치 수(영어: Fibonacci numbers)는 첫째 및 둘째 항이 1이며 그 뒤의 모든 항은 바로 앞 두 항의 합인 수열이다.

ko.wikipedia.org

이 외에도 claude에게 물어보니, 행렬의 거듭제곱으로 풀이하는 방법도 있던데 나중에 알아봐야겠다.

백준 / 그래프 / 2206번 / 벽 부수고 이동하기 / JS

KimMinJun — Sat, 11 Jan 2025 23:47:37 +0900

문제 간단설명

N×M 크기의 맵이 주어집니다
맵의 각 칸은 0(이동 가능) 또는 1(벽)입니다
(1,1)에서 (N,M)까지 이동하려고 합니다
벽을 한 번만 부술 수 있는 능력이 있습니다
목표는 최단 경로의 길이를 찾는 것입니다

제한 사항

1 <= N <= 1,000
1 <= M <= 1,000
(1, 1)과 (N, M)은 항상 0이다.

실패 코드 (시간 초과)

const fs = require('fs');
const filePath = process.platform === 'linux' ? '/dev/stdin' : '../input.txt';
// const filePath = process.platform === 'linux' ? '/dev/stdin' : 'BOJ/input.txt';
const input = fs
  .readFileSync(filePath)
  .toString()
  .trim()
  .split('\n')
  .map((el) => el.trim());

const [N, M] = input.shift().split(' ').map(Number);
const map = input.map((row) => row.split('').map(Number));

const EMPTY = 0;
const WALL = 1;

const dr = [-1, 1, 0, 0];
const dc = [0, 0, -1, 1];

let result = Infinity;

function solution() {
  bfs();

  console.log(result === Infinity ? -1 : result);
}

function bfs() {
  const queue = [[0, 0, 1, false]];
  const visited = Array.from({ length: N }, () => Array(M).fill(false));

  visited[0][0] = true;

  while (queue.length > 0) {
    const [curRow, curCol, curCount, broken] = queue.shift();

    if (curRow === N - 1 && curCol === M - 1) {
      result = curCount;
      return;
    }

    for (let d = 0; d < 4; d++) {
      const nr = curRow + dr[d];
      const nc = curCol + dc[d];

      if (!isValid(nr, nc)) {
        continue;
      }
      if (visited[nr][nc]) {
        continue;
      }
      if (broken && map[nr][nc] === WALL) {
        continue;
      }

      visited[nr][nc] = true;

      if (map[nr][nc] === WALL && !broken) {
        queue.push([nr, nc, curCount + 1, true]);
      } else {
        queue.push([nr, nc, curCount + 1, broken]);
      }
    }
  }
}

function isValid(row, col) {
  return 0 <= row && row < N && 0 <= col && col < M;
}

solution();

BFS를 이용해 문제를 풀었다. 2% 정도에서 시간초과가 났었는데, 문제는 BFS의 while문에 있었다.

while문에서 queue의 맨 앞의 요소를 뽑아내기 위해 shift() 메서드를 사용했는데, 그렇게되면 그 뒤 요소들이 앞으로 한 칸 씩 당겨지는 O(N)의 시간복잡도를 매 반복마다 가지기 때문에 시간초과가 발생했다.

실패 코드 (오답)

const fs = require('fs');
const filePath = process.platform === 'linux' ? '/dev/stdin' : '../input.txt';
// const filePath = process.platform === 'linux' ? '/dev/stdin' : 'BOJ/input.txt';
const input = fs
  .readFileSync(filePath)
  .toString()
  .trim()
  .split('\n')
  .map((el) => el.trim());

const [N, M] = input.shift().split(' ').map(Number);
const map = input.map((row) => row.split('').map(Number));

const EMPTY = 0;
const WALL = 1;

const dr = [-1, 1, 0, 0];
const dc = [0, 0, -1, 1];

let result = Infinity;

function solution() {
  bfs();

  console.log(result === Infinity ? -1 : result);
}

function bfs() {
  const queue = [[0, 0, 1, false]];
  const visited = Array.from({ length: N }, () => Array(M).fill(false));

  visited[0][0] = true;

  let queueIndex = 0;
  while (queueIndex < queue.length) {
    const [curRow, curCol, curCount, broken] = queue[queueIndex++];

    if (curRow === N - 1 && curCol === M - 1) {
      result = curCount;
      return;
    }

    for (let d = 0; d < 4; d++) {
      const nr = curRow + dr[d];
      const nc = curCol + dc[d];

      if (!isValid(nr, nc)) {
        continue;
      }
      if (visited[nr][nc]) {
        continue;
      }
      if (broken && map[nr][nc] === WALL) {
        continue;
      }

      visited[nr][nc] = true;

      if (map[nr][nc] === WALL && !broken) {
        queue.push([nr, nc, curCount + 1, true]);
      } else {
        queue.push([nr, nc, curCount + 1, broken]);
      }
    }
  }
}

function isValid(row, col) {
  return 0 <= row && row < N && 0 <= col && col < M;
}

solution();

위에서 말했다시피, shift() 메서드가 문제였기 때문에 queue의 index를 나타내는 queueIndex라는 변수를 따로 뒀다.

하지만 약 15% 정도에서 틀렸다.

생각해보니 각 칸마다 벽을 부수고 도달했는지, 부수지 않고 도달했는지를 판단할 수 없었다.

위의 코드는 단순히, 한 번 벽을 부쉈으니까 다음엔 벽 못부셔~ 라는 로직일 뿐이었다.

그래서 visited 배열을 벽을 부수고 도달했는지, 부수지 않고 도달했는지를 따로 저장하도록 3차원 배열을 만들어서 해결했다.

성공 코드

const fs = require('fs');
const filePath = process.platform === 'linux' ? '/dev/stdin' : '../input.txt';
// const filePath = process.platform === 'linux' ? '/dev/stdin' : 'BOJ/input.txt';
const input = fs
  .readFileSync(filePath)
  .toString()
  .trim()
  .split('\n')
  .map((el) => el.trim());

const [N, M] = input.shift().split(' ').map(Number);
const map = input.map((row) => row.split('').map(Number));

const EMPTY = 0;
const WALL = 1;

const dr = [-1, 1, 0, 0];
const dc = [0, 0, -1, 1];

function solution() {
  const result = bfs();

  console.log(result);
}

function bfs() {
  const queue = [[0, 0, 1, 0]];
  const visited = Array.from({ length: N }, () =>
    Array.from({ length: M }, () => Array(2).fill(false))
  );

  visited[0][0][0] = true;

  let queueIndex = 0;
  while (queueIndex < queue.length) {
    const [curRow, curCol, curCount, broken] = queue[queueIndex++];

    if (curRow === N - 1 && curCol === M - 1) {
      return curCount;
    }

    for (let d = 0; d < 4; d++) {
      const nr = curRow + dr[d];
      const nc = curCol + dc[d];

      if (!isValid(nr, nc)) {
        continue;
      }

      // 갈 수 있는 곳 일 때,
      if (map[nr][nc] === EMPTY) {
        if (!visited[nr][nc][broken]) {
          queue.push([nr, nc, curCount + 1, broken]);
          visited[nr][nc][broken] = true;
        }
        // 벽이지만, 아직 벽을 부순 적이 없을 경우,
      } else if (map[nr][nc] === WALL && broken === 0) {
        if (!visited[nr][nc][1]) {
          queue.push([nr, nc, curCount + 1, 1]);
          visited[nr][nc][1] = true;
        }
      }
    }
  }

  return -1;
}

function isValid(row, col) {
  return 0 <= row && row < N && 0 <= col && col < M;
}

solution();

백준 / 그래프 / 9019번 / DSLR / JS

KimMinJun — Thu, 2 Jan 2025 01:46:13 +0900

문제 간단설명

네 자리 숫자 A를 B로 바꾸기 위해 아래 4개의 명령어를 사용해야 합니다.

D: A를 두 배로 만들고, 10000 이상이면 10000으로 나눈 나머지.
S: A에서 1을 뺀 값. 0이면 9999.
L: A의 왼쪽 회전. 예: 1234 → 2341.
R: A의 오른쪽 회전. 예: 1234 → 4123.

목표:

숫자 A에서 시작해 숫자 B로 바꾸는 최소한의 명령어 나열을 구하시오.
가능한 명령어 나열이 여러가지면, 아무거나 출력한다.

제한 사항

A 와 B는 모두 0 이상 10,000 미만이다.

실패 코드 (시간 초과)

const fs = require('fs');
const filePath = process.platform === 'linux' ? '/dev/stdin' : '../input.txt';
// const filePath = process.platform === 'linux' ? '/dev/stdin' : 'BOJ/input.txt';
const input = fs
  .readFileSync(filePath)
  .toString()
  .trim()
  .split('\n')
  .map((el) => el.trim());

let index = 0;
const T = +input.shift();

function solution() {
  for (let testCase = 1; testCase <= T; testCase++) {
    const [A, B] = input[index++].split(' ').map(Number);

    bfs(A, B);
  }
}

function bfs(A, B) {
  const queue = [[A, '']];
  const visited = Array.from({ length: 10000 }, () => false);

  visited[A] = true;

  let head = 0;
  while (queue.length > 0) {
    const [curNumber, totalCommand] = queue[head++];

    if (curNumber === B) {
      console.log(totalCommand);
      return;
    }

    const nextNumberList = [
      [D(curNumber), 'D'],
      [S(curNumber), 'S'],
      [L(curNumber), 'L'],
      [R(curNumber), 'R'],
    ];
    nextNumberList.forEach(([nextNumber, command]) => {
      if (visited[nextNumber]) {
        return;
      }

      visited[nextNumber] = true;
      queue.push([nextNumber, totalCommand + command]);
    });
  }
}

function D(number) {
  return (number * 2) % 10000;
}

function S(number) {
  return number - 1 === 0 ? 9999 : number - 1;
}

function L(number) {
  const strNumber = number.toString().padStart(4, '0');
  return Number(strNumber.slice(1) + strNumber[0]);
}

function R(number) {
  const strNumber = number.toString().padStart(4, '0');
  return Number(strNumber[3] + strNumber.slice(0, 3));
}

solution();

문제 그대로 구현하였는데, 계속 시간 초과가 나왔다. AI에게 도움 요청을해서 로직에 대한것만 확인해달라고 하였지만 로직에 대한것은 틀린것이 없었다.

아무리봐도 BFS 과정에선 틀린것이 없을 것 같아서, 함수로 눈길을 돌렸다.

L과 R 함수에 padStart(), slice() 같은 함수가 있어서 만약 L,R 커맨드를 많이 하게 될 경우 시간초과가 날 것 같았다.

성공 코드

const fs = require('fs');
const filePath = process.platform === 'linux' ? '/dev/stdin' : '../input.txt';
const input = fs
  .readFileSync(filePath)
  .toString()
  .trim()
  .split('\n')
  .map((el) => el.trim());

const T = +input.shift();

function solution() {
  for (let testCase = 1; testCase <= T; testCase++) {
    const [A, B] = input.shift().split(' ').map(Number);

    bfs(A, B);
  }
}

function bfs(A, B) {
  const queue = [[A, '']];
  const visited = Array(10000).fill(false);
  visited[A] = true;

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

    if (cur === B) {
      console.log(commandList);
      return;
    }

    const nextStateList = [
      [D(cur), 'D'],
      [S(cur), 'S'],
      [L(cur), 'L'],
      [R(cur), 'R'],
    ];

    for (const [nextNumber, command] of nextStateList) {
      if (!visited[nextNumber]) {
        visited[nextNumber] = true;
        queue.push([nextNumber, commandList + command]);
      }
    }
  }
}

function D(number) {
  return (number * 2) % 10000;
}

function S(number) {
  return number === 0 ? 9999 : number - 1;
}

function L(number) {
  const d1 = Math.floor(number / 1000);
  return (number % 1000) * 10 + d1;
}

function R(number) {
  const d4 = number % 10;
  return Math.floor(number / 10) + d4 * 1000;
}

solution();

생각했던게 맞았다. L과 R함수의 메서드 사용에 대한 시간복잡도가 문제였다.

다른건 바뀐게 없지만, 본래 String으로 형변환하여 한칸씩 옮기는것을 처리했던 것을 단순히 모듈러 연산을통해 자릿수를 조정하여 처리하였다.

특별한 메서드 없이 단순 연산이기 때문에 시간복잡도가 줄었을 것이고, 통과하였다.

백준 / 그래프 / 16928번 / 뱀과 사다리 게임 / JS

KimMinJun — Wed, 25 Dec 2024 19:06:57 +0900

문제 간단설명

게임의 규칙
- 1번 칸에서 시작하여 100번 칸에 도달하는 것을 목표로 하는 게임.
- 플레이어는 매턴 주사위를 굴려 1에서 6까지의 값을 얻어 앞으로 이동.
- 특정 칸에는 사다리나 뱀이 있음:
  - 사다리: 해당 칸에 도달하면 더 높은 칸으로 이동.
  - 뱀: 해당 칸에 도달하면 더 낮은 칸으로 이동.
입력
- 첫 줄: 사다리의 수 N과 뱀의 수 M.
- 다음 N줄: 각 줄에 사다리의 시작과 끝 (항상 x<y).
- 다음 M줄: 각 줄에 뱀의 머리와 꼬리 u,v(항상 ).
출력
- 1번 칸에서 시작하여 100번 칸에 도달하기 위한 최소 이동 횟수.

제한 사항

: 사다리와 뱀의 개수.
칸 번호는 1≤x,y,u,v≤1001 \leq x, y, u, v \leq 100.
칸은 서로 연결되며, 순환이 없음(사다리나 뱀을 따라 무한 루프에 빠지지 않음).

실패 코드 (DP)

const fs = require('fs');
const filePath = process.platform === 'linux' ? '/dev/stdin' : '../input.txt';
// const filePath = process.platform === 'linux' ? '/dev/stdin' : 'BOJ/input.txt';
const input = fs
  .readFileSync(filePath)
  .toString()
  .trim()
  .split('\n')
  .map((el) => el.trim());

let index = 0;
const [N, M] = input[index++].split(' ').map(Number);
const ladderInfoList = input
  .slice(index, index + N)
  .map((info) => info.split(' ').map(Number));
index += N;
const snakeInfoList = input
  .slice(-M)
  .map((info) => info.split(' ').map(Number));

const MAX = 100;
const NORMAL = 'NORMAL';
const LADDER = 'LADDER';
const SNAKE = 'SNAKE';

const board = Array.from({ length: MAX + 1 }, () => ({
  state: NORMAL,
  count: Infinity,
  next: 0,
}));

function solution() {
  initBoard();
  dp();

  console.log(board[100].count);
}

function initBoard() {
  ladderInfoList.forEach(
    ([x, y]) => (board[x] = { state: LADDER, count: Infinity, next: y })
  );
  snakeInfoList.forEach(
    ([u, v]) => (board[u] = { state: SNAKE, count: Infinity, next: v })
  );

  board[1].count = 0;

  for (let i = 2; i <= 7; i++) {
    const { state, next } = board[i];

    // 2~7까지는 한 번 굴려서 갈 수 있다.
    board[i].count = 1;

    // 만약 사다리가 설치되어있다면, 도착지점도 한 번으로 카운팅한다.
    if (state === LADDER) {
      board[next].count = 1;
    }
  }
}

function dp() {
  for (let i = 7; i <= 100; i++) {
    const { state: curState, next: curNext } = board[i];

    for (let j = i - 6; j < i; j++) {
      const { state: prevState, count: prevCount } = board[j];

      // 전의 칸에 아무것도 설치되어 있지 않을 경우,
      if (prevState === NORMAL) {
        board[i].count = Math.min(board[i].count, prevCount + 1);
      }
    }

    // 사다리가 설치되어 있는 경우,
    if (curState === LADDER) {
      board[curNext].count = board[i].count;
      // 뱀이 있는 경우,
    } else if (curState === SNAKE) {
      board[curNext].count = Math.min(board[curNext].count, board[i].count);
    }
  }
}

solution();

dp를 이용해서 문제를 풀었다. 다만, 여느 dp와 달리 '사다리'와 '뱀'이라는 조건에 따라 이동하게 되는 칸이 달라지기 때문에 구조가 약간 복잡하게 되었다. 하지만 테스트케이스는 다 맞았기 때문에 맞을 수 있을줄 알았다.

틀린 이유는 논리의 특정성에 있다.

위에서도 말했다시피, 특정 조건에 따라 이동하게 되는 칸이 달라지고 그에 따라 dp의 값이 달라지게 된다.

그 칸에 '사다리'나 '뱀'이 있다면 반드시 이동해야 하므로, 재귀적으로 확인해야 할 필요가 있다는 말이다.

그러므로, "전에 나왔던 dp값에 대해서 현재 값을 특정할 수 없다" 라는 전제때문에 결국 dp로 값을 구할 수가 없다.

dp는 이동이 단순히 i -> i+1 식으로 연결되는 단순한 이동에 적합하고, 이 문제는 최단 경로를 구하기 때문에 BFS가 더 적합한 풀이이다.

성공 코드 (BFS)

const fs = require('fs');
const filePath = process.platform === 'linux' ? '/dev/stdin' : '../input.txt';
// const filePath = process.platform === 'linux' ? '/dev/stdin' : 'BOJ/input.txt';
const input = fs
  .readFileSync(filePath)
  .toString()
  .trim()
  .split('\n')
  .map((el) => el.trim());

let index = 0;
const [N, M] = input[index++].split(' ').map(Number);
const ladderInfoList = input
  .slice(index, index + N)
  .map((info) => info.split(' ').map(Number));
const snakeInfoList = input
  .slice(-M)
  .map((info) => info.split(' ').map(Number));

const MAX = 100;
const board = Array.from({ length: MAX + 1 }, () => 0);

function solution() {
  initBoard();
  const minMoveCount = getMinMoveCount();

  console.log(minMoveCount);
}

function initBoard() {
  ladderInfoList.forEach(([x, y]) => (board[x] = y));
  snakeInfoList.forEach(([u, v]) => (board[u] = v));
}

function getMinMoveCount() {
  // [현재 위치, 이동 횟수]
  const queue = [[1, 0]];
  const visited = Array.from({ length: MAX + 1 }, () => false);

  visited[1] = true;

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

    if (curNumber === MAX) {
      return curMoveCount;
    }

    for (let dice = 1; dice <= 6; dice++) {
      let nextNumber = curNumber + dice;

      if (nextNumber > 100) {
        break;
      }

      // 만약 사다리나 뱀이 설치된 곳이라면,
      // 그것을 이용해서 갈 수 있는 다음칸으로 값을 갱신한다.
      if (board[nextNumber] !== 0) {
        nextNumber = board[nextNumber];
      }

      if (visited[nextNumber]) {
        continue;
      }

      visited[nextNumber] = true;
      queue.push([nextNumber, curMoveCount + 1]);
    }
  }
}

solution();

단순한 BFS로직을 이용했다. 단 한가지 추가된점이 있다면, BFS 내부에서 '사다리'나 '뱀'인 칸일 경우 그것을 이용해서 갈 수 있는 다음칸으로 값을 갱신한다는 것이다.

백준 / 구현 / 18111번 / 마인크래프트 / JS

KimMinJun — Sat, 21 Dec 2024 23:30:56 +0900

문제 간단설명

N×M 크기의 땅을 모두 동일한 높이로 만드는데 필요한 최소 시간을 구하고, 그때의 땅의 높이를 출력하면 된다.

만약 최소 시간으로 가능한 경우가 여러가지 일 경우, 가장 높은 높이를 출력하면 된다.

조건:

(i, j) 위치의 블록을 제거해 인벤토리에 넣는 작업: 2초 소요
인벤토리에서 블록을 꺼내 (i, j) 위치에 쌓는 작업: 1초 소요
초기 인벤토리에 B개의 블록이 주어진다.
높이는 0~256 사이여야 한다.

제한 사항

1 <= M(가로), N(세로) <= 500
0 <= B(시작할 때 들어있는 블록의 개수) <= 6.4 * 10^7

실패 코드 (시간 초과)

const fs = require('fs');
const filePath = process.platform === 'linux' ? '/dev/stdin' : '../input.txt';
// const filePath = process.platform === 'linux' ? '/dev/stdin' : 'BOJ/input.txt';
const input = fs
  .readFileSync(filePath)
  .toString()
  .trim()
  .split('\n')
  .map((el) => el.trim());

const [N, M, B] = input.shift().split(' ');
const map = input.map((row) => row.split(' ').map(Number));

function solution() {
  const min = Math.min(...map.flat());
  const max = Math.max(...map.flat());

  let minTime = Infinity;
  let maxHeight = -Infinity;

  for (let targetHeight = min; targetHeight <= max; targetHeight++) {
    let time = 0;
    let restBlock = B;

    for (let i = 0; i < N; i++) {
      for (let j = 0; j < M; j++) {
        const curHeight = map[i][j];

        if (curHeight > targetHeight) {
          const curRestBlock = curHeight - targetHeight;
          restBlock += curRestBlock;
          time += 2 * curRestBlock;
        } else if (curHeight < targetHeight) {
          const curLackBlock = targetHeight - curHeight;
          restBlock -= curLackBlock;
          time += 1 * curLackBlock;
        }
      }

      if (time > minTime) {
        break;
      }
    }

    if (restBlock < 0) {
      continue;
    }

    if (time <= minTime) {
      minTime = time;

      if (targetHeight > maxHeight) {
        maxHeight = targetHeight;
      }
    }
  }

  console.log(minTime, maxHeight);
}

solution();

문제 그대로 구현한 코드이다.

답은 다 맞지만, 시간 복잡도가 O(H*N*M) 이므로 시간초과가 나게된다.

성공 코드

const fs = require('fs');
const filePath = process.platform === 'linux' ? '/dev/stdin' : '../input.txt';
// const filePath = process.platform === 'linux' ? '/dev/stdin' : 'BOJ/input.txt';
const input = fs
  .readFileSync(filePath)
  .toString()
  .trim()
  .split('\n')
  .map((el) => el.trim());

const [N, M, B] = input.shift().split(' ').map(Number);
const map = input.map((row) => row.split(' ').map(Number));
const MAX_HEIGHT = 256;

function solution() {
  const { minHeight, maxHeight, heightCountList } = calculateHeightData(map);
  const { minTime, optimalHeight } = findOptimalHeight(
    minHeight,
    maxHeight,
    heightCountList,
    B
  );

  console.log(minTime, optimalHeight);
}

/**
 * 각 높이의 출현 빈도와 최소/최대 높이를 계산하는 함수이다.
 *
 * @param {number[][]} map - N x M 크기의 맵 데이터
 * @returns {Object} - { minHeight, maxHeight, heightCountList }
 */
function calculateHeightData(map) {
  const heightCountList = Array.from({ length: MAX_HEIGHT + 1 }, () => 0);
  let minHeight = Infinity;
  let maxHeight = -Infinity;

  map.forEach((row) =>
    row.forEach((height) => {
      heightCountList[height]++;
      minHeight = Math.min(minHeight, height);
      maxHeight = Math.max(maxHeight, height);
    })
  );

  return { minHeight, maxHeight, heightCountList };
}

/**
 * 주어진 높이 범위에서 최적의 시간을 계산하고, 해당 높이를 반환하는 함수이다.
 *
 * @param {number} minHeight - 맵의 최소 높이
 * @param {number} maxHeight - 맵의 최대 높이
 * @param {number[]} heightCountList - 각 높이의 출현 빈도
 * @param {number} initialBlocks - 초기 블록 수
 * @returns {Object} - { minTime, optimalHeight }
 */
function findOptimalHeight(
  minHeight,
  maxHeight,
  heightCountList,
  initialBlocks
) {
  let minTime = Infinity;
  let optimalHeight = -Infinity;

  for (
    let targetHeight = minHeight;
    targetHeight <= maxHeight;
    targetHeight++
  ) {
    const { time, remainingBlocks } = calculateTimeAndBlocks(
      targetHeight,
      heightCountList,
      initialBlocks
    );

    if (remainingBlocks >= 0 && time <= minTime) {
      minTime = time;
      if (targetHeight > optimalHeight) {
        optimalHeight = targetHeight;
      }
    }
  }

  return { minTime, optimalHeight };
}

/**
 * 특정 목표 높이에서 소요 시간과 남은 블록 수를 계산하는 함수이다.
 *
 * @param {number} targetHeight - 목표 높이
 * @param {number[]} heightCountList - 각 높이의 출현 빈도
 * @param {number} initialBlocks - 초기 블록 수
 * @returns {Object} - { time, remainingBlocks }
 */
function calculateTimeAndBlocks(targetHeight, heightCountList, initialBlocks) {
  let time = 0;
  let remainingBlocks = initialBlocks;

  heightCountList.forEach((count, height) => {
    if (count === 0) return;

    if (height > targetHeight) {
      const removeBlocks = (height - targetHeight) * count;
      time += 2 * removeBlocks;
      remainingBlocks += removeBlocks;
    } else if (height < targetHeight) {
      const addBlocks = (targetHeight - height) * count;
      time += addBlocks;
      remainingBlocks -= addBlocks;
    }
  });

  return { time, remainingBlocks };
}

solution();

일단, 변수명과 문법적인 부분은 선언형 프로그래밍과 모듈화를 해보려고 시도해서 코드는 좀 길어졌다.

그 외에도, flat() 함수로 최소 높이와 최대 높이를 구하던 부분도 따로 하지 않고 반복문 하나 안에서 해결했다.

원래 사용하던 로직은 크게 달라진 부분이 없다. 단지 시간을 개선하기 위해 값을 미리 저장하는 방법을 사용했다.

어떤 값을 저장하냐면, 기존 맵에서 각 높이의 출현 빈도를 배열에 저장했다.

기존에는 모든 배열을 직접 순회하면서 각 높이마다 얼마나 블록을 더하고 빼야하는지 계산했다.

이런 방식을 하게 되면 같은 높이에 대해 얼마나 더하고 뺄건지는 고정 값이므로, (높이의 차이 * 해당 높이의 개수)로 한번에 처리할 수 있다. 이렇게 되면 중복된 값에 대한 계산이 줄고 반복이 줄게 되므로 시간이 단축된다.

반복에서 나오지 않은 높이부분은 continue로 반복을 생략하게 되는데, 이런 부분을 넣고싶지 않다면 Map 자료구조를 사용해도 좋을 것 같다는 생각이 든다.

백준 / 문자열 / 5525번 / IOIOI / JS

KimMinJun — Sat, 9 Nov 2024 22:49:53 +0900

문제 간단설명

N+1개의 I와 N개의 O로 이루어져 있으면, I와 O가 교대로 나오는 문자열을 P_N이라고 한다.
I와 O로만 이루어진 문자열 S와 정수 N이 주어졌을 때, S안에 P_N이 몇 군데 포함되어 있는지 구하는 프로그램을 작성하시오.

제한 사항

1 <= N <= 1,000,000
2N+1 <= M <= 1,000,000
S는 I와 O로만 이루어져 있다.

성공 코드

const fs = require('fs');
const filePath = process.platform === 'linux' ? '/dev/stdin' : '../input.txt';
// const filePath = process.platform === 'linux' ? '/dev/stdin' : 'BOJ/input.txt';
const input = fs
  .readFileSync(filePath)
  .toString()
  .trim()
  .split('\n')
  .map((el) => el.trim());

const N = +input.shift();
const M = +input.shift();
const S = input.shift();

function solution() {
    let count = 0;                // 'IOI' 패턴을 찾은 횟수
    let result = 0;               // 원하는 패턴을 찾은 횟수
    let i = 0;
    
    while (i < M - 1) {
      if (S[i] === 'I' && S.slice(i, i + 3) === 'IOI') {  // 'IOI' 패턴 찾기
        count += 1;               // 'IOI' 패턴이 연속되는 수를 세기
        if (count >= N) {
          result += 1;            // 'IOI'가 N번 이상 연속되면 패턴을 찾은 것으로 간주
        }
        i += 2;                   // 'IOI' 패턴을 찾으면 두 칸 이동
      } else {
        count = 0;                // 패턴이 끊기면 count 초기화
        i += 1;
      }
    }
    
    console.log(result);
}

solution();

백준 / 구현 / 5430번 / AC / JS

KimMinJun — Fri, 8 Nov 2024 16:11:07 +0900

문제 간단설명

숫자 배열이 주어진다. 명령어는 R과 D가 주어지는데 R은 배열 뒤집기, D는 배열의 맨 앞에서 하나를 제거하는 것이다.

제한 사항

T <= 100
1 <= p.length <= 100,000
0 <= n <= 100,000
1 <= 배열의 각 정수 <= 100
p.length + n <= 700,000

실패 코드 (메모리 초과)

const fs = require('fs');
const filePath = process.platform === 'linux' ? '/dev/stdin' : '../input.txt';
// const filePath = process.platform === 'linux' ? '/dev/stdin' : 'BOJ/input.txt';
const input = fs
  .readFileSync(filePath)
  .toString()
  .trim()
  .split('\n')
  .map((el) => el.trim());

const T = +input.shift();

function solution() {
  const result = [];

  for (let testCase = 1; testCase <= T; testCase++) {
    const p = input.shift();
    const n = +input.shift();

    let numberList = input.shift().match(/\d+/g) || [];
    numberList = numberList.map(Number);

    for (const command of p) {
      if (command === 'R') {
        numberList = reverse(numberList);
      } else if (command === 'D') {
        numberList = deleteFirstNumber(numberList);

        if (numberList === 'error') {
          break;
        }
      }
    }

    result.push(numberList);
  }

  console.log(
    result.map((el) => (el !== 'error' ? JSON.stringify(el) : el)).join('\n')
  );
}

function reverse(numberList) {
  return [...numberList].reverse();
}

function deleteFirstNumber(numberList) {
  if (numberList.length === 0) {
    return 'error';
  }

  const [_, ...newArray] = numberList;

  return newArray;
}

solution();

로직은 크게 문제가 없었다.

하지만 메모리 초과가 나온 이유는, reverse()와 deleteFirstNumber() 함수 구현에 있었다.

원본 배열을 수정하지 않기 위해 인자로 받고 전개 연산자로 깊은 복사를 통해 새로운 배열을 만들어주고, 그 배열을 조작해서 반환해주었다.

따라서, 수많은 배열을 계속해서 만들면서 메모리 초과가 발생했다.

실패 코드 (시간 초과)

const fs = require('fs');
const filePath = process.platform === 'linux' ? '/dev/stdin' : '../input.txt';
// const filePath = process.platform === 'linux' ? '/dev/stdin' : 'BOJ/input.txt';
const input = fs
  .readFileSync(filePath)
  .toString()
  .trim()
  .split('\n')
  .map((el) => el.trim());

let index = 0;
const T = +input[index++];

function solution() {
  const result = [];

  for (let testCase = 1; testCase <= T; testCase++) {
    const p = input[index++];
    const n = +input[index++];

    let numberList = JSON.parse(input[index++]).map(Number);

    for (const command of p) {
      if (command === 'R') {
        numberList.reverse();
      } else if (command === 'D') {
        if (numberList.length === 0) {
          numberList = 'error';
          break;
        }
        numberList = numberList.slice(1);
      }
    }

    result.push(numberList);
  }

  console.log(
    result.map((el) => (el !== 'error' ? JSON.stringify(el) : el)).join('\n')
  );
}

solution();

처음에는 시간 초과가 shift() 메소드 때문에 나는 줄 알았다.

그래서 input의 각 값을 shift()를 통해 얻어오는 대신, 인덱스 변수를 두고 참조하게 하였다.

하지만 그래도 시간 초과가 났다.

물론 위에서 생각한 input의 값을 가져오는 부분에서의 shift() 연산의 영향이 아예 없지는 않겠지만, 결정적 문제는 다른 곳에 있었다.

성공 코드

const fs = require('fs');
const filePath = process.platform === 'linux' ? '/dev/stdin' : '../input.txt';
// const filePath = process.platform === 'linux' ? '/dev/stdin' : 'BOJ/input.txt';
const input = fs
  .readFileSync(filePath)
  .toString()
  .trim()
  .split('\n')
  .map((el) => el.trim());

let index = 0;
const T = +input[index++];

function solution() {
  const result = [];

  for (let testCase = 1; testCase <= T; testCase++) {
    const p = input[index++];
    const n = +input[index++];

    let numberList = JSON.parse(input[index++]).map(Number);

    let isReversed = false;
    let isError = false;

    for (const command of p) {
      if (command === 'R') {
        isReversed = !isReversed;
      } else if (command === 'D') {
        if (numberList.length === 0) {
          isError = true;
          break;
        }

        // 만약 뒤집힌 상태라면, 뒤집지 않고 뒤에서 하나 제거한다.
        if (isReversed) {
          numberList.pop();
        } else {
          // 뒤집힌 상태가 아니라면 앞에서 하나 제거한다.
          numberList.shift();
        }
      }
    }

    // 뒤집힌 상태이고, 에러가 나지 않았다면 뒤집어준다.
    if (isReversed && !isError) {
      numberList.reverse();
    }
    if (isError) {
      result.push('error');
    } else {
      result.push(numberList);
    }
  }

  // 배열을 그대로 출력하게 되면 양쪽 괄호([])가 보이지 않기 때문에 객체 자체를 문자열로 바꿔준다.
  console.log(
    result.map((el) => (el !== 'error' ? JSON.stringify(el) : el)).join('\n')
  );
}

solution();

아무래도 확실한 것은 수많은 shift()와 reverse()의 사용이 분명했다.

shift()는 O(n)의 시간 복잡도를 가진다.

reverse() 또한 O(n)의 시간 복잡도를 가진다.

모든 명령마다 이 두 메소드를 호출하기 때문에 시간 복잡도가 커졌던 것이다.

따라서 이 배열을 뒤집어야 하는지, 에러가 발생하는지에 대한 플래그 변수인 isReversed와 isError 변수를 두었다.

'R' 명령이 들어왔다고 해서 바로 뒤집지 말고, 뒤집어야 하는지 일단 변수를 조작한다. isReversed를 true로 만들면 된다.

그리고 나서 'D' 명령이 이어서 들어온다면 앞에서 shift() 하는 것이 아닌, 뒤에서 pop()을 한다.

pop()은 시간 복잡도가 O(1)이기 때문이다.

그리고 마지막에 isReversed의 true 여부에 따라 뒤집기를 딱 한 번만 수행하면 된다.

각 명령마다 reverse()나 shift()를 했던 것과 달리 확실히 시간 복잡도를 줄여서 통과할 수 있었다.

백준 / 그래프 / 1389번 / 케빈 베이컨의 6단계 법칙 / JS

KimMinJun — Thu, 7 Nov 2024 21:48:19 +0900

문제 간단설명

이 문제는 두 사람이 몇 단계 이내에 친구의 친구로 이어질 수 있는지를 나타내는 케빈 베이컨의 수를 계산하고, 케빈 베이컨의 수가 가장 작은 사람을 찾는 문제입니다. 각 사람마다 다른 모든 사람들과 최소 단계로 이어지는 경로를 구한 뒤, 그 경로의 단계 수를 모두 더하여 케빈 베이컨의 수를 계산합니다. 예를 들어, 사람 A와 B가 최소 3단계로 연결된다면, A의 케빈 베이컨 수에는 3이 포함됩니다. 모든 유저의 케빈 베이컨 수를 계산한 뒤, 그 값이 가장 작은 사람을 찾는 것이 문제의 목표입니다.

제한 사항

2 <= N <= 100
1 <= M <= 5000
입력 관계:
- 입력은 각 친구 관계를 나타내며, (A, B) 형식으로 주어집니다.
- 중복된 친구 관계가 존재할 수 있으며, 자기 자신과 친구인 관계는 없습니다.
- 모든 사람은 친구 관계로 이어져 있으며, 단절된 그룹은 없습니다.

성공 코드

const fs = require('fs');
const filePath = process.platform === 'linux' ? '/dev/stdin' : '../input.txt';
// const filePath = process.platform === 'linux' ? '/dev/stdin' : 'BOJ/input.txt';
const input = fs
  .readFileSync(filePath)
  .toString()
  .trim()
  .split('\n')
  .map((el) => el.trim());

const [N, M] = input.shift().split(' ').map(Number);
const relationList = input.map((row) => row.split(' ').map(Number));

// 인접 행렬
const adjList = {};
// 케빈 베이컨 카운트 인접 행렬
const kevinBaconCountAdjList = Array.from({ length: N + 1 }, () =>
  new Array(N + 1).fill(0)
);

function solution() {
  initAdjList();

  const kevinBaconCountList = getKevinBaconCountList();
  const result = getResult(kevinBaconCountList);

  console.log(result);
}

/**
 * 인접행렬을 초기화 해주는 함수이다.
 */
function initAdjList() {
  for (let i = 1; i <= N; i++) {
    adjList[i] = new Set();
  }

  for (const [user1, user2] of relationList) {
    adjList[user1].add(user2);
    adjList[user2].add(user1);
  }
}

/**
 * bfs를 이용해 각 노드까지의 단계를 구하는 함수이다.
 *
 * @param {number} start 시작 노드
 */
function bfs(start) {
  const queue = [[start, 1]];
  const visited = Array.from({ length: N + 1 }, () => false);

  visited[start] = true;

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

    for (const adjUser of adjList[curUser]) {
      if (visited[adjUser]) {
        continue;
      }

      kevinBaconCountAdjList[curUser][adjUser] = 1;
      kevinBaconCountAdjList[start][adjUser] = curCount;

      visited[adjUser] = true;
      queue.push([adjUser, curCount + 1]);
    }
  }
}

/**
 * 각 유저별 케빈 베이컨수를 구하는 함수이다.
 *
 * @returns 각 유저별 케빈 베이컨수가 담긴 배열
 */
function getKevinBaconCountList() {
  for (let i = 1; i <= N; i++) {
    bfs(i);
  }

  const kevinBaconCountList = kevinBaconCountAdjList.map((row) =>
    row.reduce((acc, cur) => acc + cur)
  );

  return kevinBaconCountList;
}

/**
 * 케빈 베이컨의 수가 가장 작은 사람을 구하는 함수이다.
 *
 * @param {number[]} kevinBaconCountList
 * @returns 케빈 베이커의 수가 가장 작은 사람
 */
function getResult(kevinBaconCountList) {
  const min = Math.min(...kevinBaconCountList.slice(1));
  const minIndex = kevinBaconCountList.indexOf(min);

  return minIndex;
}

solution();

인접 리스트를 이용해 문제에서 요구한 그대로 bfs로 구현하였다.

주의할 점은, 중복된 관계도 들어올 수 있기 때문에 Set 자료구조를 사용했다.

백준 / 그래프 / 14940번 / 쉬운 최단거리 / JS

KimMinJun — Wed, 6 Nov 2024 23:21:04 +0900

문제 간단설명

지도가 주어지면, 각 칸에서 목표지점까지의 거리를 출력하는 문제이다.

오직 가로와 세로로만 움직여 갈 수 있다.

제한 사항

2 <= n <= 1000
2 <= m <= 1000
0은 갈 수 없는 땅이고 1은 갈 수 있는 땅, 2는 목표지점이다.
입력에서 2는 단 한개이다.

실패 코드 (시간초과)

const fs = require('fs');
const filePath = process.platform === 'linux' ? '/dev/stdin' : '../input.txt';
// const filePath = process.platform === 'linux' ? '/dev/stdin' : 'BOJ/input.txt';
const input = fs
  .readFileSync(filePath)
  .toString()
  .trim()
  .split('\n')
  .map((el) => el.trim());

const [n, m] = input.shift().split(' ').map(Number);
const map = input.map((row) => row.split(' ').map(Number));

const IMPOSSIBLE = 0;
const POSSIBLE = 1;
const GOAL = 2;

const dr = [-1, 1, 0, 0];
const dc = [0, 0, -1, 1];

function solution() {
  const resultMap = Array.from({ length: n }, () => new Array(m));

  for (let i = 0; i < n; i++) {
    for (let j = 0; j < m; j++) {
      if (map[i][j] === IMPOSSIBLE || map[i][j] === GOAL) {
        resultMap[i][j] = 0;
        continue;
      }

      resultMap[i][j] = bfs(i, j);
    }
  }

  printResultMap(resultMap);
}

function bfs(startRow, startCol) {
  const queue = [[startRow, startCol, 0]];
  const visited = Array.from({ length: n }, () => new Array(m).fill(false));

  visited[startRow][startCol] = true;

  while (queue.length > 0) {
    const [curRow, curCol, curCount] = queue.shift();

    if (map[curRow][curCol] === GOAL) {
      return curCount;
    }

    for (let d = 0; d < 4; d++) {
      const nr = curRow + dr[d];
      const nc = curCol + dc[d];

      if (!isValid(nr, nc)) {
        continue;
      }
      if (visited[nr][nc]) {
        continue;
      }
      if (map[nr][nc] === IMPOSSIBLE) {
        continue;
      }

      visited[nr][nc] = true;
      queue.push([nr, nc, curCount + 1]);
    }
  }
}

function isValid(row, col) {
  return 0 <= row && row < n && 0 <= col && col < m;
}

function printResultMap(resultMap) {
  console.log(resultMap.map((row) => row.join(' ')).join('\n'));
}

solution();

먼저 그냥 문제 그대로 구현해보았다.

각 칸에서 목표지점까지 bfs로 얼마나 걸리는지 판단하게 했더니 시간초과가 났다.

최대 1000 * 1000의 배열이기 때문에 시간초과가 걸리는 것은 당연한 풀이이다...

성공 코드

const fs = require('fs');
const filePath = process.platform === 'linux' ? '/dev/stdin' : '../input.txt';
// const filePath = process.platform === 'linux' ? '/dev/stdin' : 'BOJ/input.txt';
const input = fs
  .readFileSync(filePath)
  .toString()
  .trim()
  .split('\n')
  .map((el) => el.trim());

const [n, m] = input.shift().split(' ').map(Number);
const map = input.map((row) => row.split(' ').map(Number));

const IMPOSSIBLE = 0;
const POSSIBLE = 1;
const GOAL = 2;

const dr = [-1, 1, 0, 0];
const dc = [0, 0, -1, 1];

const resultMap = Array.from({ length: n }, () => new Array(m).fill(-1));

function solution() {
  let [startRow, startCol] = getStartPosition();

  checkImpossible();
  bfs(startRow, startCol);
  printResultMap();
}

function getStartPosition() {
  for (let i = 0; i < n; i++) {
    for (let j = 0; j < m; j++) {
      if (map[i][j] === GOAL) {
        resultMap[i][j] = 0;
        return [i, j];
      }
    }
  }
}

function checkImpossible() {
  for (let i = 0; i < n; i++) {
    for (let j = 0; j < m; j++) {
      if (map[i][j] === IMPOSSIBLE) {
        resultMap[i][j] = 0;
      }
    }
  }
}

function bfs(startRow, startCol) {
  const queue = [[startRow, startCol, 0]];
  const visited = Array.from({ length: n }, () => new Array(m).fill(false));

  visited[startRow][startCol] = true;

  while (queue.length > 0) {
    const [curRow, curCol, curCount] = queue.shift();

    for (let d = 0; d < 4; d++) {
      const nr = curRow + dr[d];
      const nc = curCol + dc[d];

      if (!isValid(nr, nc)) {
        continue;
      }
      if (visited[nr][nc]) {
        continue;
      }
      if (map[nr][nc] === IMPOSSIBLE || map[nr][nc] === GOAL) {
        continue;
      }

      visited[nr][nc] = true;
      queue.push([nr, nc, curCount + 1]);
      resultMap[nr][nc] = curCount + 1;
    }
  }
}

function isValid(row, col) {
  return 0 <= row && row < n && 0 <= col && col < m;
}

function printResultMap() {
  console.log(resultMap.map((row) => row.join(' ')).join('\n'));
}

solution();

반대로 생각해서 각 칸에서 목표지점까지 가는 것을 생각하지 말고, 목표지점에서 각 칸까지 얼마나 걸리는지 구한다고 생각해보자.

그렇다면 시작지점을 목표지점으로 잡고, 가로와 세로로 퍼져나가면서 각 칸에 대해서 이동거리를 표시해주면 한번의 bfs로 문제를 해결할 수 있다.