목록전체 글 (552)
똑같은 삽질은 2번 하지 말자
보호되어 있는 글입니다.
보호되어 있는 글입니다.
보호되어 있는 글입니다.
보호되어 있는 글입니다.
개요 React, Vue를 활용해 개발을 하는 중인데 Vue일때는 이런식으로 개발을 하고 React일때는 이런식으로 개발을 하는등등 방식이 다르고 근본적이 처리에 대해 제대로 인식이 안되어 있는 듯해 이 글을 작성하면서 정리하고자 한다. 용도 Radio: 일반적으로 사용자가 주어진 옵션 중 하나만 선택할 수 있을 때 사용된다. 같은 이름(name 속성)을 공유하는 라디오 버튼 그룹에서는 오직 하나의 옵션만이 선택될 수 있어야 한다. Checkbox: 사용자가 여러 옵션을 동시에 선택할 수 있게 해준다. 각 체크박스는 독립적으로 동작하며, 여러 옵션을 동시에 선택/선택 해제할 수 있어야 한다. Vue로 구현하기 Radio 일반적으로 v-model을 사용하여 단일 데이터 속성에 바인딩한다. 라디오 버튼 그룹..
보호되어 있는 글입니다.
React vol.20 video의 자막을 커스텀마이징하기
개요 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 ..
React vol.19 (Nextjs v15, App Router)
개요NextJS에서 등장한 App Router에 대해 익숙해지기 위해서 이것저것 사용해봤던 기능들과 리액트에 대해 새롭게 알게된 사실을 글로써 남기고자 한다.왜 App Router가 나오게 되었을까?Page Router의 이하의 3개의 단점을 극복하기 위해서이다.페이지별 레이아웃 설정이 번거롭다데이터 페칭이 페이지 컴포넌트에 집중된다.불 필요한 컴포넌트들도 JS번들에 포함된다.Nextjs에서 SSR로 만들어진 HTML을 클라이언트(브라우저)에게 전달한 뒤, 하이드레이션을 위해 JS번들 파일을 전달하는데 여기서 하이드레이션(사용자와의 상호작용)가 필요가 없는 컴포넌트들도 JS번들에 포함이 되어서 전달하게 된다. 이로 인해 커진 JS번들을 다운로드 할때까지의 시간이 늘어나고 TTI(Time To Inter..
보호되어 있는 글입니다.
보호되어 있는 글입니다.