거의 알고리즘 일기장

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 사용..

react native를 작년 12월쯤 expo로 이용해본것을 시작으로 사용한지 약 1년쯤 지났다.최근들어 rn에 대한 회의감이 들기 시작했다. 그래서 한번 rn 약 1년 사용기를 정말 얇게 남겨보고자 한다. 주의!: 필자의 불평불만이 가득함 ㅎㅎ---2023 5월의 생각react native cli (bare) 를 이용할경우에는 아직 이 생각이 변함없지만, 최근 expo의 feature들을 보니 엄청나게 많은것들이 추가되었고 expo를 이용할 경우 대부분의 단점이 상쇄됨으로 expo를 쓴다는 가정하에는 괜찮은 기술이라고 생각이 바뀌었음---2025년 1월의 생각지금은 rn cli 가 너무 손에 익었고 배포 플로우는 10분안에 설정이 가능하고 간단한 앱정도는 며칠만에 심사를 올릴정도로 숙련되어서.. 나에..

https://evan-moon.github.io/2020/12/12/draw-arc-with-svg-clippath/ SVG와 삼각 함수로 도넛 차트 만들어보기 이번 포스팅에서는 얼마 전에 필자가 삽질했던 내용인 SVG로 도넛 차트 그려보기에 대해서 이야기해볼까 한다. 사실 도넛 차트를 그리는 것 자체는 SVG가 제공하는 엘리먼트를 사용하면 되기 때 evan-moon.github.io 이 블로그를 인상깊게 보고 나도 한번 만들어보기로 했다. 결과물 사전지식 1. 원 상에서 좌표를 구하는 공식 2. svg path로 호를 그리는 방법 1. 원 상에서 좌표를 구하는 공식 코드로 작성하면 다음과 같다. //https://evan-moon.github.io/2020/12/12/draw-arc-with-svg-..