-
HTML Canvas API를 이용한 2d 3d
Canvas API란? Canvas API는 Javascript와 HTML을 이용해서 그래픽을 처리를 할 수 있게 도와줍니다. 이 API를 이용해서 애니메이션, 그림, 비디오등을 처리 할 수 있고, 이번에 소개해 드릴 2D 및 3D 그래픽을 그립니다. Canvas API 기본적인 예시 Canvas API를 이용한 간단한 예시를 보여드리겠습니다. <canvas id="scene"></canvas> //html id가 scene인 값을 참조 합니다. const canvas = document.getElementById("scene"); //렌더링이 될 수 있는 대상을 얻는 메소드를 얻습니다. //HTMLCanvasElement.getContext() => 캔버스의 드로잉 컨텍스트를 반환 합니다. 지원이 되지 않는 다면 //null를 반환 const...
tkendi's profile imagetkendi
2021-06-03 18:00
-
웹에서의 drag & selection
우리가 많이 알고 있는 Drag의 의미 이런식으로 마우스 드래그를 먼저 생각할 수 있고, 이렇게 생각하실 수 있습니다. 위의 사진은 정확히 Drag & Drop 할 때의 드래그이고, 두번째 이미지의 드래그는 마우스 Selection 입니다. Drag & Drop Drag & Drop은 mouse를 이용해서 특정 컴포넌트를 잡았을 때 동작이 될 수 있는 이벤트 입니다. 이 이벤트를 통해서 컴포넌트 다른 위치로 넘기게 할 수 있습니다. <p>Drag the p element back and forth between the two rectangles:</p> <div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)">...
tkendi's profile imagetkendi
2021-05-16 18:00
-
React-Select 라이브러리 소개
우리가 많이 사용하는 Select 라이브러리 [[React-Select 라이브러리 링크] (https://react-select.com/home)] 우리가 React에서 Select 컴포넌트를 구현할려고 할 때 에는 div를 이용해서 만들 수 있고, React-Select를 이용해서 만들 수 있습니다. 우선 div로 만든 Select 부분 코드입니다. <> <AutoCompleteInputWrap> <BoxInput placeholder="응모상품명 입력" label="응모상품명" focus={(e: boolean) => setFocus(e)} value={text.slice(0, 99)} onChange={(e: any) => { setTextLength(e.target.value?.length); setText(e.target.value); }} /> <AutoCompleteCustomText style=> {textLength}/100자 </AutoCompleteCustomText> </AutoCompleteInputWrap> <div style= > {focus && text.length > 0 && autoCompleteData.length > 0 && ( <AutoCompleteWrap> {autoCompleteData.map((cur: string,...
#react #React-Select #frontend
tkendi's profile imagetkendi
2021-04-23 18:00
-
DatePicker 라이브러리 Custom
Date Picker 라이브러리 란? [Date Picker 라이브러리 링크] 달력을 만들 수 있는 라이브러리 입니다. 현재 많은 달력을 만들 수 있는 라이브러리가 있지만 이 라이브러리가 [Demo] 페이지에 잘 나와있어서 금방 Custom을 하면서 사용할 수 있는 라이브러리 입니다. Date Picker Header Custom Date Picker 라이브러리에서는 props로 renderCustomHeader라는 props를 제공해 준다. 이 props를 이용해서 CustomHeader를 만들어볼 수 있습니다. 예제를 보면은 하나의 props에 너무 많은 코드가 들어가게 되어서 가독성이 떨어지 됩니다. 그래서 이것을 컴포넌트로 나누어서 작업을 진행을 하였습니다. Date...
tkendi's profile imagetkendi
2021-03-29 18:00