본문 바로가기

전체 글302

Day17: 배열 만들기 2, 원소들의 곱과 합, 수열과 구간 쿼리3, 수열과 구간 쿼리2, 5명씩, 문자열 잘라서 정렬하기 배열 만들기 2정수 l과 r이 주어졌을 때, l 이상 r이하의 정수 중에서 숫자 "0"과 "5"로만 이루어진 모든 정수를 오름차순으로 저장한 배열을 return 하는 solution 함수를 완성해 주세요.만약 그러한 정수가 없다면, -1이 담긴 배열을 return 합니다.function solution(l, r) { let a = [] for(let i = l; i c === '0' || c === '5') if(e) a.push(i) } if(a.length 다른 답:function* gen50() { let i = 1; while(true) { yield Number(Number(i).toString(2)) * 5; i.. 2025. 9. 10.
email.js로 backend 없이 메시지 전달 받기 email js 사용하기 Send email directly from your code | EmailJSNo server side code required. Add static or dynamic attachments, dynamic parameters, captcha code and more. Start with our free tier!www.emailjs.com접속 후 회원가입 Add New Service 선택원하는 이메일 선택 후 작성.Service ID 메모장에 복사 후,Connect Account 하면, 연결됨. (연결이 안 되면 다시 시도하면 됨.)연결 후 연결한 이메일에서 인증.사이드 탭에서 Templates 선택 후 Create New TemplateTo Email에 자신의 이메일 적고 .. 2025. 9. 9.
Day16: 등차수열의 특정한 값만 더하기, 9로 나눈 나머지, n개 간격의 원소들, n보다 커질 때까지 더하기, n번째 원소부터, n번째 원소까지, 배열 조각하기 등차수열의 특정한 값만 더하기a = 시작값, b = 공차, included = bool 배열일 떄, 등차수열의 값을 bool 배열의 요소가 true일 때만 더한 값을 리턴function solution(a, d, included) { let arr = Array.from({length: included.length}).fill(0).map((v, i) => v = a + i * d) let total = 0; for(let i = 0; i 다른 답:function solution(a, d, included) { return included.reduce((acc, flag, i) => { return flag ? acc + a + d * i : acc }, 0.. 2025. 9. 9.
Day15: 간단한 식 계산하기, 가까운 1 찾기, 길이에 따른 연산, 원하는 문자열 찾기, 배열 만들기 3,할 일 목록 간단한 식 계산하기문자열("4 + 3")을 받아서 계산 결과를 리턴(+, -, * 연산자만 존재)function solution(binomial) { let arr = binomial.split(' ') let a = Number(arr[0]) let b = Number(arr[2]) return arr[1] === '+' ? a + b : arr[1] === '-' ? a - b : a * b}다른 답:const ops = { '+': (a, b) => a + b, '-': (a, b) => a - b, '*': (a, b) => a * b,};function solution(binomial) { const [a, op, b] = binomial.split(' '); r.. 2025. 9. 8.
Day14: x 사이의 개수, 홀수 vs 짝수, 공백으로 구분하기, rny_string, 배열에서 문자열 대소문자 변환하기 x 사이의 개수x를 기준으로 나눴을 때 나눠진 문자열의 각각의 길이function solution(myString) { return myString.split('x').map(v => v.length)}다른 답:const solution = (myString) => { const arr = myString.split('x'); return arr.reduce((a,c)=>[...a,c.length],[]);}홀수 vs 짝수배열의 짝수 번째 원소의 합과 홀수 번째의 합 중 큰 값을 리턴, 같으면 그 값을 리턴function solution(num_list) { let even = 0 let odd = 0 for(let i = 0; i = odd ? even : odd} 다른.. 2025. 9. 7.
Day13: 뒤에서 5등 위로, 문자열 정수의 합, 배열의 길이에 따라 다른 연산하기, 카운트 업, ad 제거하기, 배열의 원소만큼 추가하기 뒤에서 5등 위로리스트에서 가장 작은 5개의 수를 제외한 수들을 오름차순으로 담은 리스트를 리턴function solution(num_list) { return num_list.sort((a, b) => a - b).filter((v, i) => i > 4);}다른 답:function solution(num_list) { return num_list.sort((a, b) => a - b).splice(5);}문자열 정수의 합정수로 이루어진 문자열을 전부 더해서 리턴function solution(num_str) { let value = 0; num_str.split('').forEach(v => value += Number(v)) return value}다른 답:function.. 2025. 9. 6.
Tailwind CSS 가이드 Tailwind CSS 종합 가이드TailwindCSS Vite 설정 방법 (v 4.1)1. installnpm install tailwindcss @tailwindcss/vite2. vite.config.js settingimport { defineConfig } from 'vite';import react from '@vitejs/plugin-react';import tailwindcss from '@tailwindcss/vite';// https://vite.dev/config/export default defineConfig({ plugins: [react(), tailwindcss()],});3. index.css import tailwindCSS@import 'tailwindcss';4. t.. 2025. 9. 5.
Day12: 문자열 곱하기, 더 크게 합치기, n의 배수, 공배수, 조건 문자열, 코드 처리하기 문자열 곱하기주어진 문자열을 주어진 숫자만큼 반복해서 리턴하기 (string, 3) -> stringstringstringfunction solution(my_string, k) { return Array.from({length: k}).fill('').map(v => v = my_string).join('');}다른 답:function solution(my_string, k) { return my_string.repeat(k)}function solution(my_string, k) { var answer = ''; console.log(Array.from(Array(k).keys())) return Array.from(Array(k).keys()).map((el) => my.. 2025. 9. 5.
Figma를 활용한 인터랙티브 SVG 제작 가이드 Figma를 활용한 인터랙티브 SVG 제작 가이드파트 I: Figma의 기본 원칙: 인터랙션을 위한 디자인성공적인 인터랙티브 SVG 제작의 여정은 코드를 작성하기 훨씬 전, Figma 캔버스에서 시작됩니다. 이 첫 번째 파트에서는 인터랙션을 염두에 둔 디자인의 근본적인 원칙을 다룹니다. Figma를 단순한 시각적 디자인 도구가 아닌, 최종 웹 결과물의 구조적 청사진을 만드는 강력한 저작 도구로 바라보는 인식의 전환이 필요합니다. 모든 레이어, 그룹, 벡터 경로는 잠재적인 인터랙티브 요소가 되며, 이러한 관점은 디자인 프로세스 전반을 이끌어야 합니다.1.1. 사고의 전환: 정적 목업에서 인터랙티브 설계도로인터랙티브 SVG를 제작하는 과정은 단순히 보기 좋은 이미지를 그리는 것을 넘어섭니다. 이는 최종 제품.. 2025. 9. 5.
SVG 가이드 SVG 가이드I. SVG의 본질: 벡터 그래픽의 이해Scalable Vector Graphics (SVG)는 현대 웹 그래픽의 초석을 이루는 기술입니다. SVG의 진정한 힘을 이해하기 위해서는 단순히 '이미지 포맷'이라는 개념을 넘어, 그것이 작동하는 근본적인 원리와 래스터(Raster) 이미지와의 본질적인 차이를 파악하는 것이 중요합니다. 이 장에서는 SVG의 핵심 정체성을 분석하고, 웹 개발 및 디자인 워크플로우에 혁신을 가져온 이유를 탐구합니다.1.1. SVG란 무엇인가?: XML 기반 벡터 이미지 포맷SVG는 확장 가능한 벡터 그래픽(Scalable Vector Graphics)의 약자로, 이름에서 알 수 있듯이 크기 조절이 자유로운 벡터 기반의 이미지 포맷입니다. SVG의 가장 핵심적인 특징은 .. 2025. 9. 5.
모던 CSS 가이드 모던 CSS 가이드: 선택자부터 확장 가능한 아키텍처까지이 문서는 CSS의 핵심 원리부터 최신 고급 기능까지, 웹 개발자가 알아야 할 모든 것을 담은 포괄적인 가이드입니다. 단순히 속성을 나열하는 것을 넘어, 각 기능의 철학적 배경과 실제 프로젝트에서 어떻게 전략적으로 활용할 수 있는지에 대한 깊이 있는 통찰을 제공하는 것을 목표로 합니다. 이 가이드를 통해 여러분은 CSS를 단순히 스타일을 입히는 도구가 아닌, 견고하고 유지보수 가능하며 확장성 있는 사용자 인터페이스를 구축하는 강력한 시스템으로 이해하게 될 것입니다.Part I: 캐스케이드의 근본적인 규칙CSS를 효과적으로 사용하기 위해서는 먼저 그 작동 원리, 즉 CSS의 '물리 법칙'을 이해해야 합니다. 이 파트에서는 스타일이 어떻게 결정되고 적용.. 2025. 9. 5.
Three.js 전체 가이드 Three.js의 포괄적 아키텍처 가이드: 기본 원리부터 고급 응용까지 66 Mini-Game: Marble RaceMini-Game: Marble Race완성: Marble Race 66-create-a-game-with-r3f-three.vercel.app🎮 게임 개요플레이어는 구슬(마블)을 조종해 다양한 트랩이 있는 레벨을 통과해야 함.기능키보드로 구슬 이동/점프구슬이 움직curiousweek.tistory.com1부: 3D 세계의 기반이 파트에서는 Three.js의 핵심 아키텍처 삼중주를 구축합니다. 화면에 무언가를 렌더링하는 데 필요한 기본 구성 요소를 해체하고, 그것들이 무엇인지뿐만 아니라 왜 분리되어 있으며 어떻게 상호 작용하는지에 초점을 맞춰 분석할 것입니다. 07 반응형 캔버스와 전체 .. 2025. 9. 5.