728x90
728x90
서론 뭐... 이번 포스팅은 이미 제목에서 모든걸 설명하고 있다... Next.js App Router에서 Barrel Index를 사용하다가, 주의할 점을 발견하게 되어 포스팅으로 남기게 됐다. 서버 컴포넌트는 "use client"가 붙은 파일에서 export한 요소를 사용할 수 없다. 어찌보면 당연한 사실일 수 있지만, 놀랍게도 서버 컴포넌트에선 "use client"를 붙인 파일에서 export한 모든 요소를 "return 키워드" 이전에 사용할 수 없다. 위 이미지 처럼 "use client"를 붙인 client.ts에서 SessionProvider 컴포넌트와 getServerSession 함수를 export하고, "use client"를 붙이지 않은 layout.tsx에서 이를 import 하..
뭔가 크롬 확장프로그램은 파면 팔수록 뭔가 요상한듯하다... 이번엔 chrome.runtime.onInstalled에 addListener로 추가된 핸들러가 실행되는 시점이 문제가 되었다. 필자가 처음에 이해한 onInstalled는 크롬 확장프로그램이 크롬 웹스토어로부터 설치가 되었을때 최초 1번만 실행이 되는것이었다. 하지만 실제 사용해보니, onInstalled는 최초 1회 뿐만 아니라 확장프로그램 새로고침이나, 윈도우 컴에서 재부팅 후 크롬을 실행했을때에도 핸들러를 실행시켰다. (근데 MacOS에선 재부팅을 하고 크롬을 실행시켜도 onInstalled 핸들러가 실행되지 않았다...) 아무튼 필자가 원하는 동작는 크롬 웹스토어에서 확장 프로그램이 설치되었을때 1회만 핸들러를 실행하는 것이었다보니 별..
Uncaught (in promise) TypeError: Error in invocation of scripting.executeScript(scripting.ScriptInjection injection, optional function callback): Error at parameter 'injection': Error at property 'args': Error at index 2: Value is unserializable 크롬 익스텐션에서 타겟 탭 내에 스크립트를 실행하기 위해 chrome.scripting.excuteScript()를 사용하다 위와 같은 오류를 맞닥뜨렸다. 타켓 탭에 실행시킬 함수 인자에 serialize할 수 없는 값들이 들어있어 오류가 발생했다는 메시지인데... 필자는..
서론 Tailwind CSS(이하 tailwind)를 사용하다보면 컴포넌트의 className prop 외에도 tailwind 스타일을 작성해야할 상황을 자주 마주친다. 하지만 VSCode의 Tailwind CSS IntelliSense 는 기본적으론 className prop만 자동완성을 제공하기 때문에 변수 등에 문자열로 tailwind 스타일을 작성할때 자동완성을 이용할 수 없어 매우 불편하다. 하지만 이러한 문제는 Tailwind CSS IntelliSense가 제공하는 설정에 정규식을 작성해주면 내가 원하는 곳에서 tailwind 자동완성을 사용할 수 있도록 지정할 수 있어서 해결이 가능하다. 이번 포스팅에선 tailwind 자동완성의 위치를 지정하는 정규식과 설정법을 소개하고자 한다. 요구사항..
서론필자는 원래 SWR를 주로 즐겨 사용해왔다. 그러다가 최근에 react-query에 관심을 가지게 되어 공부를 하던 중, 기존에 필자가 SWR로 전역상태를 관리했던 것처럼 react-query에서도 똑같이 사용할 수 있지 않을까 라는 생각이 들게되어 이번 포스팅을 작성하였다. 아직 SWR로 전역상태를 관리하는 방법을 모르거나 궁금한 사람은 아래 글을 참고하길 바란다. [Typescript] SWR로 React에서 전역상태관리 라이브러리 걷어내기서론 이번 포스팅에선 흔히 프론트엔드에서 사용되는 전역상태관리 라이브러리(Redux, MobX, Zustand, Recoil 등등...)들을 사용하지 않고 SWR만으로 전역상태를 관리하는 방법에 대해 소개해볼까 한다. blog.betaman.kr그래서 어캐 만듦..
서론 Next.js에서 TailwindCSS와 Chakra UI(혹은 emotion 기반의 다른 UI 라이브러리)를 함께 사용하면 UI 라이브러리의 컴포넌트가 정상적으로 표시되지 않는 문제가 생긴다. 이번 포스팅에선 이 문제를 해결하는 법에 대해 소개하도록 하겠다. 해결법 위 이미지를 보면 알겠지만, Chakra UI의 Button 컴포넌트가 CSS 적용이 정상적이지 못해서 화면에 표시되지 못하는 문제가 생겼다. 결론부터 말하자면, 이 문제의 원인은 ChakraProvider에 의해 삽입된 emotion cache의 위치때문이었다. tailwind는 전역 css 파일에 "@tailwind base" 구문을 넣어 프론트 프로젝트에 tailwind preflight css를 삽입한다. 그런데 문제는, 그 p..