개요 38가지 자바스크립트 튜토리얼에서 갑자기 뜬금포로 플랫포머 게임 만들기가 나와버려서.. 해당건은 진행 안하는걸루 ^^.. 포스트 한 5개분량은 써야될것 같아서, 추후 시간이 나면 진행하는걸로 결정했다. 그런고로 이번에는 요즘 회사에서 진행하는 프로젝트중 이벤트 페이지에 들어가는 룰렛 기능을 작업했었는데, 그 룰렛을 만드는 법에 대한 튜토리얼을 작성해보려고 한다. 역시나 완성본 링크부터 공유를 하고 시작을 하겠다. https://mooky1007.github.io/roulette/ Roulette mooky1007.github.io 아, 룰렛의 이미지는 그냥 구글에서 검색해서 아무거나 나온걸로 쓴건데.. 만약 문제가 된다면 댓글남겨주시면 바로 교체하도록 하겠습니다~ 이번 룰렛 개발 작업의 주요 요청 ..
개요 [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 =..
개요 그동안 신나게 자바스크립트로 이런저런 문제도 풀고 뭐 만들기도 하고.. 로직도 만들고 해봤으니 이제 그 자바스크립트로 실제 html 페이지를 조작해보자. 각각의 자세한 설명은 다른 포스트에서 하나하나 깊게 해보고, 이번 포스트에서는 그냥 간단한 CRUD(create, read, update, delete) - 즉, 생성, 읽기, 수정, 삭제를 해보자. 준비물 크롬 브라우저(다른 브라우저도 가능하지만.. 따라하려면 크롬으로) 인터넷 실습 환경 설정 우선 크롬 브라우저를 열어서 다음 포털을 열고, F12 혹은 Ctrl+Shift+i 키로 개발자 도구를 열고, "콘솔"탭을 눌러 아래와 같은 화면이 나오면 준비 완료. CRUD Create - 특정 요소를 생성해서 페이지에 추가해보기 사심을 담아 내 블로그..
개요 [작업물] 아코디언 라이브러리에서 만들었던 아코디언 라이브러리 튜토리얼. 이번 포스팅에선 조금 상세하게 튜토리얼을 작성해보자. 작업 세부 사항 우선 퍼블리셔들한테 익숙한 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 - ..
[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개, ... 이런식으로 점점 기억해야할 숫자가 늘어나고 속도도 조금씩 빨라지면 괜찮을것 같다. 지난번 가위바위보랑은 다르게 이건 내가 지금 몇점..
가위바위보 게임 만들기 작업개요 38가지 자바스크립트&리액트 튜토리얼 16번째, 가위 바위 보 게임 만들기 가위, 바위, 보 선택할 수 있는 버튼과 게임 스크린 정도만 있으면 될것 같다. random으로 나오는 부분과 게임성을 위해 약간의 애니메이션을 추가해보자. HTML 삽입 미리보기할 수 없는 소스 결과물 작업 에셋 구하기 일단 게임이니까 무료 이미지 사이트에서 가위, 바위, 보 이미지를 찾아보자. https://kr.freepik.com/ 딱히 마음에 드는게 없긴 한데.. 노란 피부 톤의 만화 손 제스처 컬렉션 | 무료 벡터 노란 피부 톤의 만화 손 제스처 컬렉션에 대한 이 무료 벡터를 다운로드하시고, 53백만 개 이상의 전문 그래픽 자료를 확인하세요. #freepik #벡터 #ok #손바닥 #손가..
이미지 슬라이더 만들기 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 만들기(완료) 식료..
※이번 포스트로 부터 나온 최종 아웃풋 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 객체를 기반으로, 현재 진행상황, 선택된 값들의 정보 각각의 문항들을 만들고, ..
