[Typescript] 1분만에 세팅하는 로컬 HTTPS - local-ssl-proxy

1. 서론로컬에서 웹 작업을 하다보면, 외부 HTTPS 리소스를 연동해야하는 상황들이 발생한다. 이때 일반적으로 로컬 개발 서버는 HTTP로 동작하기 때문에 작업이 애로사항이 발생하는데, 이번 포스팅에선 이를 간단하게 해결해주는 "local-ssl-proxy" npm 패키지를 소개해볼까 한다. local-ssl-proxy는 HTTP 포트를 HTTPS 포트로 프록싱해주는 패키지이며, 이를 사용하면 빠르게 로컬 HTTPS 개발 환경을 구축할 수 있다.2. local-ssl-proxy 설치 및 세팅2-1. mkcert 설치 및 인증서 생성local-ssl-proxy를 사용하기 위해서 mkcert 명령어를 통해 인증서 생성이 필요하다. mkcert 명령어는 자신에 OS에 따라 아래 명령어를 실행하여 설치하면 된..

• format_list_bulleted SW/Typescript
• · 2024. 9. 30.
• textsms

[Typescript] Next.js와 Storybook에서 SVG파일을 컴포넌트처럼 사용하기 (with @svgr/webpack)

서론 필자가 최근 프로젝트를 진행하면서, SVG 이미지 파일들을 컴포넌트처럼 import하여 사용하고 싶다는 니즈가 생겼다. 그래서 Next.js와 Storybook 등, Webpack 환경에서 SVG 이미지 파일을 컴포넌트처럼 사용하는 방법을 찾아보았고, 이번 포스팅에선 이를 공유해보려 한다. SVGR과 @svgr/webpack SVGR은 SVG 이미지 파일을 React 컴포넌트로 변환해주는 프로젝트이다. 그중에서 @svgr/webpack 패키지를 이용하면, Webpack 번들러를 이용하는 프로젝트에서 SVG 이미지 파일을 컴포넌트처럼 import하여 사용할 수 있게 된다. SVGR - Transforms SVG into React Components. - SVGR Transforms SVG into ..

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

[Typescript] Zod에서 Superstruct로의 전환기

서론이번 포스팅에선, 필자가 CHINGOO.BE 프로젝트(GitHub repo.)를 진행하면서 여러가지 최적화들을 시도하다가 번들 사이즈 관련 최적화의 일환으로 기존 프로젝트에서 사용중이던 zod 라이브러리를 superstruct로 전환하게 된 과정을 소개한다.Zod를 다른 라이브러리로 전환하려는 이유Zod에서 다른 라이브러리로의 전환을 통해 달성하려던 목표는 "번들 사이즈" 절감이었다.CHINGOO.BE는 Next.js 기반의 프로젝트라서 next-bundle-analyzer를 돌려보았었다. 여러가지 눈에 띄는 큼직큼직한 패키지들이 보인다. react-dom에나 next관련 패키지는 대체 가능한 패키지가 없으니 건너뛰고, 그 다음으로 가장 눈에 띄는 패키지는 위 이미지에서 빨간 박스가 쳐진 Zod 패키..

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

[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