ctx.drawImage : 비디오를 캔버스로 가져오기
비디오를 캔버스로 가져오기 const canvas = canvasRef.current; const ctx = canvas.getContext("2d"); ctx.drawImage(videoRef.current, 0, 0, canvas.width, canvas.height); ctx.drawImage 메서드를 사용하면 비디오를 이미지처럼 캔버스 위...
고양이발
✅CRA 없이 리액트 환경 만들기
모듈 설치 폴더 생성 및 초기화 프로젝트 폴더를 만들고 yarn을 초기화하여 package.json 파일을 생성해준다. yarn init -y public 폴더 생성 정적 파일들을 담을 public 폴더를 생성한다. public 폴더 안에 index.html 파일을 만들고 html 코드를 넣어준다. <!DOCTYPE html>...
끝에서 n개까지의 요소에 css 적용하기
끝에서 4개까지 적용한다고 했을 때 <style> li { list-style: none; width: 50px; height: 50px; margin: 2%; background-color: orange; float: left; } li:nth-last-child(-n + 4) { ...
context로 storage 값을 사용하는데 값이 초기화되지 않을 때
context를 사용해서 상태 관리를 할 때 storage에서 상태 값을 가져오는 경우, 맨 처음 storage에서 가져온 값은 새로고침 할 때까지 바뀌지 않는다. Provider 부분에서 state를 수정해야 한다. const getStateName = () => { return storage.get(""); }; const [stat...
타입스크립트 입문 - 기초부터 실전까지 : 타입스크립트 설치
npm i typescript -g // mac에서는 sudo npm i typescript -g yarnpkg
리액트를 다루는 기술 : 리액트 라우터로 SPA 개발하기
Route 컴포넌트로 특정 주소에 컴포넌트 연결 Route라는 컴포넌트를 사용하면 어떤 규칠을 가진 경로에 어떤 컴포넌트를 보여줄 지 정의할 수 있습니다. / 경로를 사용하는 Route에 exact라는 props를 설정하지 않으면 /about 경로가 / 규칙에도 일치하기 때문에 두 컴포넌트가 모두 나타나게 됩니다. <Route path="/...
canvas의 크기를 수정하면 내용이 지워지고 까맣게 변하는 이슈
canvas를 사용할 때는 태그에 width, height 값을 꼭 넣어주어야 한다. (속성을 정의하지 않을 경우 기본으로 300, 150 크기를 가진다.) canvas의 width, height를 직접 변경할 때는 setState 등을 통해 상태를 변경하거나 javascript property를 이용한다. canvas.width = 800; c...
모두의 네트워크 - 01 네트워크의 구조
네크워크의 구조 컴퓨터 네트워크란? 컴퓨터가 두 대 이상 연결되어 있으면 컴퓨터 네트워크가 되고, 컴퓨터 간에 필요한 데이터(정보)를 서로 주고받을 수 있다. 컴퓨터 간의 데이터(파일) 전송, 웹 사이트 열람, 메일 송/수신과 같은 작업을 할 수 있다. 인터넷은 전 세계의 큰 네트워크부터 작은 네크...
immutable 데이터와 mutable 데이터, 얕은 복사/깊은 복사
immutable 데이터와 mutable 데이터 immutable 데이터 immutable은 불변이라는 뜻이며 boolean, number, string 등의 기본형 데이터는 immutable하다. var v1 = 'test' var v2 = v1 console.log(v1) // 'test' console.log(v2) // 'test' ...
OS별 기본 시스템 폰트 정리
OS별 시스템 폰트 OS Version System Font Mac OS X El Capitan San Francisco Mac OS X Yosemite Helvetica Neue ...