profile
행동하는 프론트엔드 개발자 되어가는 중 👊 파이팅!!
post-thumbnail

ThreeJs (3) Scene Graph

Geometry는 material과 함께 mesh를 구성하는 요소이다. 3차원 객체의 형상 등을 정의한다. material은 3차원 객체의 색상이나 투명도 등을 정의한다. mesh는 3차원 객체를 화면에 표시하기 위한 클래스이며 Object3D의 파생 클래스이다.Obj

2022년 2월 14일
·
0개의 댓글
·
post-thumbnail

ThreeJs (3) Geometry

BoxGeometry 정육면체 (가로, 세로, 깊이)면이 회색으로 채워지고 외곽선이 노란색으로 표시되는 육면체로 변경BoxGeometry는 가로, 세로, 깊이에 대한 크기와 함께 가로, 세로, 깊이 각각에 대한 분할(Segments)수로 정의, 지정하지 않으면 기본값이

2022년 2월 14일
·
0개의 댓글
·

공부 list

객체지향 특징 제대로 알기 비동기가 왜 필요할까?자료구조 heepThreeJS 공부typeScript 공부

2022년 2월 7일
·
0개의 댓글
·

WebGL이란?

Web Grapthics Library의 약자로 웹상에서 2D 및 3D 그래픽을 렌더링하기 위한 로우 레벨 JavaScript API이다. OpenGL ES2.0을 기반으로 브라우저 엔진에 내장된 HTML5 Canvas 요소 위에 그려진다. 렌더링은 컴퓨터 프로그램을

2022년 2월 5일
·
0개의 댓글
·
post-thumbnail

ThreeJs (2) Geometry

Mesh (Object3D) Mesh를 생성할 때 mesh의 형상을 정의하는 geometry와 색상이나 투명도 등을 지정할 수 있는 material이 필요하다. Geometry 3차원 오브젝트의 형상을 정의한다. 형상을 정의하기 위한 데이터는? 정점 형상을 정의하는

2022년 2월 4일
·
0개의 댓글
·
post-thumbnail

ThreeJS 공부시작!!

Three.js는 웹페이지에 3D객체를 쉽게 렌더링하도록 도와주는 자바스크립트 3D 라이브러리이다.three.js는 WebGL을 사용하여 3D를 그린다.Javascript 를 이용하여 웹에서 사용이 가능한 그래픽 라이브러리 ( Web Graphics Library )단

2022년 1월 29일
·
0개의 댓글
·

Scroll Event vs IntersectionObserver

DOM의 스크롤 이벤트로 ‘현재 스크롤 한 길이’와 ‘전체 페이지 길이’를 비교해서 추가적인 요소를 불러오는 방법타겟 요소를 정해서 그 요소가 화면에 보이게 되면 추가적인 요소를 불러오는 방법Scroll Event는 전체적인 스크롤에 반응한다. 이는 성능적으로 비효율적

2022년 1월 28일
·
0개의 댓글
·

Throttle? Debounce?

이벤트 핸들러가 많은 연산(무거운 계산 및 기타 DOM 조작)을 수행(이벤트 핸들러의 과도한 횟수가 발생하는 것)하는 경우 제약을 걸어 제어하여 이벤트를 발생시키는 기술이다.여러번 발생하는 이벤트를 일정 시간 동안, 한번만 실행 되도록 만드는 개념일정한 주기마다 발생하

2022년 1월 26일
·
0개의 댓글
·

LocalStorage 사용법

LocalStorage ? html5부터 웹의 데이터를 클라이언트에 저장할 수 있는 webStorage추가 key/value의 쌍으로 데이터를 저장하고 key를 기반으로 데이터를 조회하는 패턴이다. windows전역 객체의 LocalStorage라는 컬렉션을 통해 저장

2022년 1월 12일
·
0개의 댓글
·

기본기를 채우자..!

머리가 새하얘졌다....배열에서 중복제거하기!Set객체를 이용해 중복없는 데이터를 표현하기 Set객체는 언제나 고유한 값 만이 존재할 수 있다.set은 객체였다!! 잊지말자배열에 펼처서 넣어줘야지 그 길이도 구할수 있다.indexOf()함수는, 배열에서 특정값이 처음으

2022년 1월 5일
·
0개의 댓글
·

완전탐색

