Homile

React(Vite) + TypeScript로 시리얼 통신 구현하기

호밀이 — Sun, 26 Jan 2025 17:36:40 +0900

오늘은 React(Vite)와 TypeScript를 활용하여 시리얼 통신을 구현하는 방법에 대해 알아보도록 하겠습니다. 최근 웹 개발에서 시리얼 포트를 다루는 경우가 많아지고 있는데요, Web Serial API를 통해 이를 손쉽게 처리할 수 있습니다. 그럼 시작해볼까요?

Serialport?

SerialPort는 시리얼 통신(Serial Communication)을 통해 데이터를 주고받기 위한 소프트웨어 인터페이스로, 주로 하드웨어 장치(센서, 마이크로컨트롤러, IoT 장치 등)와 컴퓨터 간의 데이터를 교환할 때 사용됩니다. 특히 임베디드 시스템, 하드웨어 제어 및 다양한 장치들과의 통신에 자주 활용됩니다. 이 과정에서 직렬 통신 포트(시리얼 포트)를 사용하여 바이트 단위의 데이터를 순차적으로 전송합니다.

시리얼 통신(Serial Communication)?

시리얼 통신(Serial Communication)이란 데이터를 한 번에 한 비트씩 순차적으로 전송하는 방식입니다. 이는 병렬 통신과 대비되며, 전송선이 적고 전송 거리가 길어도 안정적인 전송이 가능하다는 장점이 있습니다.
시리얼 통신은 RS-232, USB, SPI, I2C와 같은 여러 프로토콜을 통해 구현되며, 다양한 장치들과 통신할 수 있습니다.

Web Serial API

Web Serial API는 브라우저가 직렬 장치에 접근할 수 있도록 해주는 기능입니다. 이 API를 사용하면 웹 애플리케이션에서 직접 하드웨어 장치와 소통할 수 있게 됩니다.
(Web Serial API는 보안상의 이유로 HTTPS에서만 사용할 수 있습니다.)

환경 설정하기

개발관련 세팅이 되어있다는 가정하에 진행하도록 하겠습니다. (Node.js, npm, ...)
먼저, 프로젝트를 생성하고 필요한 패키지를 설치해야 합니다.

npm create vite@latest serial-communication --template react-ts

✔ Select a framework: › React
✔ Select a variant: › TypeScript

cd serial-communication
npm install
npm run dev

위와 같이 명령어를 작성하면 vite로 구성된 기본 화면이 출력됩니다. 이후 시리얼 통신을 위해서 최소한의 파일만 남겨두고 삭제하도록 하겠습니다.

UI 구성하기

시리얼 통신에는 포트 연결, 포트 열기, 포트에 데이터 쓰기, 포트에서 데이터 읽기 등과 같은 기능을 사용해야 합니다. 필요한 버튼 및 연결된 것을 알 수 있게 UI를 구성하겠습니다.

// App.tsx
import "./App.css";

function App() {
  return (
    <section>
      <h1>serial-communication</h1>
      <p>Selected Port: </p>
      <div className="wrapper">
        <button>Port select</button>
        <button>Send Data</button>
      </div>
    </section>
  );
}
export default App;

Serial Communication 구현하기

이제 본격적으로 시리얼 통신을 구현해보겠습니다! 아래 코드를 참고하세요:D

사용 가능한 포트 확인

시리얼 통신을 하기위해 사용 가능한 포트를 확인하여 연결하는 과정의 코드를 작성하겠습니다.
먼저 재사용성 있게 컴포넌트를 구성하기 위해 custom hook을 생성했습니다. 이때, Web Serial API를 사용하기 위해서는 기본적으로 비동기 통신이 되어야하는 것을 주의해서 작성해주시면 됩니다.

navigator.serial.requestPort(): 연결 가능한 포트 목록을 확인할 수 있도록 해주는 메서드입니다.

port.open({ option }): 직렬 포트에 맞는 option을 설정해서 시리얼 통신을 할 수 있도록 포트를 웹브라우저와 연결하는 메서드입니다.

// hooks/useSerialCommunication.tsx
import { useState } from "react";

function useSerialCommunication() {
  const [port, setPort] = useState();

  const initialize = async () => {
    try {
      // @ts-expect-error: navigator.serial is not yet supported in TypeScript
      const port = await navigator.serial.requestPort();
      setPort(port);
      await port.open({ baudRate: 9600 });
    } catch (err) {
      console.error("포트 연결 실패:", err);
    }
  };

  return { port, initialize };
}

export default useSerialCommunication;

// App.tsx
import "./App.css";
import useSerialCommunication from "./hooks/useSerialCommunication";

function App() {
  const { port, initialize } = useSerialCommunication();
  return (
    <section>
      <h1>serial-communication</h1>
      <p>Selected Port: {port ? "connect" : ""}</p>
      <div className="wrapper">
        <button onClick={initialize}>Port select</button>
        <button>Send Data</button>
      </div>
    </section>
  );
}

export default App;

포트에 데이터 쓰기

sendData 함수는 React 애플리케이션에서 Web Serial API를 사용하여 시리얼 포트로 데이터를 전송하는 로직을 처리합니다. 이 함수는 사용자가 입력한 문자열 데이터를 시리얼 포트에 인코딩하여 전송하고, 오류 발생 시 적절히 로그를 출력합니다.

