1seul357

react-player는 영상을 실행하고, 컨트롤할 수 있는 라이브러리이다.설치npm i react-player구현한 기능☑️ 영상 실행 및 일시 정지☑️ 버퍼링 시 영상 교체☑️ 영상 실행 시간 컨트롤☑️ 영상 시간 10초 전, 10초 후로 이동☑️ progress bar 구현props 및 Callback propsurl : 재생할 영상의 urlplaying : 미디어 실행 및 일시 정지progressInterval : onProgress 콜백 시간 (ms)onReady : 미디어가 로드되어 재생할 준비가 되면 호출onStart : 미디어가 재생이 시작되면 호출onProgress : 영상의 현재 실행 시간 호출onBuffer : 버퍼링이 시작되면 호출onBufferEnd : 버퍼링 종료되면 호출onEn..

React Hook Formreact-hook-form은 React 기반의 폼 관리 라이브러리로, 효율적인 폼 관리가 가능하다. state를 사용한 상태 관리를 할 필요가 없고, 간단하게 폼 유효성 검사도 할 수 있다.설치npm install react-hook-form예시import { useForm, SubmitHandler } from "react-hook-form"type Inputs = { example: string exampleRequired: string}export default function App() { const { register, handleSubmit, watch, formState: { errors }} = useForm() const onSubmit: SubmitH..

아키텍처는 소프트웨어 구조를 파악하기 쉽게 하고, 팀원들과 협업할 때에도 유용하다. 정해진 규칙에 따라 구현된 컴포넌트는 이해하기 쉽고, 수많은 요구사항이나 유지보수에 유연하게 대처할 수 있게 한다. 새로운 프로젝트에서 FSD 아키텍처를 사용하게 되어 알아보았다.FSD 아키텍처FSD (Feature-Sliced Design)는 기능을 중심으로 컴포넌트를 설계하는 방법론이다.FSD는 크게 Layers, Slices, Segments로 구분된다.Layersapp : routing, entrypoints, global styles, providers 등을 설정한다. 애플리케이션의 시작점이다.process : 여러 페이지 간의 프로세스이며 현재는 잘 사용되지 않는 선택적 레이어이다.pages : 전체 페이지이다..

💡 Storybook is an open-source tool for building UI components and pages in isolation. It streamlines UI development, testing, and documentation.Storybook은 UI 개발환경이며, UI를 컴포넌트 단위로 테스팅 해볼 수 있는 툴이다.https://storybook.js.org/ Storybook: Frontend workshop for UI developmentStorybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development,..

할인행사 문제 XYZ 마트는 일정한 금액을 지불하면 10일 동안 회원 자격을 부여합니다. XYZ 마트에서는 회원을 대상으로 매일 한 가지 제품을 할인하는 행사를 합니다. 할인하는 제품은 하루에 하나씩만 구매할 수 있습니다. 알뜰한 정현이는 자신이 원하는 제품과 수량이 할인하는 날짜와 10일 연속으로 일치할 경우에 맞춰서 회원가입을 하려 합니다. 예를 들어, 정현이가 원하는 제품이 바나나 3개, 사과 2개, 쌀 2개, 돼지고기 2개, 냄비 1개이며, XYZ 마트에서 15일간 회원을 대상으로 할인하는 제품이 날짜 순서대로 치킨, 사과, 사과, 바나나, 쌀, 사과, 돼지고기, 바나나, 돼지고기, 쌀, 냄비, 바나나, 사과, 바나나인 경우에 대해 알아봅시다. 첫째 날부터 열흘 간에는 냄비가 할인하지 않기 때문에..

괄호 회전하기문제경화는 과수원에서 귤을 수확했습니다. 경화는 수확한 귤 중 'k'개를 골라 상자 하나에 담아 판매하려고 합니다. 그런데 수확한 귤의 크기가 일정하지 않아 보기에 좋지 않다고 생각한 경화는 귤을 크기별로 분류했을 때 서로 다른 종류의 수를 최소화하고 싶습니다. 예를 들어, 경화가 수확한 귤 8개의 크기가 [1, 3, 2, 5, 4, 5, 2, 3] 이라고 합시다. 경화가 귤 6개를 판매하고 싶다면, 크기가 1, 4인 귤을 제외한 여섯 개의 귤을 상자에 담으면, 귤의 크기의 종류가 2, 3, 5로 총 3가지가 되며 이때가 서로 다른 종류가 최소일 때입니다. 경화가 한 상자에 담으려는 귤의 개수 k와 귤의 크기를 담은 배열 tangerine이 매개변수로 주어집니다. 경화가 귤 k개를 고를 때 ..

귤 고르기 문제 경화는 과수원에서 귤을 수확했습니다. 경화는 수확한 귤 중 'k'개를 골라 상자 하나에 담아 판매하려고 합니다. 그런데 수확한 귤의 크기가 일정하지 않아 보기에 좋지 않다고 생각한 경화는 귤을 크기별로 분류했을 때 서로 다른 종류의 수를 최소화하고 싶습니다. 예를 들어, 경화가 수확한 귤 8개의 크기가 [1, 3, 2, 5, 4, 5, 2, 3] 이라고 합시다. 경화가 귤 6개를 판매하고 싶다면, 크기가 1, 4인 귤을 제외한 여섯 개의 귤을 상자에 담으면, 귤의 크기의 종류가 2, 3, 5로 총 3가지가 되며 이때가 서로 다른 종류가 최소일 때입니다. 경화가 한 상자에 담으려는 귤의 개수 k와 귤의 크기를 담은 배열 tangerine이 매개변수로 주어집니다. 경화가 귤 k개를 고를 때 ..

숫자 문자열과 영단어 문제 네오와 프로도가 숫자놀이를 하고 있습니다. 네오가 프로도에게 숫자를 건넬 때 일부 자릿수를 영단어로 바꾼 카드를 건네주면 프로도는 원래 숫자를 찾는 게임입니다. 다음은 숫자의 일부 자릿수를 영단어로 바꾸는 예시입니다. 1478 → "one4seveneight" 234567 → "23four5six7" 10203 → "1zerotwozero3" 이렇게 숫자의 일부 자릿수가 영단어로 바뀌어졌거나, 혹은 바뀌지 않고 그대로인 문자열 s가 매개변수로 주어집니다. s가 의미하는 원래 숫자를 return 하도록 solution 함수를 완성해주세요. 해결방법 딕셔너리 사용 숫자인지 확인하고, 숫자이면 바로 answer에 추가 문자라면 word로 합치고, 딕셔너리에 있는지 확인해서 answe..