JavaScript 관련 글입니다.

• JS Event Loop, 자바스크립트 동작 원리
• 호이스팅이란 , var, let, const 차이
• Three.js에 대해
• script, script async, script defer의 차이
• AJAX가 무엇일까?
• 함수선언식과 함수표현식
• null과 undefined의 차이 간단정리
• setTimeout과 setInterval 요약
• this의 여러가지 의미
• Spread Operator(...)?
• JS class Constructor
• ES6 Destructuring Syntax
• default 파라미터 알아보기
• import / export 를 사용한 모듈식 개발방법
• Optional Chaining (?.)
• 프로미스(Promise)에 대해서
• ES8 - async / await
• Symbol 자료형?
• forEach, for in, for of 알아보기
• JSON형식 변환 방법 - JSON.parse(), JSON.stringify()
• 자바스크립트 가비지 컬렉션
• 화살표 함수와 일반함수의 차이
• JavaScript Array.reduce() 간단히 알아보기

요즘 새로 배워보고 싶은 것이 하나 생겼다. 그것은 바로 Three.js이다. 뭔가 웹사이트를 만들 때 조금 더 멋있고 인터렉티브하게 만들고 싶었고, 관련정보를 찾아보다가 이 three.js에 대해서 알게되었다. 그래서 배우면서 알게된 내용을 정리해 나가려고 한다.

Three.js ?

먼저 WebGL이라는 것에 대해서 알아볼 필요가 있다. WebGL은 웹 상에서 그래픽을 나타낼 수 있는 라이브러리다. 그런데 이 WebGL API 자체가 완전 로우 레벨이라서 처음부터 하나하나 개발해 나가야 하고 코드양도 많으며 복잡하다고 한다. Three.js는 이 WebGL을 조금 더 쉽고 간편하게 사용할 수 있도록 도와주는 라이브러리인 것이다.

공식사이트는 다음과 같다.
Threejs.org.

물론 Three.js 말고도 다른 라이브러리들이 있지만 현재는 Three.js가 가장 인기가 많다고 한다.
저 공식사이트에는 이것을 활용하여 만들어진 사이트들을 확인할 수 있다. https://eyes.nasa.gov/apps/mars2020/.
위 이미지에서 볼 수 있듯이 웹 상에서 화성을 표현하고 우주를 표현하는 등 멋진 표현을 웹사이트에 적용할 수 있는 것이다. three.js는 공식사이트에서 다운받거나 npm을 통해서 설치하는데 보통은 npm으로 다운받는 편이다. 다음 글에서 three.js에 대해서 좀더 자세히 정리해보도록 하겠다.
End.