Windows Terminal은 기존 windows의 명령 프롬프트(cmd), PowerShell, WSl과 같은 CLI를 사용할 수 있는 터미널 프로그램입니다. Microsoft 공식 프로그램이며 github에서 MIT license open source로 개발되고 있습니다. 사용하면서 좋았던 점들을 정리해보았습니다. 예쁜 UI 기존 cmd와 비교해보면 UI가 훨씬 예쁩니다. 위 사진은 제가 사용하는 windows termial 입니다. 설정 탭에서 모양 관련 설정을 바꿀 수 있습니다. 기존 cmd는 뭔가 legacy 스타일인데 비해 좀 더 사용자 친화적인 UI입니다. 사진에서 볼 수 있듯이 테마, 글꼴 등을 설정할 수 있고, 레트로 터미널 효과를 활성화하면 영화에서 보던 옛날 기기들 터미널 효과를 적..
git 대소문자 변경에서 이어지는 내용입니다. https://jglee96.tistory.com/16 git 대소문자 변경 commit 하기 아래 글에서 이어지는 내용입니다. https://jglee96.tistory.com/15 Acronym을 사용한 Naming 고민 React 컴포넌트 개발시 Pascal case에 따라 파일명을 짓습니다. 그런데 머리글자(acronym)으로 이루어진 단어 같은 jglee96.tistory.com 파일명에서 대소문자를 변경하고 git에 적용을 시켰습니다. 그런데 vscode의 GitLens "File History"에서 파일 변경 내역을 제대로 보여주지 못하고 있었습니다. 원인은 대소문자 변경이었습니다. 예를 들어 다음과 같이 수정했다고 예를 들어보겠습니다. Temp..
React 프로젝트 생성시 CRA를 많이 사용합니다. React 프로젝트에 필요한 여러 번들 라이브러리 및 설정들을 알아서 해주어 편하기 때문입니다. 하지만 알아서 해준다는 이 장점이 단점이 되기도 합니다. webpack config를 수정해야 하는 경우가 그렇습니다. CRA v5 (react-script v5) 이상부터 사용하는 webpack v5는 더 이상 nodejs 함수의 polyfill을 기본으로 제공하지 않습니다. 이 polyfill을 webpack config에 설정해주어야 합니다. (원칙상 nodejs를 사용하는 server-side의 패키지들은 backend에서 처리하고 frontend에서 받아서 쓰는 것이 맞습니다.) CRA는 webpack 설정을 알아서 해주기 때문에 webpack c..
처음 블로그를 계획할 때 front-end 개발자라면 직접 만든 블로그 하나쯤은 있어야 한다고 생각했습니다. 그런데 생각을 해보니 글을 어떻게 저장하고 게시할지 막막했습니다. aws를 사용한다고 해도 익숙하지 않은 내 영역 밖의 기술 때문에 시간을 많이 뺏기고 싶지 않았습니다. 그래서 찾아본 방법이 notion 페이지를 웹에서 보여주는 것입니다. react-notion-x 라는 패키지를 사용하면 될 것처럼 보였습니다. https://github.com/NotionX/react-notion-x GitHub - NotionX/react-notion-x: Fast and accurate React renderer for Notion. TS batteries included. ⚡️ Fast and accurat..
PowerToys는 windows 사용자 경험을 향상 시켜주는 유틸리티 도구 모음 프로그램입니다. Microsoft 공식 프로그램이며 github에서 MIT license open souce로 개발되고 있습니다. 저는 와이드 모니터에서 창분할 도구를 찾던 중 발견하게 되어 사용하게 되었습니다. 아주 만족하며 사용하고 있어 추천 리뷰를 작성하게 되었습니다. 제가 많이 쓰는 3가지 기능을 설명 드리겠습니다. FancyZones PowerToys를 처음 사용하게된 기능입니다. 회사에서 21:9 와이드 모니터를 사용하고 있습니다. IDE 창 하나를 띄워서 view를 3개로 나누고 react code view 2개와 css view 1개로 사용합니다. 그런던 중에 화면을 2:1 비율로 나누어서 2는 IDE, 1은..
-
[antd] Calendar onSelect의 비정상적 트리거 - [Close]
https://jglee96.tistory.com/21 [antd] Calendar onSelect의 비정상적 트리거 - [Open] antd의 Calendar 컴포넌트에서 버그라고 생각되는 동작이 있습니다. Github Issue에 등록되어있습니다. https://github.com/ant-design/ant-design/issues/39801 5.1.0 calendar组件的 onSelect、onChange 似乎有错，和认知中表 jglee96.tistory.com 위 글에서 이어지는 내용입니다. 3월 30일에 PR을 만들고, 관련 파일이 수정되어 rebase도 했었습니다. 그러나 답이 없다가 드디어 5월 13일 assignees가 생겼습니다. 그리고 5월 17일 closed 되었습니다!...? antd ..
-
Open NEXT
Next.js를 사용하면서 Vercel은 좋은 deploy 방법입니다. 그러나 프로젝트나 회사의 기본 infra아 AWS를 기반으로 하고 있다면 Vercel을 도입하는 것은 어려운 일입니다. 그리고 애플리케이션 트래픽이 증가한다면 Vercel은 비용적으로 부담이 될 수 밖에 없습니다. 이와 관련하여 많은 고민을 했었고 관련된 포스팅들도 하였습니다. Remix vs Next.js 간단 사용 리뷰 처음 블로그를 계획할 때 front-end 개발자라면 직접 만든 블로그 하나쯤은 있어야 한다고 생각했습니다. 그런데 생각을 해보니 글을 어떻게 저장하고 게시할지 막막했습니다. aws를 사용한다고 해 jglee96.tistory.com AWS Amplify 사용 리뷰 프론트엔드를 로컬에서 공부하고 작업할 때 잊어버리..
-
Prisma를 사용한 Next.js Vercel 배포 오류
Next.js에서 prisma를 사용하여 supabse와 연결하는 개인 작업을 하고 있습니다. 기존에는 Next.js를 AWS Amplify를 사용하여 배포하고 있었습니다. https://jglee96.tistory.com/18 AWS Amplify 사용 리뷰 프론트엔드를 로컬에서 공부하고 작업할 때 잊어버리는 부분이 있습니다. 내가 만든 애플리케이션을 사용자가 보기위해서는 결국 "배포"라는 과정이 있어야합니다. 정적 웹페이지라면 그나마 jglee96.tistory.com 그런데 AWS의 무서운 점이 사용량을 넘어가면 자동으로 결제가 된다는 것입니다. 그냥 개인 프로젝트이기 때문에 프리 티어 사용량을 넘어가면 그냥 연결이 끊기는 것이 더 좋습니다. 그래서 고민을 하다가 Vercel로 넘어왔습니다. AWS..
-
Prisma Client 연결 오류
Nextjs에서 prisma를 사용하여 supabase 의 postgres와 연결하는 개인 작업을 하고 있습니다. WSL2 환경에서 prisma를 실습해보고 있습니다. prisma는 다음 명령어를 사용하여 DB에 있는 data를 확인해볼 수 있습니다. npx prisma studio 그런데 WSL2에서 해당 명령어 실행시, 터미널에서는 Fatal Error가 뜨고 브라우저 studio 화면에서는 다음과 같은 오류 로그가 뜹니다. 원인 일단 제 문제는 아니었습니다. prisma문제였습니다. 정확한 동작은 모르겠지만 prisma, @prisma/client를 다음으로 바꿔주면 됩니다. (github issue) 4.12.0-integration-rtld-deepbind.3 만약 안된다면 package.jso..
-
[antd] Calendar onSelect의 비정상적 트리거 - [Open]
antd의 Calendar 컴포넌트에서 버그라고 생각되는 동작이 있습니다. Github Issue에 등록되어있습니다. https://github.com/ant-design/ant-design/issues/39801 5.1.0 calendar组件的 onSelect、onChange 似乎有错，和认知中表现不一致 · Issue #39801 · ant-design/ant-design Reproduction link Steps to reproduce 点击任何日期 或者 切换月份，然后查看 console的输出 What is expected? onSelect 方法我理解中，是当我选中某个 day后才会触发，但是我切换月份（比如改成1月，再改成3月 github.com antd의 Calendar 컴포넌트는 다음과 같이 생겼습니다. 연,..