Web Front End

채팅 UI에서 페이지 스크롤 방지하기: overscroll-behavior

채팅 UI에서 페이지 스크롤 방지하기: overscroll-behavior 이번 글에서는 모바일 웹, 특히 iOS Safari에서 채팅창을 만들다가 마주친 스크롤 이슈를 어떻게 해결했는지를 공유해보려고 합니다. CSS 속성인 overscroll-behavior를 통해 브라우저 전체가 스크롤되는 문제를 잡은 사례입니다.개요문제 상황: 채팅창 스크롤 시 페이지 전체가 움직이는 현상스크롤 이벤트 전파 방식 이해하기overscroll-behavior란?해결 방법과 코드 예시마무리 및 정리1. 문제 상황iOS Safari에서 채팅 UI를 개발하던 중, 채팅창을 스크롤하면 채팅창만 스크롤되는 것이 아니라 브라우저 전체가 아래로 따라 움직이는 문제가 생겼습니다. 사용자는 채팅 영역만 터치하고 있는데, 스크롤이 문서 ..

Zustand vs Jotai: 실무에서 Zustand를 선택한 이유와 실제 사용 후기

Zustand vs Jotai: 실무에서 Zustand를 선택한 이유와 실제 사용 후기이번 포스팅에서는 실무에서 상태 관리 도구로 어떤 걸 선택할지 고민했던 과정을 정리해보려 합니다. 특히 Zustand와 Jotai 두 라이브러리를 비교하면서 실제 프로젝트에 어떤 기준으로 도입했는지, 사용하면서 느낀 점은 어땠는지를 중심으로 다룰 예정입니다. 개요상태 관리 도구 선택 기준코드 비교Zustand 선택 배경실사용 중 느낀 점실사용 팁결론 및 회고참고 자료1. 상태 관리 도구 선택 기준당시 진행하던 프로젝트는 유저 액션이 많고 페이지 간 상태 공유가 빈번한 대시보드 성격의 서비스였습니다. 초기엔 Context API를 사용했지만, 상태가 점점 복잡해지면서 관리가 어려워졌고 결국 전역 상태 관리 도구의 도입이 ..

npm에 라이브러리 릴리즈하고 운영하기

npm에 라이브러리 릴리즈하고 운영하기 안녕하세요. 오늘은 npm 라이브러리를 릴리즈하고 운영한 경험을 이야기해 보려고 합니다. Github Action으로 자동배포, Github Template, 오픈소스에 기여하고 홍보하기에 대한 내용을 함께 담아 보겠습니다. 목차 react-vite-ts-boilerplate 소개 Github Action으로 자동배포 Github Template 오픈소스에 기여하고 홍보하기 마무리 1. react-vite-ts-boilerplate 소개 npm 링크: https://www.npmjs.com/package/react-vite-ts-boilerplate github 링크: https://github.com/choisohyun/react-vite-ts-boilerplat..

[Yup+Formik] 객체 값 유효성 검사

안녕하세요, 오늘은 가볍게 Yup+Formik을 사용할 때 유효성 검사에 대해 얘기해 보겠습니다. 오늘 겪었던 바보 같은 일을 회고하면서 Yup과 Formik에 대해서도 간단히 소개하겠습니다. 1. Yup https://github.com/jquense/yup Dead simple Object schema validation라고 소개합니다. 유효성 검사를 선언적으로 할 수 있게 해줍니다. 가장 상단에 있는 예시를 보면 형태가 모두 객체 형태인 것을 볼 수 있습니다. 심지어 if-else 기능에 해당하는 부분도 객체 형태로 사용이 가능합니다. let userSchema = object({ name: string().required(), age: number().required().positive().int..

React Query 살펴보기

1. 배경 진행하던 프로젝트에서는 fetch API만을 래핑해서 사용하였습니다. fetch API만으로도 다양한 메소드를 지원하기 때문에 충분하긴 했지만, 문제는 에러 처리였습니다. 에러 처리를 계속해서 try catch 문으로 묶어주거나 예외처리로 계속 핸들링해야 하는 번거로움이 생겼습니다. 그래서 추가로 찾은 API 전용 툴은 react-query, swr가 있었습니다. 에러처리나 로딩처리가 자유롭고 잘 래핑해서 쓰면 좋을 것 같다고 판단하였습니다. 또한, react-query가 다운수가 더 많고 프로덕션 레벨에서의 레퍼런스도 많아 선택하게 되었습니다. https://www.npmtrends.com/swr-vs-react-query 2. React Query란: 문법 간단 설명 그러면 React Qu..

SvelteKit에는 왜 Vite가 선택되었을까? "Vite VS Snowpack"

SvelteKit에는 왜 Vite가 선택되었을까? Vite VS Snowpack svelte 인프런 강의를 보다가 snowpack으로 되어 있길래 강사님에게 빌드툴 선택에 대한 질문을 올렸더니 아래 유투브를 공유해 주셨다. 유투브 링크 내가 이해한 내용으로 SvelteKit에서 Vite를 선택한 이유를 간단히 정리해 보려고 한다. (유투브가 21년도 3월 영상이라 현재와 다를 수 있다.) Vite가 버전이 1에서 2로 올라가면서 지원하는 기능들이 좋아졌다. Vite 사용 시 작성하는 코드가 적어졌다. snowpack을 사용할 경우에는 css 코드 스플리팅과 소스맵으로 스택 추적하는 기능에 대한 코드를 많이 써야 했다. // svelte.config.js // 기본 코드가 매우 적다. CRA나 Vue-cl..