본문 바로가기

분류 전체보기408

[ Three.js ] 초보자를 위한 회전하는 3D 원기둥 만들기 Three.js는 웹에서 3D 그래픽을 쉽게 구현할 수 있는 강력한 라이브러리입니다. 이번 글에서는 @react-three/fiber와 @react-three/drei를 사용해 간단한 회전하는 3D 원기둥을 만들어보겠습니다. 1. 프로젝트 설정먼저, React 프로젝트를 생성하고 필요한 라이브러리를 설치합니다.npx create-react-app my-threejs-appcd my-threejs-appnpm install @react-three/fiber @react-three/drei  2. 코드 작성아래는 회전하는 원기둥을 만드는 전체 코드입니다. 코드를 App.js 파일에 실행해 보세요.import { Canvas, useFrame } from '@react-three/fiber';import { .. 2025. 1. 31.
[ JavaScript ] sort() 메서드와 sort((a, b) => a - b)의 차이점 자바스크립트의 배열 정렬 메서드 sort()는 매우 강력한 도구입니다. 하지만 기본 sort()와 sort((a, b) => a - b) 사이에는 중요한 차이점이 있습니다. 이 글에서는 두 방식의 동작 원리와 차이점을 상세히 설명하겠습니다.1. 기본 sort()의 동작 방식sort() 메서드는 배열을 정렬하지만, 기본적으로 문자열로 변환하여 정렬을 수행합니다. 즉, 배열의 요소가 숫자든 문자열이든 상관없이 모두 문자열로 취급하여 유니코드 순서에 따라 정렬합니다.예제:const arr = [10, 2, 30, 21];arr.sort();console.log(arr); // [10, 2, 21, 30]위 결과를 보면 숫자 값이 제대로 정렬되지 않았음을 알 수 있습니다. 이는 10, 2, 30, 21이 문자열.. 2025. 1. 29.
Three.js로 간단한 3D 장면 만들기 이번 글에서는 Three.js를 사용해 간단한 3D 장면(Scene)을 만들어보겠습니다. 코드와 함께 주요 개념들을 정리해보았습니다.Three.js 프로젝트 기본 설정Three.js는 웹에서 3D 그래픽을 렌더링 할 수 있도록 도와주는 라이브러리입니다. 먼저 Three.js를 설치하거나 CDN으로 로드한 후 사용합니다.  최종 결과물  코드 설명1. 씬(Scene) 생성const scene = new THREE.Scene();scene.background = new THREE.Color('F0F0F0'); // 장면의 배경색 설정 Scene은 3D 객체를 추가하는 컨테이너 역할을 합니다. 여기에서는 배경색을 #F0F0F0으로 설정했습니다.2. 카메라(Camera) 추가const camera = new T.. 2025. 1. 28.
Three.js란 무엇인가? Three.js는 WebGL(Web Graphics Library)을 쉽게 사용할 수 있도록 만들어진 JavaScript 3D 라이브러리입니다.  웹 브라우저에서 복잡한 3D 그래픽과 애니메이션을 구현할 수 있도록 돕습니다. 사용자는 플러그인 없이 웹 브라우저에서 바로 인터랙티브한 3D 콘텐츠를 즐길 수 있습니다. Three.js의 예제https://next.junni.co.jp/ Junni is...アイデアとテクノロジーで、世界をもっとハッピーでワクワクしたものに。ジュニのものづくりの理想を少し、覗いてみませんか?next.junni.co.jp https://coastalworld.com/ Coastal World - Digital Banking 3D Game and MarketplacePlay Coastal Wo.. 2025. 1. 27.
[ JavaScript ] findIndex와 indexOf의 차이점 알아보기 JavaScript를 사용할 때, 배열에서 특정 값을 찾는 것은 자주 사용되는 작업입니다. 이를 위해 주로 `findIndex`와 `indexOf` 메서드를 활용할 수 있는데, 이 둘은 비슷해 보이지만 중요한 차이점이 있습니다. 이번 글에서는 `findIndex`와 `indexOf`의 차이점을 예제와 함께 알아보겠습니다. findIndex 메서드findIndex는 배열의 각 요소를 콜백 함수로 검사해, 조건을 만족하는 첫 번째 요소의 인덱스를 반환합니다. 만약 조건을 만족하는 요소가 없으면 -1을 반환합니다. 사용 방식arr.findIndex(callback(element, index, array), thisArg);리턴 값콜백 함수의 조건을 만족하는 첫 번째 요소의 인덱스를 반환하며, 없을 경우 -1을.. 2024. 10. 17.
[ 프로그래머스 / Javascript ] x만큼 간격이 있는 n개의 숫자 https://school.programmers.co.kr/learn/courses/30/lessons/12954 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr  문제 설명함수 solution은 정수 x와 자연수 n을 입력받아, x부터 시작해 x씩 증가하는 숫자를 n개 지니는 리스트를 리턴해야 합니다. 다음 제한 조건을 보고, 조건을 만족하는 함수, solution을 완성해주세요.  제한 조건x는 -10000000 이상, 10000000 이하인 정수입니다.n은 1000 이하인 자연수입니다. 입출력 예xnanswer25[2,4,6,8,10]43[4,8,12]-.. 2024. 10. 16.
[ Lodash ] _.cloneDeep 사용법과 예시 _.cloneDeep이란?_.cloneDeep은 Lodash에서 제공하는 유틸리티 함수로, 객체(Object)나 배열(Array)을 깊은 복사(Deep Copy)하는 역할을 합니다.일반적으로 자바스크립트에서 객체를 복사할 때, 얕은 복사(Shallow Copy)만 이루어집니다. 얕은 복사는 최상위 속성만 복사하고, 중첩된 객체나 배열은 그대로 참조를 복사하기 때문에, 원본 데이터에 의도치 않은 영향을 미칠 수 있습니다.반면, _.cloneDeep을 사용하면 객체의 모든 속성과 중첩된 구조까지 독립적으로 복사하여, 복사본을 수정해도 원본 데이터에는 전혀 영향을 미치지 않게 됩니다.  얕은 복사와 깊은 복사의 차이먼저, 얕은 복사와 깊은 복사가 어떤 차이를 만드는지 알아보겠습니다. 얕은 복사 예시: cons.. 2024. 9. 25.
[ javascript ] HTML, CSS, JS로 음악 플레이어 만들기 HTML, CSS, JavaScript를 사용해 음악 플레이어를 만들어보았습니다.  이 플레이어는노래 정보 표시, 재생/일시정지, 이전/다음 곡으로 넘어가기, 진행 바 등기본적인 음악 플레이어 기능을 구현합니다.    30분 만에 영상 보며 따라만들기 1. HTML 구조우선, HTML 파일을 작성합니다. 음악 플레이어의 기본 구조는 다음과 같습니다. Song Artist 0:00 0:00   container: 전체 플레이어를 감싸는 컨테이너입니다.song-info: 노래 이름, .. 2024. 9. 9.
[ React ] 리액트 파일 확장자를 .js로 사용하는 것이 안 좋은가요? 리액트 프로젝트를 진행할 때, 파일 확장자를 `.js`로 할지, `.jsx`로 할지 고민한 적이 있으신가요? 사실, `.js` 확장자를 사용하는 것이 "안 좋은" 것은 아니지만, 상황에 따라 장단점이 존재합니다. 1.  ` .js ` 확장자를 사용할 때의 장점통일된 확장자 관리모든 자바스크립트 파일을 `.js`로 관리하면 프로젝트에서 일관된 확장자를 유지할 수 있어, 파일 구조가 간단해집니다. 기존 코드와의 호환성기존에 작성된 자바스크립트 코드와 리액트 코드의 확장자를 일관되게 사용할 수 있어 유지보수에 용이합니다. 도구의 기본 지원`.js` 확장자는 모든 코드 에디터에서 기본적으로 지원되며, 특별한 설정 없이도 JSX 구문을 잘 처리할 수 있습니다.  2. `.js` 확장자를 사용할 때의 단점가독성과 .. 2024. 8. 28.
728x90