오늘도 조으네💜

ThreeJS

아래의 소스는 보일러 플레이트를 활용하여 진행하였다. 참고 👉 https://github.com/aakatev/three-js-webpack GitHub - aakatev/three-js-webpack: Boilerplate for Three JS project Boilerplate for Three JS project. Contribute to aakatev/three-js-webpack development by creating an account on GitHub. github.com Three.js의 기본적인 사용 방법은 아래와 같다. import * as THREE from 'three' import { WEBGL } from './webgl' if (WEBGL.isWebGLAvailable()..

2023. 6. 24.

ThreeJS

Three.js를 설치하는 방법은 크게 4가지가 있다. 1️⃣ 그냥 다운로드하기 Three.js 홈페이지의 좌측 메뉴에 있는 download 버튼을 클릭하면 바로 파일이 다운 받아진다. 아래의 파일 중에 하나를 연결하여 작업하면 된다. 👉 three.js : 일반적인 라이브러리 👉 three.min.js : 압축버전 👉 three.module.js : 모듈방식으로 개발할 수 있는 라이브러리 2️⃣ CDN을 통한 설치 3️⃣ npm으로 설치하기 npm install --save three 4️⃣ 보일러 플레이트 활용 git clone https://github.com/aakatev/three-js-webpack.git https://github.com/aakatev/three-js-webpack GitHu..

2023. 6. 24.

ThreeJS

Three.js는 웹페이지에 3D 객체를 쉽게 렌더링 할 수 있게 도와주는 자바스크립트 라이브러리이다. WebGL 기술을 기반으로 렌더링과 카메라, 조명 등의 3D기술을 간단하고 직관적으로 구현할 수 있도록 제공한 라이브러리이다. WebGL: 점, 선, 삼각형을 그리는 아주 단순한 시스템이다. Three.js 구조 Three.js 에서 가장 기본이 되는 것은 Renderer, Scene, Camera이다. Scene을 만들고, 그 안에 3D 객체를 넣고, Camera는 요소를 비추는 역할을 한다. 그리고 Renderer를 통해 HTML Canvas안에 Rendering 하여 보여주는 것이다. Three.js 구조 요약 Renderer Three.js의 핵심 객체이다. Scene과 Camera 객체 데이터..

2023. 6. 19.

Javascript

유용한 사이트가 하나 있어서 소개해본다! jQuery 문법을 javascript로 바꾸는 방법을 소개해주는 사이트이다. 나는 처음 공부할 때 jQuery에 먼저 익숙해진 케이스이고 실무에서도 jQuery위주로 사용을 했던 터라 jQuery 문법은 아는데 javascript로 작성하려니 멈칫멈칫하던 순간이 자주 있었다. 매번 구글링해서 찾고 작성하는데, 이런 귀찮음을 해결해 주는 사이트이다. https://youmightnotneedjquery.com/#ajax You Might Not Need jQuery Your search didn't match any comparisons.jquery📋$.getJSON('/my/url', function (data) {}); ie8+📋var request = new..

2023. 5. 22.

컴퓨터 공학 지식/CS, 웹

📌 컴퓨터가 이해하는 정보 👉 데이터 숫자, 문자, 이미지, 동영상과 같은 정적인 정보 컴퓨터와 주고받는 내부에 저장된 정보 0과 1로 숫자를 표현하는 방법 0과 1로 문자를 표현하는 방법 👉 명령어 컴퓨터는 명령어를 처리하는 기계 컴퓨터를 실질적으로 움직이게 하는 정보 데이터는 명령어를 위한 일종의 재료 📌 컴퓨터의 핵심 부품 💻 CPU(중앙처리장치) 메모리에 저장된 값을 읽어 들이고, 해석하고, 실행하는 장치 CPU 내부에는 ALU, 레지스터, 제어장치가 있다. ALU : 계산기, 산술/논리 연산 장치로 산술 연산 및 논리 연산을 수행할 수 있다. 레지스터 : 임시 저장 장치, 데이터를 일시적으로 CPU 내부에 저장할 공간을 의미한다. 제어 장치 : 제어 신호를 내보내고, 명령어를 해석하는 장치 제어..

2023. 5. 4.

컴퓨터 공학 지식/CS, 웹

브라우저는 아마도 가장 많이 사용하는 소프트웨어일 것이다. 브라우저 주소 창에 URL을 입력했을 때 어떤 과정을 거쳐 웹페이지가 화면에 보이게 되는지 알아보자! 💻 브라우저의 핵심 기능 브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것이다. 자원은 보통 HTML 문서지만 PDF나 이미지 또는 다른 형태일 수 있다. 자원의 주소는 URI(Uniform Resource Identifier)에 의해 정해진다. ⚙ 브라우저의 주요 구성 요소 사용자 인터페이스 - 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등. 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분이다. 브라우저 엔진 - 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어. 렌더링 엔진 - 요청한 콘텐츠를 표..

2023. 4. 30.

읽을거리

최근 컴퓨터 공학 관련하여 심도 있게 공부해보고 싶은 마음이 생겨 관련 서적을 찾아보고 있다. 생각보다 공부할 것도 많고 너무 방대해서 조금 막막한 마음에 주변 개발자 지인들한테 조언도 구하고 몇가지 서적을 추천해주셨는데, 그 중에 가장 눈에 띄었던 책을 먼저 구매해보았다. 특히 노마드코더의 니꼴라스 쌤이 쓴 책이라 더욱 눈길이 갔다.👀 목차는 크게 웹 기초편, 웹 기술편, 컴퓨터 공학편, 최신 기술편으로 나뉘어져있다. 각각의 챕터에서는 어려운 개념들에 대해 입문자가 이해할 수 있게 그림과 비유로 설명되어 있고, 니꼴라스가 옆에서 1대 1 과외하듯 설명하는 느낌이 들어 개념들에 쉽고 친근하게 다가갈 수 있게 해주는 부분이 좋았다. 이 책에서는 웹 전반에 걸쳐서 두루두루 개념을 짚고 넘어가기에 전체적인 웹..

2023. 4. 29.

TypeScript

📌 Interface TypeScript의 핵심 원칙 중 하나는 타입 검사가 값의 형태에 초점을 맞추고 있다는 것이다. 이를 "덕 타이핑(duck typing)" 혹은 "구조적 서브타이핑 (structural subtyping)"이라고도 한다. 인터페이스는 이런 타입들의 이름을 짓는 역할을 하고, 코드 안의 계약을 정의하는 것뿐만 아니라 프로젝트 외부에서 사용하는 코드의 계약을 정의하는 강력한 방법이다. interface LabeledValue { // 인터페이스명은 대문자로 짓는다 label: string; } function printLabel(labeledObj: LabeledValue) { console.log(labeledObj.label); } let myObj = {size: 10, labe..

2023. 4. 7.