※ Next.js 14.2.18 버전의 App router와 three.js 0.171.0 버전 사용도서와 관련한 간단한 홈페이지를 구현하게되면 책을 3D로 둘러볼수 있는 기능을 넣어보고 싶었다. 자바스크립트에서는 간편하게 3D 개체를 구현해볼 수 있는 three.js라는 라이브러리가 있다. 이를 활용하면 카메라, 빛, 3D객체들을 매우 편리하게 구현할 수 있다. 구현한 전체 코드는 아래와 같다.더보기"use client";// import 생략const RotatingBook: React.FC = ({ rotationY, cover }) => { const bookRef = useRef(null); const rotateAngle = [0, Math.PI * 0.5, Math.PI * 1, ..

개발을 하다보면 초당 수십~수백번의 연산을 처리해야 하는 경우가 있다.대표적인 예로 사용자 입력 처리 작업 등을 들수있는데 스크롤, 리사이즈, 드래그 등과 같은 마우스 커서 또는 터치를 활용한 입력은 실시간으로 좌표 등의 데이터를 받아 처리하기 때문에 매우 많은 연산량을 발생시킨다. Debounce와 Throttle은 빈번한 이벤트 처리로 인한 성능 저하 문제를 해결하기 위해 사용한다. 둘의 간단한 용도를 설명하면 아래와 같다.Debounce : 사용자 입력이 멈추면 특정 작업을 실행한다.Throttle : 특정 작업을 일정 간격을 두고 실행하도록 한다.자세한 설명과 사용법을 알아보자.   1. Debounce특정 이벤트가 매우 빈번하게 발생할때 Debounce는 이를 무시하다가 이벤트 발생이 더이상 일..

자바스크립트의 구조분해할당을 활용하면 배열이나 객체의 값을 쉽게 추출해 변수에 할당할 수 있다.  1. 구조 분해 할당1-1. 배열 구조 분해 할당배열의 각 요소를 변수에 할당한다.const arr = [1, 2, 3];const [a, b, c] = arr;console.log(a); // 1console.log(b); // 2console.log(c); // 3 배열의 특정 위치의 값만 필요한 경우 필요없는 부분을 생략하고 변수에 할당할 수 도 있다.const arr = [1, 2, 3, 4];const [first, , third] = arr; // 1번 인덱스를 비우고 3번 인덱스를 생략함console.log(first); // 1console.log(third); // 3  1-2. 객체 구조 ..

자바스크립트 배열에서 중복을 제거하는 방법은 여러가지가 있지만 일반적으로는 Set 객체를 활용하면 편리하게 중복을 제거할 수 있다. 2024.10.01 - [기타/코딩테스트] - (JS) Set [Programmers - 신고 결과 받기] (JS) Set [Programmers - 신고 결과 받기]더보기코딩테스트 연습 - 신고 결과 받기 | 프로그래머스 스쿨 (programmers.co.kr) 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하cstelladev.tistory.com 하지만 배열 내에 참조 타입이 들어있으면 Set으로 중복 제거가 되지 않는다. 내용물이 같더라도 메모리 상에 서로 다른 데이터로 존재하며 그 위치를 참조하여 사용하기때..

공공데이터포털에서 제공하는 대기오염 예보정보를 활용하고자 하였다. 한국환경공단(에어코리아)에서 제공하고 있는 대기오염 데이터는 특정 날짜로부터 4일간의 미세먼지 오염 정도가 어느정도인지를 응답해준다. 데이터는 아래와 같은 형태의 XML파일로 제공된다.2024-10-16서울 : 낮음, 인천 : 낮음, 울산 : 낮음, ... , 신뢰도 : 높음2024-10-17서울 : 보통, 인천 : 낮음, 울산 : 보통, ... , 신뢰도 : 높음2024-10-13...각 항목은 다음을 뜻한다.frcstOneDt : 첫번째 예보 날짜frcstOneCn : 첫번째 예보 날짜의 예보 데이터frcstTwoDt : 두번째 예보 날짜frcstTwoCn : 두번째 예보 날짜의 예보 데이터presnatnDt : 요청한 날짜10월 13..

화살표함수는 ES6에서 추가된 함수 표현식이다. 기존의 일반 함수 표현식과 함께 사용하여 코드를 좀더 간결하게 하고 일관된 this 바인딩을 제공하기 위해 추가되었다. 화살표함수의 특징은 다음과 같다.this 바인딩 방식- lexical scope에서 this를 바인딩한다. 즉, 화살표 함수가 선언된 위치의 this를 그대로 사용한다.- 일반 함수는 호출되는 시점에 따라 this가 결정된다.간결한 문법- 상황에 따라 function 키워드와 중괄호, return 등을 생략할 수 있어 더 짧은 구문 작성이 가능하다.arguments 객체가 없음- arguments 객체를 가지고 있지 않아 상위 스코프의 arguments 객체를 참조한다. (일반함수는 arguments 객체를 가지고 있다)생성자로 사용 불가..

자바스크립트에서 모듈을 불러올때는 주로 require와 import를 사용한다.require는 CommonJS, import는 ES6(ECMAscript 2015)에서 사용하는데 둘은 비교하면 다음과 같다. 1. 사용방법과 구문require : CommonJS에서 사용하며 주로 Node.js환경에서 사용된다. 동기적으로 모듈을 불러오는 특징을 가진다.const module = require("module-name"); // require 방식 import : ES6에서 사용하며 React, Vue등의 최신 자바스크립트 프레임워크에서 사용한다. 비동기적으로 모듈을 불러오는 특징을 가진다.import module from "module-name"; // import 방식  2. 모듈을 불러오는 시점req..

브라우저에 데이터를 저장하고 이용하는 Cookie와 Web Storage(LocalStorage, SessionStorage)의 특징은 다음과 같다. 1. Cookie1-1. 특징Web Storage API가 도입되기 전 대부분 웹브라우저는 쿠키(Cookie)라는 브라우저 저장소를 제공했다.쿠키는 다음과 같은 특징을 갖는다.HTTP요청시 서버로 자동 전송된다. 따라서 로그인정보, 세션관리에 유용하다.만료 날짜의 설정이 가능하며 지정하지않으면 브라우저가 닫힐때 제거된다.도메인을 기준으로 데이터가 저장되지만 경로 단위도 지정할수 있어 조금더 세밀한 조작이 가능하다.아주 오래된 브라우저에서도 대부분 호환이 가능하다.1-2. 단점여러가지 장점을 가진 브라우저 저장소로 기존 웹개발에서 오랜기간 사용되었지만 여러가..