포트 선택 확인
port 객체가 없는 경우 에러를 던져 사용자가 시리얼 포트 연결을 먼저 설정하도록 요구합니다.
Writable 스트림 가져오기
port.writable.getWriter()를 호출해 데이터를 전송할 수 있는 Writable 스트림을 생성합니다. 스트림은 단일 작업을 수행하기 위해 잠금(lock) 상태가 되며, 작업이 완료된 후 releaseLock()으로 잠금을 해제해야 합니다.
데이터 인코딩
사용자가 전송하고자 하는 데이터(messageToSend)는 문자열이므로, 시리얼 포트가 이해할 수 있는 바이너리 형식으로 변환해야 합니다. 이를 위해 Web API의 TextEncoder를 사용하여 문자열을 Uint8Array로 인코딩합니다.
데이터 전송
writer.write(data)를 호출하여 인코딩된 데이터를 시리얼 포트로 전송합니다.
스트림 해제
releaseLock()을 호출하여 스트림 잠금을 해제합니다. 이렇게 해야 다른 쓰기 작업이나 리소스 처리가 가능합니다.
에러 처리
데이터 전송 중 문제가 발생하면 catch 블록에서 에러를 캡처하고, 오류 메시지를 출력합니다.
디버깅 로그 출력
console.log를 사용해 전송된 데이터(messageToSend)와 변환된 바이너리 데이터(data)를 확인할 수 있도록 로그를 출력합니다.

const sendData = async (messageToSend: string) => {
  if (!port) {
    throw new Error("Port is not selected");
  }

  try {
    // 시리얼 포트의 writable 스트림 가져오기
    // @ts-expect-error: navigator.serial은 TypeScript에서 아직 지원되지 않음
    const writer = port.writable.getWriter();

    // TextEncoder를 사용해 문자열 데이터를 Uint8Array 형식으로 인코딩
    const data = new TextEncoder().encode(messageToSend);

    // 데이터를 시리얼 포트로 쓰기
    await writer.write(data);

    // writer 객체의 락 해제 (다른 쓰기 작업 가능하도록)
    writer.releaseLock();

    console.log("Data sent:", messageToSend, data);
  } catch (error) {
    // 데이터 쓰기 중 오류 발생 시 로그 출력
    console.error("Error writing to serial port:", error);
  }
};

요청한 데이터 값

포트에서 데이터 읽기

initialize 함수는 Web Serial API를 사용해 시리얼 포트를 초기화하고, 포트로부터 데이터를 읽는 로직을 구현합니다. 데이터는 TextDecoder를 사용해 문자열로 변환되며, React의 상태를 활용해 UI에서 확인할 수 있도록 처리됩니다.

포트 요청 및 초기화
- navigator.serial.requestPort()를 통해 사용자가 연결하려는 시리얼 포트를 선택합니다.
- 선택된 포트는 port.open({ baudRate: 9600 })를 호출해 특정 전송 속도로 초기화합니다.
Readable 스트림 가져오기
- port.readable을 통해 포트의 Readable 스트림을 가져옵니다.
- getReader()를 호출해 데이터를 읽기 위한 Reader 객체를 생성합니다.
데이터 읽기
- reader.read()를 통해 데이터를 읽습니다.
- 반환값은 { value, done } 형식이며:
  - value: Uint8Array 형식의 읽은 데이터
  - done: 읽기가 종료되었는지 여부
- value가 존재하면 TextDecoder를 사용해 Uint8Array 데이터를 문자열로 변환하고, 이전 데이터에 추가하여 상태로 저장합니다.
Reader 잠금 해제
- Reader는 단일 작업을 수행하기 위해 잠금(lock) 상태가 되므로, 작업이 끝나면 reader.releaseLock()을 호출해 잠금을 해제합니다.
에러 처리
- 포트 요청 실패, 포트 해제, 권한 부족 등의 에러를 try...catch 블록에서 처리하여 디버깅 로그를 출력합니다.

const initialize = async () => {
  try {
    // 시리얼 포트 요청 및 초기화
    // @ts-expect-error: navigator.serial은 TypeScript에서 아직 지원되지 않음
    const port = await navigator.serial.requestPort();
    setPort(port); // 선택한 포트를 상태로 저장
    await port.open({ baudRate: 9600 }); // 포트 열기

    // 데이터 읽기 설정
    const reader = port.readable?.getReader(); // 포트의 Readable 스트림 가져오기
    if (reader) {
      while (true) {
        const { value, done } = await reader.read(); // 데이터 읽기
        if (done) break; // 읽기가 종료되면 반복 종료
        if (value) {
          // Uint8Array 데이터를 문자열로 변환하고 상태 업데이트
          setReceivedData((prev) => prev + new TextDecoder().decode(value));
        }
      }
      reader.releaseLock(); // Reader 잠금 해제
    }
  } catch (err) {
    console.error("포트 연결 실패:", err); // 에러 처리
  }
};

Reference

- Web Serial API 공식문서
- https://stackoverflow.com/questions/68806607/using-web-serial-with-reactjs

[Baekjoon]30970번 선택의 기로 - Javascript

호밀이 — Mon, 11 Mar 2024 21:40:56 +0900

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

30970번: 선택의 기로

첫 번째 줄에는 첫 번째 방법을 선택했을 때의 첫 번째로 고른 촉석루 미니어처의 품질과 가격, 두 번째로 고른 촉석루 미니어처의 품질과 가격을 공백으로 구분하여 순서대로 출력한다. 두 번

www.acmicpc.net

문제

[사진] 촉석루

