Next.js와 MUI의 병용이 더 쉬워졌다!

Next.js와 MUI의 병용이 더 쉬워졌다! Next.js 및 MUI를 함께 사용하자 (feat. Tailwind CSS) 바로 저번 주까지만 해도 Next.js와 MUI를 함께 사용하려면 캐시 처리 및 인젝션 오더 설정용 프로바이더를 직접 공식 문서에 따라 만들고 커스텀해 삽입하는 노가다가 필요했다. 하지만 이제 그럴 필요가 없어진 것 같다. 포트폴리오용 사이트를 제작하기 위해 MUI 문서 를 들어가보니 새로운 방법이 제시되어 있었기 때문이다. 변경된 사용 방법 우선 각 단계를 진행하기 전에 기본적인 MUI 구성 은 완료되어 있어야 한다. 또한 문서에서는 Next.js 13 이상에서 진행하기를 권장하고 있다. 나는 pnpm 패키지 매니저를 사용하므로 다른 패키지 매니저를 사용한다면 적절히 변환해서 사용하면 된다. App Router에서 사용하기 1. 필요한 패키지 설치 : pnpm add @mui/material-nextjs @emotion/cache 명령어로 필요한 의존성을 추가한다. 2. 설정 : app/layout.tsx 에서 AppRouterCacheProvider 를 사용해 <body> 안의 요소를 감싼다. // app/layout.tsx + import { AppRouterCacheProvider } from '@mui/material-nextjs/v13-appRouter'; // or `v14-appRouter` if you are using Next.js v14 export default function RootLayout(props) { const { children } = props; return ( <html lang="en"> <body> + <AppRouterCacheProvider>{children}</AppRouterCacheProvider>

Next.js와 MUI의 병용이 더 쉬워졌다!

Next.js와 MUI의 병용이 더 쉬워졌다! Next.js 및 MUI를 함께 사용하자 (feat. Tailwind CSS) 바로 저번 주까지만 해도 Next.js와 MUI를 함께 사용하려면 캐시 처리 및 인젝션 오더 설정용 프로바이더를 직접 공식 문서에 따라 만들고 커스텀해 삽입하는 노가다가 필요했다. 하지만 이제 그럴 필요가 없어진 것 같다. 포트폴리오용 사이트를 제작하기 위해 MUI 문서 를 들어가보니 새로운 방법이 제시되어 있었기 때문이다. 변경된 사용 방법 우선 각 단계를 진행하기 전에 기본적인 MUI 구성 은 완료되어 있어야 한다. 또한 문서에서는 Next.js 13 이상에서 진행하기를 권장하고 있다. 나는 pnpm 패키지 매니저를 사용하므로 다른 패키지 매니저를 사용한다면 적절히 변환해서 사용하면 된다. App Router에서 사용하기 1. 필요한 패키지 설치 : pnpm add @mui/material-nextjs @emotion/cache 명령어로 필요한 의존성을 추가한다. 2. 설정 : app/layout.tsx 에서 AppRouterCacheProvider 를 사용해 <body> 안의 요소를 감싼다. // app/layout.tsx + import { AppRouterCacheProvider } from '@mui/material-nextjs/v13-appRouter'; // or `v14-appRouter` if you are using Next.js v14 export default function RootLayout(props) { const { children } = props; return ( <html lang="en"> <body> + <AppRouterCacheProvider>{children}</AppRouterCacheProvider>

GitLab Runner for Windows에서 filename too long 문제 발생

