목록분류 전체보기 (198)

JadeCode

[Next.js] 유튜브 불러오기

프로젝트를 하던 중 유튜브 링크를 입력하고 불러와야하는 작업이 있었다. 처음에는 iframe을 사용하여 유튜브 링크를 넣었다. src 에 유튜브 링크 주소를 그대로 넣었더니 이런 메세지가 떴다. 검색을 해 보니 "https://www.youtube.com/watch?v=????" 형태로 된 주소는 허용하지 않는 것이다. 해결 방법은 단순하다. ????부분은 영상의 ID로 그 ID를 토대로 불러오면 된다. "http://www.youtube.com/embed/????" 형태로 src에 집어 넣으면 된다. function extractVideoID(url: string) { var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=..
개발/오류해결 2023. 3. 23. 17:30
[Leetcode] Algorithm Day2 Two Pointers

977. Squares of a Sorted Array 정렬하기. 하지만 sort내장함수 쓰지 않고 시간복잡도 O(n)으로 만들기 1. 일단 각 숫자들을 문제에 나와있는대로 제곱을 한다. 2. 선택 정렬 알고리즘 사용한다. * 선택정렬 알고리즘 배열을 돌면서 최소값을 찾아간다. 현재 index와 최소값을 가진 index를 swap한다. /** * @param {number[]} nums * @return {number[]} */ var sortedSquares = function (nums) { nums = nums.map((el) => Math.abs(el) * Math.abs(el)); const swap = (a, b, nums) => { [nums[a], nums[b]] = [nums[b], nu..
카테고리 없음 2023. 3. 18. 20:00
React-Query 시작하기

보호되어 있는 글입니다.
카테고리 없음 2023. 3. 17. 19:20
React-Query 도입에 대한 고민

보호되어 있는 글입니다.
개발 2023. 3. 16. 16:15
[styled-components] 타입스크립트 적용, 다크모드

최근 스타일도 컴포넌트화 하는 CSS-in-JS가 점점 뜨고있다. 직접 사용해보니 props를 넘겨 사용할 수도 있고 여러 면에서 편리하여 애착이 가는 라이브러리이다. 프로젝트를 처음 세팅할 때 styled-components 에 초기 세팅하는 법을 정리해보자. 설치 일단 프로젝트를 생성한다. 최근 공부하고 있는 next.js와 typescript로 생성하자. npx create-next-app@latest --typescript 그리고 만든 프로젝트 내부에 styled-components를 설치한다. npm i styled-components npm i @types/styled-components //타입지정 타입스크립트도 사용할 예정이기 때문에 npm i @types/~ 도 설치해야된다. 또한, st..
개발 2023. 3. 14. 12:00
[Leetcode] Algorithm Day1 Binary Search

Binary Search Binary Search(이진 탐색) 이진 탐색은 오름차순으로 정렬된 리스트에서 특정한 값의 위치를 찾는 알고리즘이다. 최소값는 리스트의 첫 번째 값이고, 최대값은 리스트의 마지막으로 설정한다. 중간의 값을 중앙값으로 설정하고, 중앙값 target이면 중앙값이 새로운 최대값이 된다. 정렬된 리스트에만 사용할 수 있다는 단점이 있지만, 검색이 반복될 때마다 목표값을 찾을 확률은 두배가 되므로 속도의 측면에서는 장점이다. 704. Binary Search 기본적인 binary search이다. /** * @param {number[]} nums * @param {number} target * @retu..
개발/알고리즘 2023. 3. 7. 17:00
console.log에 색깔 넣기

console.log에 %c를 사용하여 색깔을 넣을 수 있다. console.log("%c Hello, World!","background:blue; color:white") 배경색과 글자색 모두 변경할 수 있다. 또한 error와 warn역시 표현할 수 있다. console.error("error!") console.warn("warn!")
개발 2023. 3. 4. 10:00
[프로그래머스] Level2 > 시소 짝꿍.js

문제 설명 어느 공원 놀이터에는 시소가 하나 설치되어 있습니다. 이 시소는 중심으로부터 2(m), 3(m), 4(m) 거리의 지점에 좌석이 하나씩 있습니다. 이 시소를 두 명이 마주 보고 탄다고 할 때, 시소가 평형인 상태에서 각각에 의해 시소에 걸리는 토크의 크기가 서로 상쇄되어 완전한 균형을 이룰 수 있다면 그 두 사람을 시소 짝꿍이라고 합니다. 즉, 탑승한 사람의 무게와 시소 축과 좌석 간의 거리의 곱이 양쪽 다 같다면 시소 짝꿍이라고 할 수 있습니다. 사람들의 몸무게 목록 weights이 주어질 때, 시소 짝꿍이 몇 쌍 존재하는지 구하여 return 하도록 solution 함수를 완성해주세요. 제한 사항 2 ≤ weights의 길이 ≤ 100,000 100 ≤ weights[i] ≤ 1,000 몸..
카테고리 없음 2023. 3. 3. 23:00
이전 Prev 1 2 3 4 5 6 ··· 25 Next 다음