완전탐색 말그대로 완전탐색!! 가능한 모든 경우의 수를 다 체크해서 정답을 찾는 방법 완전탐색 활용방법

2021년 12월 31일
·
0개의 댓글
·
post-thumbnail

Final Project Mission-Eco 지구를 지키자! + 회고

환경과 지구를 위해 우리 함께해요. 들어와서 같이 참여해요!배포링크: Misson-Eco 미션에코는 지구를 위해 환경을 위해 어떤 방법으로 도울 수 있는지 알려드립니다.글로만 알려주는 형식이 아닌 직접 경험할 수 있는 챌린지 형식으로 여러분들이 미션을 해나갈 수 있습니

2021년 12월 29일
·
0개의 댓글
·
post-thumbnail

first project - weather Look 오늘 뭐입지? + 회고

 ☀️ 아침마다 어떤 옷을 입어야 할 지 고민된 적 있으신가요? 날씨에 맞게 옷을 추천해드립니다. 🌦 오늘날씨의 맞는 옷이 어떤 건지 모르겠고, 막상 입고 나갔다가 더웠거나 혹은 추웠던 적이 있으셨나요? ⛅️ 옷 아이콘이 아닌 실제 옷을 추천해드립니다. 작업공유

2021년 12월 28일
·
0개의 댓글
·
post-thumbnail

NEXT.JS

Zeit에서 만든 React 프레임워크사용언어 typeScript, javaScript Server Side Rendering화면 깜빡임 없음렌더링 속도 빠름SEO적용 유리 파일기방 랑팅은 간단하게 페이지를 추가할 수 있다.스크립트로 화면을 그리기 때문에 새로고침시

2021년 12월 27일
·
0개의 댓글
·
post-thumbnail

클로저란?

함수와 함수가 선언된 어휘적 환경의 조합이다.어휘적 환경이란? 클로저가 생성된 시점의 유효범위 내에 있는 모든 지역 변수로 구성된다.외부 함수의 변수에 접근할 수 있는 내부 함수이다.내가 이해한 클로저는 먼저 함수가 선언됐을 때 환경(스코프)를 기억한다.즉, 함수가 생

2021년 11월 22일
·
0개의 댓글
·
post-thumbnail

리액트 hook 제대로 이해하자

hook이란 단어가 잘 와닫지 않는다. 한만디로 표현한다면 hook이란 뭘까?(갈)고리, 걸이; (낚시) 바늘갈고리호크로 잠그다걸다, 갈고리호크로 잠그게걸게 되어 있다컴포넌트에게 훅을 건다컴포넌트 생명 주기에 특정 명령을 내린다지금까지 이해한 리액트 hook은 함수형

2021년 11월 17일
·
0개의 댓글
·

ORM, Sequelize

Object Relational Mappingobject ↔ orm ↔ relational Database둘사이의 통역사/중개자 역할을 담당하는 orm ~ 둘사이의 관계를 매핑 해주는 도구orm을 이용하면 관계형데이터베이스의 엔티티, 레코드 접근할 때 마치자바스크립트

2021년 8월 2일
·
0개의 댓글
·

[Algorithm] Binary Heap (이진 힙)

이진 힙은 트리 객체를 이용해 구현할 수도 있고, 배열로도 구현할 수 있다.완전 이진 트리는 노드가 낮은 레벨부터 채워지고, 같은 레벨에서는 왼쪽부터 채워지기 때문에 배열로 구현하는 것이 쉽다.최대 힙과 이진 검색 트리(binary search tree)는 둘다 완전

2021년 7월 27일
·
0개의 댓글
·

SQL?

SQL? 하나의 언어인 Structured Query Language (SQL)은 데이터베이스 언어로, 주로 관계형 데이터베이스에서 사용한다. 데이터베이스 프로그래밍 언어 데이터베이스에 쿼리를 보내 원하는 데이터를 가져오거나 삽입할 수 있다. 데이터가 구조화 된 SQ

2021년 7월 27일
·
0개의 댓글
·

Number.MIN_SAFE_INTEGER

말그대로 안전한 최소 정수값을 의미한다. 안전한 최대 정수값을 의미한다. JavaScript의 Number는 부동 소수점으로 표시되고 정밀도가 제한적이다. 하지만 Bigint를 사용하면 길이의 제약 없이 정수를 다룰 수 있다.

2021년 7월 22일
·
0개의 댓글
·