google-optimize

Footnotes

  1. setTimeout, clearTimeout 으로 최적화 ↩

  2. gtag 에서도 remove: true값 전달로 해제 ↩

  3. variants를 컴포넌트로 전달 받아서 리턴 ↩

#optimize
#38
function toggleReducer(state, action) {
  switch (action.type) {
    default:
      return state
  }
}

function useToggle({ reducer = toggleReducer } = {}) {
  const [state, dispatch] = useReducer(reducer, {})
  return { state, dispatch }
}

export function Component() {
  useToggle({
    reducer(currentState, action) {
      console.log(currentState, action)
    },
  })
}

useReducer를 이용한 커스텀훅 사용에 대한 간단한 예시. 생각해보니 reducer를 전달해서 재사용하는 방법은 잘 생각못했는데 응용할 수 있을 것 같다.

Footnotes

  1. 리듀서를 사용하여 예측 가능하고 테스트 가능한 방식으로 상태 업데이트 및 작업을 캡슐화하는 방법과 State Reducer 패턴을 사용하여 이를 사용하는 구성 요소에서 상태 업데이트를 추상화하여 해당 구성 요소가 특정 기능에 더 집중하도록 만드는 방법을 설명. ↩

#react#useReducer
#36

360 이미지를 드래그해서 회전시키는 기능을 개발할때 3d 리소스를 제공 받을 수 있다면 three.js 같은 라이브러리를 사용해서 쉽게(?) 구현이 가능하다. three.js가 초반 진입 장벽이 높은 것 같지만 단순히 모델 리소스를 보여주는 정도는 배경지식이나 기본지식이 없더라도 어느정도 예제 코드들을 본다면 구현이 가능하다고 본다. 물론 제대로 하고 싶다면 배경지식과 three.js 자체에 대한 학습이 필요.

그런데 부득이하게 여러장으로 된 이미지만 제공 받을 수 있다면 직접 구현해야한다. 그런데 생각보다 드래그 기능을 처음부터 구현한다는게 보통의 개발자들에게는 불편한게 사실이므로 이미 존재하는 플러그인이나 라이브러리를 사용하는게 현실적이다.

그래서 찾아본 gsap의 Draggable. 그런데 문서를 보면 다이얼 같이 (뭐라 표현하는게 적당한지 모르겠지만) 직접적으로 드래그 하는 관점의 설명들이 대부분이다. 그런데 360 이미지 같은 경우는 직접적으로 드래그 라기보다는 액션을 빌린 동작이어서 처음에 약간 혼란스러웠는데 좀 더 찾아보니 proxy의 개념을 빌려서 설명된 부분이 있었고 저런식으로 하면 쉽게 구현이 가능하다.

참고

반대 방향으로 진행시 계산법

#gsap#draggable#360#ui
#30
import {
  addDays,
  addMonths,
  eachDayOfInterval,
  eachWeekOfInterval,
  startOfMonth,
} from 'date-fns'

const startOfMonthDate = startOfMonth(new Date())
const matrix = eachWeekOfInterval({
  start: startOfMonthDate,
  end: addMonths(startOfMonthDate, 1),
}).map((weekDay) => {
  const startDate = new Date(weekDay)

  return eachDayOfInterval({
    start: startDate,
    end: addDays(startDate, 6),
  })
})
#calendar#date
#29

Footnotes

  1. headless 모드가 있으면 좋을 것 같은데 찾기 어렵다. 이런게 있다…정도로만 생각하자. 실제 갖다 써보면 뭔말인지 알 수 있을거다. ↩

  2. 네이티브로 날짜 계산(?)을 구현하려면 참고 ↩

#calendar#ui#date
#28
ffmpeg -framerate 25 -i image_%1d.png -c:v libvpx-vp9 -pix_fmt yuva420p output.webm

단점

  • 두벌로 인코딩 작업을 해야한다. MacOS가 아닐경우 번거로운 부분이 존재한다.
  • 브라우저 지원이 애매하게 걸친 부분이 존재한다.
  • (개인적인 느낌) 사이즈가 커졌을 경우 프레임 드랍이 있다.

…그래서 어차피 안되는거 새로운 도전을 해보고 싶어서 크로마키 효과를 떠올렸다. sharp로 이미지 배경을 green 컬러로 채우고 그 이미지들을 합쳐서 동영상으로 변환. 그리고 canvas에 그리고 색상을 추출해서 green값을 alpha값으로 변환하면 완벽하지 않을까 싶었는데 겹치는 영역을 전혀 생각못했다. 이부분은 뭔가 특정 알고리즘이 있는 것 같은데 그냥 단순히 근사치2로 적용했을때 결과물이 완벽하지는 않다.