품질이냐 가격이냐, 그것이 문제로다..

진주 나들이를 온 보선이는 기념품으로 촉석루 미니어처를 사기로 했다. 촉석루는 진주성에 있는 누각이며 경상남도 유형문화재 중 하나로, 진주성의 남쪽 지휘대로 사용됨과 동시에 논개가 촉석루 앞 의암에서 순국한 것으로 알려져 유명한 곳이다.

촉석루 미니어처를 사기 위해 기념품 가게에 들른 보선이는 놀라움을 금치 못했다. 왜냐하면, 가게에는 각양각색의 촉석루 미니어처가 진열되어 있었기 때문이다. 그리고 모든 촉석루 미니어처는 장인이 한 땀 한 땀 심혈을 기울여서 만들어서 그런지 품질과 가격이 천차만별이었고, 품질과 가격이 전부 동일한 두 촉석루 미니어처는 없었다. 각양각색의 촉석루 미니어처를 본 보선이는 물욕이 폭발할 뻔했지만 가까스로 마음을 진정시키고, 촉석루 미니어처를 두 개만 사기로 했다. 보선이는 두 가지 방법으로 촉석루 미니어처를 골라보기로 했는데, 이는 다음과 같다.

진열되어 있는 촉석루 미니어처 중에서 품질이 가장 높은 촉석루 미니어처를 골라 가져온다. 만약 그런 미니어처가 여러 개라면 가격이 가장 낮은 것을 골라 가져온다. 이 과정을 두 번 반복하는 것이 첫 번째 방법이다.
진열되어 있는 촉석루 미니어처 중에서 가격이 가장 낮은 촉석루 미니어처를 골라 가져온다. 만약 그런 미니어처가 여러 개라면 품질이 가장 높은 것을 골라 가져온다. 이 과정을 두 번 반복하는 것이 두 번째 방법이다.

보선이가 각 방법에 따라 촉석루 미니어처들을 고르게 될 때 어떤 촉석루 미니어처들을 고르게 되는지 알아보자.

입력

첫 번째 줄에는 기념품 가게에 진열되어 있는 촉석루 미니어처의 개수 이 주어진다. (2 ≤ N ≤ 100,000)

두 번째 줄부터 개의 줄에 걸쳐 가게에 진열되어 있는 번째 촉석루 미니어처 종류의 품질 , 가격 가 공백으로 구분되어 주어진다. (1≤Q_i,P_i≤10000)입력으로 주어지는 모든 수는 정수이다.

출력

첫 번째 줄에는 첫 번째 방법을 선택했을 때의 첫 번째로 고른 촉석루 미니어처의 품질과 가격, 두 번째로 고른 촉석루 미니어처의 품질과 가격을 공백으로 구분하여 순서대로 출력한다.

두 번째 줄에는 두 번째 방법을 선택했을 때의 첫 번째로 고른 촉석루 미니어처의 품질과 가격, 두 번째로 고른 촉석루 미니어처의 품질과 가격을 공백으로 구분하여 순서대로 출력한다.

첫 번째 방법의 결과가 두 번째 방법의 결과에 영향을 미치지 않는다.

예제 입력 1 복사

예제 출력 1 복사

3 1 2 2
3 1 1 1

문제풀이(1)

1. 촉석루 미니어처 중 품질이 가장 높은 미니어처를 가져온다.
2. 여러개일 경우 가격이 가장 낮은 것을 가져온다.
3. 1-2를 1번더 반복한다.
4. 촉석루 미니어처 중 가격이 가장 낮은 미니어처를 가져온다.
5. 여러개일 경우 품질이 가장 높은 것을 가져온다.
6. 4-5를 1번더 반복한다.

1-3번을 반복했을 때의 결과를 추출하고, 4-6번을 반복한 결과를 추출한다.
첫번째 output으로 1-3번을 반복했을 경우의 상위 2순위를 출력하고,
두번째 output으로 4-6번을 반복했을 경우의 상위 2순위를 출력한다.
정렬 문제기때문에 sort에 조건을 정확하게 달아주는 것이 중요하다.

const filePath = process.platform === "linux" ? "/dev/stdin" : "./input.txt";
const [N, ...input] = require("fs").readFileSync(filePath).toString().trim().split("\n");

const miniatures = input.map((el) => el.split(" ").map(Number));

// 품질을 기준으로 내림차순, 가격 오름차순 정렬
const sortByQualityThenPrice = (a, b) => {
  if (a[0] !== b[0]) return b[0] - a[0];
  return a[1] - b[1];
};

// 가격을 기준으로 오름차순, 품질 내림차순 정렬
const sortByPriceThenQuality = (a, b) => {
  if (a[1] !== b[1]) return a[1] - b[1];
  return b[0] - a[0];
};

// 결과 출력 함수
const printTopTwo = (arr) => {
  console.log(
    arr
      .slice(0, 2)
      .map((item) => item.join(" "))
      .join(" ")
  );
};

// 첫 번째 정렬 및 출력
miniatures.sort(sortByQualityThenPrice);
printTopTwo(miniatures);

// 두 번째 정렬 및 출력
miniatures.sort(sortByPriceThenQuality);
printTopTwo(miniatures);

[Baekjoon]31474번 양갈래 짝 맞추기 - Javascript

호밀이 — Mon, 11 Mar 2024 21:18:58 +0900

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

31474번: 양갈래 짝 맞추기

첫째 줄에 양갈래 손님의 수 $N$이 주어진다. ($2 \leq N \leq 28$, $N$은 짝수)

