반응형 JS&TS/Learn4 [THREE.JS] Web에서 3D 구현하기 (three.js 사용법 example) 최근 인터렉티브 웹에 대한 관심이 많아졌다 그래서 여러 라이브러리와 예재, 잘 구현된 웹을 찾다보니 three.js를 사용해서 조금 더 역동적이고 눈에 띄는 웹을 구현해보고 싶었다. 우선 React나 Next.js에 적용하기 전에 기본적인 three.js의 사용, 설치방법을 알아보자. 1. 구성 Three.js는 다음과 같은 중요한 골격요소를 가지고 있다. 이 구성을 이해한다면 응용하고 여러 장면을 만드는데 큰 어려움이 없을 것이다. Renderer Renderer는 Three.js를 화면에 렌더링해주는 역할을 한다. Renderer의 domElement(canvas)를 사용해 Element를 추가할 수 있다. HTML에 있는 기존 canvas element에 적용할 수도 있다. Scene 3D Canv.. 2023. 11. 15. TypeScript 기초 with Example 우린 그동안 Javascript를 기반으로 개발을 해왔다. 하지만 팀프로젝트, 대형프로젝트를 할수록 유지보수와 재사용에 대한 필요성이 점점 늘어난다. '내가 나가면 다음 개발자는 내 코드를 잘 이해할까?' '기존 프로젝트에 내가 들어간다면 전 개발자의 의도대로 개발할 수 있을까?' 그래서 Typescript라는 것을 사용해서 내 의도를 코드에 지정해줄 수 있다. Typescript란? Javascript를 기반으로 type 구문을 추가하여 나의 의도를 기록해 놓는 것. 오류를 컴파일 단계에서 잡아낼 수 있고 코드의 가독성을 높이며 디버깅의 효율성도 증대시킨다. 난 프론트엔드 개발자이며 React를 주로 사용하기에 React에서 Typescript를 사용하는 방법을 적을 것이다. 실습 먼저 install이.. 2023. 1. 30. JavaScript_function 스크립트를 다루다 보면 특정한 기능을 정의하고 내가 필요할때 사용할 수 있어야 한다. 먼저 기능을 정의하는 방법을 알아보자. 가장 간단하게 알림창을 열어주는 alert을 가지고 예시를 들어보겠다. 여러가지 방법으로 선언할 수 있는데 이번 시간에는 function, arrow function 두가지를 알아보자. 먼저 arrow function은 const 함수명 = () => { 내용 } 문법으로 작성된다. function은 function이라는 선언자체로 function 함수명() { 내용 } 문법으로 작성된다. 사실 우리가 사용함에 있어 기능은 같다고 볼 수 있다. javascript 사용법을 기본만 알고 있다면 다음과 같은 alert은 알고 있을 것이다. alert('알림내용'); 자 그럼 이 동작이.. 2023. 1. 23. Javascript_선언 (feat. const, let, var) 자바스크립트의 기본을 알아보려하면 선언, 함수, 호출 등이 있다. 먼저 선언부터 알아보자 선언에는 여러종류가 있는데 const, let, var가 많이 사용된다. 다 같은 선언의 역할을 하는데 각각 다른 효과가 있다. 또 HTML에서 요소나 태그를 가져올 수 있다. 먼저 var는 어떤 숫자, 문자, 참거짓(boolean)등 여러 요소를 선언할때 사용된다. 1 2 3 4 5 var number = 10; // number에 10이라는 숫자를 저장시킨다. var text = "string"; // text에 string이라는 문자를 저장시킨다. var div = document.querySelector('#div'); // div에 HTML에서 'div'라는 id를 가진 태그를 저장시킨다. cs 위처럼 선언.. 2022. 6. 21. 이전 1 다음 반응형
