취업하고 바쁘게 지내던 중 이제 조금 적응하고 시간을 효율적으로 사용할 수 있을 것 같아 간만에 글을 작성한다.

회사는 Vue를 사용하는데, 왜 갑자기 Next.js일까? 사내 테스트로 AI Generator Tools를 사용해 보면서 대부분의 새로운 서비스는 React를 기반하여 제공된다는 것을 깨달았다.

점유율이 가장 높은 서비스를 다룰 줄 알아야 기존 서비스를 넓은 시야로 바라볼 수 있을 것 같다.

📌 Check Point

Rendering

기존에는 CSR 서비스를 제공했기 때문에 클라이언트 측에서 브라우저의 Web API를 사용하여 locale을 가져왔다. -> navigator.language

하지만 Next.js는 SSR이기 때문에 클라이언트에서 정보를 받기 전에 미리 보여주어야 한다. 렌더링 이후 locale을 설정하는 것은 UX를 고려하였을 때 좋지 않다.

따라서 클라이언트가 서버에 페이지를 요청할 때, 서버는 header의 Accept-Language를 확인하고 해당 locale로 설정하려고 한다.

App routing

Next.js가 App routing을 제공하면서 기존 i18n 라이브러리인 next-i18next이 적합하지 않다.

관련 문서

• All side optimized Next.js translations
• Static HTML Export with i18n compatibility

따라서 Article - next-app-dir-i18n 를 참고하여 진행해보자.

⚡ Locale strategies

Next.js에서는 locale의 두 가지 방식을 장려한다.

• Sub-path Routing
• Domain Routing

Sub-path Routing은 example.com/ko나 example.com/en과 같은 구조이고, Domain Routing은 example.ko나 example.en과 같은 구조이다.

필자는 Sub-path Routing 방식으로 진행하고 글을 작성하고자 한다.

🚀 Get started

Installation

npm install i18next react-i18next i18next-resources-to-backend accept-language

or

yarn add i18next react-i18next i18next-resources-to-backend accept-language

Folder structure

.
└── app
    ├── [lng]
    |   └── [home]
    |       ├── head.tsx
    |       └── pages.tsx
    ├── layout.ts
    └── page.ts

Try it!

1. i18n 설정

• 필자는 ko를 기본 언어로 설정하고 진행하였다.

  만약, 하나의 json 파일에 모든 번역을 적용할 것이라면 namespace를 고정해주면 된다.

export const fallbackLng = 'ko';
export const languages = [fallbackLng, 'en'];
export const defaultNS = 'home';
export const cookieName = 'i18next';

export function getOptions(
  lng = fallbackLng,
  ns: string | string[] = defaultNS
) {
  return {
    supportedLngs: languages,
    fallbackLng,
    lng,
    fallbackNS: defaultNS,
    defaultNS,
    ns,
  };
}

// i18n/settings.ts

• i18n을 init하는 index.ts 파일을 생성한다. 번역을 호출할 때마다 새로운 인스턴스를 만들어 준다.

이는 컴파일하는 동안 모든 것이 병렬처럼 실행되는 것처럼 보인다. 따라서 번역이 일관되게 유지된다.

import { createInstance, Namespace, FlatNamespace, KeyPrefix } from 'i18next';
import resourcesToBackend from 'i18next-resources-to-backend';
import { initReactI18next } from 'react-i18next/initReactI18next';
import { FallbackNs } from 'react-i18next';

import { getOptions } from '@/i18n/settings';

const initI18next = async (lng: string, ns: string | string[]) => {
  const i18nInstance = createInstance();
  await i18nInstance
    .use(initReactI18next)
    .use(
      resourcesToBackend(
        (language: string, namespace: string) =>
          import(`./locales/${language}/${namespace}.json`)
      )
    )
    .init(getOptions(lng, ns));
  return i18nInstance;
};

export async function useTranslation<
  Ns extends FlatNamespace,
  KPrefix extends KeyPrefix<FallbackNs<Ns>> = undefined,
>(lng: string, ns?: Ns, options: { keyPrefix?: KPrefix } = {}) {
  const i18nextInstance = await initI18next(
    lng,
    Array.isArray(ns) ? (ns as string[]) : (ns as string)
  );
  return {
    t: i18nextInstance.getFixedT(lng, ns, options.keyPrefix),
    i18n: i18nextInstance,
  };
}

// i18n/index.ts

client에서 사용할 useTranslation hook을 생성한다.

'use client';

import { useEffect, useState } from 'react';
import i18next, { FlatNamespace, KeyPrefix } from 'i18next';
import {
  initReactI18next,
  useTranslation as useTranslationOrg,
  UseTranslationOptions,
  UseTranslationResponse,
  FallbackNs,
} from 'react-i18next';
import { useCookies } from 'react-cookie';
import resourcesToBackend from 'i18next-resources-to-backend';
import LanguageDetector from 'i18next-browser-languagedetector';
import { getOptions, languages, cookieName } from '@/i18n/settings';

const runsOnServerSide = typeof window === 'undefined';

i18next
  .use(initReactI18next)
  .use(LanguageDetector)
  .use(
    resourcesToBackend(
      (language: string, namespace: string) =>
        import(`./locales/${language}/${namespace}.json`)
    )
  )
  .init({
    ...getOptions(),
    lng: 'ko',
    detection: {
      order: ['path', 'htmlTag', 'cookie', 'navigator'],
    },
    preload: runsOnServerSide ? languages : [],
  });

export function useTranslation<
  Ns extends FlatNamespace,
  KPrefix extends KeyPrefix<FallbackNs<Ns>> = undefined,
>(
  lng: string,
  ns?: Ns,
  options?: UseTranslationOptions<KPrefix>
): UseTranslationResponse<FallbackNs<Ns>, KPrefix> {
  1;
  const [cookies, setCookie] = useCookies([cookieName]);
  const ret = useTranslationOrg(ns, options);
  const { i18n } = ret;
  if (runsOnServerSide && lng && i18n.resolvedLanguage !== lng) {
    i18n.changeLanguage(lng);
  } else {
    const [activeLng, setActiveLng] = useState(i18n.resolvedLanguage);
    useEffect(() => {
      if (activeLng === i18n.resolvedLanguage) return;
      setActiveLng(i18n.resolvedLanguage);
    }, [activeLng, i18n.resolvedLanguage]);
    useEffect(() => {
      if (!lng || i18n.resolvedLanguage === lng) return;
      i18n.changeLanguage(lng);
    }, [lng, i18n]);
    useEffect(() => {
      if (cookies.i18next === lng) return;
      setCookie(cookieName, lng, { path: '/home' });
    }, [lng, cookies.i18next]);
  }
  return ret;
}


// i18n/client.ts

2. middleware 설정

cookie가 있다면 해당 언어로 적용하고, 없다면 headers의 Accept-Language를 가져온다.

import { NextResponse } from 'next/server'
import acceptLanguage from 'accept-language'
import { fallbackLng, languages, cookieName } from '.@/i18n/settings'

acceptLanguage.languages(languages)

export const config = {
  // matcher: '/:lng*'
  matcher: ['/((?!api|_next/static|_next/image|assets|favicon.ico|sw.js).*)']
}

export function middleware(req) {
  let lng
  if (req.cookies.has(cookieName)) lng = acceptLanguage.get(req.cookies.get(cookieName).value)
  if (!lng) lng = acceptLanguage.get(req.headers.get('Accept-Language'))
  if (!lng) lng = fallbackLng

  // Redirect if lng in path is not supported
  if (
    !languages.some(loc => req.nextUrl.pathname.startsWith(`/${loc}`)) &&
    !req.nextUrl.pathname.startsWith('/_next')
  ) {
    return NextResponse.redirect(new URL(`/${lng}${req.nextUrl.pathname}`, req.url))
  }

  if (req.headers.has('referer')) {
    const refererUrl = new URL(req.headers.get('referer'))
    const lngInReferer = languages.find((l) => refererUrl.pathname.startsWith(`/${l}`))
    const response = NextResponse.next()
    if (lngInReferer) response.cookies.set(cookieName, lngInReferer)
    return response
  }

  return NextResponse.next()
}

// middleware.ts

3. locale 파일 생성

{
  "title": "Next.js i18n 적용하기",
  "desc": "with App Routing",
  "link": "{{link}}로 이동"
}

// i18n/locales/ko/home.json

{
  "title": "Implementing Next.js i18n",
  "desc": "with App Routing",
  "link": "Go to {{link}}"
}

// i18n/locales/en/home.json

4. i18n 적용

RootLayout에 lng params를 추가한다.

import { languages } from '@/i18n/settings';

export const generateStaticParams = async () => {
  return languages.map((lng) => ({ lng }));
};

const RootLayout = ({
  children,
  params: { lng },
}: RootLayoutProps & PropsLanguage) => {
  return (
    <html lang={lng} dir={dir(lng)}>
      <body>
        <Providers>
          <Layout>{children}</Layout>
        </Providers>
      </body>
    </html>
  );
};

export default RootLayout;

// app/layout.tsx

만약 lng params가 없을 경우 default language 경로로 redirection한다. 필자는 기본 경로를 /home으로 설정했다.

import { redirect } from 'next/navigation';

import { fallbackLng, languages } from '@/i18n/settings';

