따라하며 만드는 심리테스트 with HTML/CSS/JS| 은옥 - 인프런 강의직접 나만의 MBTI 기반 심리테스트 사이트를 만들며 HTML, CSS, JS의 기초 흐름을 이해할 수 있는 강의입니다. 나만의 심리테스트 웹페이지(HTML/CSS/JS 기반) 완성, 입문자 관점의 HTML, CSS, JS 기본 사용www.inflearn.comhttps://inf.run/5xUwU HTML, CSS, JavaScript 기초를 활용해MBTI 기반 심리테스트 웹사이트를 처음부터 끝까지 직접 만들어보는 입문 강의입니다. 복잡한 이론보다 실제 화면을 만들어가며 자연스럽게 웹 개발의 흐름을 익힐 수 있도록 구성했습니다.코딩이 처음이어도 걱정하지 마세요. 질문 데이터 만들기, 버튼 이벤트 처리, 결과 페이지 구성 등웹..
HTML, CSS, JS를 이용해 예전 윈도우에 기본적으로 설치되어 있던 지뢰찾기 게임을 만들어 봅시다. https://inf.run/tgy8n 따라하며 만드는 지뢰찾기 with HTML/CSS/JS| 은옥 - 인프런 강의HTML, CSS, JS를 이용해 예전 윈도우에 기본적으로 설치되어 있던 지뢰찾기 게임을 만들어 봅시다. 뭐든 만들어 보고 싶은 개발자 지망생, 실제 프로젝트를 어떤식으로 진행해야 하는지 알고 싶은www.inflearn.com
문제 설명 두 문자열 s와 skip, 그리고 자연수 index가 주어질 때, 다음 규칙에 따라 문자열을 만들려 합니다. 암호의 규칙은 다음과 같습니다. 문자열 s의 각 알파벳을 index만큼 뒤의 알파벳으로 바꿔줍니다. index만큼의 뒤의 알파벳이 z를 넘어갈 경우 다시 a로 돌아갑니다. skip에 있는 알파벳은 제외하고 건너뜁니다. 예를 들어 s = "aukks", skip = "wbqd", index = 5일 때, a에서 5만큼 뒤에 있는 알파벳은 f지만 [b, c, d, e, f]에서 'b'와 'd'는 skip에 포함되므로 세지 않습니다. 따라서 'b', 'd'를 제외하고 'a'에서 5만큼 뒤에 있는 알파벳은 [c, e, f, g, h] 순서에 의해 'h'가 됩니다. 나머지 "ukks" 또한 위 ..
문제 설명 문자열 s가 입력되었을 때 다음 규칙을 따라서 이 문자열을 여러 문자열로 분해하려고 합니다. 먼저 첫 글자를 읽습니다. 이 글자를 x라고 합시다. 이제 이 문자열을 왼쪽에서 오른쪽으로 읽어나가면서, x와 x가 아닌 다른 글자들이 나온 횟수를 각각 셉니다. 처음으로 두 횟수가 같아지는 순간 멈추고, 지금까지 읽은 문자열을 분리합니다. s에서 분리한 문자열을 빼고 남은 부분에 대해서 이 과정을 반복합니다. 남은 부분이 없다면 종료합니다. 만약 두 횟수가 다른 상태에서 더 이상 읽을 글자가 없다면, 역시 지금까지 읽은 문자열을 분리하고, 종료합니다. 문자열 s가 매개변수로 주어질 때, 위 과정과 같이 문자열들로 분해하고, 분해한 문자열의 개수를 return 하는 함수 solution을 완성하세요. ..
문제 설명 선분 세 개로 삼각형을 만들기 위해서는 다음과 같은 조건을 만족해야 합니다. 가장 긴 변의 길이는 다른 두 변의 길이의 합보다 작아야 합니다. 삼각형의 두 변의 길이가 담긴 배열 sides이 매개변수로 주어집니다. 나머지 한 변이 될 수 있는 정수의 개수를 return하도록 solution 함수를 완성해주세요. 제한사항 sides의 원소는 자연수입니다. sides의 길이는 2입니다. 1 ≤ sides의 원소 ≤ 1,000 풀이 const solution = (sides) => { sides.sort((a,b) => b-a); const min = sides[0] - sides[1] + 1; const max = sides[0] + sides[1]; let side = 0; for(let i =..
문제 설명 문자열 my_string이 매개변수로 주어집니다. my_string은 소문자, 대문자, 자연수로만 구성되어있습니다. my_string안의 자연수들의 합을 return하도록 solution 함수를 완성해주세요. 제한사항 1 ≤ my_string의 길이 ≤ 1,000 1 ≤ my_string 안의 자연수 ≤ 1000 연속된 수는 하나의 숫자로 간주합니다. 000123과 같이 0이 선행하는 경우는 없습니다. 문자열에 자연수가 없는 경우 0을 return 해주세요. 풀이 const solution = (my_string) => my_string .split(/[a-zA-Z]/g) .reduce((acc, cur) => return acc += +cur, 0); split() 매서드를 정규식과 같이 활..
문제 설명 정수 배열 numbers가 매개변수로 주어집니다. numbers의 원소 중 두 개를 곱해 만들 수 있는 최댓값을 return하도록 solution 함수를 완성해주세요. 제한사항 -10,000 ≤ numbers의 원소 ≤ 10,000 2 ≤ numbers 의 길이 ≤ 100 풀이 const solution = (numbers) => { const positive = numbers.filter(el => el >= 0).sort((a,b) => b-a); const negative = numbers.filter(el => el b-a); if(positive.length === 1 && negative.length === 1) return positive[0] * negative[0]; const..
문제 설명 이진수를 의미하는 두 개의 문자열 bin1과 bin2가 매개변수로 주어질 때, 두 이진수의 합을 return하도록 solution 함수를 완성해주세요. 제한사항 return 값은 이진수를 의미하는 문자열입니다. 1 ≤ bin1, bin2의 길이 ≤ 10 bin1과 bin2는 0과 1로만 이루어져 있습니다. bin1과 bin2는 "0"을 제외하고 0으로 시작하지 않습니다. 풀이 const solution = (bin1, bin2) => (parseInt(bin1, 2) + parseInt(bin2, 2)).toString(2); 이렇게 푸는게 맞나?.. 싶긴해서 다른 사람의 풀이를 봤는데, 역시나 이렇게 풀꺼면 문제 안냈죠~ vs 레벨 0 테스트고, 사용 매서드 제한이 없는데 저게 맞지 파로 갈..
문제 설명 문자열 before와 after가 매개변수로 주어질 때, before의 순서를 바꾸어 after를 만들 수 있으면 1을, 만들 수 없으면 0을 return 하도록 solution 함수를 완성해보세요. 제한사항 0
문제 설명 PROGRAMMERS-962 행성에 불시착한 우주비행사 머쓱이는 외계행성의 언어를 공부하려고 합니다. 알파벳이 담긴 배열 spell과 외계어 사전 dic이 매개변수로 주어집니다. spell에 담긴 알파벳을 한번씩만 모두 사용한 단어가 dic에 존재한다면 1, 존재하지 않는다면 2를 return하도록 solution 함수를 완성해주세요. 제한사항 spell과 dic의 원소는 알파벳 소문자로만 이루어져있습니다. 2 ≤ spell의 크기 ≤ 10 spell의 원소의 길이는 1입니다. 1 ≤ dic의 크기 ≤ 10 1 ≤ dic의 원소의 길이 ≤ 10 spell의 원소를 모두 사용해 단어를 만들어야 합니다. spell의 원소를 모두 사용해 만들 수 있는 단어는 dic에 두 개 이상 존재하지 않습니다...
문제 설명 2차원 좌표 평면에 변이 축과 평행한 직사각형이 있습니다. 직사각형 네 꼭짓점의 좌표 [[x1, y1], [x2, y2], [x3, y3], [x4, y4]]가 담겨있는 배열 dots가 매개변수로 주어질 때, 직사각형의 넓이를 return 하도록 solution 함수를 완성해보세요. 제한사항 dots의 길이 = 4 dots의 원소의 길이 = 2 -256
문제 설명 머쓱이는 큰 종이를 1 x 1 크기로 자르려고 합니다. 예를 들어 2 x 2 크기의 종이를 1 x 1 크기로 자르려면 최소 가위질 세 번이 필요합니다. 정수 M, N이 매개변수로 주어질 때, M x N 크기의 종이를 최소로 가위질 해야하는 횟수를 return 하도록 solution 함수를 완성해보세요. 제한사항 0 (M*N)-1; 주어진 가로, 세로가 M, N이니까 가로부터 길게 쭉쭉 자른다고 치면, M - 1 번의 가위질이 필요하다. 그렇게 해서 나온 M개의 종이에 N-1 만큼의 가위질을 해야한다. 즉 가로로 자르는 가위질의 수 : M-1 세로로 자르는 가위질의 수 : M*(N-1)..
문제 설명 영어 대소문자로 이루어진 문자열 my_string이 매개변수로 주어질 때, my_string을 모두 소문자로 바꾸고 알파벳 순서대로 정렬한 문자열을 return 하도록 solution 함수를 완성해보세요. 제한사항 0
문제 설명 어떤 자연수를 제곱했을 때 나오는 정수를 제곱수라고 합니다. 정수 n이 매개변수로 주어질 때, n이 제곱수라면 1을 아니라면 2를 return하도록 solution 함수를 완성해주세요. 제한사항 1 ≤ n ≤ 1,000,000 풀이 const solution = (n) => Number.isInteger(Math.sqrt(n)) ? 1 : 2; 제곱수를 풀어내는 Math.sqrt() 매서드와, 정수 여부를 판단해주는 Number.isInterger() 매서드를 알고 있으면 한줄로 풀어낼 수 있다. sqrt는 square root의 약자로 루트를 계산해준다고 생각하면 편하다. Number.isInterger()은 실무에서는 거의 안쓰이기는 하지만, 알아두면 언젠간 쓸일이 있을것 같다.
문제 설명 문자열 str1, str2가 매개변수로 주어집니다. str1 안에 str2가 있다면 1을 없다면 2를 return하도록 solution 함수를 완성해주세요. 제한사항 1 ≤ str1의 길이 ≤ 100 1 ≤ str2의 길이 ≤ 100 문자열은 알파벳 대문자, 소문자, 숫자로 구성되어 있습니다. 풀이 const solution = (str1, str2) => str1.includes(str2) ? 1 : 2; // or const solution = (str1, str2) => str1.indexOf(str2) !== -1 ? 1 : 2; 배열 내 원소의 존재 유무를 체크하는 방법을 알면 한번에 풀 수 있는 문제로, indexOf() 혹은 includes() 매서드를 활용하면 한줄로 풀어낼 수 ..
문제 설명 머쓱이는 RPG게임을 하고 있습니다. 게임에는 up, down, left, right 방향키가 있으며 각 키를 누르면 위, 아래, 왼쪽, 오른쪽으로 한 칸씩 이동합니다. 예를 들어 [0,0]에서 up을 누른다면 캐릭터의 좌표는 [0, 1], down을 누른다면 [0, -1], left를 누른다면 [-1, 0], right를 누른다면 [1, 0]입니다. 머쓱이가 입력한 방향키의 배열 keyinput와 맵의 크기 board이 매개변수로 주어집니다. 캐릭터는 항상 [0,0]에서 시작할 때 키 입력이 모두 끝난 뒤에 캐릭터의 좌표 [x, y]를 return하도록 solution 함수를 완성해주세요. [0, 0]은 board의 정 중앙에 위치합니다. 예를 들어 board의 가로 크기가 9라면 캐릭터는 ..
문제 설명 1부터 13까지의 수에서, 1은 1, 10, 11, 12, 13 이렇게 총 6번 등장합니다. 정수 i, j, k가 매개변수로 주어질 때, i부터 j까지 k가 몇 번 등장하는지 return 하도록 solution 함수를 완성해주세요. 제한사항 1 ≤ i { let count = 0; for(let start = i; start el.includes(k) && count ++); } return count; } 그냥 간단하게 생각하고 풀기로 했다. i부터 j까지 k가 몇번 등장하는지 등장 횟수를 구해주면 되는 문제라 우선 for문으로 i부터 j까지 반복문을 돌리기로 했고, 이후 해당 숫자를 문자열로 변경한 뒤 split() 매서드로 글자글자마다 쪼개주었다. 첫 답변 제출 시에는 split()은 따..
문제 설명 머쓱이는 프로그래머스에 로그인하려고 합니다. 머쓱이가 입력한 아이디와 패스워드가 담긴 배열 id_pw와 회원들의 정보가 담긴 2차원 배열 db가 주어질 때, 다음과 같이 로그인 성공, 실패에 따른 메시지를 return하도록 solution 함수를 완성해주세요. 아이디와 비밀번호가 모두 일치하는 회원정보가 있으면 "login"을 return합니다. 로그인이 실패했을 때 아이디가 일치하는 회원이 없다면 “fail”를, 아이디는 일치하지만 비밀번호가 일치하는 회원이 없다면 “wrong pw”를 return 합니다. 제한사항 회원들의 아이디는 문자열입니다. 회원들의 아이디는 알파벳 소문자와 숫자로만 이루어져 있습니다. 회원들의 패스워드는 숫자로 구성된 문자열입니다. 회원들의 비밀번호는 같을 수 있지만..
전체적으로 각각의 문제에서 대응하는 매서드를 알고 있으면 쉽게 처리할 수 있는 문제들이라 묶어서 포스팅. 가장 큰 수 찾기 문제 설명 정수 배열 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의 약..
문제 설명 문자열 my_string과 정수 num1, num2가 매개변수로 주어질 때, my_string에서 인덱스 num1과 인덱스 num2에 해당하는 문자를 바꾼 문자열을 return 하도록 solution 함수를 완성해보세요. 제한사항 1 [...my_string].map((el, idx, arr) => { if(idx === num1) return arr[num2]; if(idx === num2) return arr[num1]; return el; })..
문제 설명 영어가 싫은 머쓱이는 영어로 표기되어있는 숫자를 수로 바꾸려고 합니다. 문자열 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() 매서드를 이용해 대소문자가 변경된 배열을 반..
문제 설명 군 전략가 머쓱이는 전쟁 중 적군이 다음과 같은 암호 체계를 사용한다는 것을 알아냈습니다. 암호화된 문자열 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()으로 문자열로 변경 후, 전개연산자를 이용하여 ..
자바스크립트란? ‘웹페이지에 생동감을 불어넣기 위해’ 만들어진 프로그래밍 언어 프로그래밍 언어라고는 하지만 컴파일 없이 실행이 가능. 예를 들면, 브라우저에서 바로 스크립트를 입력해서 실행이 가능하다. 통상적으로 브라우저에서만 사용하기 위해 만들어졌지만 브라우저 밖에서도 자바스크립트를 돌아가게 해주는 엔진이 있으면 브라우저 외의 환경에서도 동작이 가능하다. 하지만 통상적으로 브라우저 내에서 작동하는 자바스크립트를 기반으로 포스팅을 이어갈 계획이다. 자바스크립트로 브라우저에서 다양한 것들을 할 수 있는데 대표적으로 아래의 작업들을 수행할 수 있다. 웹페이지에 새로운 HTML을 추가하거나 기존 HTML, 혹은 스타일 수정하기 ( CRUD ) 사용자 행동에 반응하기 ( 클릭, 스크롤, 기타 등등.. ) 클라이..
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 정도는 외워두는게 정신건강에 이롭다. 생각보다 사용할일이 많기 때문..
