티스토리

가나닩

검색하기

블로그 홈

가나닩

cstelladev.tistory.com/m

가나닩 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

(JavaScript) 정수론 - 오일러 피 백준 11689번 문제인 GCD(n, k) = 1 문제는 정확히 오일러 피를 묻는 문제이다. 오일러 피 공식만 코드로 구현하면 끝나는데 난이도가 골드1로 꽤 높은 편이다. 주어지는 수의 범위가 10의 12승으로 매우 커서 오일러 피의 원리를 모르고 단순히 탐색으로 문제를 풀면 시간초과가 발생하기때문에 그런것 같다. 1. 오일러 피 함수란?오일러 피 함수란 자연수 n에 대해 n과 서로소(공약수가 1뿐인 수)인 n이하의 자연수 개수를 구하는 함수이다. ex) n=12 일때n 이하의 자연수중 n과 서로소인 수 : 1, 5, 7, 1112에 대한 오일러 피 함수 결과 = 4 2. 오일러 피 함수의 원리와 사용법먼저 오일러 피 함수를 구현한 코드를 보면 아래와 같다.function eulerPhi(n) { .. 공감수 0 댓글수 0 2025. 3. 31.
(JavaScript) 백준 1033번 : 칵테일 (유클리드 호제법) 정수론 유클리드 호제법 문제풀이 중 백준 칵테일 문제를 풀게되었다. 유클리드 호제법을 알고 최대공약수를 구하는 과정 자체는 간단하지만 문제 풀이가 간단하지 않아서... 글로 정리해보려 한다. 글 작성에 앞서 문제를 푸는 아이디어를 얻기위해 여러 게시글과 백준 질문 게시판, ChatGPT의 도움을 받았다.문제에서 상황설명이 꽤 길게 작성되어있는데 그것때문에 더욱 헷갈린 것 같다. 문제 내용을 정리하면 칵테일들중 특정 두개의 비율을 몇개 알려줄테니 전체의 비율을 구해라 이다. 이 점을 기억하고 풀이하면 도움이 될 것 같다. • 문제 : 백준 1033번 - 칵테일더보기1033번: 칵테일문제를 풀기 위해 아래와 같은 요소들을 고려하였다.최대공약수, 최소공배수를 구할때 유클리드 호제법을 활용했다.입력에서 주어지는.. 공감수 1 댓글수 0 2025. 3. 31.
(JavaScript) 정수론 - 소수 판별하기 소수란 1보다 큰 자연수중 1과 자기자신만을 약수로 가지는 수 이다. 즉 1과 자기 자신 외의 어떤 수로도 나누어떨어지지 않는다.소수를 구하는 가장 간단한 방법은 1부터 자기자신까지 모든 수로 나누어 보는것이다. 그때 나누어떨어지는 수가 있으면 소수가 아닌것이다.하지만 이러한 완전탐색방식을 사용하면 O(N)의 시간복잡도로 꽤 긴시간이 걸리게 된다.수학적 원리를 이용한 알고리즘을 활용하면 소수를 탐색하는 시간을 줄일 수 있다. 1. 소수 탐색의 기본 조건프로그래밍으로 소수를 탐색하면 반복문을 활용하게 된다. 반복문으로 특정 범위에서 소스를 탐색하기에 앞서 기본적으로 고려해야할 조건이 있다.1은 소수가 아니다.2는 소수이며 2의 배수는 모두 소수가 아니다. (2가 약수이므로)소수를 탐색하기에 앞서 두 조.. 공감수 2 댓글수 0 2025. 3. 20.
(JavaScript) 백준 11003번 : 최솟값 찾기 더보기11003번: 최솟값 찾기문제를 풀기 위해 아래와 같은 요소들을 고려하였다.L이 1이면 범위가 1이므로 최솟값은 자기자신이 된다. L이 1일경우 숫자배열을 그대로 반환한다.문제의 시간제한은 2.4초 이고 주어지는 숫자의 개수는 최대 5,000,000개 이다. 최솟값을 찾기위해 단순히 정렬을 이용하면 O(n log n)의 시간복잡도로 시간초과가 발생한다. Deque를 사용하여 최솟값을 관리하여 O(n)의 시간복잡도로 줄일 수 있다.특정 범위의 최솟값을 찾아야 하므로 슬라이딩 윈도우를 사용한다.슬라이딩 윈도우는 뒤의 값을 추가하고 앞의 값을 제거하면서 범위를 유지한 채 나아가는 기법이다. 이는 최솟값을 관리하는 Deque에서도 사용해야하는 값의 범위이므로 Deque에는 최솟값 자체를 집어넣는 것이 아닌.. 공감수 1 댓글수 0 2025. 3. 17.
(JavaScript) 투 포인터의 개념 정리 투 포인터를 사용해야 하는 문제는 모든 경우의 수를 확인하는 방법(브루트포스)을 사용하면 시간초과가 발생한다. 특정 범위 혹은 특정한 두 값에 대해 문제에서 주어진 조건과 매치를 하는 경우 투 포인터 기법을 활용하여 수행 시간(시간복잡도)을 단축시킬 수 있다. 1. 투포인터란?투 포인터 알고리즘은 배열 혹은 리스트를 순회하면서 두 개의 포인터를 사용해 문제를 해결하는 기법이다.주로 연속적인 구간을 찾거나, 특정 조건을 만족하는 두 요소를 탐색할때 사용된다. 두 개의 포인터 활용배열에서 두개의 포인터를 가지고 특정 조건을 탐색한다. 두 포인터를 합하는 등 단순히 활용할수도 있으며 두 포인터 사이값을 활용하여 특정 조건에 맞는지 검사할 수 도 있다.정렬된 배열에서 주로 사용투 포인터는 좌우 포인터를 이동시.. 공감수 0 댓글수 0 2025. 3. 14.
(JavaScript) 백준 3190번 : 뱀 - 큐와 데크 더보기3190번: 뱀문제를 풀기 위해 아래와 같은 요소들을 고려하였다.뱀의 머리 위치에 따라 뱀의 길이가 증가하거나 게임이 종료되므로 queue의 형태로 뱀 배열을 관리했다.readline과 join을 통해 하나의 문자열로 입력되는 값을 처리하기 위해 split, slice, reduce, map등을 활용했다.뱀의 이동에는 enqueue와 dequeue가 사용되었다.경과한 시간 변수를 관리하고 이를 방향전환 정보와 매칭해서 사용했으며 방향은 상하좌우 배열로 따로 관리했다. 1. 소스코드더보기const readline = require("readline");const solution = (data) => { let boardSize = Number(data.split("\n")[0]); let .. 공감수 2 댓글수 0 2025. 1. 16.
(JS) Programmers : 여행경로 - DFS 더보기더보기더보기더보기코딩테스트 연습 - 여행경로 | 프로그래머스 스쿨 프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr문제를 풀기위해 아래와 같은 요소들을 고려하였다.tickets에 sort를 먼저 적용하여 가장 빠르게 나오는 답변이 알파벳 순이 될 수 있도록 했다.조합을 생성하여 가장 적합한 결과를 찾아야하므로 DFS를 활용했다.더보기더보기더보기더보기function solution(tickets) { tickets.sort(); let result = []; let visited = Array(tickets.length).fill(false); function dfs(airport.. 공감수 2 댓글수 0 2025. 1. 14.
(JS) 백준 13458번 : 시험 감독 - 백준의 입력값 처리 더보기13458번: 시험 감독문제를 풀기위해 아래와 같은 요소들을 고려하였다.프로그래머스와 달리 백준은 입력값을 직접 처리해주어야 한다. (readline or fs)총감독관 혼자 감독할 수 있는 경우와 부감독관이 필요한 경우로 나누어서 계산했다. 1. 소스코드더보기const readline = require("readline");function solution(data) { const [n, ai, count] = data.split("\n"); const st = ai.split(" ").map(Number); const [b, c] = count.split(" ").map(Number); let total = 0; for (let i = 0; i { inpu.. 공감수 1 댓글수 0 2025. 1. 13.
three.js로 3D 책 구현하기 ※ 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, .. 공감수 1 댓글수 1 2024. 12. 20.
Debounce와 Throttle을 통한 최적화 개발을 하다보면 초당 수십~수백번의 연산을 처리해야 하는 경우가 있다.대표적인 예로 사용자 입력 처리 작업 등을 들수있는데 스크롤, 리사이즈, 드래그 등과 같은 마우스 커서 또는 터치를 활용한 입력은 실시간으로 좌표 등의 데이터를 받아 처리하기 때문에 매우 많은 연산량을 발생시킨다. Debounce와 Throttle은 빈번한 이벤트 처리로 인한 성능 저하 문제를 해결하기 위해 사용한다. 둘의 간단한 용도를 설명하면 아래와 같다.Debounce : 사용자 입력이 멈추면 특정 작업을 실행한다.Throttle : 특정 작업을 일정 간격을 두고 실행하도록 한다.자세한 설명과 사용법을 알아보자. 1. Debounce특정 이벤트가 매우 빈번하게 발생할때 Debounce는 이를 무시하다가 이벤트 발생이 더이상 일.. 공감수 0 댓글수 0 2024. 12. 13.
Next.js의 이미지 최적화와 <Image /> 컴포넌트 웹사이트의 이미지 최적화는 속도 최적화와 검색엔진 최적화 크게 두단계로 나눠볼 수 있다. 1. 기본 이미지 최적화 방법웹사이트를 제작할때는 수많은 이미지가 사용된다. 대부분의 웹사이트는 이미지가 차지하는 용량이 아주 크고, 최적화가 이루어지지 않은경우 더욱더 커지게 된다.이미지 사이즈 최적화는 웹페이지 최적화의 기본이다.1-1. 이미지 포맷 선택흔히 알고있는 이미지 포맷은 JPEG(JPG), PNG, GIF이다. JPEG(JPG) : 주로 사진, 복잡한 이미지에 사용한다. 손실압축 방식을 사용하여 사진의 품질이 조금 떨어지는대신 용량을 크게 줄일 수 있다. 투명도를 지원하지 않는다.PNG : 주로 그래픽, 로고, 패턴 등의 이미지에 사용한다. 비손실 압축방식을 사용하여 일반적으로 JPEG보다 용량이 크지.. 공감수 1 댓글수 1 2024. 12. 13.
인라인 요소에 공백 자유롭게 추가하기 (블록요소와 비교) HTML의 구조는 크게 블록요소와 인라인요소로 나눌 수 있다. (몇몇 특수경우를 제외) 블록요소와 인라인요소는 아래와 같은 상황에 주로 사용하게 된다. • 블록요소레이아웃, 구조 등 페이지의 전체적인 UI를 결정할때는 블록요소를 주로 사용width, height, margin, padding등 레이아웃에 영향을 주는 속성이 기본적으로 적용 가능단락을 나누거나 줄바꿈이 필요할때 사용할 수 있음 • 인라인요소텍스트 기반 컨텐츠를 꾸미거나 기능을 추가할때 사용 (텍스트 레이아웃을 유지하며 기능 추가하기 등)레이아웃에 영향을 주는 CSS 속성들이 일부 적용되지 않음간단한 아이콘, 버튼, 짧은 컨텐츠 등에 사용 인라인요소는 여러개를 붙여 사용할 경우 의도하지 않은 공백이 발생하는 것을 알 수 있다. 이는 부모요소.. 공감수 0 댓글수 0 2024. 11. 20.
리액트의 메모이제이션 (useMemo, useCallback, React.memo) 리액트는 컴포넌트를 기반으로 동작한다. 컴포넌트는 props, state, context 등의 변경이 감지될때 변경 내용을 반영하기 위해서 재연산, 재성성을 진행하고 재렌더링 된다는 특징을 가지고 있다.이러한 특징은 UI의 일관성을 유지하고 사용자 경험을 개선 하거나 코드의 간결화, 예측 가능성 향상 등등의 장점들을 가지고 있지만 작성한 코드의 내용에 따라 불필요한 재렌더링이 자주 발생하여 성능에 악영향을 줄수도 있다. 성능저하를 최소화하기 위해서는 메모이제이션을 활용해야한다. 아주 쉽게 말하자면 "수정할 필요가 없는 부분은 냅둬라" 이다. 리액트의 불필요한 재연산, 재생성, 재렌더링을 방지하기 위한 기능은 여러가지가 있지만 여기서는 메모이제이션, 그 중에서도 useMemo와 useCallback, Re.. 공감수 3 댓글수 2 2024. 10. 31.
구조 분해 할당 자바스크립트의 구조분해할당을 활용하면 배열이나 객체의 값을 쉽게 추출해 변수에 할당할 수 있다. 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. 객체 구조 .. 공감수 0 댓글수 0 2024. 10. 25.
React의 key (Diffing 알고리즘과 framer-motion) 처음 React 개발을 시작하고 key값을 신경쓰지 않은채로 수많은 컴포넌트들을 집어넣다보면 key와 관련된 경고문을 볼 수 있다. React에서 key값은 매우 중요하게 사용된다.컴포넌트 식별 및 업데이트 최적화 (Diffing 알고리즘)framer-motion 등 라이브러리에서의 컴포넌트 구분 1. 컴포넌트 식별 및 업데이트 최적화React가 컴포넌트를 생성하고 제거할때 개발자가 JSX 상에 마크업한 위치를 기준으로 작동하는것이 아닌 UI 트리에서의 위치를 기준으로 작동한다.export default function Test() { const test = true; if (test) return ; return ;}function ComponentTest({ name }: { nam.. 공감수 1 댓글수 1 2024. 10. 23.
주기적으로 api 요청하기 (중간 서버의 역할) (공공데이터포털 기상청 단기예보) 서버에 API 요청을 할때는 성능 저하를 고려해야한다. 예를들어 아주 방대한 양의 데이터를 여러 조건이나 필터에 의해 자주 액세스하고 주고 받아야할때는 그 데이터를 어디에 저장할지, 어디에서 불러와서 필터링은 어디에서 진행할지 등을 고려하게 된다. 데이터를 다루는 방식에 따라 서버 및 클라이언트의 부하, 속도저하에 차이가 발생하기 때문이다. 공공데이터 포털의 기상청 단기예보 데이터는 3시간을 간격으로 하여 요청한 시간을 기준으로 약 3일간의 일기예보를 제공한다. 제공되는 데이터는 시간별로 강수, 기온, 습도, 풍속 등 아주 다양한 정보를 제공하기때문에 꽤 많은 자료가 들어있다. 이러한 자료를 클라이언트에서 요청할때마다 받아오게 되면 공공데이터를 제공하는 서버에도 부담이 가며 수많은 데이터를 처리해야하는.. 공감수 2 댓글수 2 2024. 10. 17.
CSS의 외곽선 (border와 outline 비교하기) border와 outline은 둘다 요소의 외곽을 꾸미는 속성이지만 차이가 있어 용도에 따라 선택하여 사용할 수 있다. 1. 외곽선의 스타일링선의 색상, 두께, 스타일 등 기본적인 스타일은 두 속성 다 지정이 가능하지만 차이가 발생하는 부분도 있다. • 개별 외곽선 스타일border에서는 border-top, border-right 등의 속성을 활용해서 한쪽 면에만 외곽선 스타일을 지정할 수 있다. 그러나 outline에서는 지원하지 않아 개별적인 스타일링은 불가능하고 전체 외곽선 설정만 가능하다. • 둥근 모서리border는 border-radius 속성을 이용해 둥근 모서리를 적용할 수 있다. 하지만 outline에는 outline-radius같은 속성이 존재하지 않는다. 하지만 outline이 .. 공감수 1 댓글수 0 2024. 10. 16.
배열 내에 참조타입(객체 등)이 있을때 중복 제거하기 자바스크립트 배열에서 중복을 제거하는 방법은 여러가지가 있지만 일반적으로는 Set 객체를 활용하면 편리하게 중복을 제거할 수 있다. 2024.10.01 - [기타/코딩테스트] - (JS) Set [Programmers - 신고 결과 받기] (JS) Set [Programmers - 신고 결과 받기]더보기코딩테스트 연습 - 신고 결과 받기 | 프로그래머스 스쿨 (programmers.co.kr) 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하cstelladev.tistory.com 하지만 배열 내에 참조 타입이 들어있으면 Set으로 중복 제거가 되지 않는다. 내용물이 같더라도 메모리 상에 서로 다른 데이터로 존재하며 그 위치를 참조하여 사용하기때.. 공감수 1 댓글수 0 2024. 10. 15.
한국환경공단 대기오염 데이터 활용하기 (parseStringPromise, find, startsWith, padStart) 공공데이터포털에서 제공하는 대기오염 예보정보를 활용하고자 하였다. 한국환경공단(에어코리아)에서 제공하고 있는 대기오염 데이터는 특정 날짜로부터 4일간의 미세먼지 오염 정도가 어느정도인지를 응답해준다. 데이터는 아래와 같은 형태의 XML파일로 제공된다.2024-10-16서울 : 낮음, 인천 : 낮음, 울산 : 낮음, ... , 신뢰도 : 높음2024-10-17서울 : 보통, 인천 : 낮음, 울산 : 보통, ... , 신뢰도 : 높음2024-10-13...각 항목은 다음을 뜻한다.frcstOneDt : 첫번째 예보 날짜frcstOneCn : 첫번째 예보 날짜의 예보 데이터frcstTwoDt : 두번째 예보 날짜frcstTwoCn : 두번째 예보 날짜의 예보 데이터presnatnDt : 요청한 날짜10월 13.. 공감수 1 댓글수 0 2024. 10. 13.
(JS) Programmers : 문자열 내 p와 y의 개수 - match() 더보기더보기더보기코딩테스트 연습 - 문자열 내 p와 y의 개수 | 프로그래머스 스쿨 (programmers.co.kr) 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr문제를 풀기위해 아래와 같은 요소들을 고려하였다.문자열을 split을 이용해 분리하여 p와 y를 검출한다.p와 y변수를 두고 개수만큼 값을 상승시켰다. 코드를 줄여보기 위해 return문에 삼항연산자를 이용해보았다.더보기더보기더보기function solution(s){ let arr = s.split(""); let p=0, y=0; arr.forEach((val, idx) => .. 공감수 1 댓글수 0 2024. 10. 6.
(JS) Programmers : JadenCase 문자열 만들기 - toUpperCase(), toLowerCase() 더보기더보기코딩테스트 연습 - JadenCase 문자열 만들기 | 프로그래머스 스쿨 (programmers.co.kr) 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr 문제를 풀기위해 아래와 같은 요소들을 고려하였다.띄어쓰기를 검출하여 알파벳을 대문자로 수정한다.첫글자도 대문자로 변경해야하므로 띄어쓰기 검출과 함께 조건에 첫글자도 추가한다.나머지는 모두 소문자로 변경한다.더보기더보기function solution(s) { var answer = ''; for(let i=0;i • toUpperCase(), toLowerCase()문자열에 사.. 공감수 0 댓글수 0 2024. 10. 4.
(JS) Programmers : 붕대 감기 더보기더보기코딩테스트 연습 - [PCCP 기출문제] 1번 / 붕대 감기 | 프로그래머스 스쿨 (programmers.co.kr) 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr문제를 풀기위해 아래와 같은 요소들을 고려하였다.가독성과 안정성을 위한다면 주어진 조건을 순서대로 구현하는것이 좋지만 코드를 간소화 하거나 실행시간을 줄이기 위해서는 생략이나 이동이 가능한 코드는 조절을 하는것이 유리하다.return문은 코드 마지막에 한개만 존재해야 하는것이 아니다. 결과가 존재하여 더이상의 연산이 필요없을때는 바로 return문을 사용해도 무관하다.회복과 피해를 반복하.. 공감수 0 댓글수 0 2024. 10. 4.
(JS) Programmers : 신고 결과 받기 - Set() 더보기더보기코딩테스트 연습 - 신고 결과 받기 | 프로그래머스 스쿨 (programmers.co.kr) 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr문제를 풀기위해 아래와 같은 요소들을 고려하였다.중복 report는 1개로 처리하므로 report에서 Set을 이용해 중복을 제거하여 사용했다.유저별 신고받은 횟수, 처리 결과를 받을 횟수 객체를 따로 만들어 인덱스로 접근가능하게 했다.더보기더보기function solution(id_list, report, k) { let reports = [...new Set(report)]; let reported.. 공감수 0 댓글수 0 2024. 10. 1.
화살표 함수의 특징 화살표함수는 ES6에서 추가된 함수 표현식이다. 기존의 일반 함수 표현식과 함께 사용하여 코드를 좀더 간결하게 하고 일관된 this 바인딩을 제공하기 위해 추가되었다. 화살표함수의 특징은 다음과 같다.this 바인딩 방식- lexical scope에서 this를 바인딩한다. 즉, 화살표 함수가 선언된 위치의 this를 그대로 사용한다.- 일반 함수는 호출되는 시점에 따라 this가 결정된다.간결한 문법- 상황에 따라 function 키워드와 중괄호, return 등을 생략할 수 있어 더 짧은 구문 작성이 가능하다.arguments 객체가 없음- arguments 객체를 가지고 있지 않아 상위 스코프의 arguments 객체를 참조한다. (일반함수는 arguments 객체를 가지고 있다)생성자로 사용 불가.. 공감수 0 댓글수 0 2024. 9. 30.
(JS) Programmers : 성격 유형 검사하기 - 객체를 배열로 변환, 절댓값 더보기더보기코딩테스트 연습 - 성격 유형 검사하기 | 프로그래머스 스쿨 (programmers.co.kr) 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr문제를 풀기위해 아래와 같은 요소들을 고려하였다.객체를 효율적으로 활용하기 위해 key와 value를 배열로 변환하여 사용한다.더해줄 점수 값을 효율적으로 계산하기 위해 선택된 점수에서 4를뺀뒤 절댓값을 취하도록 한다.더보기더보기function solution(survey, choices) { let obj = {R:0, T:0, C:0, F:0, J:0, M:0, A:0, N:0} for(.. 공감수 1 댓글수 0 2024. 9. 30.
(JS) Programmers : 달리기 경주 - 동적 객체 key와 배열/객체 탐색 더보기더보기얀에서는 매년 달리기 경주가 열립니다. 해설진들은 선수들이 자기 바로 앞의 선수를 추월할 때 추월한 선수의 이름을 부릅니다. 예를 들어 1등부터 3등까지 "mumu", "soe", "poe" 선수들이 순서대로 달리고 있을 때, 해설진이 "soe"선수를 불렀다면 2등인 "soe" 선수가 1등인 "mumu" 선수를 추월했다는 것입니다. 즉 "soe" 선수가 1등, "mumu" 선수가 2등으로 바뀝니다. 선수들의 이름이 1등부터 현재 등수 순서대로 담긴 문자열 배열 players와 해설진이 부른 이름을 담은 문자열 배열 callings가 매개변수로 주어질 때, 경주가 끝났을 때 선수들의 이름을 1등부터 등수 순서대로 배열에 담아 return 하는 solution 함수를 완성해주세요.문제를 풀기위해 .. 공감수 1 댓글수 0 2024. 9. 30.
(JS) Programmers : 최솟값 만들기 - 배열 정렬과 연산 - sort, reduce 더보기더보기더보기길이가 같은 배열 A, B 두개가 있습니다. 각 배열은 자연수로 이루어져 있습니다. 배열 A, B에서 각각 한 개의 숫자를 뽑아 두 수를 곱합니다. 이러한 과정을 배열의 길이만큼 반복하며, 두 수를 곱한 값을 누적하여 더합니다. 이때 최종적으로 누적된 값이 최소가 되도록 만드는 것이 목표입니다. (단, 각 배열에서 k번째 숫자를 뽑았다면 다음에 k번째 숫자는 다시 뽑을 수 없습니다.) 예를 들어 A = [1, 4, 2] , B = [5, 4, 4] 라면 A에서 첫번째 숫자인 1, B에서 첫번째 숫자인 5를 뽑아 곱하여 더합니다. (누적된 값 : 0 + 5(1x5) = 5) A에서 두번째 숫자인 4, B에서 세번째 숫자인 4를 뽑아 곱하여 더합니다. (누적된 값 : 5 + 16(4x4) =.. 공감수 0 댓글수 0 2024. 9. 29.
다양한 오픈소스 UI 사이트 Uiverse.io 혼자서 혹은 개발자들끼리 특정 웹페이지를 만들려고 하면 디자인에서 어려움을 겪을 수 있는데 Uiverse.io 사이트를 활용하면 여러 상황에 맞는 UI들을 찾아서 사용할 수 있다. HTML과 CSS로 단순하게 제공되어서 원하는 프로젝트에 편리하게 사용할 수 있다.TailwindCSS로 제공되는 요소들도 많이 있어서 필요에 따라 선택하여 사용할 수 도 있다. Uiverse | The Largest Library of Open-Source UI elements Uiverse | The Largest Library of Open-Source UI elementsCommunity-made library of free and customizable UI elements made with CSS or Tailwin.. 공감수 0 댓글수 0 2024. 9. 29.
웹 호환성 확인하기 "Can I Use" 웹페이지를 개발할때는 HTML, CSS, JavaScript를 사용한다. 여러 환경에서 사용되는 다양한 웹브라우저(Chrome, Edge, Safari 등)들은 모두 동일한 웹 기술을 보장하지 않는다. 브라우저 종류 뿐 아니라 버전에 따라서도 호환성이 달라지는데 사용자에게 균일한 웹 환경을 제공하기 위해서는 호환성을 확인할 필요가 있다. Can I Use 사이트를 활용하면 각 브라우저에서 어떤 웹 기술이 호환되는지 빠르게 확인할 수 있다. 화살표 함수는 비교적 최근의 자바스크립트 버전인 ES6에서 업데이트되었다. ES6의 주요 기능이 호환되지 않는 IE 브라우저를 포함하여 여러 구버전 브라우저에서 지원하지 않는것을 확인할 수 있다. 자바스크립트 외에도 HTML 요소인 시맨틱태그나 CSS 속성들도 검색해.. 공감수 1 댓글수 1 2024. 9. 28.
(JS) Programmers : 동영상 재생기 - 문자열과 숫자 변환 (split, map, toString, padStart) 더보기더보기당신은 동영상 재생기를 만들고 있습니다. 당신의 동영상 재생기는 10초 전으로 이동, 10초 후로 이동, 오프닝 건너뛰기 3가지 기능을 지원합니다. 각 기능이 수행하는 작업은 다음과 같습니다.10초 전으로 이동: 사용자가 "prev" 명령을 입력할 경우 동영상의 재생 위치를 현재 위치에서 10초 전으로 이동합니다. 현재 위치가 10초 미만인 경우 영상의 처음 위치로 이동합니다. 영상의 처음 위치는 0분 0초입니다.10초 후로 이동: 사용자가 "next" 명령을 입력할 경우 동영상의 재생 위치를 현재 위치에서 10초 후로 이동합니다. 동영상의 남은 시간이 10초 미만일 경우 영상의 마지막 위치로 이동합니다. 영상의 마지막 위치는 동영상의 길이와 같습니다.오프닝 건너뛰기: 현재 재생 위치가 오프닝.. 공감수 1 댓글수 0 2024. 9. 28.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.