거의 알고리즘 일기장

만약 apple silicon이 들어간 컴퓨터가 아니라면, 여기서 node버전에 따른 지원정보를 확인하시면 거의 해결 가능합니다! 문제 node-sass는 apple silicon 이 들어간 노트북을 쓰는 경우 지원하지 않는 이슈 가 존재합니다. 환경 arch: apple silicon arm64 os: ventura nvm 이용, 테스트해본 node 버전 (14.19.2, 14.19.1, 14.21.2) node-sass 4.14+ < 5 관련 에러 테스트 해봤을때는 node 버전마다 나오는 에러 로그가 조금씩 달랐는데, 다음과 같습니다. force 옵션으로 깔고 npm run start 시에야 제대로된 로그가 나옵니다. python 관련 에러 로그 (npm i) gyp ERR! stack Error:..

nextjs 초심자 권모씨 평소와 같이 zustand persist를 사용하던중 content mismatch 문제가 발생하는데... 이게 어떻게 된일일까?? 사건의 전말은 이렇다! //... const Mismatch = () => { const user = useUser(); return {user?.name ?? 'user is null'}; }; 얼핏보면 문제가 없어보인다. 하지만, 피해자는 이 코드의 환경이 nextjs 라는 사실을 간과했다!! 문제는 store hydrate가 되는 지점이다!! html -> store hydrate -> react rehydrate 이런식으로 store hydrate가 react의 rehydrate 되기 직전에 된다!! 이게 왜 문제가 되는지는 react do..

nextjs를 처음 사용해보는 권모씨 평소와 같이 antd, styled-component를 사용하던중 문제를 발견하는데... 아씨.. 왜이리 스타일이 늦게 먹는것 같지?.. 나는 react처럼 똑같이 세팅하고 그라는디.. ㅠ 이유가 무엇일까??... 이유는 바로 nextjs의 랜더링 방식에 있다!! nextjs는 (default인 ssg 기준으로) HTML을 빌드 타임에 각 페이지별로 생성하고 해당 페이지로 요청이 올 경우 이미 생성된 HTML 문서를 먼저 보낸다. 이때, 미리 빌드타임에 생성된 html 문서에 스타일링이 먹히지 않아서 FOUC(flash of unstyled content) 문제가 생기는것이다. (styled-component는 css-in-js 방식이므로 js파일에 있다. antd도..

nestjs 연습용 및 장난으로 만든 욕배틀 슬랙봇이 있는데, 서버를 프리티어가 참 괜찮은 fly.io에 두고 있다. 근데, 멀쩡하던 배포라인이 갑자기 이런 에러를 뱉었다. //in github action Run flyctl deploy --remote-only ==> Verifying app config --> Verified app config ==> Building image WARN Failed to start remote builder heartbeat: You hit a Fly API error with request ID: 01GRE1QHWN2D28BQ5SYD3X63JB-lax Error failed to fetch an image or build from source: error conn..

블로그의 인기글을 보아하니 git commit convention이 인기인거 같아 환경구성에 대해 한번 다뤄보려고 합니다. 계획 계획은 다음과 같습니다. 비속어를 감지해서 replace 시키는 모듈을 만들어 npm에 publish 이때 1. commitlint와 husky를 이용해서 commit 규칙을 잘지키게끔 유도한다. 2. release-it을 이용해 publishing, versioning, change log도 편하게 관리한다! 이 두가지의 제약을 추가해서 구현해볼것입니다! 그럼 ㄱㄱ 사전지식 commitlint? husky? release-it? 이 세가지 도구를 처음들어보는 사람도 있을테니 이 도구들을 어떻게 이용할지 설명하자면, commitlint -> commit의 규칙을 지켰는지 확인할..

최근 tuborepo document를 읽다가 package manager는 pnpm을 쓰는것을 적극 권장하는걸 보고 호기심이 들어 서칭해보았다. 이 글은 그것을 정리해놓은 글이다. pnpm? npm, yarn과 같은 package manger다. 만들어진 동기 이미 npm, yarn이 존재하는디? 왜 만듬? 1. npm v3 전 버전의 package를 관리하는 방식의 문제점이 있었다. 1) module의 중복 2) 너무 깊은 종속성 트리로 인한, 디렉토리 경로 문제 2. npm v3 부터 이 문제를 해결하기 위해 root로 평탄화함으로써 중복을 줄였다. (hoisting 함) 그리고 이건 yarn v1 도 마찬가지다. 이로써 yarn v1, npm flat한 node_modules 한 방법을 이용하게..

