문제 설명프로그래머스 치킨은 치킨을 시켜먹으면 한 마리당 쿠폰을 한 장 발급합니다. 쿠폰을 열 장 모으면 치킨을 한 마리 서비스로 받을 수 있고, 서비스 치킨에도 쿠폰이 발급됩니다. 시켜먹은 치킨의 수 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가지 자바스크립트&리액트 튜토리얼 15번째, 이미지 슬라이더 만들기 이거는.. 이전에 리뷰 캐러셀 만들기를 그냥 누르면 바뀌는 건데 슬라이드로 만들어버려서.. 할까 안할까 했지만.. 리마인드 하는 느낌으로 조금 더 상세하게 설명하면서 진행하기로 했다. 이미지 슬라이더의 방식은 대체로 다 비슷비슷해서, 한번 익혀두면 요긴하게 쓸 수 있고, 기존 슬라이더들에 대한 이해도도 올라가서 좋을 것 같다. 작업 개요 이미지 슬라이더 구조의 핵심은 쭉 나열된 이미지와, 그 이미지가 보여질 칸이다. 쉽게 그림으로 설명해보면 저런식으로 쭉 나열된 이미지를, 틀에 맞춰서 이동 시켜 가면서 보여주면 된다. HTML 위의 구조를 html과 css로 작성을 해보면, // 틀 // 이미지 롤을 감싸는 d..
식료품 리스트 만들기 이번 튜토리얼 포스트 부터는 양식을 좀 바꿔보려고 한다. 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..
38가지 자바스크립트&리액트 튜토리얼 ★최종 결과물 HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 1. HTML Question 1 How to use this? Question 2 How to use this? Question 3 How to use this? Question 4 How to use this? 2. CSS .inner_body { display: flex; justify-content: center; align-items: center; width: 100%; min-height: 400px; padding: 50px 0; background: #222; font-family: 'Poppins', sans-serif; position: relative; ..
38가지 자바스크립트&리액트 튜토리얼 ★최종 결과물 HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 1. HTML Modal 컨테이너와 해당 모달을 작동시킬 button의 DOM에 data-moda-id 속성을 같게 맞춰주어 작동하게 함. html은 별다를거 없는데, 하단에서 클래스를 불러올때 modal_container 클래스를 가진 모든 DOM을 불러온 뒤, forEach매서드로 각각 객체를 생성했다. 생성 후, 생성된 개체의 data-modal-id를 얻어온 뒤, [data-modal-id=`${modalId}`] 셀렉터로 modal id가 맞는 모달의 버튼에 open() 이벤트를 달아주었다. Modal A Open Modal B Open Modal A modal a ..
38가지 자바스크립트&리액트 튜토리얼 ★최종 결과물 HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 1. HTML 저번 포스트에서 만들었던 반응형 네비게이션이 사이드바 형태여서, 이번엔 그냥 사이드바 DOM을 열었다 접었다 하는 간단한 사이드바 라이브러리 형식으로 만들어보려고 한다. js 셀렉터로 이용하는 class명과 css를 위한 class명은 분리하는게 좋을것 같아 side_bar, js-side_bar 로 나누었다. 또, 이번엔 객체 내부에서 버튼을 지정하지 않고 각 버튼에 직접 onclick 속성을 사용해보기로 했다. SideBar Open Home Product About Contact SideBar Close 2. CSS 사이드바는 사실 JS보단 CSS가 중요하..
38가지 자바스크립트&리액트 튜토리얼 38가지 자바스크립트&리액트 튜토리얼 웹서핑을 하다가 초보자를 위한 40가지의 자바스크립트 프로젝트라는 걸 보게 됐다. 딱히 할 것도 없으니 이거나 한번 리스트만 보고 쭉 해봐야겠다. 근데 바닐라 자바스크립트 쪽은 27개밖에 없 frontend-bear.tistory.com 최종 결과물 HTML 삽입 미리보기할 수 없는 소스 깃허브 결과물 보러 가기 HTML 💛Logo Home About Service Portfolio Contact 로고와 메뉴 영역으로 나뉜 간단한 구조로 작성했다. menu_close_btn, menu_open_btn은 css 상에서 기본적으로 숨김 처리를 해두었다. CSS header { width: 100%; border-bottom: 1px ..
38가지 자바스크립트&리액트 튜토리얼 38가지 자바스크립트&리액트 튜토리얼 웹서핑을 하다가 초보자를 위한 40가지의 자바스크립트 프로젝트라는 걸 보게 됐다. 딱히 할 것도 없으니 이거나 한번 리스트만 보고 쭉 해봐야겠다. 근데 바닐라 자바스크립트 쪽은 27개밖에 없 frontend-bear.tistory.com 최종 결과물 HTML 삽입 미리보기할 수 없는 소스 깃허브 결과물 보러 가기 HTML Best Reviews Review Title01 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1..
38가지 자바스크립트&리액트 튜토리얼 38가지 자바스크립트&리액트 튜토리얼 웹서핑을 하다가 초보자를 위한 40가지의 자바스크립트 프로젝트라는 걸 보게 됐다. 딱히 할 것도 없으니 이거나 한번 리스트만 보고 쭉 해봐야겠다. 근데 바닐라 자바스크립트 쪽은 27개밖에 없 frontend-bear.tistory.com 최종 결과물 HTML 삽입 미리보기할 수 없는 소스 깃허브 결과물 보러 가기 HTML 38JS - Counter Counter 0 decrease reset increase CSS body { display: flex; justify-content: center; align-items: center; width: 100%; height: 100vh; background: #222; } .conta..
38가지 자바스크립트&리액트 튜토리얼 38가지 자바스크립트&리액트 튜토리얼 웹서핑을 하다가 초보자를 위한 40가지의 자바스크립트 프로젝트라는 걸 보게 됐다. 딱히 할 것도 없으니 이거나 한번 리스트만 보고 쭉 해봐야겠다. 근데 바닐라 자바스크립트 쪽은 27개밖에 없 frontend-bear.tistory.com 최종 결과물 HTML 삽입 미리보기할 수 없는 소스 깃허브 결과물 페이지 보러 가기 HTML Color Flipper #f15025 click me CSS .container { display: flex; align-items: center; justify-content: center; flex-direction: column; width: 200px; height: 300px; padding: ..
웹서핑을 하다가 초보자를 위한 40가지의 자바스크립트 프로젝트라는 걸 보게 됐다. 딱히 할 것도 없으니 이거나 한번 리스트만 보고 쭉 해봐야겠다. 근데 바닐라 자바스크립트 쪽은 27개밖에 없네.. 바닐라 27 + 리액트 11 당분간은 포스팅 걱정 없을 것 같다 ㅎ_ㅎ 바닐라 자바스크립트 Color Flipper 만들기(완료) 카운터 만들기(완료) 리뷰 캐러셀 만들기(완료) 반응형 내비게이션 바 만들기(완료) 사이드바 만들기(완료) 모달 만들기(완료) FAQ 페이지 만들기(완료) 식당 메뉴판 만들기(완료) 비디오 배경 만들기(완료) 스크롤바를 따라 움직이는 내비게이션 바 만들기(완료) 서로 다른 내용을 보여주는 탭 만들기(완료) 카운트다운 시계 만들기(완료) 나만의 Lorem ipsum 만들기(완료) 식료..
[HTML, CSS, JS] 바닐라 자바스크립트로 MBTI 테스트 만들기(1) [HTML, CSS, JS] 바닐라 자바스크립트로 MBTI 테스트 만들기(2) [HTML, CSS, JS] 바닐라 자바스크립트로 MBTI 테스트 만들기(3) 에서 만든 10초 MBTI 테스트. 4가지의 유형에 대한 질문을 1개로 대폭 줄였다. 결과 페이지는 MBTI밈 + 팩폭 MBTI 분석글을 참조했다. 누군가의 기분을 빠르게 상하게 하고싶다면 추천! 10초 MBTI 검사 하러가기 귀차니스트들을 위한 10초 MBTI 0 질문 답변 A 답변 B mooky1007.github.io
※이번 포스트로 부터 나온 최종 아웃풋 https://frontend-bear.tistory.com/86 심리&성격&성향 테스트 사이트 [JS] 심리 테스트 페이지 만들기 - 1 [JS] 심리 테스트 페이지 만들기 - 2 [JS] 심리 테스트 페이지 만들기 - 3 위 포스트에서 만들었던 심리테스트 코드를 가지고 간단하게 SPA 심리&성격&성향 테스트 frontend-bear.tistory.com [HTML, CSS, JS] 바닐라 자바스크립트로 MBTI 테스트 만들기(2)에서 작성했던 js를 리팩토링 해보자. 작업 개요 코드 가독성 향상 및 반복해서 사용되는 내용 변수화 작업 가이드 및 사담 이벤트 리스너 함수들을 분리하여 가독성 향상 / 각 버튼에 대한 클릭 이벤트에 대한 처리를 별도의 함수로 분리 클..
※이번 포스트로 부터 나온 최종 아웃풋 https://frontend-bear.tistory.com/86 심리&성격&성향 테스트 사이트 [JS] 심리 테스트 페이지 만들기 - 1 [JS] 심리 테스트 페이지 만들기 - 2 [JS] 심리 테스트 페이지 만들기 - 3 위 포스트에서 만들었던 심리테스트 코드를 가지고 간단하게 SPA 심리&성격&성향 테스트 frontend-bear.tistory.com [HTML, CSS, JS] 바닐라 자바스크립트로 MBTI 테스트 만들기(1)에서 만들었던 객체를 이용해서, 이번엔 html 화면에서 직접 작동하게 만들어보자. 작업개요 이전 포스트에서 만들었던 PersonalTest객체와 html을 연결 시켜보자. 인트로, 테스트, 결과 페이지 구성 작업 가이드 및 사담 사실 ..
※이번 포스트로 부터 나온 최종 아웃풋 https://frontend-bear.tistory.com/86 심리&성격&성향 테스트 사이트 [JS] 심리 테스트 페이지 만들기 - 1 [JS] 심리 테스트 페이지 만들기 - 2 [JS] 심리 테스트 페이지 만들기 - 3 위 포스트에서 만들었던 심리테스트 코드를 가지고 간단하게 SPA 심리&성격&성향 테스트 frontend-bear.tistory.com 이번엔 바닐라 자바스크립트로 MBTI 같은 테스트 페이지를 만들어보자. 작업 개요 MBTI 테스트 처럼 OOOO 4가지로 구성된 결과가 나오는 테스트 객체를 이용해 만들어 확장성을 높인다. 작업 가이드 및 사담 PersonalTest 객체를 기반으로, 현재 진행상황, 선택된 값들의 정보 각각의 문항들을 만들고, ..