www.acmicpc.net

문제

시현이 카페에 양갈래 손님들이 들어가려고 한다.

양갈래 손님들은 양갈래를 너무 좋아하는 나머지 두 명씩 모여 있어 총 인원은 짝수이다.

시현이 카페에는 두 명씩 앉을 수 있는 테이블이 충분히 많이 있고, 양갈래 손님들은 한 테이블에 두 명씩 앉기로 하였다.

그런 양갈래 손님들을 맞이하게 된 시현이는 갑자기 궁금증이 생겼다.

손님들이 앉는 경우의 수를 세는 조건이 다음과 같을 때, 양갈래 손님들이 모두 앉을 수 있는 방법의 수는 몇 가지가 있을까?

테이블의 좌석을 구분하지 않는다.
- 한 테이블에서 손님 A와 손님 B가 앉는 경우, 손님 B와 손님 A가 앉는 경우는 같은 경우이다.
각각의 테이블 또한 구분하지 않는다.
- 1번 테이블에 손님 A, B가 앉고, 2번 테이블에 손님 C, D가 앉는 것과, 1번 테이블에 손님 C, D가 앉고, 2번 테이블에 손님 A, B가 앉는 것은 서로 같은 경우이다.

입력

첫째 줄에 양갈래 손님의 수 �이 주어진다. (2≤�≤28, �은 짝수)

출력

첫째 줄에 양갈래 손님들이 앉을 수 있는 경우의 수를 출력한다.

연산 중 32비트 정수형 타입의 표현 범위를 초과할 수 있으므로 오버플로우에 주의한다.

예제 입력 1 복사

예제 출력 1 복사

예제 입력 2 복사

예제 출력 2 복사

문제풀이(1)

const filePath = process.platform === "linux" ? "/dev/stdin" : "./input.txt";
const N = Number(require("fs").readFileSync(filePath).toString().trim());

let result = 1;

for (let i = N; i > 0; i -= 2) {
  result *= (i * (i - 1)) / 2;
  result /= i / 2;
}

console.log(result);

[React]React 19?

호밀이 — Thu, 29 Feb 2024 01:02:24 +0900

React 19

React 공식 블로그에 24.02.15에 업데이트 진행사항이 올라왔습니다.

주요 내용은 크게 React Compiler, Actions, New Features in React Canary입니다.

React Compiler

공식블로그에 따르면 React를 위한 컴파일러가 개발중이며 오픈 소스 릴리즈를 준비하고 있다고 한다.

React의 상태를 관리할 때 의도와는 달리 많은 리랜더링이 발생하는 경우가 있는데 이것을 해결하기 위해서는 useMemo, useCallback등과 같은 메모이제이션 방식을 통해 리랜더링을 줄이는 방법을 사용했는데 이를 자동화으로 최적화할 수 있도록 되어있다고 한다.

Actions

아래 코드에서 보이는 것과 같이 form에 action이 추가 되었습니다.

action은 동기, 비동기식으로 모두 동작하며, 데이터를 제출할 때 useFormStatus, useFormState를 사용하여 데이터의 응답 및 에러처리와 같은 작업을 처리하기 쉽도록 도와준다고 합니다.
또, 한가지 추가되는 훅으로는 useOptimistic가 있습니다. useOptimistic은 말그대로 낙관적인 상태를 가져올 때 사용할 수 있다고 되어있습니다. 실제로 완료되는데 시간이 걸리더라도 사용자에게 결과를 즉시 보여줄 수 있도록 도와준다고 합니다.

import { useFormStatus } from "react-dom";
import { submitForm } from "./actions.js";

function Submit() {
  const { pending } = useFormStatus();
  return (
    <button type="submit" disabled={pending}>
      {pending ? "Submitting..." : "Submit"}
    </button>
  );
}

function Form({ action }) {
  return (
    <form action={action}>
      <Submit />
    </form>
  );
}

export default function App() {
  return <Form action={submitForm} />;
}

New Features in React Canary

Directives

"use client"와 "use server"를 사용하여 Next.js와 같이 서버, 클라이언트 어느 부분에서 동작하는지에 대한 지시자를 설정할 수 있습니다.

Document Metadata

<title>, <meta>, and metadata <link>와 같은 태그를 컴포넌트에 추가할 수 있습니다. 이전에는 React Helmet을 사용하던 작업을 지원합니다.

Asset Loading

Suspense를 <style>, <link>, <script> 태그의 요소들이 표시될 준비가 되어 있는지 판단할 수 있도록 하였으며, 리소스가 언제 로드되고 초기화될지에 대한 제어를 할 수 있도록 preload와 preinit와 같은 새로운 리소스 로딩 API를 추가하였습니다.

Actions

이전에 작성한 Actions 파트의 부분과 같습니다. <form>태그에 action을 추가하고, useFormStatus를 사용하여 상태를 관리하며, useFormState로 결과를 처리합니다. 또한, useOptimistic으로 UI를 낙관적으로 업데이트할 수 있습니다.

Conclusion

한동안 취업준비를 하면서 이전에 프론트엔드 개발 공부를 하느라 기술 업데이트 관련 내용을 찾아보는 것을 못했던 것 같았다. 그래서 react 공식 문서와 블로그를 보니 24.2.15 날짜로 새로운 글이 올라온 것을 보았고 유튜브에는 이미 내용들이 정리되어 많이 올라와 있었다. 추후 react 19로 버전업을 하는 경우에 어떤점을 학습해야하는지 어떤점이 좋아지는지에 대해 알고 있다면 프로젝트에 적용하는데 많으 도움이 될 것 같다.

