[알고리즘] 제일 작은 수 제거하기
·
알고리즘
문제 설명 정수를 저장한 배열, arr 에서 가장 작은 수를 제거한 배열을 리턴하는 함수, solution을 완성해주세요. 단, 리턴하려는 배열이 빈 배열인 경우엔 배열에 -1을 채워 리턴하세요. 예를들어 arr이 [4,3,2,1]인 경우는 [4,3,2]를 리턴 하고, [10]면 [-1]을 리턴 합니다. 제한사항 arr은 길이 1 이상인 배열입니다. 인덱스 i, j에 대해 i ≠ j이면 arr[i] ≠ arr[j] 입니다. 입출력 예 arr return [4,3,2,1] [4,3,2] [10] [-1] 나의 풀이 function solution(arr) { if(arr.length === 1) { return [-1]; } let min = [...arr].sort((a,b)=> a-b)[0]; retu..
[알고리즘] 핸드폰 번호 가리기
·
알고리즘
문제 설명 프로그래머스 모바일은 개인정보 보호를 위해 고지서를 보낼 때 고객들의 전화번호의 일부를 가립니다. 전화번호가 문자열 phone_number로 주어졌을 때, 전화번호의 뒷 4자리를 제외한 나머지 숫자를 전부 *으로 가린 문자열을 리턴하는 함수, solution을 완성해주세요. 제한사항 phone_number는 길이 4 이상, 20이하인 문자열입니다. 입출력 예 phone_numberreturn phone_number return "01033334444" "*******4444" "027778888" "*****8888" 나의 풀이 function solution(phone_number) { return "*".repeat(phone_number.length - 4) + phone_number.s..
[React] swiper 부드럽게 흐르는 슬라이드
·
React/실험실
swiper는 React 환경에서 뿐만 아니라 슬라이드를 사용하는 환경이면 생각나는 것이다. 아주 간단하게 슬라이드를 만들어주기 때문이다. autoplay, navigation, 등등 필요한 왠만한 모든 것이 다 있다. 그런데, 작업을 하다가 한 가지 문제가 있었다. autoplay로 설정된 슬라이드가 시작과 끝 부분은 정상적인 속도이지만 화면의 정면으로 가까워지면 점차 느려지는 것이다. 애석하게도 swiper는 이것을 해결하는 옵션을 가지고 있지 않은 것으로 보였다. 애매하게 말하는 이유는 내가 검색 키워드를 몰라서 찾지 못하는 것일 수 있다. 하지만 분명 이런 이동이 불편해지는 상황이 올 것이다. 그래도 다행인 것은 swiper의 css 설정이 어렵지 않은 것이였다. 해결하기 위해서 swiper에서 ..
[CSS] 요소를 비율로 조정하기
·
Web
이미지와 같은 요소는 너비 값을 px 등의 단위로 고정하기 쉽지 않다. 반응형 환경에서 고정으로 두면 화면의 크기에 따라 너무 커지거나 작아지기 때문이다. 그래서 %로 설정하는 경우가 있는데, 원본 사이즈가 1 : 2인 요소를 1 : 1 비율로 화면에 나타내야 하면 어떨까? 생각만 해도 머리가 아픈 상황이다. 기본적으로 이미지를 비율에 맞춰 자르려면 object-fit을 사용해서 본인은 처리하는데, object-fit을 사용하려면 고정적인 size를 가져야한다. 하지만 앞서 말한 것처럼 고정적인 값을 가지면 반응형 환경에서 문제가 생긴다. 이도저도할 수 없는 최악의 상황이다. 여기서 도움을 주는 것이 aspect-ratio이다. aspect-ratio 요소의 크기를 비율대로 조정할 수 있는 css 속성이..
[CSS] 사파리 환경 input 스타일 초기화
·
Web
IE 환경의 고민이 사라졌다고 프론트엔드 개발자는 쉽게 마음을 놓으면 안된다. 바로 사파리 환경이 있기 때문이다. ( 모든 환경의 기본 스타일이 통일되길 기원합니다... ) 크롬과 사파리의 스타일이 다른 부분은 많지만 이번에 input을 작업하면서 다른 스타일로 내가 설정한 디자인이 깨지는 것을 발견했다. 사파리에서는 input이 기본적으로 둥근 모서리와 그림자를 가지고 있다. 그래서 따로 초기화를 하지 않으면 내가 설정한 스타일에 둥근 모서리와 그림자가 추가된다.. input { -webkit-border-radius: 0; -webkit-appearance: none; } 다음과 같이 설정해주면 input의 스타일이 초기화된다. radius는 둥근 모서리에 대한 설정이며, appearance는 그림자..
[HTML] 크롬 & 사파리 Video
·
Web
웹사이트를 개발하다보면 video 와 관련된 문제를 경험하게 된다. 자동 재생이나, video 태그의 재생 전 아이콘이 나오는 문제를 나는 경험했다. 이미 흔한 해결 방법들이지만 이번에 한 번 정리해보겠다. video 자동재생 크롬과 사파리 등 브라우저에서 video를 자동 재생 시키려면 제약사항이 있다. 바로 muted라는 옵션이 필요하다. 음소거 상태에서만 동영상을 자동 재생시킬 수 있다. 또한 사파리의 경우에는 추가적으로 playsinline 옵션을 줘야한다. playsinline 속성을 사용하지 않으면 전체화면으로 처리된다는 문제가 있다. // ... 다음과 같이 사용하려면 기본적으로 muted, playsinline, autoplay를 사용해야 브라우저 구분없이 자동재생이 가능하다. 카카오 브라..
[알고리즘] 자연수 뒤집어 배열로 만들기
·
알고리즘
문제 설명 자연수 n을 뒤집어 각 자리 숫자를 원소로 가지는 배열 형태로 리턴해주세요. 예를들어 n이 12345이면 [5,4,3,2,1]을 리턴합니다. 제한사항 n은 10,000,000,000이하인 자연수입니다. 입출력 예 n result 12345 [5,4,3,2,1] 나의 풀이 function solution(n) { return String(n).split("").map(word=> Number(word)).reverse(); }
[알고리즘] 정수 내림차순으로 배치하기
·
알고리즘
문제 설명 함수 solution은 정수 n을 매개변수로 입력받습니다. n의 각 자릿수를 큰것부터 작은 순으로 정렬한 새로운 정수를 리턴해주세요. 예를들어 n이 118372면 873211을 리턴하면 됩니다. 제한사항 n은 1이상 8000000000 이하인 자연수입니다. 입출력 예 n return 118372 873211 나의 풀이 function solution(n) { return Number(String(n).split("").sort((a,b) => b - a).join("")); }