Windows Terminal은 기존 windows의 명령 프롬프트(cmd), PowerShell, WSl과 같은 CLI를 사용할 수 있는 터미널 프로그램입니다. Microsoft 공식 프로그램이며 github에서 MIT license open source로 개발되고 있습니다. 사용하면서 좋았던 점들을 정리해보았습니다. 예쁜 UI 기존 cmd와 비교해보면 UI가 훨씬 예쁩니다. 위 사진은 제가 사용하는 windows termial 입니다. 설정 탭에서 모양 관련 설정을 바꿀 수 있습니다. 기존 cmd는 뭔가 legacy 스타일인데 비해 좀 더 사용자 친화적인 UI입니다. 사진에서 볼 수 있듯이 테마, 글꼴 등을 설정할 수 있고, 레트로 터미널 효과를 활성화하면 영화에서 보던 옛날 기기들 터미널 효과를 적..
antd를 사용하여 프로젝트 하나를 진행하고 있습니다. 사용하면서 느낀 점들을 정리해보겠습니다. https://ant.design/ Ant Design - The world's second most popular React UI framework Ant Design 5.0 use CSS-in-JS technology to provide dynamic & mix theme ability. And which use component level CSS-in-JS solution get your application a better performance. ant.design https://github.com/ant-design/ant-design GitHub - ant-design/ant-design: An e..
최근 회사에서 React 개발 중 컴포넌트 렌더링시에 버벅거리는 (lagging) 현상이 나타났습니다. 새로고침하면 괜찮아지기도하면서 간헐적으로 발생했습니다. 추측했던 원인은 다음과 같습니다. 1. 잘못된 상태 관리로 인한 불필요한 리렌더링 발생 2. UI 라이브러리 컴포넌트 오사용으로 인한 오류 하지만 다행히도(?) 진짜 원인은 Chrome DevTools였습니다. Chrome DevTools에서 애플리케이션을 모니터링하고 있다보니 렌더링에서 lagging 이 발생하는 것이었습니다. https://stackoverflow.com/questions/60573388/react-app-slows-to-a-crawl-with-chrome-developer-tools-open-works-fine-in-incog..
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..
-
[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 컴포넌트는 다음과 같이 생겼습니다. 연,..