Footnotes

  1. 여기서는 좀 더 나아가서 ffmpeg으로 드로잉 하는 부분까지 알려주고 있다. ↩

  2. javascript - How to accurately filter RGB value for chroma-key effect - Stack Overflow ↩

  3. 기본 배경지식을 설명하고 있다. video->canvas ↩

  4. hsv로 색상값을 체크하는 방법을 알려주고 있다. 그리고 해당 연산은 worker로 따로 분리해서 처리. ↩

  5. canvas 에서 색상값을 체크해서 필터 기능을 구현하고 머신러닝으로 모션탐지 기능구현이 가능하다는 예제를 보여준다. ↩

#video#ffmpeg#canvas
#27

데이터 시각화, 교육 목적 또는 단순한 재미를 위해 자신만의 대화형 지구본을 구축하는 데 관심이 있는 모든 사람에게 도움이 될 수 있습니다. 그들은 지구본을 만들기 위한 다양한 접근 방식과 기술을 보여주고 지구본 데이터로 작업할 때의 문제와 기회에 대한 귀중한 통찰력을 제공합니다.

Footnotes

  1. WebGL과 Three.js를 사용하여 지구본을 렌더링하고 Mapbox를 사용하여 데이터를 표시하는 지구본을 디자인하고 개발하는 과정을 설명합니다. ↩

  2. GitHub 팀이 전 세계 GitHub 사용자의 위치를 보여주는 대화형 지구본을 구축한 방법을 설명합니다. 이 게시물은 WebGL 및 d3-geo 라이브러리를 사용하여 시각화를 생성하는 지구본 구축의 기술적 문제에 대해 자세히 설명합니다. ↩

  3. Gatsby 서버리스 기능을 사용하여 국제 우주 정거장(ISS)의 위치를 추적하는 대화형 지구본을 구축하는 방법에 대해 설명합니다. 이 기사는 ISS의 위치를 표시하기 위해 Three.js 및 satellite.js를 사용하는 지구본 구축의 기술적 세부 사항을 다룹니다. ↩

  4. 개발자가 자신만의 대화형 지구본을 만들 수 있는 경량 WebGL 지구본 라이브러리입니다. ↩

#globe#webgl
#24

다음은 Raspberry Pi를 사용하여 날씨 정보를 표시하는 프로젝트의 두 가지 예입니다. 이 두 프로젝트 모두 Raspberry Pi를 사용하여 날씨 표시 또는 날씨 앱을 만드는 방법을 보여줍니다. 또한 Python 스크립트 또는 웹 기반 애플리케이션을 사용하여 날씨 데이터를 가져오고 표시하는 다양한 방법을 보여줍니다. 이 프로젝트는 Raspberry Pi를 사용하여 자신만의 날씨 디스플레이 또는 앱을 구축하는 데 관심이 있는 모든 사람에게 좋은 출발점이 될 수 있습니다.1

Footnotes

  1. https://weather-mu.vercel.app/ ↩

  2. 작은 화면에 현재 시간과 시간별 일기 예보를 표시하는 프로젝트입니다. 이 프로젝트는 Raspberry Pi Zero W와 1.3인치 OLED 디스플레이를 사용하며 OpenWeatherMap API에서 날씨 데이터를 가져와 화면에 표시하는 Python 스크립트로 구동됩니다. ↩

  3. Preact, Netlify Functions를 사용하여 OpenWeatherMap API에서 날씨 데이터를 가져옵니다. ↩

#raspberry_pi
#23

Debouncing and Throttling Explained Through Examples | CSS-Tricks1

  • throttle: 함수가 호출되는 속도를 제한 (일정시간 동안)
  • debounce: 추가 호출 없이 일정 시간이 경과할 때까지 함수 실행을 지연하거나 제한 (마지막 이벤트만)

Footnotes

  1. 검색 입력, 스크롤 이벤트, 크기 조정 이벤트 등 디바운싱과 스로틀링이 유용할 수 있는 사례들 ↩

#throttle#debounce#lodash#event#ui
#22

드래그 앤 드롭 기능이나 위지윅 편집기를 사용하여 사용자 인터페이스와 레이아웃을 구축하기 위한 도구와 라이브러리입니다. 이러한 도구는 수동으로 코드를 작성하지 않고도 복잡한 UI 디자인과 레이아웃을 만드는 과정을 간소화하는 것을 목표로 합니다.

Footnotes

  1. 랜딩 페이지, 마케팅 사이트, 전자상거래 스토어를 만들 수 있는 드래그 앤 드롭 빌더 ↩

  2. 직관적인 UI로 복잡한 반응형 레이아웃, 프로토타입 및 랜딩 페이지를 제작 ↩

  3. React 기반 비주얼 에디터 ↩

  4. 반응형 디자인을 만들고 자동으로 코드를 생성 ↩

  5. 실시간 피드백을 통해 UI 컴포넌트를 빌드할 수 있는 React 기반 비주얼 에디터 ↩

  6. React 및 ImmutableJS를 사용하여 반응형 UI 레이아웃을 만들기 위한 오픈 소스 드래그 앤 드롭 레이아웃 빌더입니다. ↩

#ui#builder#dnd
#21
15 중 14페이지
이전 페이지다음 페이지