문제 설명 영어가 싫은 머쓱이는 영어로 표기되어있는 숫자를 수로 바꾸려고 합니다. 문자열 numbers가 매개변수로 주어질 때, numbers를 정수로 바꿔 return 하도록 solution 함수를 완성해 주세요. 제한사항 numbers는 소문자로만 구성되어 있습니다. numbers는 "zero", "one", "two", "three", "four", "five", "six", "seven", "eight", "nine" 들이 공백 없이 조합되어 있습니다. 1 ≤ numbers의 길이 ≤ 50 "zero"는 numbers의 맨 앞에 올 수 없습니다. 풀이 const solution = (numbers) => +numbers .replace(/(zero)/g, '0') .replace(/(one)/g,..
문제 설명 문자열 my_string이 매개변수로 주어질 때, 대문자는 소문자로 소문자는 대문자로 변환한 문자열을 return하도록 solution 함수를 완성해주세요. 제한사항 1 ≤ my_string의 길이 ≤ 1,000 my_string은 영어 대문자와 소문자로만 구성되어 있습니다. 풀이 const solution = (my_string) => [...my_string] .map(el => el.match(/[A-Z]/g) ? el.toLowerCase() : el.toUpperCase()) .join(""); 주어진 문자열 my_string를 전개연산자를 이용해 각 글자의 배열로 변경 (my_string.split("")과 동일) 생성된 배열을 map() 매서드를 이용해 대소문자가 변경된 배열을 반..
문제 설명 문자열 my_string과 정수 n이 매개변수로 주어질 때, my_string에 들어있는 각 문자를 n만큼 반복한 문자열을 return 하도록 solution 함수를 완성해보세요. 제한사항 2 ≤ my_string 길이 ≤ 5 2 ≤ n ≤ 10 "my_string"은 영어 대소문자로 이루어져 있습니다. 풀이 다양한 방법이 있겠지만 가장 먼저 떠오른 방법은 map() 매서드와 repeat() 매서드를 사용하는 방법인거 같다. const solution = (my_string, n) => my_string.split("").map(el => el.repeat(n)).join(""); repeat() String.repeat(n) 의 형태로 사용 할 수 있다 (문자열) "★".repeat(2)를 ..
문제 설명 군 전략가 머쓱이는 전쟁 중 적군이 다음과 같은 암호 체계를 사용한다는 것을 알아냈습니다. 암호화된 문자열 cipher를 주고받습니다. 그 문자열에서 code의 배수 번째 글자만 진짜 암호입니다. 문자열 cipher와 정수 code가 매개변수로 주어질 때 해독된 암호 문자열을 return하도록 solution 함수를 완성해주세요. 제한사항 1 ≤ cipher의 길이 ≤ 1,000 1 ≤ code ≤ cipher의 길이 cipher는 소문자와 공백으로만 구성되어 있습니다. 공백도 하나의 문자로 취급합니다. 풀이 const solution = (cipher, code) => [...cipher] .filter((el, idx) => (idx + 1)%code === 0) .join(""); 1. ..
문제 설명 머쓱이는 친구들과 369게임을 하고 있습니다. 369게임은 1부터 숫자를 하나씩 대며 3, 6, 9가 들어가는 숫자는 숫자 대신 3, 6, 9의 개수만큼 박수를 치는 게임입니다. 머쓱이가 말해야하는 숫자 order가 매개변수로 주어질 때, 머쓱이가 쳐야할 박수 횟수를 return 하도록 solution 함수를 완성해보세요. 제한사항 1 ≤ order ≤ 1,000,000 풀이 const solution = (order) => [...String(order)] .filter(el => el.includes("3") || el.includes("6") || el.includes("9")) .length; 1. 숫자로 주어진 order를 String()으로 문자열로 변경 후, 전개연산자를 이용하여 ..
문제 설명 정수 배열 array와 정수 n이 매개변수로 주어질 때, array에 들어있는 정수 중 n과 가장 가까운 수를 return 하도록 solution 함수를 완성해주세요. 제한사항 1 ≤ array의 길이 ≤ 100 1 ≤ array의 원소 ≤ 100 1 ≤ n ≤ 100 가장 가까운 수가 여러 개일 경우 더 작은 수를 return 합니다. 풀이 map() 과 sort()를 사용해서 풀었다. const solution = (array, n) => array[array .map((el, idx) => [Math.abs(el - n), idx]) .sort((a,b) => { if(a[0] === b[0]){ return array[a[1]] - array[b[1]] }else{ return a[0]..
문제 설명 문자열 my_string이 매개변수로 주어집니다. my_string에서 중복된 문자를 제거하고 하나의 문자만 남긴 문자열을 return하도록 solution 함수를 완성해주세요. 제한사항 1 ≤ my_string ≤ 110 my_string은 대문자, 소문자, 공백으로 구성되어 있습니다. 대문자와 소문자를 구분합니다. 공백(" ")도 하나의 문자로 구분합니다. 중복된 문자 중 가장 앞에 있는 문자를 남깁니다. 풀이 split() 혹은 Spread Operator (전개 연산자), 그리고 filter()와 join()을 사용하면 될것 같다. const solution = (my_string) => [...my_string].filter((el, idx, arr) => idx === arr.ind..
문제 설명 숫자와 "Z"가 공백으로 구분되어 담긴 문자열이 주어집니다. 문자열에 있는 숫자를 차례대로 더하려고 합니다. 이 때 "Z"가 나오면 바로 전에 더했던 숫자를 뺀다는 뜻입니다. 숫자와 "Z"로 이루어진 문자열 s가 주어질 때, 머쓱이가 구한 값을 return 하도록 solution 함수를 완성해보세요. 제한사항 1 ≤ s의 길이 ≤ 200 -1,000 < s의 원소 중 숫자 < 1,000 s는 숫자, "Z", 공백으로 이루어져 있습니다. s에 있는 숫자와 "Z"는 서로 공백으로 구분됩니다. 연속된 공백은 주어지지 않습니다. 0을 제외하고는 0으로 시작하는 숫자는 없습니다. s는 "Z"로 시작하지 않습니다. s의 시작과 끝에는 공백이 없습니다. "Z"가 연속해서 나오는 경우는 없습니다. 풀이 보자..
문제 설명 정수 n이 매개변수로 주어질 때 n의 각 자리 숫자의 합을 return하도록 solution 함수를 완성해주세요 제한사항 0 ≤ n ≤ 1,000,000 풀이 각 자릿수마다 더해주면 된다. for문을 쓸 수도 있고 reduce()를 사용할 수도 있다. //for문 사용 시 const solution = (n) => { let acc = 0; for(let i = 0; i String(n).split("").reduce((acc,cur) => acc += +cur, 0);
자바스크립트란? ‘웹페이지에 생동감을 불어넣기 위해’ 만들어진 프로그래밍 언어 프로그래밍 언어라고는 하지만 컴파일 없이 실행이 가능. 예를 들면, 브라우저에서 바로 스크립트를 입력해서 실행이 가능하다. 통상적으로 브라우저에서만 사용하기 위해 만들어졌지만 브라우저 밖에서도 자바스크립트를 돌아가게 해주는 엔진이 있으면 브라우저 외의 환경에서도 동작이 가능하다. 하지만 통상적으로 브라우저 내에서 작동하는 자바스크립트를 기반으로 포스팅을 이어갈 계획이다. 자바스크립트로 브라우저에서 다양한 것들을 할 수 있는데 대표적으로 아래의 작업들을 수행할 수 있다. 웹페이지에 새로운 HTML을 추가하거나 기존 HTML, 혹은 스타일 수정하기 ( CRUD ) 사용자 행동에 반응하기 ( 클릭, 스크롤, 기타 등등.. ) 클라이..
문제 설명 정수 배열 numbers가 매개변수로 주어집니다. numbers의 각 원소에 두배한 원소를 가진 배열을 return하도록 solution 함수를 완성해주세요. 제한사항 -10,000 ≤ numbers의 원소 ≤ 10,000 1 ≤ numbers의 길이 ≤ 1,000 풀이 이 문제도 저번 문제랑 비슷하게 map() 매서드에 대해 알고 있습니까? 라고 물어보고 있다. const solution = (numbers) => numbers.map(el => el*2); Array.map() 주어진 배열에 대해서 각 원소마다 특정 함수를 실행한 새로운 배열을 리턴해주는 매서드 예를들어, [1,2,3,4,5]에 뒤에 ★이 하나씩 붙은 배열을 리턴하고 싶다면 [1,2,3,4,5].map(el => el + ..
for() while문과 같은 반복되는 작업을 처리하기 위해 사용된다. 차이점은 세미콜론으로 구분되는 세개의 선택식을 넣을 수 있는 점 정도?.. 주로 반복 횟수가 딱 정해져 있는 경우에 쓰면 좋다. 구문 for(카운터 변수 초기화, 평가식, 반복 후 평가식) 반복할 문; for(카운터 변수 초기화, 평가식, 반복 후 평가식){ 반복할 블럭문; } //- - - for(let i = 0; i < 10; i ++) console.log(i); //0 //1 //2 //3 //4 //5 //6 //7 //8 //9 하기 for문을 살펴보자. for(...) 내부를 ";"으로 나눠서 보면 for(let i = 0; i < 10; i ++) console.log(i); let i = 0; for문이 반복되는 동..
문자열 정렬하기 (1) 문제 설명 문자열 my_string이 매개변수로 주어질 때, my_string 안에 있는 숫자만 골라 오름차순 정렬한 리스트를 return 하도록 solution 함수를 작성해보세요. 제한사항 1 ≤ my_string의 길이 ≤ 100 my_string에는 숫자가 한 개 이상 포함되어 있습니다. my_string은 영어 소문자 또는 0부터 9까지의 숫자로 이루어져 있습니다. 풀이 const solution = (my_string) => my_string.replace(/[^0-9]/g, "") .split("") .map(el => +el) .sort((a, b) => a - b); 간단한 정규식 /[^0-9]/g 정도는 외워두는게 정신건강에 이롭다. 생각보다 사용할일이 많기 때문..
slice() 배열을 잘라서! 새로운 배열을 반환해주는 간단한 매서드지만 활용도가 굉장히 높다. 구문 Array.slice(시작인덱스); Array.slice(시작인덱스, 종료인덱스); 의외로 시작인덱스도 옵셔널이라 그냥 Array.slice() 하면 기존 배열에서 같은 복사된 배열을 반환해준다. 시작 인덱스만 넣으면 자동으로 종료인덱스는 배열의 끝이 된다. 사용예시 const arr = [1,2,3,4,5,6,7,8,9]; arr.slice(); //[1,2,3,4,5,6,7,8,9] arr.slice(0); //[1,2,3,4,5,6,7,8,9] arr.slice(3); //[4, 5, 6, 7, 8, 9] arr.slice(3, 5); //[4, 5] 시작위치에 음수를 넣어주면, 뒤에서 음수만큼 떨..
풀이가 너무 짧거나 간단한 문제 4가지를 그냥 합쳐서 포스팅. 배열 회전시키기 문제 설명 정수가 담긴 배열 numbers와 문자열 direction가 매개변수로 주어집니다. 배열 numbers의 원소를 direction방향으로 한 칸씩 회전시킨 배열을 return하도록 solution 함수를 완성해주세요 제한사항 3 ≤ numbers의 길이 ≤ 20 direction은 "left" 와 "right" 둘 중 하나입니다. 풀이 right의 경우 Array에서 사용할 수 있는 unshift()와 at() 매서드를 사용한다. at(index) 매서드는 배열에서 주어진 index의 원소를 표현해주는데, -1을 넣으면 마지막 원소를 구해준다. unshift() 매서느는 배열의 맨 앞에 주어진 원소를 추가해준다. 즉..
includes() 심플하게 배열에 특정요소가 포함되어 있는지를 Boolean(참/거짓)으로 반환해준다. 구문 Array.includes("찾을 원소"); Array.includes("찾을 원소", "인덱스 시작 위치"); indexOf()랑 마찬가지로 두번째 매개변수에 인덱스를 시작할 위치를 찾을 수 있다. 보통 indexOf() 매서드의 반환값이 -1일 때를 이용해 해당 배열에 원소가 포함 되어 있는지 체크했었는데 더 간결한 방법인것 같다. 딱히 사용 예제는 없다.
개요 [JS] 아코디언 라이브러리 - 1에서 기본적으로 만들었던 아코디언 라이브러리를 조금 더 업데이트 해보자. 작업 세부 사항 전체 아코디언 아이템들을 접거나, 펼칠 수 있는 매서드 제작 초기 셋팅시 className 및 초기 펼침 여부, 중복 펼침 허용 여부 설정 Accordion class Accordion { constructor(el, config) { this.el = document.querySelector(el); this.open = config?.open || false; this.multi = config?.multi || false; this.className = config?.className || 'active'; this.init(); } init() { this.items =..
문제 설명 정수 배열 num_list와 정수 n이 매개변수로 주어집니다. num_list를 다음 설명과 같이 2차원 배열로 바꿔 return하도록 solution 함수를 완성해주세요. num_list가 [1, 2, 3, 4, 5, 6, 7, 8] 로 길이가 8이고 n이 2이므로 num_list를 2 * 4 배열로 다음과 같이 변경합니다. 2차원으로 바꿀 때에는 num_list의 원소들을 앞에서부터 n개씩 나눠 2차원 배열로 변경합니다. num_list n result [1, 2, 3, 4, 5, 6, 7, 8] 2 [[1, 2], [3, 4], [5, 6], [7, 8]] 제한사항 num_list의 길이는 n의 배 수개입니다. 0 ≤ num_list의 길이 ≤ 150 2 ≤ n < num_list의 길이..
개요 그동안 신나게 자바스크립트로 이런저런 문제도 풀고 뭐 만들기도 하고.. 로직도 만들고 해봤으니 이제 그 자바스크립트로 실제 html 페이지를 조작해보자. 각각의 자세한 설명은 다른 포스트에서 하나하나 깊게 해보고, 이번 포스트에서는 그냥 간단한 CRUD(create, read, update, delete) - 즉, 생성, 읽기, 수정, 삭제를 해보자. 준비물 크롬 브라우저(다른 브라우저도 가능하지만.. 따라하려면 크롬으로) 인터넷 실습 환경 설정 우선 크롬 브라우저를 열어서 다음 포털을 열고, F12 혹은 Ctrl+Shift+i 키로 개발자 도구를 열고, "콘솔"탭을 눌러 아래와 같은 화면이 나오면 준비 완료. CRUD Create - 특정 요소를 생성해서 페이지에 추가해보기 사심을 담아 내 블로그..
indexOf() 배열과 문자열에서 사용할 수 있는 매서드로, 지정된 원소의 인덱스를 반환해 준다. 배열에 해당 인덱스가 없다면 -1이 반환된다. 구문 arr.indexOf(찾을 원소) arr.indexOf(찾을 원소, 검색을 시작할 위치) 사용예시 주요 기능과는 다르게 배열에 특정 원소가 있는지 없는지를 판단할 때 자주 쓰인다 -_-;; 물론 Array.includes()가 있긴 한데.. 음.. 왜 내가 공부할 때는 includes()를 안 썼지? 어쨌든.. 배열에 내가 원하는 값이 없을 경우 -1을 리턴해주는 특징을 이용해서 주로 해당 배열에 내가 찾는 원소가 있는지 없는지를 판단할 수 있다. const someArr = ["banana", "apple", "orange"]; someArr.index..
개요 [작업물] 아코디언 라이브러리에서 만들었던 아코디언 라이브러리 튜토리얼. 이번 포스팅에선 조금 상세하게 튜토리얼을 작성해보자. 작업 세부 사항 우선 퍼블리셔들한테 익숙한 swiper 라이브러리와 비슷한 사용 방식으로 제작할 예정이다. html 상단에서 script 파일 불러오기 구조에 맞는 html 작성 후 본인이 원하는 css 스타일링 페이지 하단에서 객체 생성 HTML html 구성은 최대한 간단하게 작성하였다. Title 1 Content 1 Title 2 Content 2 Title 3 Content 3 클래스로 DOM을 선택할거기 때문에, 태그는 크게 상관 없다. ul - li로 하든 div로 하던.. 단지 html 문맥 상 주로 faq 같은곳에서 사용할 가능성이 크다고 생각해서 ul - ..
문제 설명 영어 점수와 수학 점수의 평균 점수를 기준으로 학생들의 등수를 매기려고 합니다. 영어 점수와 수학 점수를 담은 2차원 정수 배열 score가 주어질 때, 영어 점수와 수학 점수의 평균을 기준으로 매긴 등수를 담은 배열을 return하도록 solution 함수를 완성해주세요. 제한사항 0 ≤ score[0], score[1] ≤ 100 1 ≤ score의 길이 ≤ 10 score의 원소 길이는 2입니다. score는 중복된 원소를 갖지 않습니다. 풀이 주어진 이차원 배열에서, 평균값을 계산한 배열을 만든 뒤, 해당 배열에서 각 원소마다 자기 자신보다 높은 원소들의 갯수의 길이를 리턴해주면 될 것 같다. const solution = (score) => score .map(([eng, math],..
개요 간단한 Accordion 컨테이너를 만들어주는 라이브러리. https://github.com/mooky1007/accordion GitHub - mooky1007/accordion Contribute to mooky1007/accordion development by creating an account on GitHub. github.com HTML 삽입 미리보기할 수 없는 소스 사용 방법 1. head 태그 내에 js 파일을 다운로드하거나 ghpage 링크로 스크립트 파일을 불러옵니다. 2. 아코디언 html을 생성해줍니다. 클래스명만 제대로 맞춰주면 css는 어떤 식으로 구성하던 상관없습니다. Title 1 Content 1 Title 2 Content 2 Title 3 Content 3 Ope..
개요 자바스크립트로 뭔가를 하다보면 뭔가를 반복적으로 사용해야 할 일이 생긴다. 예를들어 콘솔에 "a"를 3번 출력 한다고 하면 console.log("a"); console.log("a"); console.log("a"); 이런식으로 될것이고, "a"를 10번 출력해야 한다면 console.log("a"); console.log("a"); console.log("a"); console.log("a"); console.log("a"); console.log("a"); console.log("a"); console.log("a"); console.log("a"); console.log("a"); 이렇게 쓰여질것이다. 물론 이건 뭔가.. 뭔가.. 나쁘진 않지만 뭔가.. 뭔가 무식해보인다. ( 가끔은 저게 먹..
문제설명 3x 마을 사람들은 3을 저주의 숫자라고 생각하기 때문에 3의 배수와 숫자 3을 사용하지 않습니다. 3x 마을 사람들의 숫자는 다음과 같습니다. 정수 n이 매개변수로 주어질 때, n을 3x 마을에서 사용하는 숫자로 바꿔 return하도록 solution 함수를 완성해주세요. 제한사항 1 ≤ n ≤ 100 풀이 하나씩 올려가면서, 3이라는 문자가 포함되거나, 3의 배수인 경우 1을 더해주는 방식으로 하면 될 것 같다. 그러니까 1 - 2 - 4(3 + 1) - 5 - 7(6 + 1) - 8 - 10(9+1) - 11 - 14(13+1 - 12+1) - 15 - ... 여기서 1이 올라간 숫자에 3이 포함되거나 3의 배수인 경우까지 생각했을땐, while 문으로 해당 조건에 부합하지 않을때까지 +1..
문제설명머쓱이는 학교에서 키 순으로 줄을 설 때 몇 번째로 서야 하는지 궁금해졌습니다. 머쓱이네 반 친구들의 키가 담긴 정수 배열 array와 머쓱이의 키 height가 매개변수로 주어질 때, 머쓱이보다 키 큰 사람 수를 return 하도록 solution 함수를 완성해보세요. 제한사항1 ≤ array의 길이 ≤ 100 1 ≤ height ≤ 2001 ≤ array의 원소 ≤ 200 풀이약간 문제가.. 너 filter() 매서드 알고있어? 라고 물어보고 있다. filter() 매서드를 이용해서, 각 배열의 원소와 주어진 height를 비교해 더 클경우만 리턴후 lenght를 반환해주자. const solution = (array, height) => array.filter(el => el > height..
sort()? 배열의 원소들을 콜백함수의 결과에 따라 정렬해 주는 매서드 예를 들어, [1,4,2,3,5]라는 배열을 오름차순으로 정렬해 [1,2,3,4,5] 혹은 내림차순으로 [5,4,3,2,1] 이런 식으로 정리할 수 있다. 특징으로는 원본배열 자체를 정렬해 버리 때문에 원본이 변경되는 걸 원하지 않는 경우엔 배열을 복사 후 사용해야 한다. 구문 sort() sort(compareFn) compareFn 은 정렬 순서를 정해주는 함수로, 매개변수 a와 b를 갖고는데, a는 비교할 첫 번째 원소, b는 비교할 두 번째 원소다. compareFn 내부에서 a와 b를 비교해서 음수, 0, 양수를 리턴해주면 음수일 경우 b를 앞으로, 0일 경우는 그대로, 양수일 경우 a를 앞으로 리턴해준다. 이를 이용해 리..
join()? 자주쓰이지는 않지만 종종 쓰이는 매서드 주로, 문자열을 다룰때 배열로 변환 후 원하는 작업을 처리 한 뒤 다시 문자열을 리턴해야 할 경우 사용된다. 구문 Array.join() Array.join(separator) 매개변수로 separator를 선택적으로 사용할 수 있다. 매개변수를 전달하지 않으면 ","로 배열안의 모든 원소가 문자열이되어 리턴된다. 사용예시 let someArr = [1,2,"hi" ,"nice" ,"to", "meet", "you"] someArr.join(); //"1,2,hi,nice,to,meet,you" someArr.join(""); //"12hinicetomeetyou" someArr.join(" "); //"1 2 hi nice to meet you" s..
split() split() 매서드는 문자열을 입력받은 구분자를 기준으로 여러개로 나눈 배열을 반환해준다. 주로 코딩테스트 등에서 초기에 주어진 문자열을 원하는 배열의 형태로 바꿀때 시작하는 느낌으로 많이 사용한다. 실무에서는 DB에서 받은 데이터가 예를들어 | 라던지 , 로 구분된 문자열을 배열로 변경하는데 자주 사용된다. 음.. 예를들면 "B00|B001|AN001|ZA023" 등의 코드정보가 담긴 문자열을 받았을 때, "|" 를 구분자로 활용해 ["B00", "B001", "AN001", "ZA023"] 와 같은 배열을 얻어낼 수 있다. 구문 String.split() String.split(separator) String.split(separator, limit) 매개변수 separator 원본 ..
문제 설명 정수 n을 기준으로 n과 가까운 수부터 정렬하려고 합니다. 이때 n으로부터의 거리가 같다면 더 큰 수를 앞에 오도록 배치합니다. 정수가 담긴 배열 numlist와 정수 n이 주어질 때 numlist의 원소를 n으로부터 가까운 순서대로 정렬한 배열을 return하도록 solution 함수를 완성해주세요. 제한사항 1 ≤ n ≤ 10,000 1 ≤ numlist의 원소 ≤ 10,000 1 ≤ numlist의 길이 ≤ 100 numlist는 중복된 원소를 갖지 않습니다. 풀이 const solution = (numlist, n) => numlist.sort((a,b) => { if(Math.abs(a-n) - Math.abs(b-n) === 0) return b - a; return Math.abs..