export default async function Page({ params: { lng } }: { params: { lng: string }) {
  if (languages.indexOf(lng) < 0) lng = fallbackLng;
  redirect(`/${lng}/home`);
}

// app/page.tsx

index와 client에서 각각 가져와 locale과 namespace를 지정 후 테스트한다.

import { useTranslation } from '@/i18n';

export default async function Head({
  params: { lng },
}: {
  params: {
    lng: string;
  };
}) {
  const { t } = await useTranslation(lng, 'home');

  return (
    <>
      <title>{t('title')}</title>
      <meta name="description" content={t('desc')} />
    </>
  );
}

// app/[lng]/[home]/head.tsx

import { useTranslation } from '@/i18n/client'

export default function Page({ params: { lng } }: {
  params: {
    lng: string;
  };
}) {
  const { t } = useTranslation(lng, 'home')
  return (
    <>
      <main>
          <div>{t('title')}</div>
          <div>{t('desc')}</div>
        {languages.filter((l) => lng !== l).map((l, index) => {
          return (
            <span key={l}>
              {index > 0 && (' or ')}
              <Link href={`/${l}/home`}>{t('link', { link: l })}</Link>
            </span>
          )
        })}
      </main>
    </>
  )
}

// app/[lng]/[home]/page.tsx

Preview

📕 Reference

• Github - next-i18next

개발자를 희망하는 죠르디가 카카오에 면접을 보러 왔습니다.

코로나 바이러스 감염 예방을 위해 응시자들은 거리를 둬서 대기를 해야하는데 개발 직군 면접인 만큼 아래와 같은 규칙으로 대기실에 거리를 두고 앉도록 안내하고 있습니다.

대기실은 5개이며, 각 대기실은 5x5 크기입니다. 거리두기를 위하여 응시자들 끼리는 맨해튼 거리1가 2 이하로 앉지 말아 주세요. 단 응시자가 앉아있는 자리 사이가 파티션으로 막혀 있을 경우에는 허용합니다. 예를 들어,

5개의 대기실을 본 죠르디는 각 대기실에서 응시자들이 거리두기를 잘 기키고 있는지 알고 싶어졌습니다. 자리에 앉아있는 응시자들의 정보와 대기실 구조를 대기실별로 담은 2차원 문자열 배열 places가 매개변수로 주어집니다. 각 대기실별로 거리두기를 지키고 있으면 1을, 한 명이라도 지키지 않고 있으면 0을 배열에 담아 return 하도록 solution 함수를 완성해 주세요.

🚨제한사항

• places의 행 길이(대기실 개수) = 5

  • places의 각 행은 하나의 대기실 구조를 나타냅니다.

• places의 열 길이(대기실 세로 길이) = 5

• places의 원소는 P,O,X로 이루어진 문자열입니다.

  • places 원소의 길이(대기실 가로 길이) = 5
  • P는 응시자가 앉아있는 자리를 의미합니다.
  • O는 빈 테이블을 의미합니다.
  • X는 파티션을 의미합니다.

• 입력으로 주어지는 5개 대기실의 크기는 모두 5x5 입니다.

• return 값 형식

  • 1차원 정수 배열에 5개의 원소를 담아서 return 합니다.
  • places에 담겨 있는 5개 대기실의 순서대로, 거리두기 준수 여부를 차례대로 배열에 담습니다.
  • 각 대기실 별로 모든 응시자가 거리두기를 지키고 있으면 1을, 한 명이라도 지키지 않고 있으면 0을 담습니다.

🧾입출력 예

function solution(places) {
  const result = [];
  for (const place of places) {
    let isSafePlace = 1;

    // 대기실을 순회하며 응시자의 자리에 대해 거리두기를 확인
    for (let i = 0; i < 5; i++) {
      for (let j = 0; j < 5; j++) {
        // 응시자가 앉아있는데
        if (place[i][j] === "P") {
          // 거리두기를 지키지 않으면
          if (!isSafe(place, i, j)) {
            isSafePlace = 0;
            break;
          }
        }
      }

      if (!isSafePlace) {
        break;
      }
    }

    result.push(isSafePlace);
  }

  return result;
}

function isSafe(place, x, y) {
  // 상하좌우 방향을 나타내는 배열
  const dx = [0, 0, 1, -1];
  const dy = [1, -1, 0, 0];

  for (let i = 0; i < 4; i++) {
    // 인접한 위치 좌표 계산
    const nx = x + dx[i];
    const ny = y + dy[i];

    // 대기실 범위 이내 여부 확인
    if (nx >= 0 && nx < 5 && ny >= 0 && ny < 5) {
      // 맨해튼 거리가 1인 경우
      if (place[nx][ny] === "P") {
        return false;
        // 인접한 위치에 빈 테이블이 있는 경우
      } else if (place[nx][ny] === "O") {
        for (let j = 0; j < 4; j++) {
          // 빈 테이블을 기준으로 다른 방향으로 인접한 위치 좌표 계산
          const nnx = nx + dx[j];
          const nny = ny + dy[j];

          if (nnx >= 0 && nnx < 5 && nny >= 0 && nny < 5) {
            // 현재 응시자의 위치가 아닌 경우
            if (nnx !== x || nny !== y) {
              // 맨해튼 거리가 2이고 파티션 없이 응시자가 있는 경우
              if (place[nnx][nny] === "P") {
                return false;
              }
            }
          }
        }
      }
    }
  }

  // 거리두기를 모두 지키면 true
  return true;
}

🔗 문제 링크

프로그래머스 - 거리두기 확인하기

취업 코칭 및 이력서 특강까지, 삽질하고 있는 내게 좋은 기회가 될 것 같아 바로 지원하였다.

프론트엔드 뿐만 아니라 다양한 분야를 지원해준다. 비용이 따로 없어 손해볼 것 없으니 일단 신청 버튼 누르자.

사전과제

사전과제는 챌린지 참여를 다짐하고 학습을 준비하기 위한 용도이며 학습 커리큘럼이 사전 미션을 기반으로 내용이 구성되어 있다고 한다. 내용은 아래와 같다.

1. CSR(Client-side Rendering)이란 무엇이며, 그것의 장단점에 대하여 설명해주세요.
2. SPA(Single Page Application)로 구성된 웹 앱에서 SSR(Server-side Rendering)이 필요한 이유에 대하여 설명해주세요.
3. Next.js 프로젝트에서 yarn start(or npm run start) 스크립트를 실행했을 때 실행되는 코드를 Next.js Github 레포지토리에서 찾은 뒤, 해당 파일에 대한 간단한 설명을 첨부해주세요.
   • https://nextjs.org/docs/getting-started (Next.js 세팅 가이드)
   • https://github.com/vercel/next.js/ (Next.js Github 레포지토리)
   • _document.js, _app.js, getServerSideProps 같은 요소들에 대해 설명을 요구하는 과제가 아닙니다. 오히려 Next.js 코드 베이스 내부를 살펴보라는 의미입니다.

1번, 2번처럼 CSR의 정의와 장단점, SPA의 SSR 필요성 등은 익숙히 보았으나, 3번처럼 프레임워크의 코드 작동원리와 구조를 직접 뜯어보는 경험은 정말 좋았다.

• Next.js Github 레포지토리

CSR(Client-side Rendering)

CSR (Client-side Rendering)은 웹 애플리케이션의 렌더링 방식 중 하나로, 브라우저에서 JavaScript를 이용하여 동적으로 콘텐츠를 생성하는 방식이다. CSR에서는 초기에 빈 페이지가 로드되고, 클라이언트 측 JavaScript 코드가 실행되면서 필요한 데이터를 서버로부터 비동기적으로 가져와서 렌더링한다.

장점

1. 사용자 경험(UX)이 향상될 수 있다.

   사용자가 페이지를 빠르게 로드하고 상호작용할 수 있으며, 필요한 데이터만 가져와서 업데이트할 수 있다.

2. 서버 부하가 감소한다.

   서버는 초기 렌더링 후 클라이언트 측에서 대부분의 작업을 처리하므로, 서버의 자원 사용량이 감소한다.

단점

1. 초기 로딩 속도가 느릴 수 있다.

   페이지가 비어 있는 상태로 시작하고, 필요한 데이터와 JavaScript를 다운로드해야 하므로 초기 로딩 시간이 필요하다.

2. 검색 엔진 최적화(SEO)에 어려움을 겪을 수 있다.

   검색 엔진은 CSR 방식으로 렌더링된 페이지의 콘텐츠를 인식하기 어렵다.

SSR(Server-Side Rendering)

SSR (Server-side Rendering)은 웹 애플리케이션의 렌더링 방식 중 하나로, 서버에서 초기 페이지 렌더링을 처리하여 클라이언트에 완전한 HTML 페이지를 전달하는 방식입니다. 클라이언트의 요청에 따라 서버에서 필요한 데이터를 가져와 페이지를 동적으로 생성한 후, 완성된 HTML 페이지를 클라이언트에 제공합니다.

장점

1. 초기 로딩 속도가 빠르다.

   서버에서 완전한 HTML 페이지를 생성하여 전달하기 때문에, 사용자는 초기에 빠르게 콘텐츠를 볼 수 있다.

2. 검색 엔진 최적화(SEO)가 용이하다.

   검색 엔진은 HTML 페이지를 쉽게 읽고 인덱싱할 수 있으므로, 검색 결과에 페이지가 포함되기 쉽다.

3. 모든 사용자에게 동일한 콘텐츠를 제공한다.

   서버에서 페이지를 완전히 렌더링하기 때문에, 서버에서 처리되는 로직이 클라이언트의 환경에 의해 영향을 받지 않는다.

단점

1. 서버의 부하가 증가할 수 있다.

   모든 요청마다 서버에서 페이지를 렌더링하므로, 서버의 자원 사용량이 증가할 수 있다.

2. 복잡한 상호작용이 필요한 경우 추가적인 클라이언트 측 JavaScript 코드가 필요할 수 있다.

   SSR은 초기 렌더링만 처리하므로, 클라이언트 측에서 추가적인 상호작용을 위한 JavaScript 코드를 작성해야 할 수 있다.

SPA(Single Page Application)로 구성된 웹 앱은 왜 SSR이 필요할까?

SPA(Single Page Application)로 구성된 웹 앱에서 SSR(Server-side Rendering)이 필요한 이유는

검색 엔진 최적화(SEO)와 초기 로딩 속도 개선 때문이다.

이는 SPA로 구성된 웹 앱들은 기본적으로 CSR이다. SSR은 CSR의 단점을 극복하는 장점을 가졌기 때문에 이를 확인하기 위해 앞선 개념을 다진 것이다.

검색 엔진 최적화(SEO)의 중요성

1. 검색 엔진에서 노출

   대부분의 웹 사용자는 검색 엔진을 통해 정보를 찾는다. 웹 사이트가 검색 엔진에서 상위에 노출되면 더 많은 유저들이 해당 사이트를 방문할 가능성이 높아진다. 나조차도 최상단의 링크를 먼저 누르기 때문에 SEO가 그만큼 중요하다고 할 수 있다.

2. 유기적인 트래픽 증가

   검색 엔진에서 유기적인 트래픽을 유입받을 수 있다. 검색 엔진은 사용자가 원하는 정보를 제공하기 위해 웹 사이트의 콘텐츠를 인덱싱하고 순위를 매긴다. 웹 사이트가 관련성 높은 키워드에 대해 상위에 노출되면 사용자가 해당 키워드로 검색할 때 웹 사이트로 유입되는 트래픽이 증가하며 이는 매출과 연관이 생기게 된다.

3. 브랜드 가시성 강화

   높은 검색 엔진 순위는 웹 사이트의 브랜드 가시성을 강화할 수 있다. 상위에 노출되는 웹 사이트는 사용자에게 신뢰와 신뢰성을 전달할 수 있으며, 브랜드 인지도를 향상시킨다. 사용자들은 일반적으로 상위 순위에 있는 사이트를 신뢰하고 방문하는 경향이 있다.

4. 경쟁 우위 확보

   SEO를 통해 경쟁사보다 더 나은 검색 엔진 순위를 얻을 수 있다. 경쟁이 치열한 온라인 시장에서 상위 순위에 있는 웹 사이트는 경쟁사들보다 더 많은 유저들의 관심을 받을 수 있고, 비즈니스 성과를 향상시킬 수 있다.

5. 사용자 경험 개선

   SEO는 사용자 경험을 개선하는 데에도 도움을 준다. 검색 엔진은 웹 사이트의 속도, 모바일 친화성, 콘텐츠 품질 등을 고려하여 순위를 결정한다. 따라서 SEO를 통해 웹 사이트를 최적화하면 사용자들에게 더 나은 경험을 제공할 수 있다.

초기 로딩 속도의 중요성

구글 리서치 2017에 따르면 로딩 속도가 3초를 넘어가면서부터 이탈률이 높게 나타나는 것으로 조사되었다.

SPA(Single Page Application)는 기본적으로 CSR(Client-side Rendering)이기 때문에 JavaScript를 로드하면서 사용자가 이탈할 수 있다.

이로 인해 초기 로딩 속도는 웹 서비스에서 굉장히 중요하다고 할 수 있다.

유튜브는 이처럼 JavaScript로 데이터를 가져오기 전에 초기 화면을 세팅하여 로딩을 개선하였다.

정리

SPA는 클라이언트에서 페이지를 동적으로 렌더링하므로, 초기 로딩 시에는 비어 있는 페이지가 로드된다. 이로 인해 검색 엔진은 초기 상태에서의 콘텐츠를 인식하기 어려워 SEO에 불리하다는 단점이 있다. 또한, 초기 로딩 시 필요한 JavaScript와 데이터를 다운로드해야 하므로 초기 로딩 속도가 상대적으로 느리다.

SSR은 서버에서 페이지를 렌더링하여 클라이언트에 전달하는 방식으로, 초기 로딩 시에도 완전한 페이지를 제공할 수 있다. 이는 검색 엔진이 콘텐츠를 인식하는 데 도움이 되며, 초기 로딩 속도를 개선하여 사용자 경험을 향상시킬 수 있다.

하지만 서버에서 페이지를 렌더링하는 만큼 서버의 부하가 증가한다는 단점이 있다는 것을 인지하자.

Next.js 프로젝트에서 yarn start(or npm run start) 스크립트를 실행했을 때

우리는 Next.js 프레임워크를 통해 프로젝트를 생성할 수 있다. 먼저, 프로젝트를 생성하는 명령어를 터미널에 입력한다.

npx create-next-app my-app

성공적으로 생성되었다. 생성된 프로젝트의 pakage.json에서 script를 확인해보자.

...
"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
...

• next dev : 로컬에서 development 환경으로 웹 서버를 실행한다.
• next build : 작성된 코드를 build 한다.
• next start : 로컬에서 production 환경으로 웹 서버를 실행한다. 이때, 빌드된 .next/ 폴더가 있어야 한다.
• next lint : 정적 분석 도구로 내가 작성한 코드가 규칙에 적합한지 확인한다.

이제 어떤 코드가 next start 명령어로 작동되는지 Next.js Github 레포지토리로 이동해보자.

처음에는 헤맸으나 명령어에 맞는 코드네임이 잘 구분되어 있어 찾을 수 있었다.

#!/usr/bin/env node

import arg from 'next/dist/compiled/arg/index.js'
import { startServer } from '../server/lib/start-server'
import { getPort, printAndExit } from '../server/lib/utils'
import isError from '../lib/is-error'
import { getProjectDir } from '../lib/get-project-dir'
import { CliCommand } from '../lib/commands'
import { resolve } from 'path'
import { PHASE_PRODUCTION_SERVER } from '../shared/lib/constants'
import loadConfig from '../server/config'

const nextStart: CliCommand = async (argv) => {
  const validArgs: arg.Spec = {
    // Types
    '--help': Boolean,
    '--port': Number,
    '--hostname': String,
    '--keepAliveTimeout': Number,

    // Aliases
    '-h': '--help',
    '-p': '--port',
    '-H': '--hostname',
  }
  let args: arg.Result<arg.Spec>
  try {
    args = arg(validArgs, { argv })
  } catch (error) {
    if (isError(error) && error.code === 'ARG_UNKNOWN_OPTION') {
      return printAndExit(error.message, 1)
    }
    throw error
  }
  if (args['--help']) {
    console.log(`
      Description
        Starts the application in production mode.
        The application should be compiled with \`next build\` first.

      Usage
        $ next start <dir> -p <port>`

      ...
    process.exit(0)
  }

  const dir = getProjectDir(args._[0])
  const host = args['--hostname']
  const port = getPort(args)

  const keepAliveTimeoutArg: number | undefined = args['--keepAliveTimeout']
  if (
    typeof keepAliveTimeoutArg !== 'undefined' &&
    (Number.isNaN(keepAliveTimeoutArg) ||
      !Number.isFinite(keepAliveTimeoutArg) ||
      keepAliveTimeoutArg < 0)
  ) {
    printAndExit(
      `Invalid --keepAliveTimeout, expected a non negative number but received "${keepAliveTimeoutArg}"`,
      1
    )
  }

  const keepAliveTimeout = keepAliveTimeoutArg
    ? Math.ceil(keepAliveTimeoutArg)
    : undefined

  const config = await loadConfig(
    PHASE_PRODUCTION_SERVER,
    resolve(dir || '.'),
    undefined,
    undefined,
    true
  )

  await startServer({
    dir,
    isDev: false,
    hostname: host,
    port,
    keepAliveTimeout,
    useWorkers: !!config.experimental.appDir,
  })
}

export { nextStart }

// packages/next/src/cli/next-start.ts

작성된 코드를 보면 우리가 --help와 같은 옵션에 대한 실행 내용이 있다. 또한, 이러한 옵션을 줄여 쓰기 위해 alias 설정까지 하나하나 해주는 것을 깨달았다.

import를 보면 { startServer } 객체를 가져와 적용하는 것을 확인할 수 있다. 내부 코드를 들여다보자.

...
// setup server listener as fast as possible
  const server = http.createServer(async (req, res) => {
    try {
      if (handlersPromise) {
        await handlersPromise
        handlersPromise = undefined
      }
      sockets.add(res)
      res.on('close', () => sockets.delete(res))
      await requestHandler(req, res)
    } catch (err) {
      res.statusCode = 500
      res.end('Internal Server Error')
      Log.error(`Failed to handle request for ${req.url}`)
      console.error(err)
    }
  })

...

// packages/next/src/server/lib/start-server.ts

코드를 살펴보면 createServer 메서드를 사용하여 서버를 활성화 해준다는 것을 알 수 있었다. 별 생각 없이 입력했던 npm start에서 Socket을 열어 서버를 활성화 해주고 관련 옵션들에 관해 콘솔을 찍어준다는걸 직접 확인할 수 있었다.

프레임워크가 좋지만, 무작정 사용하기 보다 근본을 이해하는 것이 중요하다는 것을 느꼈다. 이러한 개념을 이해하고 환경세팅을 하나하나 만들 수 있는 능력을 갖추는 것이 나의 개발 수명을 결정짓는 하나의 척도가 아닐까.

영재는 택배상자를 트럭에 싣는 일을 합니다. 영재가 실어야 하는 택배상자는 크기가 모두 같으며 1번 상자부터 n번 상자까지 번호가 증가하는 순서대로 컨테이너 벨트에 일렬로 놓여 영재에게 전달됩니다. 컨테이너 벨트는 한 방향으로만 진행이 가능해서 벨트에 놓인 순서대로(1번 상자부터) 상자를 내릴 수 있습니다. 하지만 컨테이너 벨트에 놓인 순서대로 택배상자를 내려 바로 트럭에 싣게 되면 택배 기사님이 배달하는 순서와 택배상자가 실려 있는 순서가 맞지 않아 배달에 차질이 생깁니다. 따라서 택배 기사님이 미리 알려준 순서에 맞게 영재가 택배상자를 실어야 합니다.

만약 컨테이너 벨트의 맨 앞에 놓인 상자가 현재 트럭에 실어야 하는 순서가 아니라면 그 상자를 트럭에 실을 순서가 될 때까지 잠시 다른 곳에 보관해야 합니다. 하지만 고객의 물건을 함부로 땅에 둘 수 없어 보조 컨테이너 벨트를 추가로 설치하였습니다. 보조 컨테이너 벨트는 앞 뒤로 이동이 가능하지만 입구 외에 다른 면이 막혀 있어서 맨 앞의 상자만 뺄 수 있습니다(즉, 가장 마지막에 보조 컨테이너 벨트에 보관한 상자부터 꺼내게 됩니다). 보조 컨테이너 벨트를 이용해도 기사님이 원하는 순서대로 상자를 싣지 못 한다면, 더 이상 상자를 싣지 않습니다.

예를 들어, 영재가 5개의 상자를 실어야 하며, 택배 기사님이 알려준 순서가 기존의 컨테이너 벨트에 네 번째, 세 번째, 첫 번째, 두 번째, 다섯 번째 놓인 택배상자 순서인 경우, 영재는 우선 첫 번째, 두 번째, 세 번째 상자를 보조 컨테이너 벨트에 보관합니다. 그 후 네 번째 상자를 트럭에 싣고 보조 컨테이너 벨트에서 세 번째 상자 빼서 트럭에싣습니다. 다음으로 첫 번째 상자를 실어야 하지만 보조 컨테이너 벨트에서는 두 번째 상자를, 기존의 컨테이너 벨트에는 다섯 번째 상자를 꺼낼 수 있기 때문에 더이상의 상자는 실을 수 없습니다. 따라서 트럭에는 2개의 상자만 실리게 됩니다.

택배 기사님이 원하는 상자 순서를 나타내는 정수 배열 order가 주어졌을 때, 영재가 몇 개의 상자를 실을 수 있는지 return 하는 solution 함수를 완성하세요.

🚨제한사항

• 1 ≤ order의 길이 ≤ 1,000,000
• order는 1이상 order의 길이 이하의 모든 정수가 한번씩 등장합니다.
• order[i]는 기존의 컨테이너 벨트에 order[i]번째 상자를 i+1번째로 트럭에 실어야 함을 의미합니다.

🧾입출력 예

🔑풀이

function solution(order) {
  let result = 0;
  const stack = [];

  for (let i = 1; i <= order.length; i++) {
    stack.push(i);

    // 스택의 상자 번호가 주어진 순서와 일치하는지 확인
    while (stack.length !== 0 && stack.at(-1) === order[result]) {
      stack.pop(); // 일치하는 상자 번호는 스택에서 제거
      result++;
    }
  }

  return result;
}

🧱 알고리즘

스택 알고리즘(Stack algorithm) - Wikipedia

🔗 문제 링크

프로그래머스 - 택배상자

어느 공원 놀이터에는 시소가 하나 설치되어 있습니다. 이 시소는 중심으로부터 2(m), 3(m), 4(m) 거리의 지점에 좌석이 하나씩 있습니다. 이 시소를 두 명이 마주 보고 탄다고 할 때, 시소가 평형인 상태에서 각각에 의해 시소에 걸리는 토크의 크기가 서로 상쇄되어 완전한 균형을 이룰 수 있다면 그 두 사람을 시소 짝꿍이라고 합니다. 즉, 탑승한 사람의 무게와 시소 축과 좌석 간의 거리의 곱이 양쪽 다 같다면 시소 짝꿍이라고 할 수 있습니다. 사람들의 몸무게 목록 weights이 주어질 때, 시소 짝꿍이 몇 쌍 존재하는지 구하여 return 하도록 solution 함수를 완성해주세요.

🚨제한사항

• 2 ≤ weights의 길이 ≤ 100,000
• 100 ≤ weights[i] ≤ 1,000
  • 몸무게 단위는 N(뉴턴)으로 주어집니다.
  • 몸무게는 모두 정수입니다.

🧾입출력 예

🔑풀이

function solution(weights) {
  const map = {};
  const ratio = [1, 3 / 2, 4 / 3, 2]; // 비율 배열

  // 무게를 내림차순 정렬 후 reduce로 합산
  return weights
    .sort((a, b) => b - a)
    .reduce((result, weight) => {
      // 해당 무게의 비율을 곱하여 result에 합산
      ratio.map((v) => (result += map[weight * v] || 0)); 

      // 해당 무게의 등장 횟수 1 증가
      map[weight] = (map[weight] || 0) + 1; 
      return result;
    }, 0);
}

🔗 문제 링크

프로그래머스 - 시소 짝꿍

두 정수 X, Y의 임의의 자리에서 공통으로 나타나는 정수 k(0 ≤ k ≤ 9)들을 이용하여 만들 수 있는 가장 큰 정수를 두 수의 짝꿍이라 합니다(단, 공통으로 나타나는 정수 중 서로 짝지을 수 있는 숫자만 사용합니다). X, Y의 짝꿍이 존재하지 않으면, 짝꿍은 -1입니다. X, Y의 짝꿍이 0으로만 구성되어 있다면, 짝꿍은 0입니다.

예를 들어, X = 3403이고 Y = 13203이라면, X와 Y의 짝꿍은 X와 Y에서 공통으로 나타나는 3, 0, 3으로 만들 수 있는 가장 큰 정수인 330입니다. 다른 예시로 X = 5525이고 Y = 1255이면 X와 Y의 짝꿍은 X와 Y에서 공통으로 나타나는 2, 5, 5로 만들 수 있는 가장 큰 정수인 552입니다(X에는 5가 3개, Y에는 5가 2개 나타나므로 남는 5 한 개는 짝 지을 수 없습니다.) 두 정수 X, Y가 주어졌을 때, X, Y의 짝꿍을 return하는 solution 함수를 완성해주세요.

🚨제한사항

• 3 ≤ X, Y의 길이(자릿수) ≤ 3,000,000입니다.
• X, Y는 0으로 시작하지 않습니다.
• X, Y의 짝꿍은 상당히 큰 정수일 수 있으므로, 문자열로 반환합니다.

🧾입출력 예

🔑풀이

function solution(X, Y) {
  let result = "";

  // 각 숫자의 등장 횟수를 저장하는 함수
  const setting = (str) => {
    const dict = {};

    [...str].forEach((v) =>
      dict[v] !== undefined ? dict[v]++ : (dict[v] = 1)
    );
    return dict;
  };

  const dictX = setting(X);
  const dictY = setting(Y);

  // 가장 큰 숫자를 구하기 위해 9부터 0까지 역순으로 순회
  for (let i = 9; i >= 0; i--) {
    // 등장 횟수에서 더 적은 값만큼 숫자를 문자열에 추가
    if (dictX[i] && dictY[i])
      result += String(i).repeat(Math.min(dictX[i], dictY[i]));
  }

  // 결과가 0으로만 구성된 경우 return "0"
  if (result[0] === "0") return "0";
  return result.length > 0 ? result : "-1";
}

처음에 테스트 케이스 06 ~ 15까지 실패하였는데 큰 정수의 지수화를 고려하지 못하였다. result[0] 값을 통해 분기처리를 달리하였다.

// 헤맸던 부분 - 테스트 케이스 06 ~ 15까지 실패

/*
 제한사항 =>`X`, `Y`의 짝꿍은 상당히 큰 정수일 수 있으므로, 문자열로 반환합니다.
 숫자가 너무 커서 지수화 되는 경우를 고려하지 못하였다. ex) 1e18
*/

// Before
return result.length > 0 ? String(+result) : "-1";

// After
if (result[0] === "0") return "0";
return result.length > 0 ? result : "-1";

🔗 문제 링크

프로그래머스 - 숫자 짝꿍

혹시나 ServerComponent가 뭐지? 싶다면 Next.js의 13 베타 버전에 대한 내용이니 여기서 잠깐 훑어보면 대충 짐작은 갈 것이다.

=> [Next.js] Server/Client Component

Failed to Compile

Uncaught Error: NextRouter was not mounted. https://nextjs.org/docs/messages/next-router-not-mounted at useRouter (webpack-internal:///(app-client)/./node_modules/next/dist/client/router.js:141:15)

/[id]/page.tsx 내에서 params 값을 가져오기 위해 useRouter를 import 하자마자 발생한 에러이다.

Server Component에서 최상단에 "use client";만 달아준다면 모든 Hook을 사용할 수 있던게 아니었던 것인가!

공식 문서 내용은 다음과 같다

The new useRouter hook should be imported from next/navigation and not next/router The pathname string has been removed and is replaced by usePathname() The query object has been removed and is replaced by useSearchParams() router.events is not currently supported. See below.

요약하자면

이제 문자열 useRouter().pathname과 객체 useRouter().query는 마이그레이션 됐다 ㅅㄱ

그렇다. 이제 더 이상 params 값을 호출하기 위해 useRouter 훅을 가져오는 것이 아니라 usePathname과 useSearchParams 훅을 가져다가 사용하면 된다.

usePathname

현재 url을 확인할 수 있는 훅이다. 쿼리스트링 값은 제외하고 가져온다.

'use client'

import { usePathname } from 'next/navigation'

export default function SearchBar() {
  const pathname = usePathname();

  // URL -> `/dashboard?search=my-project`
  // `Search: /dashboard`
  return <>Search: {pathname}</>
}

useSearchParams

쿼리 스트링을 하기 위한 훅으로 아래 예시와 함께 살펴보자.

'use client'

import { useSearchParams } from 'next/navigation'

export default function SearchBar() {
  const searchParams = useSearchParams()

  const getItem = searchParams.get('search')
  const hasItem = searchParams.has('search')

  // URL -> `/dashboard?search=my-project`
  // get -> `Search: my-project`
  // has -> `true`
  return <>Search: {search}</>0
}

get 메서드로 query의 value 값을 가져올 수 있고 has 메서드로 query 키의 존재 여부를 확인할 수 있다.

params 값만 가져올 수는 없을까?

그렇다면 usePathname 훅으로 기존의 params 값을 가져와야 하는가?

만약 /movie/genre/5라고 가정한다면 split("/")로 잘라서 사용하는 것은 굉장히 비효율적이다.

Stack Overflow의 한 질답에서 답을 찾을 수 있었다.

export default function Page({ params }: { params: { id: number } }) {

  // URL -> `/movie/genre/5`
  // `ID: 5`
  return <>ID: {params.id}</>;
}

// app/movie/genre/[id]/page.tsx

page.tsx에서 params라는 props를 가져올 수 있었다! 즉, 전체 url이 필요하거나 쿼리 스트링이 필요하지 않다면 Hook을 가져올 필요 없이 params를 props에서 가져오도록 하면 된다.

레퍼런스

Next.js - useRouter Next.js - usePathname Next.js - useSearchParams Stack Overflow - params

휴대폰의 자판은 컴퓨터 키보드 자판과는 다르게 하나의 키에 여러 개의 문자가 할당될 수 있습니다. 키 하나에 여러 문자가 할당된 경우, 동일한 키를 연속해서 빠르게 누르면 할당된 순서대로 문자가 바뀝니다.

예를 들어, 1번 키에 "A", "B", "C" 순서대로 문자가 할당되어 있다면 1번 키를 한 번 누르면 "A", 두 번 누르면 "B", 세 번 누르면 "C"가 되는 식입니다.

같은 규칙을 적용해 아무렇게나 만든 휴대폰 자판이 있습니다. 이 휴대폰 자판은 키의 개수가 1개부터 최대 100개까지 있을 수 있으며, 특정 키를 눌렀을 때 입력되는 문자들도 무작위로 배열되어 있습니다. 또, 같은 문자가 자판 전체에 여러 번 할당된 경우도 있고, 키 하나에 같은 문자가 여러 번 할당된 경우도 있습니다. 심지어 아예 할당되지 않은 경우도 있습니다. 따라서 몇몇 문자열은 작성할 수 없을 수도 있습니다.

이 휴대폰 자판을 이용해 특정 문자열을 작성할 때, 키를 최소 몇 번 눌러야 그 문자열을 작성할 수 있는지 알아보고자 합니다.

1번 키부터 차례대로 할당된 문자들이 순서대로 담긴 문자열배열 keymap과 입력하려는 문자열들이 담긴 문자열 배열 targets가 주어질 때, 각 문자열을 작성하기 위해 키를 최소 몇 번씩 눌러야 하는지 순서대로 배열에 담아 return 하는 solution 함수를 완성해 주세요.

단, 목표 문자열을 작성할 수 없을 때는 -1을 저장합니다.

🚨제한사항

• 1 ≤ keymap의 길이 ≤ 100

  • 1 ≤ keymap의 원소의 길이 ≤ 100
  • keymap[i]는 i + 1번 키를 눌렀을 때 순서대로 바뀌는 문자를 의미합니다.
    • 예를 들어 keymap[0] = "ABACD" 인 경우 1번 키를 한 번 누르면 A, 두 번 누르면 B, 세 번 누르면 A 가 됩니다.
      • keymap의 원소의 길이는 서로 다를 수 있습니다.
      • keymap의 원소는 알파벳 대문자로만 이루어져 있습니다.

• 1 ≤ targets의 길이 ≤ 100

  • 1 ≤ targets의 원소의 길이 ≤ 100
  • targets의 원소는 알파벳 대문자로만 이루어져 있습니다.

🧾입출력 예

🔑풀이

function solution(keymap, targets) {
  return targets.map((target) =>
    target.split("").reduce((acc, cur) => {
      // 현재까지 누른 키의 횟수(acc)가 -1인 경우
      // 이후 문자열 작성이 불가능 => return -1
      if (acc === -1) return -1;

      // 현재 문자(cur)가 할당된 키들 서치
      const temp = keymap
        .map((key) => key.indexOf(cur))
        .filter((val) => val !== -1);

      // 할당된 키가 없는 경우, 문자열 작성이 불가능 => return -1
      // 있는 경우 할당된 키 중 최솟값를 선택, index는 0부터 시작하므로 값에 +1
      return temp.length === 0 ? -1 : acc + Math.min(...temp) + 1;
    }, 0)
  );
}

🔗 문제 링크

프로그래머스 - 대충 만든 자판

호텔을 운영 중인 코니는 최소한의 객실만을 사용하여 예약 손님들을 받으려고 합니다. 한 번 사용한 객실은 퇴실 시간을 기준으로 10분간 청소를 하고 다음 손님들이 사용할 수 있습니다. 예약 시각이 문자열 형태로 담긴 2차원 배열 book_time이 매개변수로 주어질 때, 코니에게 필요한 최소 객실의 수를 return 하는 solution 함수를 완성해주세요.

🚨제한사항

• 1 ≤ book_time의 길이 ≤ 1,000
  • book_time[i]는 ["HH:MM", "HH:MM"]의 형태로 이루어진 배열입니다
    • [대실 시작 시각, 대실 종료 시각] 형태입니다.
  • 시각은 HH:MM 형태로 24시간 표기법을 따르며, "00:00" 부터 "23:59" 까지로 주어집니다.
    • 예약 시각이 자정을 넘어가는 경우는 없습니다.
    • 시작 시각은 항상 종료 시각보다 빠릅니다.

🧾입출력 예

🔑풀이

function solution(book_time) {
  let room = [];

  // 오름차순 정렬 후 순회
  book_time.sort().forEach(([start, end]) => {
    const startTime = toMinute(start);
    const endTime = toMinute(end) + 10;

    // 시작 시간(startTime)보다 작은 값 서치 => 사용이 끝난 방 확인
    const idx = room.findIndex((v) => v <= startTime);

    // 없다면 종료 시간(endTime) push => 방 추가
    // 있다면 해당 room의 종료 시간(endTime) 갱신 => 사용이 끝난 방에 들어감
    if (idx === -1) room.push(endTime);
    else room[idx] = endTime;
  });

  return room.length;
}

// 분으로 통일하는 함수
function toMinute(str) {
  const [hour, minute] = str.split(":");
  return hour * 60 + +minute;
}

🔗 문제 링크

프로그래머스 - 호텔 대실

어느 학교에 페인트가 칠해진 길이가 n미터인 벽이 있습니다. 벽에 동아리 · 학회 홍보나 회사 채용 공고 포스터 등을 게시하기 위해 테이프로 붙였다가 철거할 때 떼는 일이 많고 그 과정에서 페인트가 벗겨지곤 합니다. 페인트가 벗겨진 벽이 보기 흉해져 학교는 벽에 페인트를 덧칠하기로 했습니다.

넓은 벽 전체에 페인트를 새로 칠하는 대신, 구역을 나누어 일부만 페인트를 새로 칠 함으로써 예산을 아끼려 합니다. 이를 위해 벽을 1미터 길이의 구역 n개로 나누고, 각 구역에 왼쪽부터 순서대로 1번부터 n번까지 번호를 붙였습니다. 그리고 페인트를 다시 칠해야 할 구역들을 정했습니다.

벽에 페인트를 칠하는 롤러의 길이는 m미터이고, 롤러로 벽에 페인트를 한 번 칠하는 규칙은 다음과 같습니다.

• 롤러가 벽에서 벗어나면 안 됩니다.
• 구역의 일부분만 포함되도록 칠하면 안 됩니다.

즉, 롤러의 좌우측 끝을 구역의 경계선 혹은 벽의 좌우측 끝부분에 맞춘 후 롤러를 위아래로 움직이면서 벽을 칠합니다. 현재 페인트를 칠하는 구역들을 완전히 칠한 후 벽에서 롤러를 떼며, 이를 벽을 한 번 칠했다고 정의합니다.

한 구역에 페인트를 여러 번 칠해도 되고 다시 칠해야 할 구역이 아닌 곳에 페인트를 칠해도 되지만 다시 칠하기로 정한 구역은 적어도 한 번 페인트칠을 해야 합니다. 예산을 아끼기 위해 다시 칠할 구역을 정했듯 마찬가지로 롤러로 페인트칠을 하는 횟수를 최소화하려고 합니다.

정수 n, m과 다시 페인트를 칠하기로 정한 구역들의 번호가 담긴 정수 배열 section이 매개변수로 주어질 때 롤러로 페인트칠해야 하는 최소 횟수를 return 하는 solution 함수를 작성해 주세요.

🚨제한사항

• 1 ≤ m ≤ n ≤ 100,000
• 1 ≤ section의 길이 ≤ n
  • 1 ≤ section의 원소 ≤ n
  • section의 원소는 페인트를 다시 칠해야 하는 구역의 번호입니다.
  • section에서 같은 원소가 두 번 이상 나타나지 않습니다.
  • section의 원소는 오름차순으로 정렬되어 있습니다.

🧾입출력 예

🔑풀이

function solution(n, m, section) {
  let result = 0;
  let last = -1;

  section.forEach((v) => {
    // 현재 영역(v)이 마지막에 칠한 영역(last)보다 크다면
    if (v > last) {
      // 마지막 칠한 영역(last) 갱신
      last = v + m - 1;
      result++;
    }
  });

  return result;
}

🔗 문제 링크

프로그래머스 - 덧칠하기

A 나라가 B 나라를 침공하였습니다. B 나라의 대부분의 전략 자원은 아이기스 군사 기지에 집중되어 있기 때문에 A 나라는 B 나라의 아이기스 군사 기지에 융단폭격을 가했습니다. A 나라의 공격에 대항하여 아이기스 군사 기지에서는 무수히 쏟아지는 폭격 미사일들을 요격하려고 합니다. 이곳에는 백발백중을 자랑하는 요격 시스템이 있지만 운용 비용이 상당하기 때문에 미사일을 최소로 사용해서 모든 폭격 미사일을 요격하려 합니다. A 나라와 B 나라가 싸우고 있는 이 세계는 2 차원 공간으로 이루어져 있습니다. A 나라가 발사한 폭격 미사일은 x 축에 평행한 직선 형태의 모양이며 개구간을 나타내는 정수 쌍 (s, e) 형태로 표현됩니다. B 나라는 특정 x 좌표에서 y 축에 수평이 되도록 미사일을 발사하며, 발사된 미사일은 해당 x 좌표에 걸쳐있는 모든 폭격 미사일을 관통하여 한 번에 요격할 수 있습니다. 단, 개구간 (s, e)로 표현되는 폭격 미사일은 s와 e에서 발사하는 요격 미사일로는 요격할 수 없습니다. 요격 미사일은 실수인 x 좌표에서도 발사할 수 있습니다. 각 폭격 미사일의 x 좌표 범위 목록 targets이 매개변수로 주어질 때, 모든 폭격 미사일을 요격하기 위해 필요한 요격 미사일 수의 최솟값을 return 하도록 solution 함수를 완성해 주세요.

🚨제한사항

• 1 ≤ targets의 길이 ≤ 500,000
• targets의 각 행은 [s,e] 형태입니다.
  • 이는 한 폭격 미사일의 x 좌표 범위를 나타내며, 개구간 (s, e)에서 요격해야 합니다.
  • 0 ≤ s < e ≤ 100,000,000

🧾입출력 예

🔑풀이

function solution(targets) {
  let result = 0;
  let prev = -1;

  // end 값을 기준으로 오름차순 정렬
  // => 먼저 요격해야 할 미사일이 배열의 맨 앞으로 옴
  targets
    .sort((a, b) => a[1] - b[1])
    .forEach((v) => {
      const [start, end] = v;

      // 이전에 요격한 미사일 끝 값 <= 현재 요소의 시작 값
      if (prev <= start) {
        // 요격한 미사일 끝 값 갱신
        prev = end;
        result++;
      }
    });

  return result;
}

🧱 알고리즘

그리디 알고리즘(Greedy algorithm) - Wikipedia

🔗 문제 링크

프로그래머스 - 요격 시스템

튜브가 활동하는 코딩 동아리에서는 전통적으로 해오는 게임이 있다. 이 게임은 여러 사람이 둥글게 앉아서 숫자를 하나씩 차례대로 말하는 게임인데, 규칙은 다음과 같다.

1. 숫자를 0부터 시작해서 차례대로 말한다. 첫 번째 사람은 0, 두 번째 사람은 1, … 열 번째 사람은 9를 말한다.
2. 10 이상의 숫자부터는 한 자리씩 끊어서 말한다. 즉 열한 번째 사람은 10의 첫 자리인 1, 열두 번째 사람은 둘째 자리인 0을 말한다.

이렇게 게임을 진행할 경우, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 1, 0, 1, 1, 1, 2, 1, 3, 1, 4, … 순으로 숫자를 말하면 된다.

한편 코딩 동아리 일원들은 컴퓨터를 다루는 사람답게 이진수로 이 게임을 진행하기도 하는데, 이 경우에는 0, 1, 1, 0, 1, 1, 1, 0, 0, 1, 0, 1, 1, 1, 0, 1, 1, 1, … 순으로 숫자를 말하면 된다.

이진수로 진행하는 게임에 익숙해져 질려가던 사람들은 좀 더 난이도를 높이기 위해 이진법에서 십육진법까지 모든 진법으로 게임을 진행해보기로 했다. 숫자 게임이 익숙하지 않은 튜브는 게임에 져서 벌칙을 받는 굴욕을 피하기 위해, 자신이 말해야 하는 숫자를 스마트폰에 미리 출력해주는 프로그램을 만들려고 한다. 튜브의 프로그램을 구현하라.

🧾 입출력 예

입력 형식

진법 n, 미리 구할 숫자의 갯수 t, 게임에 참가하는 인원 m, 튜브의 순서 p 가 주어진다.

• 2 ≦ n ≦ 16
• 0 ＜ t ≦ 1000
• 2 ≦ m ≦ 100
• 1 ≦ p ≦ m

출력 형식

튜브가 말해야 하는 숫자 t개를 공백 없이 차례대로 나타낸 문자열. 단, 1015는 각각 대문자 AF로 출력한다.

예제

🔑 풀이

function solution(n, t, m, p) {
  let str = "";

  // (인원 수 * 미리 구할 수)만큼 반복
  for (let i = 0; i < m * t; i++) {
    str += i.toString(n).toUpperCase();
  }

  let result = "";
  let cnt = 0;

  // 미리 구할 수까지 반복
  while (result.length < t) {
    // 인원 수만큼 문자열 커팅
    const temp = str.substring(cnt, cnt + m);

    // (순서-1)번째 값을 문자열에 추가 -> index는 0부터
    result += temp[p - 1];
    cnt += m;
  }

  return result;
}

🔗 문제 링크

프로그래머스 - N진수 게임

주차장의 요금표와 차량이 들어오고(입차) 나간(출차) 기록이 주어졌을 때, 차량별로 주차 요금을 계산하려고 합니다. 아래는 하나의 예시를 나타냅니다.

• 요금표

• 입/출차 기록

• 자동차별 주차 요금

• 어떤 차량이 입차된 후에 출차된 내역이 없다면, 23:59에 출차된 것으로 간주합니다.

  • 0000번 차량은 18:59에 입차된 이후, 출차된 내역이 없습니다. 따라서, 23:59에 출차된 것으로 간주합니다.

• 00:00부터 23:59까지의 입/출차 내역을 바탕으로 차량별 누적 주차 시간을 계산하여 요금을 일괄로 정산합니다.

• 누적 주차 시간이 기본 시간이하라면, 기본 요금을 청구합니다.

• 누적 주차 시간이 기본 시간을 초과하면, 기본 요금에 더해서, 초과한 시간에 대해서 단위 시간 마다 단위 요금을 청구합니다.

  • 초과한 시간이 단위 시간으로 나누어 떨어지지 않으면, 올림합니다.
  • ⌈a⌉ : a보다 작지 않은 최소의 정수를 의미합니다. 즉, 올림을 의미합니다.

주차 요금을 나타내는 정수 배열 fees, 자동차의 입/출차 내역을 나타내는 문자열 배열 records가 매개변수로 주어집니다. 차량 번호가 작은 자동차부터 청구할 주차 요금을 차례대로 정수 배열에 담아서 return 하도록 solution 함수를 완성해주세요.

🚨제한사항

• fees의 길이 = 4

  • fees[0] = 기본 시간(분)
  • 1 ≤ fees[0] ≤ 1,439
  • fees[1] = 기본 요금(원)
  • 0 ≤ fees[1] ≤ 100,000
  • fees[2] = 단위 시간(분)
  • 1 ≤ fees[2] ≤ 1,439
  • fees[3] = 단위 요금(원)
  • 1 ≤ fees[3] ≤ 10,000

• 1 ≤ records의 길이 ≤ 1,000

  • records의 각 원소는 "시각 차량번호 내역" 형식의 문자열입니다.

  • 시각, 차량번호, 내역은 하나의 공백으로 구분되어 있습니다.

  • 시각은 차량이 입차되거나 출차된 시각을 나타내며, HH:MM 형식의 길이 5인 문자열입니다.

    • HH:MM은 00:00부터 23:59까지 주어집니다.
    • 잘못된 시각("25:22", "09:65" 등)은 입력으로 주어지지 않습니다.

  • 차량번호는 자동차를 구분하기 위한, `0'~'9'로 구성된 길이 4인 문자열입니다.

  • 내역은 길이 2 또는 3인 문자열로, IN 또는 OUT입니다. IN은 입차를, OUT은 출차를 의미합니다.

  • records의 원소들은 시각을 기준으로 오름차순으로 정렬되어 주어집니다.

  • records는 하루 동안의 입/출차된 기록만 담고 있으며, 입차된 차량이 다음날 출차되는 경우는 입력으로 주어지지 않습니다.

  • 같은 시각에, 같은 차량번호의 내역이 2번 이상 나타내지 않습니다.

  • 마지막 시각(23:59)에 입차되는 경우는 입력으로 주어지지 않습니다.

  • 아래의 예를 포함하여, 잘못된 입력은 주어지지 않습니다.

    • 주차장에 없는 차량이 출차되는 경우
      • 주차장에 이미 있는 차량(차량번호가 같은 차량)이 다시 입차되는 경우

🧾입출력 예

🔑풀이

function solution(fees, records) {
  const parking = {};

  records.forEach((v) => {
    const [time, id, status] = v.split(" ");
    const [hour, minute] = time.split(":");
    // time을 분으로 통일
    const replaceTime = hour * 60 + +minute;

    // Object에 입고할 차량이 없다면 등록
    if (!parking[id]) {
      parking[id] = { time: 0, id };
    }

    // 현재 상태 기록
    parking[id].status = status;

    // 마지막으로 입고한 시간 기록
    if (status === "IN") {
      parking[id].lastInTime = replaceTime;
      return;
    }

    // 주차 시간에 += (현재 입고 시간 - 마지막 입고 시간)
    parking[id].time += replaceTime - parking[id].lastInTime;
  });

  // 차량 번호가 낮은 순서로 비용 return
  return Object.values(parking)
    .sort((a, b) => a.id - b.id)
    .map((v) => {
      // 최대 시간은 24 * 60 -1 = 1439 (분)
      if (v.status === "IN") v.time += 1439 - v.lastInTime;
      // 기본 시간 이내라면 기본 요금
      if (fees[0] > v.time) return fees[1];
      // 기본 요금 + (( 주차 시간 - 기본 시간 ) / 단위 시간) * 요금
      return fees[1] + Math.ceil((v.time - fees[0]) / fees[2]) * fees[3];
    });
}

🔗 문제 링크

프로그래머스 - 주차 요금 계산

이중 우선순위 큐는 다음 연산을 할 수 있는 자료구조를 말합니다.

이중 우선순위 큐가 할 연산 operations가 매개변수로 주어질 때, 모든 연산을 처리한 후 큐가 비어있으면 [0,0] 비어있지 않으면 [최댓값, 최솟값]을 return 하도록 solution 함수를 구현해주세요.

🚨제한사항

• operations는 길이가 1 이상 1,000,000 이하인 문자열 배열입니다.

• operations의 원소는 큐가 수행할 연산을 나타냅니다.

  • 원소는 “명령어 데이터” 형식으로 주어집니다
  • 최댓값/최솟값을 삭제하는 연산에서 최댓값/최솟값이 둘 이상인 경우, 하나만 삭제합니다.

• 빈 큐에 데이터를 삭제하라는 연산이 주어질 경우, 해당 연산은 무시합니다.

🧾입출력 예

🔑풀이

function solution(operations) {
  const queue = [];

  operations.forEach((v) => {
    const [command, num] = v.split(" ");

    // 명령어 I, 데이터 삽입 후 정렬
    if (command === "I") {
      queue.push(+num);
      queue.sort((a, b) => b - a);
      return;
    }

    // 명령어 D, 빈 큐에 데이터 삭제 연산 무시
    if (!queue.length) return;

    // 최댓값/최솟값 제거
    if (num === "1") queue.shift();
    if (num === "-1") queue.pop();
  });

  return queue.length ? [queue[0], queue[queue.length - 1]] : [0, 0];
}

index 값을 구하고 splice() 메서드를 활용하는 방식도 있으나, 시간복잡도상 배열을 자르고 새로 생성하는 것보다 정렬이 더 빠를 것 같아 정렬로 풀이했습니다.

🔗 문제 링크

프로그래머스 - 이중우선순위큐

양의 정수 n이 주어집니다. 이 숫자를 k진수로 바꿨을 때, 변환된 수 안에 아래 조건에 맞는 소수(Prime number)가 몇 개인지 알아보려 합니다.

• 0P0처럼 소수 양쪽에 0이 있는 경우
• P0처럼 소수 오른쪽에만 0이 있고 왼쪽에는 아무것도 없는 경우
• 0P처럼 소수 왼쪽에만 0이 있고 오른쪽에는 아무것도 없는 경우
• P처럼 소수 양쪽에 아무것도 없는 경우
• 단, P는 각 자릿수에 0을 포함하지 않는 소수입니다.
  • 예를 들어, 101은 P가 될 수 없습니다.

예를 들어, 437674을 3진수로 바꾸면 211020101011입니다. 여기서 찾을 수 있는 조건에 맞는 소수는 왼쪽부터 순서대로 211, 2, 11이 있으며, 총 3개입니다. (211, 2, 11을 k진법으로 보았을 때가 아닌, 10진법으로 보았을 때 소수여야 한다는 점에 주의합니다.) 211은 P0 형태에서 찾을 수 있으며, 2는 0P0에서, 11은 0P에서 찾을 수 있습니다.

정수 n과 k가 매개변수로 주어집니다. n을 k진수로 바꿨을 때, 변환된 수 안에서 찾을 수 있는 위 조건에 맞는 소수의 개수를 return 하도록 solution 함수를 완성해 주세요.

🚨제한사항

• 1 ≤ n ≤ 1,000,000
• 3 ≤ k ≤ 10

🧾입출력 예

function solution(n, k) {
  /*
    1. toString(N) 메서드로 진수 변환
    2. 0을 기준으로 split() => 단, `P`는 각 자릿수에 0을 포함하지 않는 소수입니다.
    3. 다시 10진수로 변경
    4. 소수 판단 후 개수 return
    */
  const numStr = n
    .toString(k)
    .split("0")
    .map((v) => v.toString(10));
  return numStr.filter((v) => isPrime(v)).length;
}

function isPrime(num) {
  if (num <= 1) return false;

  // 제곱근을 이용한 소수 판별법 (약수끼리의 곱은 대칭으로 이루어지기 때문)
  for (let i = 2; i <= Math.sqrt(num); i++) {
    if (num % i === 0) return false;
  }

  return true;
}

🧱 레퍼런스

소수 판별법 - Wikipedia

🔗 문제 링크

프로그래머스 - 방문 기록

게임 캐릭터를 4가지 명령어를 통해 움직이려 합니다. 명령어는 다음과 같습니다.

• U: 위쪽으로 한 칸 가기
• D: 아래쪽으로 한 칸 가기
• R: 오른쪽으로 한 칸 가기
• L: 왼쪽으로 한 칸 가기

캐릭터는 좌표평면의 (0, 0) 위치에서 시작합니다. 좌표평면의 경계는 왼쪽 위(-5, 5), 왼쪽 아래(-5, -5), 오른쪽 위(5, 5), 오른쪽 아래(5, -5)로 이루어져 있습니다.

예를 들어, "ULURRDLLU"로 명령했다면

• 1번 명령어부터 7번 명령어까지 다음과 같이 움직입니다.

• 8번 명령어부터 9번 명령어까지 다음과 같이 움직입니다.

이때, 우리는 게임 캐릭터가 지나간 길 중 캐릭터가 처음 걸어본 길의 길이를 구하려고 합니다. 예를 들어 위의 예시에서 게임 캐릭터가 움직인 길이는 9이지만, 캐릭터가 처음 걸어본 길의 길이는 7이 됩니다. (8, 9번 명령어에서 움직인 길은 2, 3번 명령어에서 이미 거쳐 간 길입니다)

단, 좌표평면의 경계를 넘어가는 명령어는 무시합니다.

예를 들어, "LULLLLLLU"로 명령했다면

• 1번 명령어부터 6번 명령어대로 움직인 후, 7, 8번 명령어는 무시합니다. 다시 9번 명령어대로 움직입니다.

이때 캐릭터가 처음 걸어본 길의 길이는 7이 됩니다.

명령어가 매개변수 dirs로 주어질 때, 게임 캐릭터가 처음 걸어본 길의 길이를 구하여 return 하는 solution 함수를 완성해 주세요.

🚨제한사항

• dirs는 string형으로 주어지며, 'U', 'D', 'R', 'L' 이외에 문자는 주어지지 않습니다.
• dirs의 길이는 500 이하의 자연수입니다.

🧾입출력 예

🔑풀이

function solution(dirs) {
  const command = {
    U: [0, 1],
    D: [0, -1],
    R: [1, 0],
    L: [-1, 0],
  };
  const set = new Set();
  let current = [0, 0];

  for (const move of dirs) {
    const [x, y] = command[move];
    let currentX = current[0] + x;
    let currentY = current[1] + y;

    // 좌표 평면은 (-5, -5)부터 (5, 5)
    // 좌표 값을 넘어가면 continue
    if (currentX > 5 || currentX < -5 || currentY > 5 || currentY < -5)
      continue;

    // (이전 좌표 -> 현재 좌표), (현재좌표 -> 이전 좌표)
    // 두 방향을 고려하여 set에 add
    set.add(`${current[0]}${current[1]}${currentX}${currentY}`);
    set.add(`${currentX}${currentY}${current[0]}${current[1]}`);

    // 현재 좌표 갱신
    current = [currentX, currentY];
  }

  // 2개의 경우를 추가하였기 때문에 2로 나누기
  return set.size / 2;
}

🔗 문제 링크

프로그래머스 - 방문 기록

경화는 과수원에서 귤을 수확했습니다. 경화는 수확한 귤 중 k개를 골라 상자 하나에 담아 판매하려고 합니다. 그런데 수확한 귤의 크기가 일정하지 않아 보기에 좋지 않다고 생각한 경화는 귤을 크기별로 분류했을 때 서로 다른 종류의 수를 최소화하고 싶습니다.

예를 들어, 경화가 수확한 귤 8개의 크기가 [1, 3, 2, 5, 4, 5, 2, 3] 이라고 합시다. 경화가 귤 6개를 판매하고 싶다면, 크기가 1, 4인 귤을 제외한 여섯 개의 귤을 상자에 담으면, 귤의 크기의 종류가 2, 3, 5로 총 3가지가 되며 이때가 서로 다른 종류가 최소일 때입니다.

경화가 한 상자에 담으려는 귤의 개수 k와 귤의 크기를 담은 배열 tangerine이 매개변수로 주어집니다. 경화가 귤 k개를 고를 때 크기가 서로 다른 종류의 수의 최솟값을 return 하도록 solution 함수를 작성해주세요.

🚨제한사항

• 1 ≤ k ≤ tangerine의 길이 ≤ 100,000
• 1 ≤ tangerine의 원소 ≤ 10,000,000

🧾입출력 예

🔑풀이

function solution(k, tangerine) {
  let result = 0;
  let dict = {};

  // 귤 크기별 개수 확인
  tangerine.forEach((v) => (dict[v] === undefined ? (dict[v] = 1) : dict[v]++));

  // 크기별 개수를 내림차순으로 정렬 후 순회
  Object.values(dict)
    .sort((a, b) => b - a)
    .forEach((v) => {
      // k가 0보다 작을 때 return
      if (k <= 0) return;

      // 많은 수부터 빼면서 최솟값 도출
      k -= v;
      result++;
    });

  return result;
}

🔗 문제 링크

프로그래머스 - 귤 고르기

여러 언론사에서 쏟아지는 뉴스, 특히 속보성 뉴스를 보면 비슷비슷한 제목의 기사가 많아 정작 필요한 기사를 찾기가 어렵다. Daum 뉴스의 개발 업무를 맡게 된 신입사원 튜브는 사용자들이 편리하게 다양한 뉴스를 찾아볼 수 있도록 문제점을 개선하는 업무를 맡게 되었다.

개발의 방향을 잡기 위해 튜브는 우선 최근 화제가 되고 있는 "카카오 신입 개발자 공채" 관련 기사를 검색해보았다.

• 카카오 첫 공채..'블라인드' 방식 채용
• 카카오, 합병 후 첫 공채.. 블라인드 전형으로 개발자 채용
• 카카오, 블라인드 전형으로 신입 개발자 공채
• 카카오 공채, 신입 개발자 코딩 능력만 본다
• 카카오, 신입 공채.. "코딩 실력만 본다"
• 카카오 "코딩 능력만으로 2018 신입 개발자 뽑는다"

기사의 제목을 기준으로 "블라인드 전형"에 주목하는 기사와 "코딩 테스트"에 주목하는 기사로 나뉘는 걸 발견했다. 튜브는 이들을 각각 묶어서 보여주면 카카오 공채 관련 기사를 찾아보는 사용자에게 유용할 듯싶었다.

유사한 기사를 묶는 기준을 정하기 위해서 논문과 자료를 조사하던 튜브는 "자카드 유사도"라는 방법을 찾아냈다.

자카드 유사도는 집합 간의 유사도를 검사하는 여러 방법 중의 하나로 알려져 있다. 두 집합 A, B 사이의 자카드 유사도 J(A, B)는 두 집합의 교집합 크기를 두 집합의 합집합 크기로 나눈 값으로 정의된다.

예를 들어 집합 A = {1, 2, 3}, 집합 B = {2, 3, 4}라고 할 때, 교집합 A ∩ B = {2, 3}, 합집합 A ∪ B = {1, 2, 3, 4}이 되므로, 집합 A, B 사이의 자카드 유사도 J(A, B) = 2/4 = 0.5가 된다. 집합 A와 집합 B가 모두 공집합일 경우에는 나눗셈이 정의되지 않으니 따로 J(A, B) = 1로 정의한다.

자카드 유사도는 원소의 중복을 허용하는 다중집합에 대해서 확장할 수 있다. 다중집합 A는 원소 "1"을 3개 가지고 있고, 다중집합 B는 원소 "1"을 5개 가지고 있다고 하자. 이 다중집합의 교집합 A ∩ B는 원소 "1"을 min(3, 5)인 3개, 합집합 A ∪ B는 원소 "1"을 max(3, 5)인 5개 가지게 된다. 다중집합 A = {1, 1, 2, 2, 3}, 다중집합 B = {1, 2, 2, 4, 5}라고 하면, 교집합 A ∩ B = {1, 2, 2}, 합집합 A ∪ B = {1, 1, 2, 2, 3, 4, 5}가 되므로, 자카드 유사도 J(A, B) = 3/7, 약 0.42가 된다.

이를 이용하여 문자열 사이의 유사도를 계산하는데 이용할 수 있다. 문자열 "FRANCE"와 "FRENCH"가 주어졌을 때, 이를 두 글자씩 끊어서 다중집합을 만들 수 있다. 각각 {FR, RA, AN, NC, CE}, {FR, RE, EN, NC, CH}가 되며, 교집합은 {FR, NC}, 합집합은 {FR, RA, AN, NC, CE, RE, EN, CH}가 되므로, 두 문자열 사이의 자카드 유사도 J("FRANCE", "FRENCH") = 2/8 = 0.25가 된다.

🧾입출력 예

입력 형식

• 입력으로는 str1과 str2의 두 문자열이 들어온다. 각 문자열의 길이는 2 이상, 1,000 이하이다.
• 입력으로 들어온 문자열은 두 글자씩 끊어서 다중집합의 원소로 만든다. 이때 영문자로 된 글자 쌍만 유효하고, 기타 공백이나 숫자, 특수 문자가 들어있는 경우는 그 글자 쌍을 버린다. 예를 들어 "ab+"가 입력으로 들어오면, "ab"만 다중집합의 원소로 삼고, "b+"는 버린다.
• 다중집합 원소 사이를 비교할 때, 대문자와 소문자의 차이는 무시한다. "AB"와 "Ab", "ab"는 같은 원소로 취급한다.

출력 형식

• 입력으로 들어온 두 문자열의 자카드 유사도를 출력한다. 유사도 값은 0에서 1 사이의 실수이므로, 이를 다루기 쉽도록 65536을 곱한 후에 소수점 아래를 버리고 정수부만 출력한다.

🔑풀이

function solution(str1, str2) {
  const toCollection = (str) => {
    const arr = [];

    // 대문자로 문자열 통일
    str = str.toUpperCase();

    for (let i = 0; i < str.length - 1; i++) {
      // 문자열을 2개씩 끊으면서 순회
      const atom = str.slice(i, i + 2);
      // 숫자, 특수문자가 없는 문자열이면 배열에 push
      if (!atom.match(/[^A-Z]/g)) arr.push(atom);
    }

    return arr;
  };

  const arr1 = toCollection(str1);
  const arr2 = toCollection(str2);

  // Set 자료형으로 중복 원소 제거
  const set = new Set([...arr1, ...arr2]);
  let union = 0;
  let intersection = 0;

  set.forEach((atom) => {
    const has1 = arr1.filter((v) => v === atom).length;
    const has2 = arr2.filter((v) => v === atom).length;

    // 합집합 : set의 원소에서 배열의 값이 일치하면 모두 포함
    // 교집합 : set의 원소에서 배열의 값이 일치할 때, 더 적은 값으로 포함
    union += Math.max(has1, has2);
    intersection += Math.min(has1, has2);
  });

  // 합집합이 없다면 65536, 있다면 조건에 맞게 교집합/합집합*65536의 정수부분 return
  return union ? Math.floor((intersection / union) * 65536) : 65536;
}

🔗 문제 링크

프로그래머스 - 뉴스 클러스터링

XX게임에는 피로도 시스템(0 이상의 정수로 표현합니다)이 있으며, 일정 피로도를 사용해서 던전을 탐험할 수 있습니다. 이때, 각 던전마다 탐험을 시작하기 위해 필요한 "최소 필요 피로도"와 던전 탐험을 마쳤을 때 소모되는 "소모 피로도"가 있습니다. "최소 필요 피로도"는 해당 던전을 탐험하기 위해 가지고 있어야 하는 최소한의 피로도를 나타내며, "소모 피로도"는 던전을 탐험한 후 소모되는 피로도를 나타냅니다. 예를 들어 "최소 필요 피로도"가 80, "소모 피로도"가 20인 던전을 탐험하기 위해서는 유저의 현재 남은 피로도는 80 이상 이어야 하며, 던전을 탐험한 후에는 피로도 20이 소모됩니다.

이 게임에는 하루에 한 번씩 탐험할 수 있는 던전이 여러개 있는데, 한 유저가 오늘 이 던전들을 최대한 많이 탐험하려 합니다. 유저의 현재 피로도 k와 각 던전별 "최소 필요 피로도", "소모 피로도"가 담긴 2차원 배열 dungeons 가 매개변수로 주어질 때, 유저가 탐험할수 있는 최대 던전 수를 return 하도록 solution 함수를 완성해주세요.

🚨제한사항

• k는 1 이상 5,000 이하인 자연수입니다.
• dungeons의 세로(행) 길이(즉, 던전의 개수)는 1 이상 8 이하입니다.
  • dungeons의 가로(열) 길이는 2 입니다.
  • dungeons의 각 행은 각 던전의 ["최소 필요 피로도", "소모 피로도"] 입니다.
  • "최소 필요 피로도"는 항상 "소모 피로도"보다 크거나 같습니다.
  • "최소 필요 피로도"와 "소모 피로도"는 1 이상 1,000 이하인 자연수입니다.
  • 서로 다른 던전의 ["최소 필요 피로도", "소모 피로도"]가 서로 같을 수 있습니다.

🧾입출력 예

🔑풀이

function solution(k, dungeons) {
  let result = -1;
  const visit = new Array(dungeons.length).fill(0);

  const dfs = (k, dungeons, cnt, visit) => {
    for (let i = 0; i < dungeons.length; i++) {
      const [total, use] = dungeons[i];
      // 방문한 던전 or 현재 던전 최소 피로도 > 현재 피로도 continue
      if (visit[i] || total > k) continue;

      // 방문 노드 기록
      visit[i] = 1;
      dfs(k - use, dungeons, cnt++, visit);

      // 재귀 이후 방문 이전으로
      visit[i] = 0;
    }

    result = Math.max(cnt, result);
  };

  dfs(k, dungeons, 0, visit);
  return result;
}

🧱 알고리즘

깊이 우선 탐색 (DFS) - Wikipedia

🔗 문제 링크

프로그래머스 - 피로도

△△ 게임대회가 개최되었습니다. 이 대회는 N명이 참가하고, 토너먼트 형식으로 진행됩니다. N명의 참가자는 각각 1부터 N번을 차례대로 배정받습니다. 그리고, 1번↔2번, 3번↔4번, ... , N-1번↔N번의 참가자끼리 게임을 진행합니다. 각 게임에서 이긴 사람은 다음 라운드에 진출할 수 있습니다. 이때, 다음 라운드에 진출할 참가자의 번호는 다시 1번부터 N/2번을 차례대로 배정받습니다. 만약 1번↔2번 끼리 겨루는 게임에서 2번이 승리했다면 다음 라운드에서 1번을 부여받고, 3번↔4번에서 겨루는 게임에서 3번이 승리했다면 다음 라운드에서 2번을 부여받게 됩니다. 게임은 최종 한 명이 남을 때까지 진행됩니다.

이때, 처음 라운드에서 A번을 가진 참가자는 경쟁자로 생각하는 B번 참가자와 몇 번째 라운드에서 만나는지 궁금해졌습니다. 게임 참가자 수 N, 참가자 번호 A, 경쟁자 번호 B가 함수 solution의 매개변수로 주어질 때, 처음 라운드에서 A번을 가진 참가자는 경쟁자로 생각하는 B번 참가자와 몇 번째 라운드에서 만나는지 return 하는 solution 함수를 완성해 주세요. 단, A번 참가자와 B번 참가자는 서로 붙게 되기 전까지 항상 이긴다고 가정합니다.

🚨제한사항

• N : 21 이상 220 이하인 자연수 (2의 지수 승으로 주어지므로 부전승은 발생하지 않습니다.)
• A, B : N 이하인 자연수 (단, A ≠ B 입니다.)

🧾입출력 예

🔑풀이

function solution(n, a, b) {
  let result = 0;

  // Round 0 : 4, 7
  // Round 1 : 2, 4
  // Round 2 : 1, 2
  // Round 3 : 1, 1

  while (a !== b) {
    a = Math.ceil(a / 2);
    b = Math.ceil(b / 2);
    result++;
  }

  return result;
}

🔗 문제 링크

프로그래머스 - 예상 대진표