전체 글411 [ React ] Context API 란? Context API는 React에서 전역 상태(state)를 쉽게 관리하게 해주는 도구이다.특정 데이터를 여러 컴포넌트에서 공유해야 할 때 유용하다. 언제 Context API를 사용할까?1. 전역 상태를 여러 컴포넌트에서 공유해야 할 때 (예: 로그인 정보, 다크모드 설정, 언어 설정)2. props를 너무 깊이 전달해야 할 때 (props drilling 해결)3. Redux를 사용할 정도는 아니지만, 전역 상태 관리가 필요할 때 (Redux는 store, action, reducer 등의 복잡한 구조가 필요함)4. 테마(다크모드), 언어 설정 같은 전역 UI 상태 관리할 때 Context API를 쓰지 말아야 할 경우1. 단순한 상태 관리 (useSate로 충분할 때)2. 자주 변경되는 데이터 (.. 2025. 2. 18. [ 프로그래머스 / Javascript ] 문자열안에 문자열 https://school.programmers.co.kr/learn/courses/30/lessons/120908 프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 문제 설명문자열 str1, str2가 매개변수로 주어집니다. str1 안에 str2가 있다면 1을 없다면 2를 return하도록 solution 함수를 완성해 주세요. 제한사항1 ≤ str1의 길이 ≤ 1001 ≤ str2의 길이 ≤ 100문자열은 알파벳 대문자, 소문자, 숫자로 구성되어 있습니다. 입출력 예str1 str2 resultstr1str2result"ab6CDE443fgh22iJKlmn1o""6CD"1"ppprrrogramm.. 2025. 2. 9. [ Three.js ] MeshLambertMaterial의 특징 MeshLambertMaterial은 Three.js에서 사용되는 재질(Material) 중 하나로, 빛을 반사하는 표면을 표현하는 데 사용됩니다. 이 재질은 램버트 반사(Lambertian reflection) 모델을 기반으로 하며, 빛이 물체 표면에 부드럽게 퍼지는 효과를 만듭니다. 주로 빛의 영향을 받는 매트한 표면(예: 종이, 플라스틱, 벽 등)을 표현할 때 사용됩니다. MeshLambertMaterial의 특징램버트 반사 모델:빛이 물체 표면에 부드럽게 퍼지는 효과를 구현합니다.빛의 방향과 표면의 각도에 따라 밝기가 달라집니다.빛의 영향을 받음:MeshLambertMaterial은 조명(directionalLight, ambientLight 등)의 영향을 받습니다.조명이 없으면 물체가 완전히 .. 2025. 2. 2. [ 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. 이전 1 2 3 4 ··· 46 다음 728x90