Blog
iOS 브라우저에서의 뷰포트 높이 문제와 해결 방법
sticky position 적용을 위해 모바일에서 영역 높이를 뷰포트 만큼 설정해야 하는 경우 iOS 브라우저에서 height 100vh 를 적용할 영역이 경우 예상보다 길게 적용되는 특징을 확인했습니다.더보기 →
[번역]The TSConfig Cheet Sheet
tsconfig.json은 엄청나게 많은 잠재적 옵션을 가진 거대한 파일로, 많은 사람들을 두렵게 합니다. 하지만 실제로 주의해야 할 구성 옵션은 몇 가지뿐입니다.더보기 →
Github pages로 스토리북 배포하기
github pages를 이용해서 스토리북을 배포해봅시다. private 저장소의 경우 github pages 사용하기 위해서는 깃헙 유로 플랜이 필요합니다.더보기 →
tsconfig - emitDecoratorMetadata, experimentalDecorators 옵션
TypeScript 4.5 버전 이상을 사용할 경우 `tsconfig.json` 해당 설정을 사용하도록 설정했는지 확인하라는 내용을 확인할 수 있습니다. `emitDecoratorMetadata`, `experimentalDecorators` 두 옵션은 어떤 옵션일까더보기 →
Laravel Eloquent에서 Join과 With
Laravel의 Eloquent ORM을 사용하면서 모델(테이블)간 연관 관계를 조회하는 방법 중 일반적으로 join과 with를 사용합니다. 관계형 데이터베이스에서는 여러 테이블 간의 관계를 정의하고 이를 효율적으로 관리하는더보기 →
Next.js - 서버에서 렌더링 되는 Client component
Next.js 13 이후 부터 사용자와 상호작용을 하기 위한 컴포넌트를 구현하기 위해서는 클라이언트 컴포넌트를 사용해야합니다.더보기 →
zod - safeParseAsync의 유효성 검사 실행 순서
zod 라이브러리의 safeParseAsync를 사용할 때 여러 개의 async 함수가 refine으로 등록될 경우,유효성 검사 시 async 함수들을 순차적으로 실행할지, 병렬로 실행할지 궁금증이 생겨 테스트를 진행해 봤습니다.더보기 →
Trunk-based Development
TBD(Trunk Based Development)는 소프트웨어 개발에서 사용되는 워크플로우로, 모든 개발자가 코드베이스의 단일 브랜치(일반적으로 main 또는 trunk라고 불림)에서 짧은 생명주기를 가진 브랜치를 사용하여 작업하는 방식입니다. 이 접근 방식은 빈번한더보기 →
fsevents 패키지 에러 발생
yarn install중 아래 에러 발생fsevents 패키지는 macOS 용이므로 linux와 windows에서는 에러가 발생합니다.이를 해결하기 위해 package.json에 아래 처럼 추가합니다.더보기 →
Promise.all()
Promise.all()은 JavaScript에서 여러 개의 프로미스(Promise)를 병렬로 처리할 때 사용합니다.더보기 →
다중 데이터베이스 연결을 사용한 모델 관계 정의하기 - Laravel
Laravel 프로젝트 진행 중 하나의 프로젝트에서 2개 이상의 connection간 모델의 연관 관계 정의가 필요했고, eloquent relationship을 이용하여 처리했습니다.더보기 →
TypeScript - type (interface 와 비교되는 특징)
타입스크립트에서는 interface와 type을 사용하여 타입을 정의할 수 있습니다. 두가지 방법 중 필요에 따라 선택해서 사용하는것이 최선이라고 생각하며, 이번 글에서는 type을 사용할 때 얻을 수 있는 장점과 특징에 대해서 간단하게 소개합니다.더보기 →
zod 간단하게 사용해보기
zod는 JavaScript와 TypeScript를 위한 유효성 검사(validation) 라이브러리입니다. Next.js 백엔드에서 zod를 적용하면 간단한 사용법으로 유효성 검사를 수행할 수 있습니다.더보기 →
Zsh에서 Option + Arrow 키로 단어 단위 이동하기
macOS의 기본 쉘인 Zsh에서는 기본적으로 Option + Arrow 키를 사용하여 이러한 이동을 할 수 없습니다. 하지만 간단한 설정을 통해 이 기능을 활성화할 수 있습니다.더보기 →
use server 와 form action
서버에서 동작하는 작업은 "use server"; 지시문을 함수의 최상단에 입력하여 서버 작업으로 정의할 수 있습니다. 서버 액션을 form action과 함께 사용하여 submit 시 동작할 서버 작업을 구현할 수 있습니다.더보기 →
prettier-plugin-tailwindcss(tailwindcss 클래스 자동 정렬 플러그인)
Tailwind CSS IntelliSense는 tailwindcss 클래스를 권장 클래스 순서에 따라 자동 정렬해주는 prettier 플러그인 입니다.더보기 →
VS Code - Tailwind CSS IntelliSense(자동 완성 Extension)
Tailwind CSS IntelliSense는 tailwindcss 클래스를 권장 클래스 순서에 따라 자동 정렬해주는 prettier 플러그인 입니다.더보기 →