본문 바로가기

전체 글459

Day4: 수 조작하기 1, 2, 마지막 두 원소, 주사위 게임 1, 2, 3, 문자열 뒤의 n 글자 수 조작하기 1w, s, d, a로 구성된 문자열을 받아서 각 숫자별로 1, -1, 10, -10을 n에 더한 최종 값을 받는다.function solution(n, control) { for(let i = 0; i 다른 답:const operations = { w: (n) => n + 1, s: (n) => n - 1, d: (n) => n + 10, a: (n) => n - 10,};function solution(n, control) { return [...control].reduce((prev, op) => operations[op](prev), n);}function solution(n, control) { return Array.from(control).reduce((acc.. 2025. 8. 27.
Day3: 접미사 배열, 첫 번째로 나오는 음수, 부분 문자열 이어 붙이기, 글자 이어 붙여 문자열 만들기, 콜라츠 수열 만들기 접미사 배열:접미사를 전부 출력하고 정렬하기function solution(my_string) { var answer = []; for(let i = 0; i 다른 답:function solution(my_string) { return Array.from(my_string) .map((_, i) => my_string.substring(i)) .sort();}const solution = s => Array(s.length).fill('').map((v, i)=> s.slice(-i - 1)).sort()첫 번째로 나오는 음수:function solution(l) { for(let i = 0; i 다른 답:const solution = num_list => num_list.f.. 2025. 8. 26.
Day2: 문자열의 앞의 n 글자, 홀짝에 따라 다른 값 반환하기, 카운트 다운, 배열 만들기 1, 접두사인지 확인하기 문자열의 앞의 n 글자: function solution(my_string, n) { var answer = my_string.slice(0, n); return answer;}다른 답:function solution(my_string, n) { return my_string.substring(0, n);}홀짝에 따라 다른 값 반환하기: n이 홀수라면 n보다 작은 홀수인 양의 정수의 합을 리턴, 짝수라면 n보다 작은 짝수인 양의 정수의 제곱의 합 리턴function solution(n) { let arr = [] let e = 0 let o = 0 for(let i = 0; i n % 2 == 0 ? e += (n ** 2) : 0) else arr.forEach.. 2025. 8. 25.
Day 1: 이어 붙인 수, 대문자로 변환하기, 접미사인지 확인하기, 문자열 이어 붙이기, 순서 바꾸기 이어 붙인 수: 숫자 배열이 들어왔을 때, 홀수와 짝수를 나누어 붙이고 그 합을 구하는 문제function solution(num_list) { let even = Array() let odd = Array() num_list.forEach((n) => n % 2 === 0 ? even.push(n) : odd.push(n)) let even_num = even.join('') let odd_num = odd.join('') var answer = Number(even_num) + Number(odd_num); return answer;}배울 답변: reduce 사용function solution(num_list) { const { odds.. 2025. 8. 24.
Node.js 입력/출력 정리 1. 입력 방식(A) readline 모듈 (줄 단위 이벤트 방식)표준 입력을 줄 단위로 처리할 수 있음한 줄씩 들어오는 입력을 배열에 모아 두고, close 이벤트에서 처리const readline = require('readline');const rl = readline.createInterface({ input: process.stdin, output: process.stdout,});let input = [];rl.on('line', function (line) { // 한 줄 입력 처리 input.push(line.trim());}).on('close', function () { // 입력이 끝났을 때 실행 console.log(input); process.exit(0); // 종료.. 2025. 8. 24.
66 Mini-Game: Marble Race Mini-Game: Marble Race완성: Marble Race 66-create-a-game-with-r3f-three.vercel.app🎮 게임 개요플레이어는 구슬(마블)을 조종해 다양한 트랩이 있는 레벨을 통과해야 함.기능키보드로 구슬 이동/점프구슬이 움직이기 시작하면 타이머 시작레벨 끝에 도달하면 Restart 버튼 표시Restart 시 초기화 + 새로운 랜덤 트랩 생성 → 매번 다른 레벨⚙️ Setup기본 오브젝트: 오렌지 구체, 보라색 큐브, 초록색 바닥 컴포넌트에 directionalLight + ambientLight 정의Shadows 활성화OrbitControls 추가 (디버깅용, 나중에 제거)레벨/트랩/플레이어 구현🏗️ 레벨 구성Level 컴포넌트 생성/src/Level.jsx/.. 2025. 8. 20.
65 React Three Rapier React Three Rapier 정리 (Physics in R3F) 1. Cannon.js → RapierCannon.js / cannon-es: 오래된 물리 엔진, PMNDRS에서 fork(cannon-es) 유지 중.Rapier:2019년 Rust로 작성 → WebAssembly 덕분에 브라우저에서 거의 네이티브 성능.Determinism: 동일 조건 → 모든 기기에서 동일한 결과.2D/3D 모두 지원.Three.js에 종속되지 않음 (독립 엔진).공식 사이트: rapier.rs2. React Three RapierPMNDRS 팀이 R3F에 Rapier를 래핑한 라이브러리.설치:→ 특정 버전 고정 (버그 최소화 목적).npm install @react-three/rapier@2.03. 기본 사용법i.. 2025. 8. 19.
64 Laptop Scene Portfolio with Laptop Scene이번 레슨에서는 HTML/CSS로 만든 포트폴리오 사이트를 3D 노트북 화면 속에 넣는 방식을 배웁니다.이 방법은 단순히 3D 모델을 보여주는 것이 아니라, 자신의 웹사이트를 WebGL 장면 속에서 인터랙티브하게 시각화할 수 있는 강력한 포트폴리오 아이디어입니다.🎯 핵심 목표배경을 어둡게 설정 → 콘텐츠 강조노트북 3D 모델 불러오기 (useGLTF)환경광 + 그림자 + 애니메이션으로 사실감 추가PresentationControls로 카메라 대신 모델 제어 + 으로 실제 웹사이트를 화면에 넣기조명(rectAreaLight)과 텍스트(Text)로 디테일 강화1. Setup// Experience.jsximport { useGLTF, /.. 2025. 8. 18.
Model Lisence CC0 CC0CC0 1.0 Universal = Creative Commons Zero 공개 도메인 헌납(“No Rights Reserved”).저작자가 가능한 모든 저작권과 관련 권리를 포기(waive) 해서, 누구나 복제/배포/수정/상업적 이용을 출처 표시 없이 할 수 있게 하는 선언.단, 법적으로 포기 불가능한 권리(일부 국가의 인격권 등), 상표권/초상권/프라이버시권은 포함되지 않음에 주의!또한 보증 없음(as-is). 문제 생기면 책임 안 진다는 뜻.무료로 쓰기에 가까운 다른 선택지콘텐츠(이미지/음원/글 등)Public Domain(퍼블릭 도메인): 저작권 보호기간이 끝났거나 애초에 권리가 없는 자료.“CC0”은 퍼블릭 도메인으로 바치겠다는 저작자 선언이고,“Public Domain Mark(PDM).. 2025. 8. 18.
forwardRef forwardRef 한줄 개념문제: 함수형 컴포넌트는 기본적으로 ref를 받을 수 없어요(호스트 요소인 div, input 등만 기본 ref 지원).해결: React.forwardRef는 부모가 만든 ref를 자식 컴포넌트 내부의 특정 노드/인스턴스에 “전달”(forward)할 수 있게 해주는 고차 컴포넌트(HOC) 입니다.언제 필요한가?부모가 자식 안쪽의 “실제 노드/인스턴스”를 만지기 위해 사용스타일/레이아웃 래퍼 등 중간 껍데기 컴포넌트를 씌웠는데, 부모가 실제 DOM 노드(또는 R3F의 THREE.Mesh)에 접근해야 할 때외부에서 focus(), scrollIntoView(), play() 같은 명령형(Imperative) 호출을 하고 싶은 컴포넌트R3F에서 부모가 자식 mesh의 positio.. 2025. 8. 18.
63 후처리(Post Processing) React Three Fiber – Post ProcessingPost Processing을 R3F(@react-three/postprocessing)에서 어떻게 활용하는지, 기본 효과부터 커스텀 효과까지 단계적으로 다룹니다.이전 Three.js 방식과 비교했을 때 성능적 최적화와 개발 편의성이 큰 차이점입니다.1. 기존 문제점전통적인 방식: 여러 Pass를 쌓아 올리는 방식각 Pass가 별도의 렌더링을 수행 → 중복 렌더링 발생 (depth, normal 등)Pass가 많아질수록 성능 저하 → FPS 하락2. 해결책 – Post ProcessingPass → Effect 개념으로 단순화여러 Effect가 자동으로 병합되어 최소한의 Pass만 실행Effect 순서는 유지, 개별 blending 방식 지정.. 2025. 8. 18.
62 Pointer Events (Mouse Events) React Three Fiber – Pointer Events (Mouse Events)이번 레슨은 제목은 mouse events이지만, 실제로는 Pointer Events 전반을 다룹니다. 따라서 마우스뿐 아니라 터치 스크린에서도 동일하게 동작합니다.1. 기본 Setup주황색 Sphere보라색 Cube (회전 애니메이션)초록색 바닥 (Floor)OrbitControls 포함2. 클릭 이벤트 (onClick)const cube = useRef();const eventHandler = () => { cube.current.material.color.set(`hsl(${Math.random() * 360}, 100%, 75%)`);}; ;onClick → 기본 클릭 이벤트클릭 시 cube.curren.. 2025. 8. 18.