위의 내용들을 봤을 때는 Next.js에서 사용하던 것들을 React에서도 사용할 수 있도록 많은 기능이 추가되는 것 같다. Next.js의 기능 뿐만 아니라 React Helmet, TanstackQuery등과 같은 일부 라이브러리의 기능을 사용할 수 있다면 라이브러리에 대한 의존성은 낮출 수 있을 거란 생각이 들었다. 하지만, 언제나 개발시장은 변화하고 있기 때문에 변화에 맞춰나가는 것이 가장 중요하다고 생각한다.

현재 거의 모든 웹 개발 시장이 React로 되어 있는데 이도 사실은 React에 많은 의존을 하고 있다는게 느껴지니 바닐라JS도 다시 학습해야겠다는 생각이 들었다.

Reference

- React 공식 블로그: https://react.dev/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024

[Baekjoon]11899번 괄호 끼워넣기 - Javascript

호밀이 — Wed, 28 Feb 2024 23:41:50 +0900

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

11899번: 괄호 끼워넣기

첫 번째 줄에 S를 올바른 괄호열으로 만들기 위해 앞과 뒤에 붙여야 할 괄호의 최소 개수를 출력합니다. 불가능한 경우는 주어지지 않습니다.

www.acmicpc.net

문제

심심한 승현이는 너무 심심한 나머지 올바른 괄호열을 가지고 놀고 있었습니다.

(()(()))()()

그러다가 어쩌다 보니 괄호열을 부러뜨렸습니다.

(()    ((    )))()    ()

크게 낙담한 승현이는 노력해 보았지만, 대부분이 부러져 버려 단 한 부분만 재사용할 수 있다는 것을 깨닫게 되었습니다.

)))()

승현이는 이 괄호열을 가지고 놀려고 했으나 올바른 괄호열이 아니기 때문에 행복하지 않았습니다. 이를 보던 지학이는 승현이에게 “그러면 앞과 뒤에 적절하게 괄호를 붙이면 올바른 괄호열이 되지 않을까?”라고 했고, 승현이는 조금 생각한 뒤 그렇게 하기로 했습니다. 예를 들어, 위의 올바르지 않은 괄호열의 경우 앞에 여는 괄호 3개를 붙이면 올바른 괄호열이 됩니다.

((()))()

그러나 괄호열을 사서 붙이는 데에는 돈이 들고 많이 붙일수록 놀기가 불편해지기 때문에, 승현이는 가능한 한 괄호열을 적게 추가하려고 합니다.

승현이가 망가뜨리고 사용 가능한 올바르지 않은 괄호열이 주어질 때, 올바른 괄호열으로 만들기 위해 앞과 뒤에 붙여야 할 괄호의 최소 개수를 구하는 프로그램을 작성하세요.

입력

첫 번째 줄에 올바르지 않은 괄호열 S가 주어집니다. S의 길이는 1 이상 50 이하입니다.

출력

첫 번째 줄에 S를 올바른 괄호열으로 만들기 위해 앞과 뒤에 붙여야 할 괄호의 최소 개수를 출력합니다. 불가능한 경우는 주어지지 않습니다.

예제 입력 1 복사

)))()

예제 출력 1 복사

