Next.js 15 App Router에서 PWA 설정하기 🍍

PWA는 프로그레시브 웹 앱의 줄임말로, 요즘 브라우저 기반으로 서비스를 제공하는 경우 많이 적용되어있는 기술이다.(스타벅스, notion, AliExpress, 스포티파이 등등) 단순하게 생각하면, 웹 사이트인데 윈도우 App이나 맥 App처럼 바로가기를 만들 수 있는 등 어플리케이션 같은 기능을 제공해주는 웹 사이트다.(즉, 네이티브 앱처럼 동작하도록 만들어진 웹 앱 & 설치 가능한 웹사이트) 💘 PWA의 주요 특징은 다음과 같다.📱 설치 가능크롬이나 사파리에서 "홈 화면에 추가"로 앱처럼 설치 가능🔌 오프라인 지원네트워크가 끊겨도 일부 기능 사용 가능 (서비스 워커 덕분)🚀 빠른 로딩캐싱 덕분에 다음 방문 시 로딩 속도 빠름💬 푸시 알림백그라운드에서도 사용자에게 알림 전송 가능 (조건 있음..

• format_list_bulleted 웹 개발
• · 2025. 4. 11.
• textsms

TypeScript에서 __brand 패턴 알아보기 ✈️ (타입 안정성 높이기)

보통 객체 데이터는 Id 값을 가진다.그리고 때때로 각 데이터는 특정 Id값이나 카테고리에서 좀 다른 데이터 패턴을 보일 때가 있다.또는, 하나의 객체에서 여러 Id값을 지닐때 같은 number 타입의 Id긴 하지만 굳이 따지면 다른 데이터값이기는 하는... 이런 경우도 종종 있다. 이런 경우 타입을 짜는게 참으로 곤란한데, 이때 __brand 라는 걸 사용해서 더 구체적으로 타입을 구별하는 기법을 사용한다고 한다 👻+ 객체가 아닌 타입에도 intersection을 통해서 객체로 __brand 타입을 집어넣어 같은 number지만 같지 않은 그런 타이핑이 가능하다 ! 요약하자면, 좀 더 엄격하게 객체들의 타입을 구분할때 고려할 수 있는 방법이다.(+ 런타임에서는 영향이 없고, 컴파일 타임에서만 타입을 ..

• format_list_bulleted TypeScript
• · 2025. 3. 30.
• textsms

React에서 XState 간단 사용 후기 😊

XState는 점점 더 단순화되어가는 상태관리 라이브러리들 중에서 좀 더 명확하게 역할을 나누고 책임을 부여한 컨셉의 상태관리 라이브러리이다. ❗ 이런 특징이 redux의 구조와 비슷하게 느껴지기도 한데, 이에 관해서는 직접 제작자가 밝힌 차이점이 있다.https://stackoverflow.com/questions/54482695/what-is-an-actual-difference-between-redux-and-a-state-machine-e-g-xstate What is an actual difference between redux and a state machine (e.g. xstate)?I am working on investigation of one front-end application o..

• format_list_bulleted React
• · 2025. 2. 13.
• textsms

[Javascript] 이벤트의 실행순서 파악하기 (onMouseDown은 onClick보다 먼저 실행된다 👻)

프론트엔드 개발을 할 때 많이 사용되는 이벤트들이 있다. 그중에 onClick 이벤트가 있는데, onClick은 사용자가 마우스로 무언가를 클릭했을 때 이벤트가 발생하도록 하는 것이다. 다만, onClick 이외에도 또 다른 마우스 클릭 관련 이벤트들이 있고, 때로는 더 섬세한 동작을 위해서 onMouseDown, onMouseUp과 같은 이벤트들을 사용할 수 있다. 여기서, 더 생각해볼만한 점은 이 셋이 모두 한번에 사용되었을 때이다. 세 개의 이벤트는 어떤 순서로 동작할까?  사용자가 UI 요소와 상호작용할 때 마우스 이벤트가 실행되는 일반적인 순서는 다음과 같다.onMouseDown사용자가 마우스 버튼을 누를 때 발생한다.onMouseUp사용자가 마우스 버튼을 놓을 때 발생한다.onClick마우스 ..

• format_list_bulleted 웹 개발
• · 2024. 12. 21.
• textsms

[typescript] Record를 사용하여 객체 Key 타입 설정하기 🍎

객체의 타입을 설정할 때 있었던 일이다. const winner = { "One": false, "Two": false, "Three": true,}; 이런 객체가 있다고 가정해보자. 객체의 Key값은 One, Two, Three만 될 수 있기에, 타입으로 제한해보자 👻 가장 처음 떠올릴 수 있는 방법은 다음과 같다! type KeyExample = "One" | "Two" | "Three";const winnerFail: { [key: KeyExample]: boolean } = { "One": false, "Two": false, "Three": true,} 이렇게 하면 될 것 같지만! 에러가 발생한다. 타입 에러에 따르면, 인덱스 시그니쳐 파라미터 타입은 liter..

• format_list_bulleted TypeScript
• · 2024. 11. 1.
• textsms

타입스크립트에서 기존 코드로부터 타입을 가져오는 법 ReturnType, ComponentProps

타입스크립트를 잘 사용하기 위한 여러 유틸 타입이 있다. 그중에서도 이미 잘 사용중이던 함수를 사용한다면, ReturnType을 통해서 해당 함수의 반환값 타입을 쉽게 얻을 수 있다. ReturnType function getUser() { return { name: "Alice", age: 30, };} 이런 함수가 있을 때, 이 함수의 리턴값 타입을 재사용하고자 하는 경우를 생각해보자.interface getUserReturnValue { name: string; age: number;} 이렇게 타입을 직접 작성할 수도 있지만, 만약 getUser 함수의 리턴값이 바뀌는 작업이 일어나면 타입도 직접 바꿔줘야 한다.그리고 사람이 작성하는 코드이기에, 실수가 일어나기 더 쉬워보인다. 때..

• format_list_bulleted TypeScript
• · 2024. 9. 18.
• textsms