Windows Terminal은 기존 windows의 명령 프롬프트(cmd), PowerShell, WSl과 같은 CLI를 사용할 수 있는 터미널 프로그램입니다. Microsoft 공식 프로그램이며 github에서 MIT license open source로 개발되고 있습니다. 사용하면서 좋았던 점들을 정리해보았습니다. 예쁜 UI 기존 cmd와 비교해보면 UI가 훨씬 예쁩니다. 위 사진은 제가 사용하는 windows termial 입니다. 설정 탭에서 모양 관련 설정을 바꿀 수 있습니다. 기존 cmd는 뭔가 legacy 스타일인데 비해 좀 더 사용자 친화적인 UI입니다. 사진에서 볼 수 있듯이 테마, 글꼴 등을 설정할 수 있고, 레트로 터미널 효과를 활성화하면 영화에서 보던 옛날 기기들 터미널 효과를 적..
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..
프론트엔드를 로컬에서 공부하고 작업할 때 잊어버리는 부분이 있습니다. 내가 만든 애플리케이션을 사용자가 보기위해서는 결국 "배포"라는 과정이 있어야합니다. 정적 웹페이지라면 그나마 간단할 수 있지만, SSR (server side rendering)과 같이 서버 부분이 필요한 배포가 있다면 프론트엔드만 공부해서는 어렵습니다. 그래서 deployment 업체들이 있습니다. 예를 들어 대표적인 SSR 프레인워크인 Next.js를 만든 Vercel은 deploy 서비스를 유료로 제공합니다. 그러나 그 비용은 생각보다 비쌉니다. Next.js를 open source를 사용하여 저렴한 비용으로 cloud에 depoly 할 수 도 있지만 권한관리등과 같은 문제가 엮이면 새로 공부를 해야합니다. 그래서 제가 선택한 ..
이전에 작성한 React Production 환경 테스트를 사용하여 build 결과물을 확인하고 있었습니다. 그런데 text compression을 적용하려고 보니 http server 생성을 위해 사용한 spa-http-server가 gzip encoding을 지원하지 않고 있었습니다. 그래서 다른 방법을 찾아보게 되어 그 내용을 정리해보겠습니다. 먼저 spa-http-server는 http-server를 fork하여 변형한 라이브러리였습니다. https://www.npmjs.com/package/spa-http-server spa-http-server A simple zero-configuration command-line http server. Latest version: 0.9.0, last pu..
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 컴포넌트는 다음과 같이 생겼습니다. 연,..