WEB

Javascript

while문에 대해 알아보자.

개요 자바스크립트로 뭔가를 하다보면 뭔가를 반복적으로 사용해야 할 일이 생긴다. 예를들어 콘솔에 "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"); 이렇게 쓰여질것이다. 물론 이건 뭔가.. 뭔가.. 나쁘진 않지만 뭔가.. 뭔가 무식해보인다. ( 가끔은 저게 먹..

프로그래머스 코딩테스트

[프로그래머스] 저주의 숫자 3

문제설명 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..

프로그래머스 코딩테스트

[프로그래머스] 폰켓몬

문제 설명 당신은 폰켓몬을 잡기 위한 오랜 여행 끝에, 홍 박사님의 연구실에 도착했습니다. 홍 박사님은 당신에게 자신의 연구실에 있는 총 N 마리의 폰켓몬 중에서 N/2마리를 가져가도 좋다고 했습니다. 홍 박사님 연구실의 폰켓몬은 종류에 따라 번호를 붙여 구분합니다. 따라서 같은 종류의 폰켓몬은 같은 번호를 가지고 있습니다. 예를 들어 연구실에 총 4마리의 폰켓몬이 있고, 각 폰켓몬의 종류 번호가 [3번, 1번, 2번, 3번]이라면 이는 3번 폰켓몬 두 마리, 1번 폰켓몬 한 마리, 2번 폰켓몬 한 마리가 있음을 나타냅니다. 이때, 4마리의 폰켓몬 중 2마리를 고르는 방법은 다음과 같이 6가지가 있습니다. 첫 번째(3번), 두 번째(1번) 폰켓몬을 선택 첫 번째(3번), 세 번째(2번) 폰켓몬을 선택 첫..

프로그래머스 코딩테스트

[프로그래머스] 머쓱이보다 키 큰 사람

문제설명머쓱이는 학교에서 키 순으로 줄을 설 때 몇 번째로 서야 하는지 궁금해졌습니다. 머쓱이네 반 친구들의 키가 담긴 정수 배열 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..

Javascript

Array.sort()에 대해 알아보자.

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를 앞으로 리턴해준다. 이를 이용해 리..

Javascript

Array.join()에 대해 알아보자.

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..

작업물

심리&성격&성향 테스트 사이트

[JS] 심리 테스트 페이지 만들기 - 1 [JS] 심리 테스트 페이지 만들기 - 2 [JS] 심리 테스트 페이지 만들기 - 3 위 포스트에서 만들었던 심리테스트 코드를 가지고 간단하게 SPA 심리&성격&성향 테스트 사이트를 만들어봤다. 😏 😘 심리&성향&성격 테스트 😘 심리&성향&성격 테스트 다양한 심리&성향&성격 테스트를 통해 자신의 성향을 알아보세요. mooky1007.github.io 화면 구성 귀차니스트들을 위한 10초 MBTI 포스팅에서 만들었던 테스트도 내용만 가져다가 추가했다. 😛 뭔가 이렇게 이전에 만들었던걸 여기저기 간편하게 가져다 쓸 수 있을 때, 모듈형태로 스크립트를 작성하는 것에 대한 보람을 느낀다. 폴더 트리 작업 시 고려했던 건, 단발성이 아닌 꾸준하게 테스트 데이터를 등록해서..

Javascript

String.split()에 대해 알아보자.

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..

Javascript

Array.filter()에 대해 알아보자.

filter()? filter는 자바스크립트 Array 객체의 내장 매서드로, 기본적으로는 배열의 각 원소들을 순회하며 콜백함수를 실행하고, 리턴값이 true인 경우의 원소만을 모아서 새로운 배열을 리턴해주는 매서드이다. 단순히 배열에서 특정 조건외의 원소들을 배제 시킬때도 사용하며, 개인적으로는 중복을 허용하는 숫자로 이루어진 원소들중 해당 원소가 몇번째인지를 구할때라던가, 혹은 배열에서 중복값을 제거하는등의 응용해서 사용하는 방식이 흥미로웠다. 사용법 Array.filter((element, index, originArr) => { //some function... }) // - - - - - - const numberArr = [1,2,3,4,5,6,7]; // 3 이하의 원소들로 이루어진 배열을 ..

프로그래머스 코딩테스트

[프로그래머스] 문자열 밀기

문제 설명 문자열 "hello"에서 각 문자를 오른쪽으로 한 칸씩 밀고 마지막 문자는 맨 앞으로 이동시키면 "ohell"이 됩니다. 이것을 문자열을 민다고 정의한다면 문자열 A와 B가 매개변수로 주어질 때, A를 밀어서 B가 될 수 있다면 밀어야 하는 최소 횟수를 return하고 밀어서 B가 될 수 없으면 -1을 return 하도록 solution 함수를 완성해보세요. 제한사항 0 < A의 길이 = B의 길이 < 100 A, B는 알파벳 소문자로 이루어져 있습니다. 풀이 음.. 원래대로라면 문자열을 배열로 바꿔서 이렇게 저렇게 하겠지만.. 이번엔 문자열 매서드를 이용해보자. 대략적으로 머릿속으로 먼저 구상해보면.. A를 오른쪽으로 한칸씩 밀면서 B랑 같아질때 까지 비교해보는데, 이때 move변수를 하나 ..

Javascript

Array.reduce()에 대해 알아보자.

reduce()? reduce는 자바스크립트의 Array 객체에 내장되어 있는 매서드로, 개인적으로 가장 좋아하는 매서드중의 하나이다. 작동 방식은 기본적으로 2가지의 인자를 가지는데, 배열을 순환하면서 계속해서 들고갈 acc, 그리고 현재 원소인 cur을 갖는다. 쉽게 말하면, map()이나 filter()의 경우엔 각각의 원소들을 순회하면서 이전 원소나, 다음 원소에 대한 정보를 알기가 편하지가 않은데, reduce의 경우 acc에 다양한 형태로 배열을 순환하면서 생기는 결과값들을 저장 할 수가 있다. 리턴하는 결과값도 새로운 배열이 아닌 acc를 리턴하기 때문에 결과는 배열일수도, 객체일수도, 숫자일수도, 문자일수도있다. 가장 간단한 예로, [1,2,3,4,5] 라는 배열의 모든 원소의 합을 구할때..

프로그래머스 코딩테스트

[프로그래머스] 짝수는 싫어요, 피자 나눠 먹기 (2)

짝수는 싫어요 문제 설명 정수 n이 매개변수로 주어질 때, n 이하의 홀수가 오름차순으로 담긴 배열을 return하도록 solution 함수를 완성해주세요. 제한사항 1 ≤ n ≤ 100 풀이 음.. Array.from 등을 써도 될꺼 같긴 한데.. 그냥 클래식하게 for문으로 작업했다. const solution = (n) => { let oddArr = []; for(let i = 1; i b === 0 ? a : calcGCD(b, a%b); 간단하게 이렇게 한줄로 짜놓고.. 이걸 이용해서 최소 공배수를 구하는 식을 짜보면 const solution = (n) => { const calcGCD = (a, b) => b === 0 ? a : calcGCD(b, a%b); const gcd = calc..

튜토리얼

[JS] 심리 테스트 페이지 만들기 - 3

[JS] 심리 테스트 페이지 만들기 - 1 [JS] 심리 테스트 페이지 만들기 - 2 [JS] 심리 테스트 페이지 만들기 - 3 지난번 포스트에서 테스트 질문에 대한 점수를 누적해서 결과를 보여주는 페이지를 작업했었으니, 이번엔 MBTI처럼 특정 성향에 맞는 답변을 노출할 수 있는 페이지를 만들어보자. 🤗 이번 포스트로 이런게 만들어집니다. 🤗 HTML 삽입 미리보기할 수 없는 소스 우선 생각해봐야 할게, MBTI를 보면 E와 I와 S, F와 T, P와 J로 나뉘고 각각의 성향에 대한 질문을 총 합하여 조금 더 높은 쪽으로 보여준다. 즉 EI, SN, FT, PJ 에대한 각각의 질문들을 받아 총계를 내서 높은 쪽으로 내주는데.. 이때 문제는 문제가 짝수일때 딱 50:50으로 나뉘었을 때 무엇을 표시해 줄..

프로그래머스 코딩테스트

[프로그래머스] 다항식 더하기

https://school.programmers.co.kr/learn/courses/30/lessons/120863 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 설명 한 개 이상의 항의 합으로 이루어진 식을 다항식이라고 합니다. 다항식을 계산할 때는 동류항끼리 계산해 정리합니다. 덧셈으로 이루어진 다항식 polynomial이 매개변수로 주어질 때, 동류항끼리 더한 결괏값을 문자열로 return 하도록 solution 함수를 완성해보세요. 같은 식이라면 가장 짧은 수식을 return 합니다. 제한사항 0 < polynomial에 있는 수 < 100 ..

프로그래머스 코딩테스트

[프로그래머스] 특정 문자 제거하기

문제 설명 문자열 my_string과 문자 letter이 매개변수로 주어집니다. my_string에서 letter를 제거한 문자열을 return하도록 solution 함수를 완성해주세요. 제한사항 1 ≤ my_string의 길이 ≤ 100 letter은 길이가 1인 영문자입니다. my_string과 letter은 알파벳 대소문자로 이루어져 있습니다. 대문자와 소문자를 구분합니다. 풀이 letter이 길이가 1인 영문자이므로 단순하게 replaceAll() 매서드로 letter을 "" 으로 치환 후 리턴해준다. replace() 매서드를 사용 할 시 첫 letter만 제거되므로 replaceAll() 매서드를 사용했다. const solution = (my_string, letter) => my_strin..

프로그래머스 코딩테스트

[프로그래머스] 모음 제거

문제 설명 영어에선 a, e, i, o, u 다섯 가지 알파벳을 모음으로 분류합니다. 문자열 my_string이 매개변수로 주어질 때 모음을 제거한 문자열을 return하도록 solution 함수를 완성해주세요. 제한사항 my_string은 소문자와 공백으로 이루어져 있습니다. 1 ≤ my_string의 길이 ≤ 1,000 풀이 my_string은 소문자로 이루어져 있으니 우선 제거할 소문자 모음의 배열을 변수로 만들어둔 뒤 split() 매서드로 문자열을 나눈 후, filter() 매서드를 이용해 소문자 모음 배열에 포함 여부를 체크 한뒤 join() 매서드로 다시 문자열로 변경 후 리턴해준다. const gather = ["a","e","i","o","u"]; const solution = (my_s..

튜토리얼

[JS] 심리 테스트 페이지 만들기 - 2

[JS] 심리 테스트 페이지 만들기 - 1 [JS] 심리 테스트 페이지 만들기 - 2 [JS] 심리 테스트 페이지 만들기 - 3 이전 포스트에서는 심리테스트에 들어갈 자료구조를 구성하고, 시작페이지랑 테스트 데이터가 연동되게 작업을 했었으니, 이번에는 "시작하기" 버튼을 눌러서 실제 테스트가 시작되게 만들고, 문제와 답변을 보여주고, 답변이 선택되면 답변마다의 점수가 카운팅 되면서 넘어가고, 다음 문제가 없을 경우 누적된 점수에 따라 결과페이지를 보여주는걸 한번 만들어 보자. 🤗 이번 포스트로 이런게 만들어집니다. 🤗 HTML 삽입 미리보기할 수 없는 소스 정리 테스트를 시작 할 수 있는 start() 매서드 만들기 답변을 골랐을때 다음 문제로 넘어가는 next() 매서드 만들기 다음 문제가 없을 경우 ..

프로그래머스 코딩테스트

[프로그래머스] 최빈값 구하기

문제 설명 최빈값은 주어진 값 중에서 가장 자주 나오는 값을 의미합니다. 정수 배열 array가 매개변수로 주어질 때, 최빈값을 return 하도록 solution 함수를 완성해보세요. 최빈값이 여러 개면 -1을 return 합니다. 제한사항 0 { const numberCountObj = array.reduce((acc, cur) => { acc[cur] ? acc[cur] += 1 : acc[cur] = 1; retur..

Javascript

Array.map()에 대해 알아보자.

튜토리얼이나, 프로그래머스 문제 풀이를 할 때마다 자주 나오는 몇 가지 매써드들을 정리해 두고 링크용도로 쓰려고 요 카테고리를 만들었다. 1.Array? Array는 자바스크립트에서 사용되는 목록 형태의 표준 내장 객체인데, [ ]로 감싸고, ", "으로 구분해서 다양한 데이터를 저장할 수 있게 해 준다. [1,2,3,4,5,6] 이런 식으로 1부터 6까지의 목록이 있는 데이터를 저장 하거나 혹은 [1, "happy", true, [1,2,3], {a: 10}] 이런식으로 각각 숫자, 문자, 참/거짓, 혹은 또 다른 배열, 객체 등등 ", "으로 구분해서 저장해 둘 수 있는 아주~ 편리한 내장 객체이다. Array의 기본 형태 [1, 2, 3, 4, 5, 6, 7] ["hellow", "hi", "goo..

튜토리얼

[JS] 심리 테스트 페이지 만들기 - 1

[JS] 심리 테스트 페이지 만들기 - 1 [JS] 심리 테스트 페이지 만들기 - 2 [JS] 심리 테스트 페이지 만들기 - 3 개요 저번에 만들었던 MBTI 테스트는 각 성향별 질문을 하고, 성향에 맞는 결과페이지를 보여주는 방식이였는데, 심리테스트나 OOO테스트 이런것들 중에는 점수를 누적시켜서 점수에 따른 결과를 보여주는 방식과 주어진 질문들을 따라가서 (질문의 답변에 따라 다음 질문이 분기됨) 최종적으로 결과페이지가 나오는 방식이 있다. 물론 html 페이지를 여러장 만들어서 버튼마다 연결연결 시키는 방법도 있겠지만 전체적으로 자바스크립트로 라이브러리 형식으로 만들어보면 재밌지 않을까? 라는 마음에서 시작해서 등록을 쉽게 만들어서 심리테스트들이 모여있는 페이지를 만들어보는것도 재밌을거 같다고 생각..

프로그래머스 코딩테스트

[프로그래머스] OX퀴즈

문제 설명 덧셈, 뺄셈 수식들이 'X [연산자] Y = Z' 형태로 들어있는 문자열 배열 quiz가 매개변수로 주어집니다. 수식이 옳다면 "O"를 틀리다면 "X"를 순서대로 담은 배열을 return하도록 solution 함수를 완성해주세요. 제한사항 연산 기호와 숫자 사이는 항상 하나의 공백이 존재합니다. 단 음수를 표시하는 마이너스 기호와 숫자 사이에는 공백이 존재하지 않습니다. 1 ≤ quiz의 길이 ≤ 10 X, Y, Z는 각각 0부터 9까지 숫자로 이루어진 정수를 의미하며, 각 숫자의 맨 앞에 마이너스 기호가 하나 있을 수 있고 이는 음수를 의미합니다. X, Y, Z는 0을 제외하고는 0으로 시작하지 않습니다. -10,000 ≤ X, Y ≤ 10,000 -20,000 ≤ Z ≤ 20,000 [연산..

프로그래머스 코딩테스트

[프로그래머스] 겹치는 선분의 길이

문제 설명 선분 3개가 평행하게 놓여 있습니다. 세 선분의 시작과 끝 좌표가 [[start, end], [start, end], [start, end]] 형태로 들어있는 2차원 배열 lines가 매개변수로 주어질 때, 두 개 이상의 선분이 겹치는 부분의 길이를 return 하도록 solution 함수를 완성해보세요. lines가 [[0, 2], [-3, -1], [-2, 1]]일 때 그림으로 나타내면 다음과 같습니다. 선분이 두 개 이상 겹친 곳은 [-2, -1], [0, 1]로 길이 2만큼 겹쳐있습니다. 제한사항 lines의 길이 = 3 lines의 원소의 길이 = 2 모든 선분은 길이가 1 이상입니다. lines의 원소는 [a, b] 형태이며, a, b는 각각 선분의 양 끝점 입니다. -100 ≤ a..

프로그래머스 코딩테스트

[프로그래머스] 분수의 덧셈

문제 설명첫 번째 분수의 분자와 분모를 뜻하는 numer1, denom1, 두 번째 분수의 분자와 분모를 뜻하는 numer2, denom2가 매개변수로 주어집니다. 두 분수를 더한 값을 기약 분수로 나타냈을 때 분자와 분모를 순서대로 담은 배열을 return 하도록 solution 함수를 완성해보세요. 제한사항0 { const [numer, denom] = [numer1*denom2 + numer2*denom1, denom1*denom2]; }앞뒤 순서 상관없이 분자에 더해야할 분수의 분모를 곱해준 뒤 더해주고, 분모는 서로 곱해줘서 우선 분수의 덧셈을 마무리 한다. 이제 기약분수를 구해야 하는데 유클리드 호제법을 사용해서 최대공약수를 구하는 함수를 만들어보자. const calcGCD = (a, b) ..

프로그래머스 코딩테스트

[프로그래머스] 순서쌍의 개수

문제 설명순서쌍이란 두 개의 숫자를 순서를 정하여 짝지어 나타낸 쌍으로 (a, b)로 표기합니다. 자연수 n이 매개변수로 주어질 때 두 숫자의 곱이 n인 자연수 순서쌍의 개수를 return하도록 solution 함수를 완성해주세요. 제한사항1 ≤ n ≤ 1,000,000 풀이n을 1부터 하나씩 숫자를 올려가면서 나눠서 몫이 0이 나오는 수들을 배열에 저장 후 해당 배열의 갯수를 리턴해주면 될 것같다. //for문 이용 const solution = (n) => { let result = []; for(let i = 1; i

프로그래머스 코딩테스트

[프로그래머스] 세균증식

문제 설명어떤 세균은 1시간에 두배만큼 증식한다고 합니다. 처음 세균의 마리수 n과 경과한 시간 t가 매개변수로 주어질 때 t시간 후 세균의 수를 return하도록 solution 함수를 완성해주세요. 제한사항1 ≤ n ≤ 10 1 ≤ t ≤ 15 풀이const solution = (n, t) => { for(let i = 0; i < t; i ++) n *= 2; return n; }음.. 처음 세균의 수 n이 t시간 후 몇마리가 될지 구하는 문제니까 주어진 t 시간만큼 for문으로 n(세균의 마리수)를 2배씩 늘려 준 뒤 n값을 리턴해주었다. for문도 안쪽 수식이 간단하면 중괄호를 안사용하는것도 코드 줄 수를 줄이는데 좋을 것 같다.

프로그래머스 코딩테스트

[프로그래머스] 옷가게 할인 받기

문제 설명 머쓱이네 옷가게는 10만 원 이상 사면 5%, 30만 원 이상 사면 10%, 50만 원 이상 사면 20%를 할인해줍니다. 구매한 옷의 가격 price가 주어질 때, 지불해야 할 금액을 return 하도록 solution 함수를 완성해보세요. 제한사항 10 ≤ price ≤ 1,000,000 price는 10원 단위로(1의 자리가 0) 주어집니다. 소수점 이하를 버린 정수를 return합니다. 풀이주어진 값을 조건에 따라 할인하고 그 값을 리턴해주면 되는것 같다. 삼항 연산자 사용 const solution = (price) => price >= 500000 // 50만원 이상일 때 ? Math.trunc(price * 0.8) // 원 가격의 80% (20% 할인) : price >= 3000..

작업물

사이먼 게임(기억력 게임) with PWA

https://mooky1007.github.io/simon_game/ Simon Game 기억력의 한계를 시험하십시오. mooky1007.github.io [38JS] #17 사이먼 게임 만들기에서 만들었던 요런 디자인을 좀 더 개선하고, 주변인의 피드백을 받아서 UI를 좀더 개선하고 이런저런 기능을 조금 더 추가해봤다. 타이틀도 넣고.. UI도 바꾸고 진동도 넣었다. 아 이슈가 하나 있었는데 클릭시에 진동을 넣고 싶어서 navigation 객체의 viverator? 를 사용했었는데 이게 아이폰계열에서 지원이 안되서 따로 예외 처리를 해줘야 하는듯.. 이건 또 처음알았네.. 그리고 사파리쪽에선 button::active css가 적용이 안되서 이래저래 바꿨는데 문제 출제중에도 계속 오류가 있었어가지구 ..

튜토리얼

[38JS] #17 사이먼 게임 만들기

사이먼게임만들기 38가지 자바스크립트&리액트 튜토리얼 결과물 https://mooky1007.github.io/simon_game/ Simon Game Let's Play Simon! Lv. 1 GAME OVER Collect! Score : 0 Best Score : 0 START mooky1007.github.io 현재 포스트의 완성본 HTML 삽입 미리보기할 수 없는 소스 작업개요 사이먼게임은 좀 생소해서 찾아보니까 4개의 버튼이 있고 순서에 맞게 불이 들어오고 나면 그 순서를 기억했다가 순서에 맞게 누르는 게임인거같다. 처음엔 1개 이후엔 2개, 3개, 4개, ... 이런식으로 점점 기억해야할 숫자가 늘어나고 속도도 조금씩 빨라지면 괜찮을것 같다. 지난번 가위바위보랑은 다르게 이건 내가 지금 몇점..

프로그래머스 코딩테스트

[프로그래머스] 공 던지기

문제 설명머쓱이는 친구들과 동그랗게 서서 공 던지기 게임을 하고 있습니다. 공은 1번부터 던지며 오른쪽으로 한 명을 건너뛰고 그다음 사람에게만 던질 수 있습니다. 친구들의 번호가 들어있는 정수 배열 numbers와 정수 K가 주어질 때, k번째로 공을 던지는 사람의 번호는 무엇인지 return 하도록 solution 함수를 완성해보세요. 제한사항2 < numbers의 길이 < 100 0 < k < 1,000 numbers의 첫 번째와 마지막 번호는 실제로 바로 옆에 있습니다. numbers는 1부터 시작하며 번호는 순서대로 올라갑니다. 풀이음.. 그러니까 [1,2,3,4,5] 이렇게 서서 1번은 3번, 3번은 5번, 5번은 2번 이런식으로 진행되는거 같다. 동그랗게 서서 한명 건너뛰고 패스한다고 생각하면..

FE Dev. 은옥
'분류 전체보기' 카테고리의 글 목록 (3 Page)