3️⃣ 함수 타입함수타입 구문은 화살표 함수와 유사하지만 함수 본문 대신 타입이 있다. 💥기본적인 사용법let nothingInGivesString : () => string;이 변수 타입은 매개변수가 없고 string을 반환하는 함수이다. 함수 타입은 콜백 매개변수(함수로 호출되는 매개변수)를 설명하는 데 자주 사용된다.const songs = ["Butter", "As Time Goes by", "Hey Jude"];/* getSongAt 매개변수의 타입을 index:number 로 받고 string을 반환하는 함수 */function runOnSongs(getSongAt: (index: number) => string) { for (let i = 0; i  🚩 함수 타입 괄호/* 타입은 str..

1️⃣ 함수 매개변수이런식으로 코드를 작성한다고 해보자.function sing(song){ console.log(song);}/*함수호출*/sing("LALALALA"); 함수 호출시  "LALALALA"는 string인데 sing 함수를 작성한 개발자는 song 매개변수를 제공하기 위해 의도한 값의 타입을 적어주지 않았다. 즉, song인자로 int가 올지 string이 올지 객체가 올지 그 누구도 알 수 없다. function sing(song:string){ /*명시적 타입 정보 선언*/ console.log(song);}/*함수호출*/sing("LALALALA");따라서 위와 같이 반드시 명시적 타입 정보를 선언해주어야한다. 🚩필수  매개변수JavaScript에서는 인수의 수와 상관없이..

3️⃣객체 타입 유니언유니언 : 값에 허용된 타입을 두 개 이상으로 확장하는 것 🚩유추된 객체 타입 유니언변수에 여러 객체 타입 중 하나가 될 수 있는 초기값이 주어지면 Typescript는 해당 타입을 객체 타입 유니언으로 유추한다.유니언 타입은 가능한 각 객체 타입을 구성하고 있는 요소를 모두 가질 수 있다.const poem = Math.random() > 0.5 ? { name:"The Double Image", pages:7}:{ name:"Her Kind",rhymes:true};console.log(typeof(poem.name)); /*string*/console.log(typeof(poem.pages)); /*number | undefined*/console.log(typeo..

객체 리터럴은 각자의 타입이 있는 키와 값의 집합이다.객체 타입은 객체가 필요로 하는 것을 설명한다.1️⃣객체타입객체 타입은 객체 리터럴과 다르다.객체타입은 필드 값 대신 타입을 사용해 설명한다.코드작성 시 객체 타입을 선언할 때  : 으로 선언한다는 것을 유의하자./* 객체 타입*/let object : { name : string; age: number;};/*객체 리터럴*/let object2 = { name : "hello world", phone : 23};별칭 객체 타입{name : string; age : number}과 같은 객체 타입을 계속 작성하는 일은 귀찮기 때문에 객체 타입에 타입 별칭을 할당해 사용하는 것이 일반적이다.type Person = { name..

조명전 포스팅에서는 Material 클래스를 선언할때 조명 설정없이도 3D객체를 나타낼 수 있는 BasicMaterial로 선언하였다.하지만 주로 쓰이는 클래스는 라는 클래스이다.이 BasicMaterial을 제외한 나머지 Material클래스들은 조명이 없으면 시각화되지 않는다.이를 해결하기 위해 우리는 조명이라고 불리는 'Light'를 설정해주어야한다.Light는 아래와 같이 DirectionalLight 클래스로 선언하고 인자로 빛의 색, 광원의 밝기를 받는다.const directionalLight = new THREE.DirectionalLight("white", 10);directionalLight.castShadow = true; //빛이 그림자를 드리울 수 있게함directionalLigh..

ThreeJS란?ThreeJS란 WebGL(Web Graphic's Library)을 쉽게 사용할 수 있도록 해주는 JS기반 라이브러리이다. Graphic들은 html canvas 위에 그려지는데 이를 개발자가 좀 더 편하게 다루기 위해서 사용된다.ThreeJS의  기본 구성 요소기본 구성 요소에는 4가지(Renderer, Scene, Camera, Mesh)가 있다. 영화로 예를 들어 설명하자면 Renderer는 영화를 송출하는 기기, Scene은 영화의 배경 혹은 장면, Camera는 영화를 찍고 있는 카메라(시점), Mesh는 영화의 등장인물이나 주위 물체를 의미한다. 1. Rendererconst renderer = new THREE.WebGLRenderer();renderer.setSize(wi..

환경세팅하는 법 프로젝트 디렉토리를 생성하는 절차는 생략하고 진행한다. Vite를 사용하여 프로젝트를 생성한다. npm create vite@latest project_name -- --template vanilla Vite가 지원하는 템플릿은 이러한 것들이 있다. 프로젝트 생성 후 그 디렉토리 안에서 다음 명령어를 실행해 Threejs 라이브러리를 설치해준다. 설치방법은 다음과 같다. npm i three 방금 전 명령어가 문제없이 실행되었다면 프로젝트 디렉토리 내부에 package.json 안에 dependencies에 "three" 라이브러리가 추가된 모습을 볼 수 있다. npm run dev 프로젝트를 생성 후 위의 명령어를 입력하면 서버를 실행시킬 수 있다. 이렇게 ThreeJs 세팅과 실행을 ..

🚩리터럴 타입const philosopher = "Hypatia";위의 코드를 보면 philosopher 이라는 변수에 "Hypatia"라는 string을 담았다. 즉, philosopher은 string타입이면서도 구체적으로는 "Hypatia"라는 구체적인 특별한 값을 가진다.이것을 우리는 리터럴 타입이라고 부른다. 리터럴 타입이라고 부를 수 있는 것은 원시타입 값 중 어떤 것이 아닌 특정 원시값으로 알려진 타입이다. 리터럴 타입으로 선언할 수 있는 방법은 변수를 const로 선언하고 직접 리터럴 값을 할당하면 Typescript는 해당변수를 할당된 리터럴 값으로 유추한다.let으로 선언할 경우는 일반적인 원시타입을 가진다. 아래와 같은 경우에선 string이다.let lifespan : number..

1. 오류 발생 진행중인 프로젝트 개발에서 프론트는 ReactJS, 백은 Springboot 를 사용하며 진행하고 있었다. 나는 프론트 인원중 한명으로 UI 구현을 전부 마치고 데이터파싱을 위해 백엔드 서버와 통신하여 데이터를 교환하려고 시도했다. 즉, 다른 호스트에서 클라이언트와 서버가 각각 돌아가고 있었다. 그런데....! CORS 문제가 일어났다... 그다음에 드는 생각은... CORS 가 뭐지? 2. 쓰던 방식에 대한 고찰 쓰던 방식을 코드로 적으려면 너무 길어지니 간단하게 React에서 axios와 async - await를 이용해 데이터를 받아올때까지 기다리고 Promise 객체를 반환받는 과정이다. 그럼 CORS는 뭘까? 브라우저에서는 보안적인 이유로 cross-origin HTTP 요청들을..

유니언이란?유니언(union) : 값에 허용된 타입을 두개 이상의 가능한 타입으로 확장하는 것 변수의 자료형 타입을 "이거" 또는 "저거" 라고 정의해주는 역할을 한다.let mathmatician = Math.random() > 0.5 ? undefined : "Mark Goldberg"; mathmatician은 undefined거나 string일 수 있다. 어떠한 타입인지 정확히 모르지만 두 옵션중 하나라는 것을 알고 있는 경우에 코드를 처리하는 개념이다.🚩유니언 타입 선언let thinker : string | null = null;변수에 대해 초기값이 존재해도 명시적 타입 에너테이션을 제공하는 것이 유용할 때 유니언 타입을 사용한다.예를 들면 어떤 변수가 null로 유지되다 입력이 들어왔을 때..