나의블로그

모노레포어떤 라이브러리를 개발하고 그 결과를 테스팅하기 위해 모노레포를 사용한다.필자는 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..

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"..

개요나같은 경우엔 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 (..

개요해당 카카오테크 블로그를 통해 무한스크롤을 많이 구현하는 것 같다.따라서 이 글은 저 블로그 코드가 어떻게 동작하는지에 대해 설명하고, 다음 글에선 난 어떤 방식으로 Intersection observer을 다룰건지에 대해 포스팅한다.tanstack-query의 useInfiniteQuery, intersection observer, 저 블로그글에 대해 접해본 사람이 본다면 좋을 것 같다. IntersectionObserser APIlet options = { root: document.querySelector("#scrollArea"), rootMargin: "0px", threshold: 1.0,};let observer = new IntersectionObserver(callback, op..

레포 링크 WSS기존 웹소켓 + Securehttp와 https 관계와 유사하다. 비대칭 공개키 인프라로 통신을 보호한다.서비스 이용자는 public key로 정보를 암호화한다.서비스 제공자는 private key를 소유한다. private key를 이용해 암호화한 정보를 해독한다. Self-sign 인증서개발자 또는 업체에서 자체적으로 서명한 TSL/SSL 인증서일반적으론 안전하지 않다고 여겨진다.openssl genrsa -out key.pem 2048openssl req -new -key key.pem -out csr.pemopenssl x509 -req -in csr.pem -signkey key.pem -out cert.pem터미널에 해당 커맨드를 입력한다.1. 2048 bit의 private ..

레포 링크 서론곧 sw마에스트로에서 험난한 기획평가가 끝나 개발을 시작할 예정이다.프로젝트에 실시간 통신 기술이 사용될 예정이라 미리 맛보고 싶었다.그래. 이름 들어본 web-socket으로 가자 웹소켓TCP/IP를 통해 서버와 브라우저간 양방향 연결을 유지한 채로 패킷 데이터를 교환하는 프로토콜브라우저와 서버간의 통신을 "웹"소켓이라고 한다.ws:// 프로토콜과 TSL layer을 거쳐 송신자 데이터가 암호화되는 wss:// 프로토콜로 나뉜다. https://처럼 후자가 권장된다.web socket은 hand shake 단계에서 클라이언트는 req를 보내 서버로부터 res를 받은 뒤 data를 송수신하는 과정으로 이루어진다. socket.io해당 라이브러리 없이도 ws를 통해 web socket 기능을..