전체적으로 각각의 문제에서 대응하는 매서드를 알고 있으면 쉽게 처리할 수 있는 문제들이라 묶어서 포스팅. 가장 큰 수 찾기 문제 설명 정수 배열 array가 매개변수로 주어질 때, 가장 큰 수와 그 수의 인덱스를 담은 배열을 return 하도록 solution 함수를 완성해보세요. 제한사항 1 ≤ array의 길이 ≤ 100 0 ≤ array 원소 ≤ 1,000 array에 중복된 숫자는 없습니다. 풀이 const solution = (array) => [...array] .map((el, idx) => [el, idx]) .sort((a,b) => b[0]-a[0])[0] map()을 이용하여 [기존원소, 인덱스] 의 형태로 새로운 배열을 만들고, "기존원소"로 내림차순 정렬 후 첫번째 원소를 리턴. ..
문제 설명 명함 지갑을 만드는 회사에서 지갑의 크기를 정하려고 합니다. 다양한 모양과 크기의 명함들을 모두 수납할 수 있으면서, 작아서 들고 다니기 편한 지갑을 만들어야 합니다. 이러한 요건을 만족하는 지갑을 만들기 위해 디자인팀은 모든 명함의 가로 길이와 세로 길이를 조사했습니다. 아래 표는 4가지 명함의 가로 길이와 세로 길이를 나타냅니다. 명함 번호 가로 길이 세로 길이 1 60 50 2 30 70 3 60 30 4 80 40 가장 긴 가로 길이와 세로 길이가 각각 80, 70이기 때문에 80(가로) x 70(세로) 크기의 지갑을 만들면 모든 명함들을 수납할 수 있습니다. 하지만 2번 명함을 가로로 눕혀 수납한다면 80(가로) x 50(세로) 크기의 지갑으로 모든 명함들을 수납할 수 있습니다. 이때..
문제 설명 문자열 s가 매개변수로 주어집니다. s에서 한 번만 등장하는 문자를 사전 순으로 정렬한 문자열을 return 하도록 solution 함수를 완성해보세요. 한 번만 등장하는 문자가 없을 경우 빈 문자열을 return 합니다. 제한사항 0 [...s].filter((el, idx, arr) => { return arr.filter(arrEl => el === arrEl) .length > 1 ? false : true }) .sort() .join(""); 주어진 s를 전개연산차를 통해 배열로 변환 filter() 매서드를 두번 사용 해서 하나만 있는 원소를 리턴해준다. 원본 배열에서 ..
문제 설명 정수 n이 매개변수로 주어질 때, n의 약수를 오름차순으로 담은 배열을 return하도록 solution 함수를 완성해주세요. 제한사항 1 ≤ n ≤ 10,000 풀이 const solution = (n) => new Array(n) .fill(0) .map((el, idx) => n % (idx+1) === 0 ? (idx + 1) : el) .filter(el => el !== 0) 배열을 리턴해야 하므로 new Array()로 신규로 배열을 생성해주는데, 우선 원소는 n개만큼 생성해준다. 각 원소들이 비어있으므로, 0을 할당해준다. 이러면 n개의 0이 들어있는 배열이 만들어진다. map() 매서드를 이용하여 n을 idx+1(idx는 0부터 시작 하므로)로 나눈 나머지가 0인 경우(n의 약..
문제 설명 영어가 싫은 머쓱이는 영어로 표기되어있는 숫자를 수로 바꾸려고 합니다. 문자열 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() 매서드를 이용해 대소문자가 변경된 배열을 반..
문제 설명 개미 군단이 사냥을 나가려고 합니다. 개미군단은 사냥감의 체력에 딱 맞는 병력을 데리고 나가려고 합니다. 장군개미는 5의 공격력을, 병정개미는 3의 공격력을 일개미는 1의 공격력을 가지고 있습니다. 예를 들어 체력 23의 여치를 사냥하려고 할 때, 일개미 23마리를 데리고 가도 되지만, 장군개미 네 마리와 병정개미 한 마리를 데리고 간다면 더 적은 병력으로 사냥할 수 있습니다. 사냥감의 체력 hp가 매개변수로 주어질 때, 사냥감의 체력에 딱 맞게 최소한의 병력을 구성하려면 몇 마리의 개미가 필요한지를 return하도록 solution 함수를 완성해주세요. 제한사항 hp는 자연수입니다. 0 ≤ hp ≤ 1000 풀이 순차적으로 높은 숫자부터 뺄 수 있는 만큼 빼고, 다음으로 넘기는식으로 반복하면..
문제 설명 문자열 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"가 연속해서 나오는 경우는 없습니다. 풀이 보자..
자바스크립트 데이터 타입(javascript data type) 자바스크립트에는 8가지 데이터 타입이 있고, 그중 7가지는 원시 데이터 타입이라고 한다. Number BigInt String Boolean null undefined Symbol Object 이중 Object를 제외한 나머지 7개가 원시 데이터 타입이다. 원시 데이터 타입(Primitive value) 변경할 수 없는 불변의 데이터 타입으로, 다른 데이터들을 구성하는 가장 기본적인 단위 한 번 생성되면 변경할 수 없다. 값을 직접 수정할 수 없다. 복사될 때 값 자체가 복사된다.(참조가 아닌 값 자체를 저장) 객체가 아니기 때문에 매서드를 가지지 않는다. *단, 일부 원시 값은 임시로 객체로 변환되어, 매서드를 사용 가능한 경우도 있다. ..
문제 설명 정수 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..
