웹 프론트/React10 NextJS : next14에서 Day.js 사용 시 타임존 차이 (서버컴포넌트 vs 클라이언트 컴포넌트) 개요 next14에서 dayjs를 사용하여 시간에 대한 작업을 진행하고 있었는데요, 실제로 배포를 하였을 때 프로젝트에서 컴포넌트별로 시간값이 다른 문제가 발생하였습니다. 해당 문제가 왜 발생했는지 알아보고 해결법을 공유해보도록 하겠습니다. 문제점 문제의 원인은 서버 컴포넌트와 클라이언트 컴포넌트가 실제로 동작하는 환경이 달라서, 즉 서버와 클라이언트의 시간대가 달라서 발생한 것것이였습니다. 보통 서버컴포넌트는 서버의 시스템의 시간대에 따라서 시간을 처리하지만, 클라리언트 컴포넌트는 브라우저의 시간대에 맞춰 날짜와 시간을 변환하여 처리하게 됩니다. 실제로 로컬로 테스트를 할때는 위와 같은 문제가 발생하지 않았는데, 현재 제가 개발하고 있는 Mac 환경의 시간대도 한국 시간대(UTC+9)로 설정되어 있기.. 2024. 11. 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. 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 에서 geolocation API를 hook 으로 만들어 써보기 React에서의 GeoLocation GeoLocation은 GPS 또는 네트워크를 이용하여 현재 위치 정보를 반환하는 API입니다. 즉 웹브라우저에서 현재 내 위치의 위도(latitude)와 경도(longitude)를 알아보고 싶을때 주로 사용합니다. 저는 React 프로젝트에서 해당 기능을 쓰고 싶어서 이를 React로 구현할 수 있는 방법을 찾아보았습니다. GeoLocation의 함수 Geolocation 함수는 보통 Javascript에서 window의 navigator.geolocation 객체를 통해 사용할 수 있는데요, 먼저 GeoLocation의 함수에 대해서 간단히 살펴보면 아래와 같습니다. clearWatch WatchPosition을 멈춘다. getCurrentPosition 현재 위.. 2021. 11. 3. Redux - redux-thunk란? [리덕스 미들웨어] redux-thunk 란? 리덕스를 사용하는 어플리케이션에서 비동기 작업을 사용할때 가장 기본적인 방법으로는 redux-thunk를 사용하는 것입니다. 해당 미들웨어는 리덕스를 개발한 Dan Abramov가 만든 것으로 redux 공식 메뉴얼에서도 해당 미들웨어를 이용하여 비동기 작업을 다룹니다. 해당 방법은 매우 직관적이고 간단하다는 장점이 있습니다. 그렇다면 thunk 란? thunk란 특정 작업을 나중에 하도록 미루기 위해서 함수형태로 감싼 것을 칭합니다. 예를들어서 1 + 1을 한다고 가정했을때 아래와 같이 코드를 작성하게 됩니다. 다음과 같이하면 어떨까요? 이렇게 하면 1 + 2 연산이 코드가 실행될 때 바로 이뤄지지 않고 나중에 foo() 가 호출되어야만 이뤄집니다. redux-thunk는 무.. 2018. 11. 26. React - defaultProps 사용해보기 리엑트에서 상태값 저장하기 리엑트에서는 상태값을 저장하는 2가지의 종류가 있습니다. State : 컴포넌트 내부에서 선언되는 값입니다. 내부에서 값을 변경할 수 있습니다. Props : 부모가 자식에게 주는 값입니다. 자식컴포넌트에서는 Props를 받아오기만 하고 직접 수정할 수 없습니다. defaultProps를 통한 예외처리 실제로 코딩을 하다보면 가끔 실수로 props를 빼먹을 때가 있습니다. 또는 특정 상황에 props를 일부로 비워야 할 때도 있는데요. 이러한 경우에 props의 기본 값을 설정해 줄수 있는데 그것이 바로 defaultProps입니다. 위의 예제는 MyName이라는 컴포넌트를 부모 컴포넌트인 App에서 렌더링 하고 있는 예제입니다. name이라는 값을 props로 넘겨주고 있는것.. 2018. 11. 21. React - JSX를 사용할때 몇가지 주의사항 정말 기초적인 내용이지만 처음에 조금 헤멜 수 있는 주의사항입니다. JSX 태그 내부에 변수를 넣는 방법 {value} 의 형태로 사용합니다. ex) const msg = {item} - {value}원 JSX 태그의 속성 값에 변수를 넣는 방법 (x) JSX를 작성할 때의 주의사항 return에서 오류 발생하는 구문, => 자바스크립트 내부에 html을 작성해야 하기 때문에 발생합니다. return 이또한 지나가리라 ==> (x) return ( 이또한 지나가리라 ==> (o) ) 2018. 11. 12. React - virtual DOM의 개념 React를 위한 DOM개념 DOM이란 (Document Object Model)의 약자로 객체를 통해 구조화된 문서를 표현하는 방법입니다. DOM은 트리형태로 되어 있어서 특정 node를 찾을 수도 있고 수정하거나 제거 할 수 있습니다. DOM은 동적인 UI에 최적화가 되어 있지 않기 때문에 JQuery를 사용하여 동적인 효과를 줄 수 있습니다. 하지만 큰 규모의 웹 어플리케이션(ex) 트위터,페이스북) 에서는 스크롤을 내리다 보면 정말 수많은 데이터가 로딩이 되고 각 데이터를 표현하는 요소도 많아지게 됩니다. 이와같은 요소의 갯수가 몇백개 몇천개 단위로 많아진 상태에서 DOM에 직접 접근하여 변화를 주다보면 성능상 이슈가 발생하게 됩니다. 이는 DOM자체가 javascript엔진에 비해 느려서 그런 .. 2018. 10. 28. React의 개념, 역사 간단한 정리 React의 역사? React는 facebook의 소프트웨어 엔지니어 Jordan Walke에 의해 만들어 졌습니다. React는 Facebook, AirBnb, Dropbox, Twitter, Evernote Uber등 수많은 사용자들이 사용하는 Facebook이 만는 자바스크립트 라이브러리 입니다. React는 PHP의 Html컴포넌트 프레임워크인 XHP의 영향을 받았고 2011년 페이스북에 처음으로 개시하였고 2012년에 인스타그램에 배치 이후 2013년 5월 미국 JSConf에서 오픈소스로 제작 되었습니다. 2017년 4월 18일에 페이스북은 사용자 인터페이스를 위한 React 프레임워크 라이브러리 알고리즘인 React Fiber을 발표하였고 계속 발전중입니다. React 간단한 정리 react는.. 2018. 9. 16. 이전 1 다음
