Front-End (2) 썸네일형 리스트형 [Canvas] Canvas 태그 와 기본 작동 순서 목차) 1. Canvas 태그란? 2. 기본 작동 순서 1) 요소 선택 2) getContext() 3) beginPath() 3. 정리 1. Canvas 태그란? HTML5 에서 도입되었으며, 그래픽을 그리기 위한 요소이다. Javascript를 사용하여 동적인 그래픽과 애니메이션을 생성할 수 있다. Canvas 태그는 그리기 영역을 제공해주는 것이며, 픽셀 기반의 그래픽 처리를 지원한다. 2. 기본 작동 순서 React를 활용하여 Canvas 태그를 작동시키려고 한다. canvas tag를 사용하기 위한 기본적인 순서와 간단한 기능을 알아보자. 1) 요소 선택 (useRef) 먼저 어떤 canvas에 그래픽을 그릴지 선택해야 한다. React [ useRef ]는 DOM요소에 접근하여 해당 요소를 .. [Framework] Next.js의 프로젝트 구조(1) - Top Level Files and Folders 목차) 1. Top-level files 2. Top level folders 3. 참고 Top-level 이란, 프로젝트 구조 및 동작 설정을 하는 레벨을 의미한다. 프로젝트의 최상위 디렉토리에 위치시키며, 특정 이름을 가진 파일 또는 폴더를 생성하여 구조 및 동작을 설정하는 것이 목적이다. 1. Top-level files 1) next.config.js next.js 프로젝트 설정 파일 (설정 예시) 1. Webpack 설정 변경 2. Webpack loader 추가 3. 페이지 경로 설정 · rewrites(){ ... } 4. plugin 추가 2) _middleware.ts Next.js의 내장 middleware를 사용하여 서버 사이드와 클라이언트 사이드의 요청을 중간에 가로채고 수정하는 기.. 이전 1 다음
