TO

WebGL을 지원하지 않는 일부 기기나 브라우저를 위해 메세지를 표현하는 코드이다. WebGL 지원 감지 모듈을 가져오고 렌더링을 시도하기 전에 다음을 실행한다.import WebGL from 'three/addons/capabilities/WebGL.js';if ( WebGL.isWebGL2Available() ) { // Initiate function or other initializations here animate();} else { const warning = WebGL.getWebGL2ErrorMessage(); document.getElementById( 'container' ).appendChild( warning );}

장면 만들기실제로 three.js를 사용하여 표시하려면 장면, 카메라, 렌더러 세 가지가 필요다. 이를 통해 카메라를 사용하여 장면을 렌더링할 수 있다.main.js —import * as THREE from 'three';const scene = new THREE.Scene();const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );const renderer = new THREE.WebGLRenderer();renderer.setSize( window.innerWidth, window.innerHeight );document.body.appendChild( renderer.domE..

1. JavaScript 실행 환경1.1. 웹 브라우저에서 실행JS는 웹 브라우저에서 실행되는 경우가 많다. 대부분의 브라우저는 내장된 JavaScript 엔진을 가지고 있으며, 이를 통해 JavaScript 코드를 실행한다.브라우저 내장 JavaScript 엔진:Chrome: V8 엔진.Firefox: SpiderMonkey 엔진.Safari: JavaScriptCore (또는 Nitro) 엔진.Edge: V8 엔진(Chromium 기반).1.2. Node.js에서 실행Node.js는 서버 측 JavaScript 실행 환경이다. 이를 통해 JavaScript 코드를 브라우저가 아닌 서버에서 실행할 수 있다.Node.js는 Chrome의 V8 JavaScript 엔진을 사용하여 서버 측에서도 JavaSc..

1. ECMAScript와 JavaScriptJavaScript는 언어의 이름이고, ECMAScript는 그 표준.JavaScript의 모든 버전은 ECMAScript 표준에 기반.ECMAScript는 1997년 첫 표준 발표 이후 지속적으로 업데이트되고 있다.2. ECMAScript 버전의 개요ES1 (1997)의의: 최초의 ECMAScript 표준.주요 내용: 기본적인 JavaScript 기능 정의. 데이터 타입, 변수, 함수, 객체에 대한 기본적인 정의 포함.ES2 (1998)의의: ISO/IEC 국제 표준 준수를 위한 수정.주요 내용: 기존 기능에서 큰 변화는 없었으나 표준화 과정의 일환.ES3 (1999)의의: JavaScript의 기능이 본격적으로 확장된 버전.주요 내용: 정규 표현식 추가, ..

1. JavaScript의 기원과 탄생 (1995년)창시자: 브렌던 아이크(Brendan Eich).배경:1990년대 중반, 인터넷 사용자가 증가하면서 더 상호작용적인 웹 페이지의 필요성이 대두.당시 HTML과 CSS는 정적 콘텐츠만 제공했으며, 동적인 웹 경험을 위해 새로운 언어가 필요.넷스케이프 커뮤니케이션스(Netscape Communications)는 브라우저 시장에서 경쟁 우위를 확보하기 위해 "Mocha"라는 이름의 스크립트 언어 개발을 계획.개발 과정:브렌던 아이크는 단 10일 만에 Mocha를 설계.Mocha → LiveScript → JavaScript로 이름 변경."JavaScript"라는 이름은 당시 인기 있던 Java 언어와의 마케팅 연관성을 위해 붙여짐.초기 버전은 클라이언트 측에..

JavaScript는 웹 개발의 핵심적인 프로그래밍 언어이며, 프론트엔드 개발을 목표로 하는 사람에게 필수적으로 익혀야 할 도구이다. 1. JavaScript란 무엇인가?정의: JavaScript는 동적인 웹 콘텐츠를 만들기 위해 설계된 프로그래밍 언어로, HTML 및 CSS와 함께 웹의 3대 구성 요소 중 하나다.특징:인터프리터 언어: 컴파일이 필요 없이 브라우저에서 실행.동적 타입: 변수의 데이터 타입을 명시적으로 선언하지 않아도 됨.멀티 패러다임 언어: 객체지향, 함수형, 이벤트 기반 프로그래밍을 지원.프로토타입 기반: 클래스가 아닌 객체 프로토타입 체계로 상속을 지원.2. JavaScript의 역할HTML: 웹 페이지의 구조를 담당.CSS: 디자인 및 레이아웃을 담당.JavaScript: 웹 페이..

반응형 디자인은 다양한 화면 크기와 장치에서 웹 콘텐츠가 적절히 표시되도록 만드는 디자인 접근 방식이다. 현대 웹 개발 시 필수로 적용되어야 하는 기술로, 어떤 기기에서든 적절한 화면을 제공하는 것을 목표로 한다.1. Responsive Design의 개념과 필요성개념: 단일 웹 페이지가 다양한 화면 크기, 해상도, 방향(세로/가로)에서 일관된 사용자 경험을 제공하도록 설계하는 기술.필요성:다양한 디바이스(모바일, 태블릿, 데스크톱, TV 등)에서의 접근성 보장.사용자 기반 확대: 글로벌 인터넷 사용자의 대부분이 모바일 장치를 사용.SEO 최적화: 구글은 반응형 디자인을 추천.2. 핵심 원칙유동적인 레이아웃(Flexible Layouts): 콘텐츠가 화면 크기에 맞춰 자동으로 조정.유연한 미디어(Flex..

레이아웃 제작은 웹 페이지의 구조와 요소 배치를 정의하는 중요한 작업이다. 레이아웃 기술을 잘 이해하면 사용자 경험을 향상시키고 유지보수를 쉽게 할 수 있다.1. 레이아웃 제작의 핵심 개념컨테이너(Container): 페이지의 주요 구조를 담는 상위 요소.그리드 시스템(Grid System): 화면을 행(row)과 열(column)로 나누어 구성.정렬과 배치: 요소를 적절히 배치하고 간격을 설정.반응형 디자인(Responsive Design): 다양한 디바이스 크기에 대응.시맨틱 구조(Semantic Structure): 의미 있는 HTML 태그 사용으로 접근성 향상.2. 주요 CSS 레이아웃 기술1) Normal FlowHTML 요소는 기본적으로 Normal Flow로 배치된다.Block 요소: 위아래..

CSS Variables와 Custom Properties는 코드 재사용성과 유지보수를 향상시켜, 스타일을 보다 효율적으로 관리할 수 있다. 1. CSS Variables (Custom Properties)란?CSS Variables는 재사용 가능한 값을 정의하는 사용자 지정 속성이다. 전역 또는 지역 범위에서 적용 가능하며, var() 함수로 참조할 수 있다.문법:root { --variable-name: value;} --variable-name: 변수 이름 (반드시 --로 시작).value: 변수 값.2. 주요 특징동적 업데이트 : CSS 변수는 JavaScript를 통해 동적으로 변경할 수 있다.Cascading (상속 가능) : CSS의 계층 구조를 따르며 하위 요소가 부모 요소에서 정의한 변..

CSS의 Transitions와 Animations는 요소의 스타일 변화를 매끄럽게 보여줌으로써 인터페이스를 동적이게 보여준다.1. TransitionsCSS Transitions는 한 상태에서 다른 상태로의 스타일 변화가 부드럽게 진행되도록 설정한다. 일반적으로 사용자 상호작용(예: hover, focus)과 결합된다.구문selector { transition: property duration timing-function delay;} property트랜지션을 적용할 CSS 속성 (예: background-color, transform).duration변화가 지속되는 시간 (초 단위 s 또는 밀리초 단위 ms).timing-function애니메이션 속도 곡선을 정의 (예: ease, linear, e..