naver D2의 Google Developers 사이트에 공개된 Mariko Kosaka의 "Inside look at modern web browser"(최신 브라우저의 내부 살펴보기) 시리즈를 번역한 글을 정리해보았습니다. part 1 최신 브라우저의 내부 살펴보기 1 - CPU, GPU, 메모리 그리고 다중 프로세스 아키텍처 TL:DR 한개의 process를 사용하는 방식, 다중 process를 사용하는 방식이 있다. Chrome은 다중 process를 사용하는 방식을 선택했다. 다중 process 방식은 다른 process의 thread간에 메모리를 공유할 수 없기 때문에, 메모리 낭비가 심해질 수 있다. Chrome에서는 서비스화를 위해서 나름의 방식으로 메모리를 아끼기 위해서 처리해놓았다. ..

만약에 이전 글을 읽지 않으셨다면, 이전 글을 먼저 보고 읽어주세요! https://kunkunwoo.tistory.com/282 이전 글에 이어서 설명드리겠습니다! 기존의 빌드도구 기존의 빌드 도구들은 Webpack, rollup, parcel이 있습니다. webpack webpack은 가장 유명한 번들러이고 cra라는 유명한 react boilerplate에서도 사용되는 번들러입니다. 그만큼 가장 안정적이며 생태계가 크다는 장점을 가지고 있습니다. 또한, 개발 편의를 위한 기능들을 기본적으로 많이 제공합니다. 단점으로는 느리고 configuration이 복잡하며 공식문서가 겁나 별로입니다. 정리 제일 유명한 모듈 번들러 제일 안정적임 가장 생태계가 큼 개발서버에서 개발 편의를 위한 기능들을 많이 제공..

몇달전에 회사에서 이 내용을 가지고 세미나를 했었는데, 이 발표 내용을 블로그 글로 옮겨보았습니다! 몇달전 발표내용이라 현재 상황과 조금 다른 부분이 있을수 있습니다! 이 글의 목표 !! 웹 프론트 생태계에 대한 이해 (transfiler가 왜 필요한지? Module bundling이 왜 필요한지? 에 대한 이해) 기존의 빌드 도구와 차세대의 빌드 도구의 차이점 사전지식 Transfile compile의 경우, 한 언어로 작성된 소스 코드를 다른언어로 변환하는 것을 의미합니다. 예를 들면 C언어로 작성된 소스코드를 기계어로 변환하는 과정을 compile이라고 할 수 있겠습니다. transfile은 한 언어로 작성된 소스코드를 비슷한 수준의 추상화(Abstraction)를 가진 다른 언어로 변환하는 것을 ..

이번에는 저번의 pi chart, donut chart에 이어서 line chart를 만들어보았다. https://kunkunwoo.tistory.com/278 파이 차트, 도넛 차트 라이브러리 없이 만들기 (pi chart, line chart) https://evan-moon.github.io/2020/12/12/draw-arc-with-svg-clippath/ SVG와 삼각 함수로 도넛 차트 만들어보기 이번 포스팅에서는 얼마 전에 필자가 삽질했던 내용인 SVG로 도넛 차트 그려보기에 대해서 이야기해볼 kunkunwoo.tistory.com 결과물 사전지식 1. svg path line 그리기 2. bezier curve 1. svg path line 그리기 path d 속성중 command L 사용..