본문 바로가기

전체 글

 (50)
기본요소 📌 기본 장면 구성요소(4) 1. Sence 장면,무대 2. Mesh 메쉬 - Geometry(모양) + Material(재질) 3. Camera 4. Light 📌 렌더링 순서 ✅ canvas 가져와서 렌더링 화면으로 지정하기 - 사이즈 : window.innerWidth, window.innerHeigth ✅ Scene 만들기 ✅ Camera 설정하기 ---> Scene 추가하기 ✅ Mesh 설정하기 ---> Scene 추가하기 ✅ 렌더링 👉 canvas : 렌더링 되는 공간 ✅ canvas 렌더링 화면으로 지정하기 const canvas = document.querySelector('#canvas'); const renderer = new THREE.WebGLRenderer({ canvas }); ..
SVG 기본 사용법 📌 SVG를 넣는 방법 1. 2. CSS Background 3. SVG요소들을 직접 inline 삽입 4. 5. ❌ 6. ❌ 📌 SVG 크기 설정 기본 설정 [상대비율] viewBox : x좌표 y좌표 width비율 height비율 👉 svg : 500 x 500 크기 고정 👉 : viewBox의 값에 따라 상대크기로 적용 됨. 📌 SVG 압축 inline 코드 압축하기 svgom 검색 -> Paste markup 붙여넣기 -> copy -> html 붙이기
배열, 튜플, 객체 📌 배열 let numArr: number[] = [1, 2, 3]; let strArr: string[] = ['hello', 'im', 'soo']; // 제네릭 문법 let boolArr: Array = [true, false]; ✨ 유니언 타입 - 배열에 들어가는 요소들의 타입이 다양할 경우 let multiArr: (number | string)[] = [1, 'hello']; ✨ 다차원 배열의 타입을 정의 let doubleArr: number[][] = [ [1, 2, 3], [4, 5], ]; 📌 튜플 - 길이와 타입이 고정된 배열 let tup1: [number, number] = [1, 2]; tup1 = [1, 2, 3]; ❌ tup1 = ['1', '2']; ❌ let tup2: [..
원시타입, 리터럴 타입 📌 Primitive Type - 동시에 한개의 값만 저장할 수 있는 타입. 👉 number 👉 string 👉 boolean 👉 null 👉 undefined 1. number let num1: number = 123; let num2: number = -123; let num3: number = 0.123; let num4: number = -0.123; let num5: number = Infinity; let num6: number = -Infinity; let num7: number = NaN; 👉 변수의 이름 뒤에 콜론(:)과 함께 변수의 타입을 정의하는 문법을 '타입 주석' 또는 '타입어노테이션'이라고 한다. 2. string let str1: string = 'hello'; let str2..
기본타입, 초기 환경 설정 📌 기본타입이란? - 타입스크립트가 자체적으로 제공하는 타입을 말하며, 다른 말로 내장 타입이라고 할 수 있다. 📌 초기 환경 설정하기 > npm init - Node.js 패키지 초기화 - 📂 package.json 생성 > npm i @types/node - Node.js의 내장 기능(함수, 클래스)에 대한 타입 선을 제공하는 패키지 - 📂 node_modules 폴더 생성 📝 tsconfig.json { "compilerOptions": { "target": "ESNext", "module": "ESNext", "outDir": "dist", "strict": true, "moduleDetection": "force" }, "include": ["src"] } ✨ 설정한 옵션 의미 target : ..
타입스크립트란? 📌 점진적 타입 시스템(Gradual Type System) 👉 자동으로 변수의 타입을 추론하기 때문에 모든 변수에 타입을 일일이 지정할 필요 없음 📌 타입스크립트의 동작 원리 출처 : 한 입 크기로 잘라먹는 타입스크립트(이정환 Winterlood) / 강의 바로가기
hooks # useInput import React, { useState } from "react"; import "./styles.css"; export const useInput = (initialValue, validator) => { const [value, setValue] = useState(initialValue); const onChange = (event) => { const { target: { value } } = event; let willUpdate = true; if (typeof validator === "function") { willUpdate = validator(value); } if (willUpdate) { setValue(value); } }; return { value, ..
[GraphQL] ApolloClient 📌 GraphQL Setting ✅ import - ApolloClient, InMemoryCache, ApolloProvider ✅ new ApolloClient ✅ import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client'; export default function App({ Component, pageProps }) { // GraphQL Setting const client = new ApolloClient({ uri: 'http://~', cache: new InMemoryCache(), }); return ( ); } 📌 URI / URN / URL ✅ URI https://deblisher.tistory.com?..

티스토리툴바