[Typescript] Superstruct 오류메시지 커스텀하기

서론 최근 필자는 Supersturct를 사용해보다가 Superstruct는 기본적으로 오류메시지를 커스텀할 수 없다는 점을 알게됐다. 이는, 개발자가 임의로 오류메시지를 수정하여 부정확한 validation 결과를 내보내지 못하도록 하는 Supersturct의 철학이라고 한다. 하지만 일상적인 상황에선 사용자에게 현재 발생한 오류에 따른 문구를 보여주어야 하는 상황이 더 많을 것이고, Supersturct는 이를 위한 대응을 지원하지 않는다. 이를 위한 해결방법을 찾다가 Superstruct GitHub issue에 괜찮은 아이디어를 발견하게 되어 이번 포스팅에서 소개해보고자 한다. 해결책: 오류 메시지 함수를 직접 만들어버리자 custom error messages · Issue #568 · ians..

• format_list_bulleted SW/Typescript
• · 2024. 2. 20.
• textsms

[Typescript] optimizePackageImports 옵션으로 Next.js 번들 사이즈 줄이기 (modularizeImports 대체재)

서론 이번 포스팅에선 Next.js에서 번들 사이즈 최적화를 위해 제공하는 optimizePackageImports 옵션을 소개해보려고 한다. 점점 날이 갈수록 뚱뚱해지는 우리의 Next.js 프로젝트를 다이어트 시켜보자. optimizePackageImports가 뭔데? optimizePackageImports는 Next.js 13.5 버전에 출시된 next.config.js의 옵션이다. 이 옵션을 활성화하면, 프로젝트에서 import하고 있는 패키지가 번들링될 때의 용량을 절감 시켜준다. 그로인해 우리 번들링 결과물에 마법같은 용량 절감 결과를 보여준다. 하지만 절감 원리는 매우 단순하다. Barrel Index로 component, hook등을 제공하는 패키지들은 트리쉐이킹이 안되는 경우가 자주 발..

• format_list_bulleted SW/Typescript
• · 2024. 2. 8.
• textsms

[Typescript] Next.js App Router에서 Barrel Index를 사용할땐 서버와 클라이언트를 주의하여 구분하자

서론 뭐... 이번 포스팅은 이미 제목에서 모든걸 설명하고 있다... 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 하..

• format_list_bulleted SW/Typescript
• · 2024. 2. 7.
• textsms

[Typescript] chrome.runtime.onInstalled가 크롬 확장프로그램 최초 설치 1회만 실행되지 않는 문제

뭔가 크롬 확장프로그램은 파면 팔수록 뭔가 요상한듯하다... 이번엔 chrome.runtime.onInstalled에 addListener로 추가된 핸들러가 실행되는 시점이 문제가 되었다. 필자가 처음에 이해한 onInstalled는 크롬 확장프로그램이 크롬 웹스토어로부터 설치가 되었을때 최초 1번만 실행이 되는것이었다. 하지만 실제 사용해보니, onInstalled는 최초 1회 뿐만 아니라 확장프로그램 새로고침이나, 윈도우 컴에서 재부팅 후 크롬을 실행했을때에도 핸들러를 실행시켰다. (근데 MacOS에선 재부팅을 하고 크롬을 실행시켜도 onInstalled 핸들러가 실행되지 않았다...) 아무튼 필자가 원하는 동작는 크롬 웹스토어에서 확장 프로그램이 설치되었을때 1회만 핸들러를 실행하는 것이었다보니 별..

• format_list_bulleted SW/Typescript
• · 2023. 10. 10.
• textsms

[Typescript] Chrome Extension "scripting.executeScript"의 optional argument

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할 수 없는 값들이 들어있어 오류가 발생했다는 메시지인데... 필자는..

• format_list_bulleted SW/Typescript
• · 2023. 10. 7.
• textsms

[Typescript] Tailwind CSS 자동완성, 언제 어디서나 당당하게 사용하기(Taillwnd CSS 자동완성 위치 정규식 작성법)

서론 Tailwind CSS(이하 tailwind)를 사용하다보면 컴포넌트의 className prop 외에도 tailwind 스타일을 작성해야할 상황을 자주 마주친다. 하지만 VSCode의 Tailwind CSS IntelliSense 는 기본적으론 className prop만 자동완성을 제공하기 때문에 변수 등에 문자열로 tailwind 스타일을 작성할때 자동완성을 이용할 수 없어 매우 불편하다. 하지만 이러한 문제는 Tailwind CSS IntelliSense가 제공하는 설정에 정규식을 작성해주면 내가 원하는 곳에서 tailwind 자동완성을 사용할 수 있도록 지정할 수 있어서 해결이 가능하다. 이번 포스팅에선 tailwind 자동완성의 위치를 지정하는 정규식과 설정법을 소개하고자 한다. 요구사항..

• format_list_bulleted SW/Typescript
• · 2023. 8. 12.
• textsms