웹 프론트70 NextJS : next14에서 Day.js 사용 시 타임존 차이 (서버컴포넌트 vs 클라이언트 컴포넌트) 개요 next14에서 dayjs를 사용하여 시간에 대한 작업을 진행하고 있었는데요, 실제로 배포를 하였을 때 프로젝트에서 컴포넌트별로 시간값이 다른 문제가 발생하였습니다. 해당 문제가 왜 발생했는지 알아보고 해결법을 공유해보도록 하겠습니다. 문제점 문제의 원인은 서버 컴포넌트와 클라이언트 컴포넌트가 실제로 동작하는 환경이 달라서, 즉 서버와 클라이언트의 시간대가 달라서 발생한 것것이였습니다. 보통 서버컴포넌트는 서버의 시스템의 시간대에 따라서 시간을 처리하지만, 클라리언트 컴포넌트는 브라우저의 시간대에 맞춰 날짜와 시간을 변환하여 처리하게 됩니다. 실제로 로컬로 테스트를 할때는 위와 같은 문제가 발생하지 않았는데, 현재 제가 개발하고 있는 Mac 환경의 시간대도 한국 시간대(UTC+9)로 설정되어 있기.. 2024. 11. 14. CSS : font-synthesis 속성으로 모바일 IOS Safari 글꼴 굵게 표시되는 버그 수정하기 (feat: pretendard 폰트) 문제점 최근 개발 중에 개발 중인 반응형 웹 페이지의 폰트를 pretendard 폰트로 바꾸는 작업을 진행하였습니다. 이때 이상하게 모바일로 들어갔을 때 IOS Safari에서 bold로 처리한 폰트들의 글꼴이 유독 굵게 보였는데요, 원래 IOS에서는 pretendard 폰트가 이렇게 보이는 게 맞는지 몰라 디자이너분께 보여줬는데, 폰트가 조금 이상한 것 같다고 말씀해 주셨습니다. 실제 OS별로 확인을 해봐도 안드로이드 기기에서는 정상적으로 출력이 되고, 유독 IOS Safari에서 이상하게 보이는 것 같아서 원인을 찾아보게 되었습니다. font-synthesis 속성font-synthesis는 CSS 속성 중 하나로, 웹 페이지에서 특정 글꼴이 볼드, 이탤릭, 또는 소문자 대체(small-caps) 스.. 2024. 10. 14. React : react-webcam 을 이용하여 기기에서 지원하는 최대 해상도 비디오 스트림 얻어오기 모바일이나 데스크톱 웹 애플리케이션을 개발할때 현재 디바이스의 카메라 화면을 가져오고 싶을때가 있습니다. React로 개발할때 이를 쉽게 구현해주는 `react-webcam` 이라는 패키지를 활용하면 쉽게 카메라 화면(Stream)을 가져와서 기능 구현에 활용할 수 있습니다. react-webcam 사용법 react-webcamReact webcam component. Latest version: 7.2.0, last published: 8 months ago. Start using react-webcam in your project by running `npm i react-webcam`. There are 297 other projects in the npm registry using react.. 2024. 7. 4. Vite : React 웹서버 서브 디렉토리 배포 설정하기 React를 통해 빌드를 하고 웹서버에 배포하기 위해서는 웹서버 설정이 추가적으로 필요합니다. 예를 들어, react-router와 같은 브라우저 라우터를 사용하게 되면 모든 경로에 대해 Web Root의 index.html로 rewrite 해주는 명령어가 필요합니다. Nginx의 경우 try_files 옵션을 설정하여야 하고, Apache의 경우 RewriteRule 옵션을 통해 설정할 수 있습니다. 위 설정을 해주지 않으면 새로고침시에 404 에러가 발생하는데, 이는 클라이언트에서 라우팅을 처리할때, 서버에 해당 자원이 없다고 인식하기 때문에 이러한 문제가 발생합니다. SPA에서는 모든 요청을 Base가 되는 index.html에서 처리하는데, 다른 경로로 접속하면 해당 경로에 일치하는 파일을 웹서.. 2024. 6. 11. Vite : 라이브러리 wasm 에러 발생시 해결방법 (both async and sync fetching of the wasm failed) Vite를 통해 React를 개발하던 중 npm 라이브러리에서 `both async and sync fetching of the wasm failed` 에러가 발생할 때가 있습니다. 위와 같은 에러 발생 시 해결방법을 공유해 보도록 하겠습니다. 문제 발생 상황 모바일 애플리케이션을 만들던 중 비디오 녹화를 통해 `mp4-wasm` 이라는 패키지를 사용해야 할 상황이 발생하였습니다.(참고 : https://www.npmjs.com/package/mp4-wasm) 위 라이브러리의 사용법은 간단한데요 import loadMP4Module, { isWebCodecsSupported } from 'https://unpkg.com/mp4-wasm@1.0.6' 이런 식으로 mp4Module 이라는 객체를 호출.. 2024. 4. 30. React : 모바일 사파리 focus, blur 이벤트 감지 훅 만들어보기 (useWindowFocus) IOS Safari 브라우저에서 window.focus 및 window.blur가 제대로 동작하지 않는 문제 `Focus` 이벤트는 브라우저 창, 탭, 팝업이 사용자로부터 포커스를 받았을대 호출되는 이벤트로, 사용자가 브라우저창을 클릭하거나 다른 애플리케이션에서 현재 창으로 들어왔을때 쓰이는 등 여러 상황에서 자주 사용이 되는 이벤트입니다. `Blur` 이벤트는 반대로 사용자가 페이지를 떠나거나 다른 탭으로 이동했을때 발생되는 이벤트입니다. 하지만 IOS Safari 브라우저를 개발하다보면 Window의 Focus, Blur 이벤트를 등록을 했는데도 제대로 동작하지 않을때가 있습니다. (IOS에서는 탭 간 전환시 비활성화/ 활성화가 브라우저처럼 제대로 구분되어 있지 않은것 같다고 합니다.) visi.. 2024. 4. 24. Vite : vite-plugin-static-copy를 통해 정적 파일 복사하기 개요 이번 시간에는 Vite를 통해 프로젝트를 진행하던중에 정적파일 복사를 위해 사용한 패키지에 대해 한번 소개해보도록 하겠습니다. vite-plugin-static-copy 패키지 Vite에서 복사를 위해 vite-plugin-static-copy 라는 패키지를 사용하였는데요, 해당 플러그인을 통해 Vite 프로젝트에서 정적파일을 복사하거나 프로젝트에 추가할 수 있습니다. vite-plugin-static-copy rollup-plugin-copy for vite with dev server support.. Latest version: 1.0.0, last published: a month ago. Start using vite-plugin-static-copy in your project by ru.. 2023. 12. 22. React Native : 다른 Screen 이동후 돌아왔을 때 새로고침 방법 (stack screen / tab screen) React Navigation 사용 시 원래 화면으로 돌아왔을 때 새로고침 React Navigation의 Stack Navigator 이나 BottomTab Navigator을 통해 화면이동을 하고 난 뒤 원래 화면으로 돌아왔을 때 원래 Screen 의 화면을 새로고침해야 할 때가 있습니다. 하지만 React Navigation의 Navigator를 통해 화면이동을 할때, 기존의 상태를 저장하기 때문에 다시 원래 화면으로 돌아온다고 해도 화면 컴포넌트의 라이프사이클이 다시 수행되지 않아서 새로고침이 되지 않는 문제가 있습니다. 저도 개발을 하던 도중에 원래 Screen으로 돌아올 때마다, AsyncStorage에서 데이터를 갱신해야 하는 상황이 생겼었는데요, 이러한 경우에 어떻게 해결하면 좋을지 한번 .. 2023. 8. 30. React Native: 안드로이드 빌드시 mergeLibDexDebug 개요 React Native를 통해 안드로이드 빌드를 진행할때 mergeLibDexDebug 에러가 발생하였습니다. mergeLibDexDebug 에러가 무엇인지 알아보고 해결법을 간단히 공유해보겠습니다. 문제점 여러가지 문제가 있지만 보통 아래와 같은 이유로 발생한다고 합니다. Dex 메서드 제한 초과 => 의존성 패키지들에서 사용하는 메서드들이 너무 많을때 의존성 충돌 => 다양한 라이브러리와 의존성 충돌. 즉 비슷한 라이브리를 사용하는 경우에 Dex 파일에 중복된 메서드 포함됨. 멀티덱스 설정 문제 => Gradle 플러그인이 여러 Dex파일을 생성하고 하나의 Dex파일로 병합하는 설정에서 문제 발생 해결법 먼저 multiDex 설정상 문제가 발생할 가능성이 있기 때문에 아래와 같이 적용해보았습니다.. 2023. 8. 2. React Native : Animated, Interpolation를 이용하여 Loading Spinner 만들기 React Native를 공부하던 중 Loading Spinner가 필요하여서 구현 방법에 대해 조사를 해보았습니다. React Native에서는 기본적으로 제공하는 Loading Spinner인 ActivityIndicator라는 컴포넌트가 있기는 합니다. ActivityIndicator · React Native Displays a circular loading indicator. reactnative.dev 하지만 React Native에서도 간단한 애니메이션을 구현해보고 이해해 보기 위해서 React Native에서 제공하는 Animated를 이용하여 한번 Loading Spinner를 만들어보도록 하겠습니다. 먼저 간단하게 React Native의 Animated에 대해 알아보도록 하겠습니다. .. 2023. 5. 1. 이전 1 2 3 4 ··· 7 다음
