목록전체 글 (524)
똑같은 삽질은 2번 하지 말자
개요 Cloudflare Pages + Workers를 이용해 edge runtime의 환경에서 next-auth + cognito를 이용해 인증 시스템을 구축했던 기록을 남기고자 한다. next-auth v4는 edge runtime환경에서 사용할 수 없었다. 도입을 하려고 이것저것 조사를 했는데 edge runtime의 환경에서 NodeJS의 API을 사용할 수 있는게 제한적이다보니 next-auth에서 사용하는 NodeJS의 https, cryto등으로 인해 next-auth v4를 edge runtime에서 사용할 수 없었다. 하지만 next-auth v5(authjs)에서는 사용할 수 있었다. 아직 beta이긴 하지만 v5에서는 edge runtime에서 사용할 수 있게끔 대응을 해주고 있었으므..
보호되어 있는 글입니다.
보호되어 있는 글입니다.
보호되어 있는 글입니다.
보호되어 있는 글입니다.
개요 React, Vue를 활용해 개발을 하는 중인데 Vue일때는 이런식으로 개발을 하고 React일때는 이런식으로 개발을 하는등등 방식이 다르고 근본적이 처리에 대해 제대로 인식이 안되어 있는 듯해 이 글을 작성하면서 정리하고자 한다. 용도 Radio: 일반적으로 사용자가 주어진 옵션 중 하나만 선택할 수 있을 때 사용된다. 같은 이름(name 속성)을 공유하는 라디오 버튼 그룹에서는 오직 하나의 옵션만이 선택될 수 있어야 한다. Checkbox: 사용자가 여러 옵션을 동시에 선택할 수 있게 해준다. 각 체크박스는 독립적으로 동작하며, 여러 옵션을 동시에 선택/선택 해제할 수 있어야 한다. Vue로 구현하기 Radio 일반적으로 v-model을 사용하여 단일 데이터 속성에 바인딩한다. 라디오 버튼 그룹..
보호되어 있는 글입니다.
개요 video에서 caption(자막)이 브라우저, 디바이스에 따라 화면에 표시되는게 제각각이기 때문에 기본 표시를 사용하지 않고 커스텀마이징해서 사용했던 이야기 우선 textTracks라는 Web API를 이용했다. https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/textTracks HTMLMediaElement: textTracks property - Web APIs | MDN The read-only textTracks property on HTMLMediaElement objects returns a TextTrackList object listing all of the TextTrack objects representing ..
개요 NextJS에서 등장한 App Router에 대해 익숙해지기 위해서 이것저것 사용해봤던 기능들과 리액트에 대해 새롭게 알게된 사실을 글로써 남기고자 한다. 1. app 내부에 있는 컴포넌트는 전부 RSC(React Server Component)다 RSC를 사용해서 성능상의 이점을 더욱 적극적으로 채택하기 위해서 default로 RSC가 되게끔 한 모양이다. 혹시 RCC로 렌더링되야하는 컴포넌트가 있다면 컴포넌트 최상단에 'use client'라는 지시자를 추가해야한다. Building Your Application: Routing | Next.js Learn the fundamentals of routing for front-end applications. nextjs.org 2. 레이아웃을 기준..
보호되어 있는 글입니다.