예제 입력 2 복사

)(()

예제 출력 2 복사

문제풀이(1)

처음생각은 단순하게 괄호의 갯수만 파악하여 다른것을 하면되지 않을까란 생각을 했지만
예제 2번을 보고 괄호의 갯수로를 파악할 수 없다는 것을 알게 되었다.
괄호가 맞는지 맞지 않는지 여부를 파악하는 것이 먼저라고 생각했다.

입력받은 괄호를 순회하며 여는 괄호가 나올 경우 leftBracket에 괄호를 추가해주고
닫는 괄호가 나올 경우 leftBracket이 빈 배열이 아니라면 짝이 맞다는 것이기 때문에 pop을 해준다.
만약, leftBracket이 빈 배열이라면 rigthBracket에 괄호를 추가한다.

const filePath = process.platform === "linux" ? "/dev/stdin" : "./input.txt";
const arr = require("fs").readFileSync(filePath).toString().trim().split("");

const leftBracket = [];
const rightBracket = [];

for (let bracket of arr) {
  if (bracket === "(") {
    leftBracket.push(bracket);
  } else if (bracket === ")") {
    if (leftBracket.length > 0) {
      leftBracket.pop();
    } else {
      rightBracket.push(bracket);
    }
  }
}

console.log(leftBracket.length + rightBracket.length);

[Baekjoon]17254번 키보드 이벤트 - Javascript

호밀이 — Tue, 27 Feb 2024 16:59:08 +0900

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

17254번: 키보드 이벤트

첫째 줄에 연결된 키보드의 개수 N과, 키보드를 누르게 될 횟수 M이 주어진다. (1 ≤ N, M ≤ 1,000) 다음 M개의 줄에 정수 a, b와 문자 c가 주어진다. 이는 a번 키보드로, b초에 문자 c가 적힌 키를

www.acmicpc.net

문제

키보드에서 어떤 키를 누르면 어떤 키가 눌러졌는지 컴퓨터에 전송되고, 컴퓨터에서는 키가 눌러진 순서대로 화면에 출력된다.

승지는 팀 과제로 보고서 100장을 작성해야 하는 데, 마감 시간이 얼마 남지 않아서 팀원에게 도움을 요청하였다. 하지만 컴퓨터가 하나뿐이라 보고서를 동시에 작성할 수 없었다.

주변을 둘러보니 쓰지 않는 키보드 여러 개가 바닥에서 굴러다니는 것을 보았다. 급한 대로 컴퓨터에 키보드 여러 개를 연결해서 타자 속도를 올리기로 했다.

문제는 원하는 문장을 작성하기 위해서는 서로 호흡을 잘 맞춰야 하는데, 키보드의 동작 원리를 아직 알지 못했던 승지는 어떤 결과가 출력될지 알 수 없었다.

승지는 팀원 N명에게 N개의 키보드를 나눠주고 전부 컴퓨터에 연결했다. 각자 어느 시간에 어떤 키를 누를지를 미리 정한다면, 어떤 결과가 화면에 출력될 것인지 알아내고자 한다.

키보드의 번호는 컴퓨터에 연결된 순서대로 1번 키보드, 2번 키보드, .... N번 키보드이다. 동시에 여러 키보드에서 키를 누른다면 번호가 작은 키보드에서 누른 키가 먼저 출력되지만, 하나의 키보드에서 여러 개의 키를 동시에 누를 수는 없다. 즉, 하나의 키보드에서 각 키를 누른 시간은 모두 다르다.

입력

첫째 줄에 연결된 키보드의 개수 N과, 키보드를 누르게 될 횟수 M이 주어진다. (1 ≤ N, M ≤ 1,000)

다음 M개의 줄에 정수 a, b와 문자 c가 주어진다. 이는 a번 키보드로, b초에 문자 c가 적힌 키를 누를 것이라는 의미이다. (1 ≤ a ≤ N, 0 ≤ b ≤ 1,000,000)

키보드에는 알파벳 대문자와 숫자키만 존재한다.

출력

모든 입력이 끝난 후에 화면에 출력될 결과를 출력한다.

예제 입력 1 복사

예제 출력 1 복사

APPLE

예제 입력 2 복사

예제 출력 2 복사

LADYBUG

문제풀이(1)

a키보드, b초, c알파벳이다. 이때, 같은 시간에 입력했다면 키보드의 번호가 낮은 알파벳을 먼저 출력한다.
sort에 조건을 추가하여 시간을 오름차순으로 정렬하고 같을 경우 키보드를 오름차순으로 정렬한 뒤 알파벳을 출력한다.

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

input.shift();

const keyboards = input.map((el) => el.split(" ")).sort((a, b) => +a[1] - +b[1] || +a[0] - +b[0]);

console.log(keyboards.map((el) => el[2]).join(""));

[Baekjoon]1835번 카드 - Javascript

호밀이 — Mon, 26 Feb 2024 23:12:51 +0900

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

1835번: 카드

첫 번째 줄에 카드의 개수 N(1 ≤ N ≤ 1,000)이 주어진다.

www.acmicpc.net

문제

1부터 N까지의 숫자가 적힌 카드가 있다. 찬유는 이 카드를 가지고 마술을 하려 한다. 마술을 하는 순서는 다음과 같다.

먼저 1부터 N까지의 숫자가 적힌 카드에서 첫 번째 카드를 가장 뒤로 옮긴다. 그러고 나서 첫 번째 카드를 책상 위에 올려놓는다. 그런데 그 카드는 1이 되어야 한다.
그리고 남은 카드 중에서 첫 번째 카드를 가장 뒤로 옮기고, 또 가장 앞에 있는 카드를 가장 뒤로 옮긴다.(2번 반복) 그리고 가장 앞에 있는 카드를 책상 위에 올려놓는다. 그런데 그 카드는 2가 되어야 한다.
또 남은 카드 중에서 첫 번째 카드를 가장 뒤로 옮기고... (3번 반복) 그리고 가장 앞에 있는 카드를 책상위에 올려놓는데 그것은 3이 된다.
또 남은 카드 중에서 첫 번째 카드를 가장 뒤로 옮기고.. (4번 반복) 그리고 가장 앞에 있는 카드를 책상 위에 올려놓는데 그것은 4이다.
위 과정을 계속 반복하여 N번 카드만 남을 때 까지 반복한다.

위와 같은 카드를 하려면 미리 카드의 순서를 알고 있어야 한다. 카드의 개수 N이 주어져 있을 때 위의 마술을 하기 위한 카드의 초기 순서를 구하는 프로그램을 작성하시오.

입력

첫 번째 줄에 카드의 개수 N(1 ≤ N ≤ 1,000)이 주어진다.

출력

첫 번째 줄부터 N번째 줄까지 차례로 카드의 순서를 출력한다.

예제 입력 1 복사

예제 출력 1 복사

2 1 4 3

문제풀이(1)

문제에 나와있는 방식을 반대로 진행하면 초기 카드의 세팅값을 찾을 수 있다.
1. N 번 카드가 있다. (N = 4)
2. N - 1, N번의 카드가 있다. 가장 뒤에 있는 카드를 가장 앞으로 옮긴다.(N회 반복)
   [3, 4] -> [4, 3] -> [3, 4] -> [4, 3]
3. [4, 3]의 카드 배열에 N - 2를 맨 앞에 추가한다. 가장 뒤에 있는 카드를 가장 앞으로 옮긴다.(N - 1회 반복)
   [2, 4, 3] -> [3, 2, 4] -> [4, 3, 2]
4. [4, 3, 2]의 카드 배열에 N - 3을 맨 앞에 추가한다. 가장 뒤에 있는 카드를 가장 앞으로 옮긴다.(N - 2회 반복)
   [1, 4, 3, 2] -> [2, 1, 4, 3]
5. 마지막으로 추가된 배열[2, 1, 4, 3]을 출력한다.

const filePath = process.platform === "linux" ? "/dev/stdin" : "./input.txt";
const N = Number(require("fs").readFileSync(filePath).toString().trim());

// N번 카드 추가
const arr = [N];

// N - 1부터 1까지 반복
for (let i = N - 1; i > 0; i--) {
  // i번째 값을 배열의 첫번째에 추가한다.
  arr.unshift(i);

  // i번 만큼 순회한다.
  for (let j = 0; j < i; j++) {
    // 마지막 카드를 추출한다.
    const lastCard = arr.pop();
    // 마지막 카드를 맨앞으로 옮긴다.
    arr.unshift(lastCard);
  }
}

console.log(arr.join(" "));

[Baekjoon]1590번 캠프가는 영식 - Javascript

호밀이 — Fri, 23 Feb 2024 22:15:14 +0900

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

1590번: 캠프가는 영식

예제 1의 경우 150분, 200분, 250분, ..., 600분에 한 대씩 버스가 출발한다. 따라서 영식이는 300분에 버스를 타면 된다.

www.acmicpc.net

문제

영식이는 민식이와 함게 고속버스를 타고 캠프를 가야 하지만, 민식이는 영식이를 깨우지 않고 혼자 버스를 타고 캠프에 가버렸다.

영식이는 혼자 고속버스터미널까지 가서 캠프에 오려고 한다. 터미널에는 캠프 장소까지 운행하는 N가지의 버스가 있다. 각각의 버스는 시작 시각, 간격, 대수의 정보를 가지고 있다. 예를 들어, 어떤 버스의 시작 시각이 특점 시점을 기준으로 10분 후이고, 간격은 10분이고, 대수가 5대이면, 이 버스는 10분, 20분, 30분, 40분, 50분에 한 대씩 출발한다.

영식이는 버스터미널에 T분에 도착했다. 영식이가 버스를 타려면 최소 몇 분을 더 기다려야 하는지 구하는 프로그램을 작성하시오.

입력

첫째 줄에 버스의 개수 N과 영식이가 버스터미널에 도착하는 시간 T가 주어진다. 둘째 줄부터 총 N개의 줄에 각 버스의 시작 시각 Si, 간격 Ii, 대수 Ci가 공백을 사이에 두고 주어진다.

출력

첫째 줄에 영식이가 기다려야 하는 시간을 출력한다. 영식이가 도착하는 동시에 버스가 출발하면 정답은 0이다. 만약 버스가 없어서 캠프에 갈 수 없으면 -1을 출력한다. 정답은 231보다 작다.

제한

1 ≤ N ≤ 50
1 ≤ T ≤ 1,000,000
1 ≤ Si ≤ 1,000,000
1 ≤ Ii ≤ 10,000
1 ≤ Ci ≤ 100

예제 입력 1 복사

1 285
150 50 10

예제 출력 1 복사

예제 입력 2 복사

1 123456
123456 10000 1

예제 출력 2 복사

예제 입력 3 복사

3 1
270758 196 67
904526 8930 66
121164 3160 56

예제 출력 3 복사

예제 입력 4 복사

3 1000000
718571 2557 74
480573 9706 54
16511 6660 90

예제 출력 4 복사

-1

문제풀이(1)

버스의 개수 N, 영식이가 버스터미널에 도착하는 시간 T
버스의 시작 시각 S, 간격 I, 대수 C
대수 만큼 반복순회를 하며 버스의 시작 시각 + 간격 * 반복횟수(j)를 하면 버스의 간격별 버스의 시간을 알 수 있다.
버스의 간격별 시간이 영식이가 버스터미널에 도착하는 시간인 T 보다 크거나 같다면 반복순회를 종료한다.
영식이가 버스터미널에 도착하는 시간과 마지막 버스의 간격별 시간중 작은 값을 찾는다.
가장 작은 값을 찾았다면 가장 작은 값 - 영식이가 버스터미널에 도착하는 시간을 계산하면 기다려야하는 시간이 나온다.

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

const [N, T] = input.shift().split(" ").map(Number);
let answer = Infinity;

input.forEach((line) => {
  const [S, I, C] = line.split(" ").map(Number);

  const busDispatches = Array.from({ length: C }, (_, i) => S + I * i);
  const validDispatches = busDispatches.filter((busDispatch) => busDispatch >= T);

  if (validDispatches.length) answer = Math.min(answer, ...validDispatches);
});

console.log(answer !== Infinity ? answer - T : -1);

[Baekjoon]14381번 숫자세는 양 (Small) - Javascript

호밀이 — Thu, 22 Feb 2024 23:51:20 +0900

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

14381번: 숫자세는 양 (Small)

예제 입출력 1번에 대해서, 2 × 0 = 0, 3 × 0 = 0 등등으로 이어지므로, 블리트릭스는 0외에는 다른 숫자를 기록할 수 없을 것이며, 따라서 영원히 잠에 들 수 없다. 예제 입출력 2번의 경우, 1, 2, 3, 4,

www.acmicpc.net

문제

블리트릭스라는 양은 더 빨리 잠을 들기 위한 전략을 세웠다.

먼저, 숫자 N을 뽑는다. 그리고 N, 2 × N, 3 × N 등을 떠올린다. 숫자를 떠올릴 때 마다, 그 숫자의 모든 자리수의 숫자들을 적어놓는데, 이미 적은 숫자는 또 적지 않는다. 0에서 9까지의 모든 숫자가 적히게 되면 잠이 든다.

블리트릭스는 N에서 시작해서 i × N 후에는 (i + 1) × N을 떠올리게 된다. 예를 들어 N = 1692 일 경우, 다음 과 같이 진행된다:

N = 1692. 1, 2, 6, 9가 기록된다.
2N = 3384. 1, 2, 3, 4, 6, 8, 9가 기록된다.
3N = 5076. 모든 수가 기록되고, 잠에 빠진다.

블리트릭스가 잠에 빠지는 수는 무엇인가? 영원히 잠에 들 수 없다면 INSOMNIA라고 출력하라.

입력

첫 번째 행은 케이스의 개수, T이다. 다음 행부터는 T개의 케이스들이 나온다. 각 케이스는 블리트릭스가 고른 하나의 숫자 N으로 구성된다.

제한

1 ≤ T ≤ 100.
0 ≤ N ≤ 200.

출력

각 케이스에 대해서, 케이스 번호가 x이고 y가 정답일 때, Case #x: y라고 출력해야 한다.

예제 입력 1 복사

예제 출력 1 복사

Case #1: INSOMNIA
Case #2: 10
Case #3: 90
Case #4: 110

문제풀이(1)

입력 받은 N을 한자리씩 나눠서 set에 저장하며 1회씩 카운트한다.
0 ~ 9까지 모든 숫자를 set에 저장하고, set의 size가 10이 된다면
마지막에 완료되는 수를 출력하고, 만일 영원히 될 수 없는 수라면 'INSOMNIA'을 출력한다.

const filePath = process.platform === "linux" ? "/dev/stdin" : "./input.txt";
const [testCase, ...numbers] = require("fs").readFileSync(filePath).toString().trim().split("\n").map(Number);

const check = (N) => {
  const digitsSet = new Set();

  for (let i = 1; i <= 200; i++) {
    let current = i * N;
    String(current)
      .split("")
      .forEach((digit) => digitsSet.add(digit));

    if (digitsSet.size === 10) return current;
  }

  return "INSOMNIA";
};

numbers.forEach((N, index) => {
  console.log(`Case #${index + 1}: ${check(N)}`);
});

[Baekjoon]29700번 우당탕탕 영화예매 - Javascript

호밀이 — Tue, 20 Feb 2024 21:36:21 +0900

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

29700번: 우당탕탕 영화예매

첫째 줄에 영화관 세로줄의 개수 $N$($ 1 \leq N \leq 1\,000$)과 가로줄의 개수 $M$($ 1 \leq M \leq 5\,000$), 영화를 관람할 동아리원의 수 $K$($ 1 \leq K \leq 10$)가 주어진다. 둘째 줄부터 $N$ 개의 줄에 걸쳐 그중

www.acmicpc.net

문제

도은이는 동아리 문화의 날을 맞이하여 동아리원들과 함께 좌석이 행 열의 직사각형 모양으로 배치되어 있는 영화관에서 영화를 보기로 했다. 도은이는 동아리원의 유대감을 중요하게 생각하기 때문에 이미 예매가 완료된 좌석을 피해 동아리원들이 모두 가로로 이어서 앉을 수 있도록 자리를 예매하고 싶어 한다. 도은이를 도와 모든 동아리원들이 가로로 이어서 앉을 수 있도록 예매하는 경우의 수는 총 몇 가지가 있을지 구해보자. 단, 예매한 좌석은 동일하지만, 각 사람이 앉는 위치만 바뀌는 경우는 한 가지로 본다.

입력

첫째 줄에 영화관 세로줄의 개수 (1≤N≤1000)과 가로줄의 개수 (1≤M≤5000), 영화를 관람할 동아리원의 수 (1≤K≤10)가 주어진다.

둘째 줄부터 개의 줄에 걸쳐 그중 번째 줄에는 번째 열의 좌석 예매 현황이 길이 인 문자열 s로 주어진다. 의 번째 문자는 열 번째 좌석의 예매 현황을 나타내는데, 이 문자가 ''이라면 예매 가능한 빈 좌석을, 이 문자가 ''이라면 예매가 완료되어 예매가 불가능한 좌석을 나타낸다.

출력

동아리원들이 모두 가로로 이어서 앉을 수 있도록 영화를 예매하는 경우의 수를 출력한다. 단, 문제에서 주어진 조건에 맞게 영화를 예매할 수 있는 방법이 없다면 0을 출력한다.

예제 입력 1 복사

예제 출력 1 복사

예제 입력 2 복사

예제 출력 2 복사

문제풀이(1)

N x M의 영화관 자리에서 이미 완료가 된 자리를 제외한 빈자리를 동아리원들이 가로로 연속되게 앉는 방법의 개수를 구하는 문제이다.

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

const [N, M, K] = input.shift().split(" ").map(Number);

let answer = 0;

for (let i = 0; i < N; i++) {
  for (let j = 0; j <= M - K; j++) {
    const seatList = input[i].slice(j, K + j).split("");

    if (seatList.filter((el) => el === "0").length === K) {
      answer++;
    }
  }
}

console.log(answer);