나의블로그

모노레포어떤 라이브러리를 개발하고 그 결과를 테스팅하기 위해 모노레포를 사용한다.필자는 pnpm을 사용한다. pnpm monorepo는 pnpm-workspace.yaml 로 설정할 수 있다.packages: - "packages/*"packages에 각각의 패키지(테스팅, 라이브러리)를 개발하기위해 위 내용을 작성한다.packages/example에 테스팅 용도 예제를 개발한다.packages/(library)에 라이브러리를 개발한다.package.json라이브러리 패키지의 package.json을 설정한다.{ "name": "unique-lib-name", "version": "1.0.0", "main": "dist/cjs/index.js", "module": "dist/esm/index.j..

name: Releaseon: push: branches: - mainjobs: release: permissions: contents: write runs-on: ubuntu-latest steps: - name: Checkout code uses: actions/checkout@v3 - name: Set up Node.js uses: actions/setup-node@v3 with: node-version: '20' - name: Config identity run: | git config --global user.email "${{ secrets.A..

문제https://www.acmicpc.net/problem/2302풀이간단화: VIP가 없는 경우x ~ y - 1(1 입장권은 max(1,x-1) ~ min(N,y)이 배분될 수 있다.x = 1로 고정한다면 좌석 1 ~ y-1의 입장권은 1 ~ min(N, y)이 배분될 수 있다.y-1번 좌석은 입장권 y-2,y-1,y가 배분될 수 있고 y번 좌석은 입장권 y-1,y,y+1이 배분될 수 있다.계획y-1번과 y번 좌석에 배분 가능한 입장권이 일부 겹친다. 따라서 어떤 경우가 안되는지, 어떤 경우가 되는지 케이스 처리를 해줘야한다.y번 좌석은 y-1 ~ y+1번 입장권에 관심있지 y-2 ~ 1번 입장권에 배분이 관심이 없다. 따라서 1~y-1번 좌석에 입장권을 잘 배분하고 케이스 처리를 해주면 y번 좌석에..

문제https://www.acmicpc.net/problem/14705개요매우 단순화하면 게임은 다음 프로세스의 반복이다.지목권 A 가진 사람이 A 양도지목권 B 가진 사람이 B 양도분석1n번째에 A 지목권이 오간다면 n+2번째에 다시 A 지목권이 오간다. 이는 B 지목권에도 동일하게 적용된다.n번째에 어떤 지목권으로 지목했다면 n + 4k(k >= 0인 정수)에 같은 사람이 같은 지목권으로 지목받을 수 있다.얍샙이 플레이를 하는 두 사람(x, y)이 있다. x가 n번째에 어떤 지목권으로 y를 지목했을 때 y가 n+2번째에 x를 같은 지목권으로 지목할 수 있다. x는 다시 n + 4번째 지목에 같은 지목권으로 y를 지목 가능하다.즉 x는 n + 4k(k >= 0인 정수)번째 지목에 같은 지목권을 다시 사..

import React, { useState, useRef } from 'react';import { FormDataType } from "./types";const Form = () => { const [formData,setFormData] = useState({name:}) const handleSubmit = (e) => { e.preventDefault(); }; return ( Name: Email: Submit );};export default Form;이 Form을 여러 방식으로 관리해보자!useStateimport React, { useState } fro..

조건중간발표, 새로운 피쳐 기획 및 개발로 인해 이 작업에서 많은 시간을 쏟기 어렵다(우선순위에서 밀린다)CI 자체가 많은 시간이 걸리면 안된다(PR 템플릿의 내용을 채우는 시간 고려해서 총 4분 이내면 좋을 것이다)문제 제시배포 작업을 백엔드 팀원이 수행했으나, 역시나 많은 난관이 생겼다. 하지만, 이것이 프로젝트 자체 코드의 문제인지 AWS infra 문제인지 알기 어려웠고, 이를 해결하기 위해 일일히 PR을 날리고 로컬에서 빌드하며 검증을 해야했다. 이 작업에서 많은 시간 및 커뮤니케이션 병목이 발생했다. 문제 판단빌드 정도는 PR때 쉽고 빠르게 검증할 수 있다고 생각한다. 결론적으로 빌드가 성공하면 (AWS infra문제가 아니라면)배포가 된다E2E 유닛 통합테스트까지는 인력과 시간이 부족하다 우..

//_components/PDFViewer.tsx"use client"import { pdfjs } from "react-pdf";//...pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`;//...pdfjs worker을 적용하는 중 Promise.withResolvers is not a function Error을 마주했다. 이렇게 Promise.withResolvers가 내부 코드에서 사용되는 모습을 볼 수 있다.(pdf.worker.min.mjs는 pdf.worker.mjs의 빌드된 압축 코드일텐데 왜 안뜨는건지 모르겠다.)//grep -r "withResolv..

이번 소마 프로젝트에 MSW, jotai, react-query를 사용한다.어떤 로직이 전역적으로 적용돼야하거나, 어떤 값을 전역적으로 주입해야할 때 깔끔하게 주입하는 구조를 제시한다. 이것이 당연히 정답은 아니다.1. 프로젝트 루트에 provider 폴더와 index.tsx를 만든다.//provider/index.tsxinterface PropType { children: ReactNode;}export default function Provider({ children }: PropType) { return ( {children} );}2. 각각의 필요한 컴포넌트를 /providr에 구현한다.// /provider/QueryClientProvider.tsx"use client"..

문제https://www.acmicpc.net/problem/7806 풀이1. GCD를 구하는 것은 유클리드 호제법으로 log 복잡도로 구할 수 있으나, 저 거대한 팩토리얼을 다룰 도리는 안보인다.다른 방법(정확히는 더 고전적인 방법)으로 GCD를 구할 수 있다.N의 소인수의 집합을 A, M의 소인수의 집합을 B라고 하자.I = A ∩ B, e ∈ I 라고 하자 (사실 A 또는 B 둘중 하나에 대해서 수행해도 된다.)cnt(num,x)는 소인수 x가 num에 몇개 포함돼있는지(num을 x로 몇번 나누어 떨어지게 나눌 수 있는지) 리턴하는 함수라 하자.# pythonGCD = 1for e in I: for i in range(min(cnt(N,e),cnt(M,e))): GCD = GCD ..

개요나같은 경우엔 intersection observer을 해당 코드에서 레퍼런스를 얻어 사용한다.(깃허브에도 코드가 있다.) 저 링크와 해당 포스트를 같이보면 좋을 것 같다저 코드는 어떻게 동작하는 것인가? 사용법(간단히)const Section = (props: { title: string }) => { const { ref } = useIntersectionObserver({ threshold: 0.5, onChange: (isIntersecting: boolean, entry: IntersectionObserverEntry) => { if (isIntersecting){ console.log(entry.target) } } }) return (..