Windows Terminal은 기존 windows의 명령 프롬프트(cmd), PowerShell, WSl과 같은 CLI를 사용할 수 있는 터미널 프로그램입니다. Microsoft 공식 프로그램이며 github에서 MIT license open source로 개발되고 있습니다. 사용하면서 좋았던 점들을 정리해보았습니다. 예쁜 UI 기존 cmd와 비교해보면 UI가 훨씬 예쁩니다. 위 사진은 제가 사용하는 windows termial 입니다. 설정 탭에서 모양 관련 설정을 바꿀 수 있습니다. 기존 cmd는 뭔가 legacy 스타일인데 비해 좀 더 사용자 친화적인 UI입니다. 사진에서 볼 수 있듯이 테마, 글꼴 등을 설정할 수 있고, 레트로 터미널 효과를 활성화하면 영화에서 보던 옛날 기기들 터미널 효과를 적..
Next.js에서 prisma를 사용하여 supabse와 연결하는 개인 작업을 하고 있습니다. 기존에는 Next.js를 AWS Amplify를 사용하여 배포하고 있었습니다. https://jglee96.tistory.com/18 AWS Amplify 사용 리뷰 프론트엔드를 로컬에서 공부하고 작업할 때 잊어버리는 부분이 있습니다. 내가 만든 애플리케이션을 사용자가 보기위해서는 결국 "배포"라는 과정이 있어야합니다. 정적 웹페이지라면 그나마 jglee96.tistory.com 그런데 AWS의 무서운 점이 사용량을 넘어가면 자동으로 결제가 된다는 것입니다. 그냥 개인 프로젝트이기 때문에 프리 티어 사용량을 넘어가면 그냥 연결이 끊기는 것이 더 좋습니다. 그래서 고민을 하다가 Vercel로 넘어왔습니다. AWS..
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..
프론트엔드를 로컬에서 공부하고 작업할 때 잊어버리는 부분이 있습니다. 내가 만든 애플리케이션을 사용자가 보기위해서는 결국 "배포"라는 과정이 있어야합니다. 정적 웹페이지라면 그나마 간단할 수 있지만, SSR (server side rendering)과 같이 서버 부분이 필요한 배포가 있다면 프론트엔드만 공부해서는 어렵습니다. 그래서 deployment 업체들이 있습니다. 예를 들어 대표적인 SSR 프레인워크인 Next.js를 만든 Vercel은 deploy 서비스를 유료로 제공합니다. 그러나 그 비용은 생각보다 비쌉니다. Next.js를 open source를 사용하여 저렴한 비용으로 cloud에 depoly 할 수 도 있지만 권한관리등과 같은 문제가 엮이면 새로 공부를 해야합니다. 그래서 제가 선택한 ..
React 함수형 컴포넌트에서 setState를 사용하면서 다음과 같은 생각을 합니다. 현재 state와 다른 값을 업데이트할 때만 컴포넌트가 리렌더링되는구나 React 공식 문서에서도 똑같이 말하고 있습니다. 업데이트 함수가 현재 상태와 정확히 동일한 값을 반환한다면 바로 뒤에 일어날 리렌더링은 완전히 건너뛰게 됩니다. https://ko.reactjs.org/docs/hooks-reference.html#functional-updates Hooks API Reference – React A JavaScript library for building user interfaces ko.reactjs.org 그런데 개발을 하다보면 반은 맞고 반은 틀리다는 것을 알게 됩니다. 빠르게 예제를 통해 알아보겠습니다..
-
[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 컴포넌트는 다음과 같이 생겼습니다. 연,..