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일 때를 이용해 해당 배열에 원소가 포함 되어 있는지 체크했었는데 더 간결한 방법인것 같다. 딱히 사용 예제는 없다.
문제 설명 정수 배열 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의 길이..
indexOf() 배열과 문자열에서 사용할 수 있는 매서드로, 지정된 원소의 인덱스를 반환해 준다. 배열에 해당 인덱스가 없다면 -1이 반환된다. 구문 arr.indexOf(찾을 원소) arr.indexOf(찾을 원소, 검색을 시작할 위치) 사용예시 주요 기능과는 다르게 배열에 특정 원소가 있는지 없는지를 판단할 때 자주 쓰인다 -_-;; 물론 Array.includes()가 있긴 한데.. 음.. 왜 내가 공부할 때는 includes()를 안 썼지? 어쨌든.. 배열에 내가 원하는 값이 없을 경우 -1을 리턴해주는 특징을 이용해서 주로 해당 배열에 내가 찾는 원소가 있는지 없는지를 판단할 수 있다. const someArr = ["banana", "apple", "orange"]; someArr.index..
문제 설명 영어 점수와 수학 점수의 평균 점수를 기준으로 학생들의 등수를 매기려고 합니다. 영어 점수와 수학 점수를 담은 2차원 정수 배열 score가 주어질 때, 영어 점수와 수학 점수의 평균을 기준으로 매긴 등수를 담은 배열을 return하도록 solution 함수를 완성해주세요. 제한사항 0 ≤ score[0], score[1] ≤ 100 1 ≤ score의 길이 ≤ 10 score의 원소 길이는 2입니다. score는 중복된 원소를 갖지 않습니다. 풀이 주어진 이차원 배열에서, 평균값을 계산한 배열을 만든 뒤, 해당 배열에서 각 원소마다 자기 자신보다 높은 원소들의 갯수의 길이를 리턴해주면 될 것 같다. const solution = (score) => score .map(([eng, math],..
개요 자바스크립트로 뭔가를 하다보면 뭔가를 반복적으로 사용해야 할 일이 생긴다. 예를들어 콘솔에 "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"); 이렇게 쓰여질것이다. 물론 이건 뭔가.. 뭔가.. 나쁘진 않지만 뭔가.. 뭔가 무식해보인다. ( 가끔은 저게 먹..
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..
문제 설명 문자열 "hello"에서 각 문자를 오른쪽으로 한 칸씩 밀고 마지막 문자는 맨 앞으로 이동시키면 "ohell"이 됩니다. 이것을 문자열을 민다고 정의한다면 문자열 A와 B가 매개변수로 주어질 때, A를 밀어서 B가 될 수 있다면 밀어야 하는 최소 횟수를 return하고 밀어서 B가 될 수 없으면 -1을 return 하도록 solution 함수를 완성해보세요. 제한사항 0 < A의 길이 = B의 길이 < 100 A, B는 알파벳 소문자로 이루어져 있습니다. 풀이 음.. 원래대로라면 문자열을 배열로 바꿔서 이렇게 저렇게 하겠지만.. 이번엔 문자열 매서드를 이용해보자. 대략적으로 머릿속으로 먼저 구상해보면.. A를 오른쪽으로 한칸씩 밀면서 B랑 같아질때 까지 비교해보는데, 이때 move변수를 하나 ..
reduce()? reduce는 자바스크립트의 Array 객체에 내장되어 있는 매서드로, 개인적으로 가장 좋아하는 매서드중의 하나이다. 작동 방식은 기본적으로 2가지의 인자를 가지는데, 배열을 순환하면서 계속해서 들고갈 acc, 그리고 현재 원소인 cur을 갖는다. 쉽게 말하면, map()이나 filter()의 경우엔 각각의 원소들을 순회하면서 이전 원소나, 다음 원소에 대한 정보를 알기가 편하지가 않은데, reduce의 경우 acc에 다양한 형태로 배열을 순환하면서 생기는 결과값들을 저장 할 수가 있다. 리턴하는 결과값도 새로운 배열이 아닌 acc를 리턴하기 때문에 결과는 배열일수도, 객체일수도, 숫자일수도, 문자일수도있다. 가장 간단한 예로, [1,2,3,4,5] 라는 배열의 모든 원소의 합을 구할때..
짝수는 싫어요 문제 설명 정수 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] 심리 테스트 페이지 만들기 - 1 [JS] 심리 테스트 페이지 만들기 - 2 [JS] 심리 테스트 페이지 만들기 - 3 지난번 포스트에서 테스트 질문에 대한 점수를 누적해서 결과를 보여주는 페이지를 작업했었으니, 이번엔 MBTI처럼 특정 성향에 맞는 답변을 노출할 수 있는 페이지를 만들어보자. 🤗 이번 포스트로 이런게 만들어집니다. 🤗 HTML 삽입 미리보기할 수 없는 소스 우선 생각해봐야 할게, MBTI를 보면 E와 I와 S, F와 T, P와 J로 나뉘고 각각의 성향에 대한 질문을 총 합하여 조금 더 높은 쪽으로 보여준다. 즉 EI, SN, FT, PJ 에대한 각각의 질문들을 받아 총계를 내서 높은 쪽으로 내주는데.. 이때 문제는 문제가 짝수일때 딱 50:50으로 나뉘었을 때 무엇을 표시해 줄..
[JS] 심리 테스트 페이지 만들기 - 1 [JS] 심리 테스트 페이지 만들기 - 2 [JS] 심리 테스트 페이지 만들기 - 3 이전 포스트에서는 심리테스트에 들어갈 자료구조를 구성하고, 시작페이지랑 테스트 데이터가 연동되게 작업을 했었으니, 이번에는 "시작하기" 버튼을 눌러서 실제 테스트가 시작되게 만들고, 문제와 답변을 보여주고, 답변이 선택되면 답변마다의 점수가 카운팅 되면서 넘어가고, 다음 문제가 없을 경우 누적된 점수에 따라 결과페이지를 보여주는걸 한번 만들어 보자. 🤗 이번 포스트로 이런게 만들어집니다. 🤗 HTML 삽입 미리보기할 수 없는 소스 정리 테스트를 시작 할 수 있는 start() 매서드 만들기 답변을 골랐을때 다음 문제로 넘어가는 next() 매서드 만들기 다음 문제가 없을 경우 ..
[JS] 심리 테스트 페이지 만들기 - 1 [JS] 심리 테스트 페이지 만들기 - 2 [JS] 심리 테스트 페이지 만들기 - 3 개요 저번에 만들었던 MBTI 테스트는 각 성향별 질문을 하고, 성향에 맞는 결과페이지를 보여주는 방식이였는데, 심리테스트나 OOO테스트 이런것들 중에는 점수를 누적시켜서 점수에 따른 결과를 보여주는 방식과 주어진 질문들을 따라가서 (질문의 답변에 따라 다음 질문이 분기됨) 최종적으로 결과페이지가 나오는 방식이 있다. 물론 html 페이지를 여러장 만들어서 버튼마다 연결연결 시키는 방법도 있겠지만 전체적으로 자바스크립트로 라이브러리 형식으로 만들어보면 재밌지 않을까? 라는 마음에서 시작해서 등록을 쉽게 만들어서 심리테스트들이 모여있는 페이지를 만들어보는것도 재밌을거 같다고 생각..
사이먼게임만들기 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번 이런식으로 진행되는거 같다. 동그랗게 서서 한명 건너뛰고 패스한다고 생각하면..
문제 설명프로그래머스 치킨은 치킨을 시켜먹으면 한 마리당 쿠폰을 한 장 발급합니다. 쿠폰을 열 장 모으면 치킨을 한 마리 서비스로 받을 수 있고, 서비스 치킨에도 쿠폰이 발급됩니다. 시켜먹은 치킨의 수 chicken이 매개변수로 주어질 때 받을 수 있는 최대 서비스 치킨의 수를 return하도록 solution 함수를 완성해주세요. 제한사항chicken은 정수입니다. 0 ≤ chicken ≤ 1,000,000 풀이주어진 치킨 숫자를 주문하려면 쿠폰 포함해서 몇마리를 구하는 문제가 아니라 그냥 주어진 치킨 만큼을 시켰을때 서비스치킨의 수를 구하는 문제다. 한가지 추가 조건은 서비스 치킨을 시켜도, 10마리 마다 쿠폰 1장이 발급되는 파격 조건이 붙어있다. 즉 100마리를 시키면 -> 쿠폰 100장 -> 치..
가위바위보 게임 만들기 작업개요 38가지 자바스크립트&리액트 튜토리얼 16번째, 가위 바위 보 게임 만들기 가위, 바위, 보 선택할 수 있는 버튼과 게임 스크린 정도만 있으면 될것 같다. random으로 나오는 부분과 게임성을 위해 약간의 애니메이션을 추가해보자. HTML 삽입 미리보기할 수 없는 소스 결과물 작업 에셋 구하기 일단 게임이니까 무료 이미지 사이트에서 가위, 바위, 보 이미지를 찾아보자. https://kr.freepik.com/ 딱히 마음에 드는게 없긴 한데.. 노란 피부 톤의 만화 손 제스처 컬렉션 | 무료 벡터 노란 피부 톤의 만화 손 제스처 컬렉션에 대한 이 무료 벡터를 다운로드하시고, 53백만 개 이상의 전문 그래픽 자료를 확인하세요. #freepik #벡터 #ok #손바닥 #손가..
문제 설명 다음 그림과 같이 지뢰가 있는 지역과 지뢰에 인접한 위, 아래, 좌, 우 대각선 칸을 모두 위험지역으로 분류합니다. 지뢰는 2차원 배열 board에 1로 표시되어 있고 board에는 지뢰가 매설된 지역 1과, 지뢰가 없는 지역 0만 존재합니다. 지뢰가 매설된 지역의 지도 board가 매개변수로 주어질 때, 안전한 지역의 칸 수를 return 하도록 solution 함수를 완성해 주세요. 제한사항 board는 n * n 배열입니다. 1 ≤ n ≤ 100 지뢰는 1로 표시되어 있습니다. board에는 지뢰가 있는 지역 1과 지뢰가 없는 지역 0만 존재합니다. 풀이 function solution(board) { for(let y = 0; y < board.length; y ++){ for(let ..
문제 설명머쓱이는 행운의 숫자 7을 가장 좋아합니다. 정수 배열 array가 매개변수로 주어질 때, 7이 총 몇 개 있는지 return 하도록 solution 함수를 완성해보세요. 제한사항1 ≤ array의 길이 ≤ 100 0 ≤ array의 원소 ≤ 100,000 풀이const solution = (array) => array.join('').split('').filter(el => el === "7").length;array를 문자열로 바꾼 뒤, 다시 한글자 한글자인 배열로 바꾼 다음, filter로 7인것만 골라 다시 배열로 만든것의 갯수를 리턴. ex) [7, 77, 17] => 77717 => [7,7,7,1,7] => [7,7,7,7] => 4
문제 설명 문자열 my_str과 n이 매개변수로 주어질 때, my_str을 길이 n씩 잘라서 저장한 배열을 return하도록 solution 함수를 완성해주세요. 제한사항 1 ≤ my_str의 길이 ≤ 100 1 ≤ n ≤ my_str의 길이 my_str은 알파벳 소문자, 대문자, 숫자로 이루어져 있습니다. 풀이 const solution = (my_str, n) => { let count = 0; let result = []; while(true){ if(my_str.slice(count * n, (count * n)+n).length === 0) break; result.push(my_str.slice(count * n, (count * n)+n)); if(my_str.slice(count * n, ..
문제my_string은 "3 + 5"처럼 문자열로 된 수식입니다. 문자열 my_string이 매개변수로 주어질 때, 수식을 계산한 값을 return 하는 solution 함수를 완성해주세요.. 제한사항연산자는 +, -만 존재합니다. 문자열의 시작과 끝에는 공백이 없습니다. 0으로 시작하는 숫자는 주어지지 않습니다. 잘못된 수식은 주어지지 않습니다. 5 ≤ my_string의 길이 ≤ 100 my_string을 계산한 결과값은 1 이상 100,000 이하입니다. my_string의 중간 계산 값은 -100,000 이상 100,000 이하입니다. 계산에 사용하는 숫자는 1 이상 20,000 이하인 자연수입니다. my_string에는 연산자가 적어도 하나 포함되어 있습니다. return type 은 정수형입니..
식료품 리스트 만들기 이번 튜토리얼 포스트 부터는 양식을 좀 바꿔보려고 한다. 38가지 자바스크립트 & 리액트 튜토리얼의 14번, 식료품 리스트를 만들어보자. 간단한 CRUD를 경험해볼 수 있다. 작업 개요 1. 상단의 input 영역에 식료품명을 입력하면 하단에 리스트 형식으로 추가 되어야함. 2. 추가된 리스트는 수정 및 삭제가 가능해야 함. 3. 하단의 Clear items로 모든 리스트를 삭제 할 수 있어야함. HTML 우선 스크립트를 작성하기 전에 HTML을 작성해보자. 식료품 리스트 등록 임시 수정 삭제 제목과, 입력을 받을 수 있는 form, 그리고 등록된 리스트가 나올 ul로 구성했다. 여기서, 수정을 누르면 리스트 아이템의 p 부분이 input으로 변경되야 하므로 임시로 하나 더 추가해보..
38가지 자바스크립트&리액트 튜토리얼 ★최종 결과물 HTML 삽입 미리보기할 수 없는 소스 0. 작업 개요 몇가지 문장들을 넣어두고, 입력된 값에 따라 랜덤으로 문장들을 붙여서 더미 텍스트를 만들어내야함. 입력받은 만큼 배열에서 원소를 랜덤으로 추출 추출된 원소들의 문자열을 이어붙인 뒤 dom에 그려주기. 1. HTML Create 2. CSS css는 따로 안할 생각. - 3. JS 우선 그냥 애국가 1절을 더미텍스트로 부분부분 짤라서 넣은 뒤 작업해주었다. 그 뒤, amount 인자를 받는(input에 입력된) createRandomText 함수를 만들어 준 뒤, 빈 문자열 result를 변수로 선언해두고, amount만큼 반복문을 시행해서, Math.random 매서드를 이용해 dummyP 의 갯수..
38가지 자바스크립트&리액트 튜토리얼 ★최종 결과물 HTML 삽입 미리보기할 수 없는 소스 0. 작업 개요 카운트 다운 시계를 만들어보자. 1. 특정 시간만큼 1초마다 바뀌는 카운트 다운 시계. 2. 1초마다 현재시간에서 -1초씩 줄어들어야 함. 3. 0 이하로 안떨어지게 하기. 1. HTML 00 : 00 : 00 2. JS 간단하게, time 즉, 타이머가 작동될 시간(초)을 인자로 받는 함수를 만들어줄건데, 우선 document에서 미리 지정해준 시,분,초 DOM을 변수화 시킨 후, timer라는 함수를 새로 지정해줄껀데, 이함수는 실질적으로 입력받은 초를 시/분/초로 변경 후, 입력받은 time을 1내려주는 기능을 하는 함수이다. 이때 time의 값이 0 이하라면 return 시켜주도록 한다. 그..
38가지 자바스크립트&리액트 튜토리얼 ★최종 결과물 HTML 삽입 미리보기할 수 없는 소스 0. 작업 개요 이번엔 사이트 제작에서 국밥처럼 등장하는 탭에 따라 내용이 바뀌는 걸 만들어보자. 만드는 데에는 정말 다양한 방법이 있겠지만 기본적인 골자는 1. 각탭에 맞는 content영역이 존재하고, active, 혹은 on 등의 활성화 클래스가 붙을 경우에만 노출 2. 해당 탭을 클릭하면 해당 DOM만 active 상태가 되고 나머지는 숨김처리. 혹은 1. 각 탭이 눌릴때 마다 고정된 콘텐츠의 내용을 변경해 주기 각각 장단점이 있는데, 대표적으로는 전자는 연결되는 내용이 눈에 보여 유지보수가 용이하고, 후자는 코드가 짧아진다는 장점이 있다. 1. HTML // 미리 콘텐츠들을 만들어 두는 경우 tab01 t..
38가지 자바스크립트&리액트 튜토리얼 0. 작업 개요 스크롤을 할 때 항상 상단에 고정되어 있는 네비게이션 바를 만들어보자. 두가지 방법으로 진행해볼 예정이다. 1. CSS를 이용한 방법 2. JS를 이용한 방법 우선 CSS를 이용한 방식은 position : sticky, 혹은 fixed, 경우에 따라 absolute등으로 DOM의 위치를 띄우는 방식이 있는데, sticky 속성은 특정 top까지는 relative, 즉 고정적인 상태로 있다가 해당 top 영역을 넘어가는 순간부터 fixed속성처럼 화면 위에서 따라다니게 된다. fixed속성은 처음부터 화면을 기준으로 지정된 위치에 고정되있게 되는데, 이때 DOM의 영역을 실질적으로 차지하지 않아 콘텐츠가 덮이는 현상이 발생 할 수 있어 contetn ..
38가지 자바스크립트&리액트 튜토리얼 ★최종 결과물 HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 0. 작업 개요 영상으로된 백그라운드를 만들고, 해당 영역 내에서 재생과 정지를 컨트롤 할 수 있는 컨트롤러가 있어야 한다. 샘플영상으로 http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4 사용 예정. 1. HTML 백그라운드로 영상을 반복/자동 재생 하려면, autoplay 속성과 muted, 그리고 loop 속성을 추가하면 된다. Play Pause 2. CSS .video_section { width: 100%; height: 600px; position: relative; o..
38가지 자바스크립트&리액트 튜토리얼 ★최종 결과물 HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 0. 작업 개요 특정 리스트에서 버튼을 누를 시, 해당 버튼 카테고리에 맞는 리스트아이템만 노출되는 필터기능을 이용한 메뉴판 만들기. 라이브러리 형식으로 자바스크립트를 잘몰라도 간편하게 사용 할 수 있게 만들어보자. ex) 메뉴와 리스트 아이템에 data-filter 속성을 추가 한 뒤, 클릭 시 클릭된 메뉴의 data-filter 속성과 매치되는 list-item만 노출 되게끔 작업 진행 예정 1. HTML HTML을 작성하면서 JS 구조를 잠깐 생각해봤는데, filter-list가 같은 페이지 내에 여러개가 있을 경우 조금 꼬이거나 할것 같아서 전체를 감싸는 contain..