GitLab Runner for Windows에서 filename too long 문제 발생 Filename To Long… Electron 관련 프로젝트가 자동으로 배포되도록 파이프라인을 구성했다. 리눅스 쪽 러너에서는 문제가 없는데 Windows 러너쪽에서 계속 실패를 하여 로그를 확인해보니 filename too long 에러가 발생하고 있었다. 원인이 되는 경로는 node_modules/* 쪽이었는데 이걸 뭐 어떻게 건드릴 수 있는 상황이 아닌 건 둘째 치더라도, 현재 레지스트리에서 긴 파일 경로를 허용 해놓은 상태인데 이게 왜 뜨는지 알 수가 없었다. git config 원인은 엉뚱하게도 git 설정에 있었다. 발견했을 때는 황당했는데, 아무래도 내부적으로 git 관련 커맨드를 사용하는 게 아닌가 싶다. core.longpaths 이 증상을 해결하는 데 내가 사용한 방법은 core.longpaths 를 true 로 설정하는 것이다. git config --system core.longpaths true 위 명령어를 관리자 권한의 파워쉘에서 실행한 뒤 실패한 Job을 재가동하니 정상적으로 작동했다.

JetBrains WebStorm에서 Reference된 tsconfig 프로젝트를 인식하지 못하는 문제

이미지
JetBrains WebStorm에서 Reference된 tsconfig 프로젝트를 인식하지 못하는 문제 WebStorm이 tsconfig.*.json을 인식하지 못함 제목을 한 줄로 정리하려니 참 머리가 아프다. 제목만 보고 무슨 문제인지 잘 감이 안 잡힐 수도 있겠다 싶어서 방금 내가 겪은 일을 간단히 요약하고 들어가겠다. electron-vite 프로젝트 구성 : npx create electron-vite 명령어로 electron-vite 프로젝트를 구성했다. JetBrains WebStorm에서 프로젝트 열기 : 구성된 프로젝트를 JetBrains WebStorm으로 열었다. tsconfig.web.json의 compilerOptions.paths 에 alias 추가 : @renderer/*, @lib/* 등 path aliases를 추가했다. 코드 자동완성으로 import 시도 : @lib/abc 를 import하려 하였으나 ../../lib/abc 가 임포트됨 🤬 시도해 본 방법들 WebStorm이 업데이트된지 얼마 되지 않았기에 혹시 업데이트 관련해서 문제가 생긴 것인지 확인하기 위해 tsconfig.json 자체에서 paths를 추가해봤더니 정상 작동했다. 그 상태에서 tsconfig.web.json 의 paths를 제거해봤다. 기존 절대 경로 임포트들에서 에러가 발생했다. (IDE 자체 에러) tsconfig.paths.json 을 만들고 tsconfig.json 및 tsconfig.web.json 에서 reference를 해봤다. IDE에서는 잘 작동하는 것처럼 보이지만 프로젝트 전체 구성에 문제가 발생해 개발 및 프로덕션에서 사용할 수 없었다. 올바른 해결 방법 우선 문제를 확실히 하기 위해 완전히 새로운 electron-vite 프로젝트를 만들고 내 tsconfig.web.json 과 비교해 봤더니 기본적으로 @renderer/* 경로가 paths에 추가되어

puppeteer의 waitForXpath는 더 이상 사용되지 않는다. 대체 방법.

puppeteer의 waitForXpath는 더 이상 사용되지 않는다. Obsolete API - waitForXpath 조금 늦은 감이 있지만, 아무튼 Puppeteer 16.1.0 부터 waitForXpath 메서드 등 XPath 관련 독립 메서드들이 모두 더 이상 사용되지 않게 됐다. 그렇다고 더 이상 XPath를 사용하여 엘리먼트를 선택할 수 없는 것은 아니다. waitForSelector를 사용한 xpath 쿼리 이제부터는 waitForSelector를 사용해 xpath를 쿼리할 수 있다. 이렇게 하려면 셀렉터에 xpath/ prefix를 붙여주면 된다. await elementHandle . waitForSelector ( 'xpath/' + xpathExpression ) ; 즉 xpath/ 까지가 본체이고 이후에는 통상 xpath를 입력하면 된다는 말. 즉 ../input[@id='query'] 를 쿼리하고자 한다면 await elementHandle . waitForSelector ( 'xpath/../input[@id="query"]' ) ; 와 같이 사용하면 된다. //button[@type='submit'] 을 찾고자 한다면, 슬래쉬 세 개가 들어간다고 두려워하지 말고 await elementHandle . waitForSelector ( 'xpath///button[@type="submit"]' ) ; 과 같이 사용하면 된다. PuppeteerSharp puppeteer 의 C#용 포팅 라이브러리인 PuppeteerSharp 역시 이와 같은 변경 사항이 적용되었으니 같은 방식으로 사용하면 되겠다.

Safari의 100vh 문제

Safari의 100vh 문제 100vh? CSS의 vh 단위는 1% of Viewport Height 이다. vw 는 1% of Viewport Width 이고. 나는 이 단위를 알게 된 시점부터 지금까지 꾸준히 즐겨 사용하고 있었다. 이전에는 html, body 에 width, height 를 각각 100%로 지정하고, 하위 엘리먼트에서 또 적용하고 하는 식으로 페이지가 뷰포트에 꽉 차게 구현해야 했었지만 1 이 단위가 나오고 나서는 간단하게 뷰포트에 꽉 채울거면 너비는 100vw 로, 높이는 100vh 로 지정하면 됐기 때문이다. vw, vh가 만능은 아니다. 하지만 위 이야기는 데스크탑 버전의 웹 페이지를 작업할 때만 해당되는 말이다. 반응형 웹이랍시고 데스크탑과 모바일 모두에서 예쁘게 잘 보여야 제대로 만들어진 페이지란 소리를 듣는 요즘 세상에서는 vw, vh 도 만능은 아니다. 어디까지가 Viewport인가 그 이유는 바로 모바일 브라우저들의 지랄맞은 Address Bar(또는 Navigation Bar) 때문이다. 화면 크기가 제한적인 모바일 브라우저의 특성 때문에 모바일 브라우저의 주소창 영역은 그 높이가 일정하지 않다. 크롬, 사파리, 오페라, 웨일, 파이어폭스, 키위 등 브라우저마다 높이가 다른 것 은 둘째 치더라도, 하나의 브라우저에서도 주소창이 스크롤 중에 위나 아래로 쏙 들어가버리는 경우 가 생기기 때문에 항상 높이가 변한다고 봐도 무방하다. 문제는, 이런 상황에서 vh 유닛을 사용할 때 발생한다. Viewport는 Address Bar 영역도 포함한다. 이게 정말 사람을 미치게 하는 부분이다. 데스크탑용 브라우저에서 뷰포트라 하면 주소창 및 메뉴 영역을 제외한, 실제로 페이지가 렌더링되는 부분을 말한다. 즉 document 가 렌더링될 수 있는 영역만을 뷰포트라고 정의하고 이를 통해 직관적으로 vw, vh 를 사용할 수 있다. 그러나 모바일은 다르다. 일부 모바일 브라우저

윈도우 위젯을 엣지 대신 크롬에서 열게 해보자

이미지
윈도우 위젯을 엣지 대신 크롬에서 열게 해보자 엣지로 열리는 위젯 링크들 윈도우 11에는 작업 표시줄 좌측 하단 또는 Win + W키로 열 수 있는 위젯 기능이 탑재되어 있다. 위젯을 열면 날씨, 뉴스 등 관심사에 대한 정보를 빠르게 확인할 수 있어 유용하게 사용 중이었다. 하지만 단 하나 불편한 게 있다면 위젯이 무조건 엣지로 열린다는 것이다. 나는 크롬 및 파이어폭스를 주력으로 사용하고 있는데 뉴스나 날씨를 확인하려 위젯에서 아이템을 클릭할 때마다 엣지가 또 켜지는 것이 불편해서 방법이 없나 찾아보았다. 위젯 엣지로 열린 화면 MSEdgeRedirect 아니나 다를까 rcmaehl/MSEdgeRedirect 이라는 프로젝트가 2021년 7월부터 만들어져 있었다. 없으면 만들 생각을 하고 있었는데 역시 요즘 세상에 웬만한 건 죄다 누군가 만들어서 올려놓는단 것을 다시 한 번 깨닫게 되는 시간이었다. 설치 설치에는 몇가지 방법이 있다. 하나는 해당 프로젝트의 릴리즈 페이지 에서 설치하는 것이고, 다른 하나는 winget 을 이용하는 것이다. 물론 chocolatey 로도 가능하지만 이번 포스트에서는 winget 을 사용하는 방법에 대해 적겠다. WinGet을 이용한 설치 방법 이 방법은 당연히 WinGet이 지원되는 윈도우 업데이트가 설치되었거나, 수동으로 WinGet을 설치해놓은 컴퓨터에서만 사용할 수 있다. winget install MSEdgeRedirect -s winget 위 명령어를 입력하면 알아서 설치가 끝나게 된다. 사용 일단 기본적으로 설치가 완료되면 위젯 쪽의 링크는 알아서 리다이렉트된다. 일반적인 경우라면 더 손 댈 것은 없겠지만 그 외에도 몇가지 옵션을 지원하므로 살펴보도록 하겠다. Active Mode Options : 어떤 엣지 런타임 버전에 대해 리다이렉트를 수행할지 정한다. 기본값은 Edge Stable 만