본문 바로가기
[react] react로 가위바위보 게임 만들기 리액트 class/hooks로 구현한 가위바위보 게임 입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. client.jsx import React from 'react'; import ReactDom from 'react-dom'; import RSP from './RSP'; ReactDom.render(, document.querySelector('#root')); index.html RSP.jsx - class 방식(before 리팩토링) import React, { Component } from 'react'; //클래스 경우 -> constructor -> render -> ref -> componentDidMount // -> (setState/props 바뀔때..
[react] react로 반응속도 테스트 게임 만들기(ft. useRef, 조건문, spread 연산자) 리액트 class/hooks로 구현한 반응속도 테스트 게임 입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. client.jsx import React from 'react'; import ReactDom from 'react-dom'; import ResponseCheck from './ResponseCheck'; ReactDom.render(, document.querySelector('#root')); index.html ResponseCheck.jsx - class 방식 import React, { Component } from 'react'; class ResponseCheck extends Component { state = { screenState: 'wai..
[react] 리액트 끝말잇기 게임 만들기(ft. 컴포넌트 구조) 리액트 class/hooks로 구현한 숫자야구 게임 입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 구현 순서 순서 특이사항 컴퓨터가 랜덤 4자리 숫자 문제 제출 예시) 4385, 조건)겹치지 않는 4개 사용자가 답을 입력 입력한 답의 결과 발표 결과 발표: 홈런/스트라이크/볼 홈런) 숫자가 모두 일치할 경우 스트라이크) 자리수가 맞을 경우 볼) 자리수는 맞이 않으나, 숫자가 맞을 경우 답이 맞을때까지 10회 제한을 둠 파일 구조 client.jsx >NumberBaseball.jsx >Try.jsx client.jsx import React from 'react'; import ReactDom from 'react-dom'; import NumberBaseball f..
[react] 리액트로 끝말잇기 게임 만들기 리액트 class/hooks로 구현한 끝말잇기 게임 입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. client.jsx const React = require('react'); const ReactDom = require('react-dom'); const WordRelay = require('./WordRelay') ReactDom.render(, document.querySelector('#root')); WordRelay.jsx - class 방식 클래스 메소드를 무조건 화살표 함수의 문법을 사용합니다. const React = require('react'); class WordRelay extends React.Component { state = { word: ..
[js] react로 구구단 게임 만들기(ft. 클래스 방식, cdn 설치) 리액트 클래스로 구현한 구구단 게임 입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. class 방식 사용 방법 · state: 변하는 데이터는 state(변경 전 데이터)로 넣습니다.. · input의 입력될 value는 반드시 onChange 이벤트로 바꿔줍니다. · this.setState 사용방법: this.setState ({ 변경 후의 데이터 }) · html에서 class 속성 대신 className을 사용합니다. · html에서 label 태그의 for 속성 대신 htmlFor을 사용합니다. · setState는 비동기입니다. 리액트, 바벨 cdn 설치 간단한 예제는 cdn을 이용하여, react와 babel을 설치합니다. 리액트 구구단 게임 구현 html..
[js] 카드 공격 게임 완성 (ft. 자바스크립트로 자스스톤 게임 구현 ver.4) 자바스크립트를 이용하여 자스스톤 게임을 구현하는 예제(ver.4)입니다. - 게임 공격 세팅 - 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 구현내용 · 상대방의 영웅 또는 쫄병을 한번씩 공격하기 · 내 턴일때 카드 클릭 불가능 -> 클릭 가능하도록 변경 · 공격하여 상대방 카드 공격하여 제거하기 완성 코드 html 초록: 체력, 주황: 공격력, 적 영웅의 체력이 0이되면 영웅을 보호하기 위해 쫄병들을 코스트(우드색)내에서 뽑는다. 코스트:10/10 턴 교체 현재 턴: 나의 턴 코스트:10/10 css #my, #rival { display: inline-block; vertical-align: top; margin-right: 50px; } #my { margin-bott..
[js] 생성자, 카드세팅 (ft. 자바스크립트로 자스스톤 게임 구현 ver.2) 자바스크립트를 이용하여 자스스톤 게임을 구현하는 예제(ver.2)입니다. - 카드 세팅, 팩토리, 생성자 패턴 - 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 구현 내용 1 클릭한 일반(쫄병) 카드 덱에서 필드로 그대로 옮기기 indexOf(), splice(), 카드돔연결 함수 2 카드를 뽑을 때마다 카드 추가로 생성하기 일반카드 총 5개 유지 3 일반 카드를 뽑을 때마다 코스트 점수(시작:10)에서 차감 Number() 4 턴 넘기기(버튼 클릭 이벤트)와 턴 표시 5 턴 넘길 때마다 코스트 점수 10으로 충전 6 자기 턴에서 상대편 카드 클릭 방지 카드돔연결 함수 이용 7 필드에 올라간 이미 선택한 카드 클릭 방지 구현 화면 script 코드 const 상대영웅 = do..
[js] 자바스크립트로 카드 뒤집기 게임 구현하기(카드 세팅 ver.2) 자바스크립트를 이용하여, 카드 뒤집기 게임을 구현하는 예제(ver.2)입니다. - 기능 구현, 초기화 - 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 구현 내용 1 카드 2개씩만 오픈하도록 설정 2 카드끼리 색깔이 같은지 다른지 체크 3 같을 경우, 카드 계속 오픈 클릭 방지 4 틀릴 경우, 1초 후 카드 닫기 클릭 방지 5 클릭한 카드의 색깔이 같을 경우, 클릭한 카드를 완성 카드에 넣어줌 6 완성 카드가 모두 오픈 되었을 경우, 성공 메시지 출력 타이머 7 초기화 피츠예이츠 셔플 함수로 설정, 백업변수 구현 화면(성공 후) html 코드 script 전체 코드 const x = 4; const y = 3; //카드 뒤 색깔 7개 2개씩 미리 설정 let backColor..
[js] 자바스크립트 forEach() 사용법 자바스크립트 forEach 메서드의 사용법 입니다. forEach문 배열의 반복문 배열에서만 사용하는 메서드 배열의 처음부터 마지막 요소까지 반복하여 실행 인자로 콜백함수를 받아옴 주어진 콜백함수를 배열 요소 각각에 대해 실행 querySelectorAll() 전체 선택자를 이용하여 주로 사용 arr.forEach(callback(item, index, array) //참고로 마지막 인자, array는 forEach()를 호출한 배열로 거의 사용안함 forEach문 예제 const food = ['🍕', '🥨', '🥪', '🍔']; food.forEach(function(ele, index) { console.log(ele, index); }); //결과 🍕 0 🥨 1 🥪 2 🍔 3 food.forEac..
[js] 피셔 예이츠 셔플, 알고리즘 피셔-예이츠 셔플 알고리즘에 대하여 알아보겠습니다. 피셔 예이츠 셔플(Fisher-Yates Shuffle) 알고리즘 값을 랜덤 하게 섞을 때 사용하는 알고리즘입니다. 로날드 피셔(Ronald Fisher)와 프랭크 예이츠(Frank Yates)가 만들어 피셔-예이츠 셔플이라고 합니다. 제로초님의 자바스크립트를 이용한 게임을 구현하면서 이 셔플을 알게 되었고, 랜덤 정렬이 필요할 경우마다 사용되므로 아주 유용한 알고리즘입니다. 저는 자바스크립트를 이용한 게임 야구, 로또 추첨기, 카드 뒤집기 게임에서 사용하였고, 음악 앱에서 음악 랜덤 플레이를 만들때도 사용한다고 합니다. 피셔 예이츠 셔플 예제 숫자 야구 //숫자뽑기 let candidate = [1, 2, 3, 4, 5, 6, 7, 8, 9]; let..
[js] 자바스크립트로 카드 뒤집기 게임 구현하기(카드 세팅 ver.1) 자바스크립트를 이용하여, 카드 뒤집기 게임을 구현하는 예제(ver.1)입니다. - 카드 세팅 - 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 구현 내용 1 카드 세팅 총 14개의 카드(7개씩 2쌍) 2 css 스타일링 설정 카드의 앞과 뒤를 tranform을 사용하여 뒤집는 효과 3 클릭하여 카드 뒤집기 toggle 메서드 이용하여 flipped 클래스명 toggling 4 카드 뒷면 색깔 랜덤 설정 피셔 예이츠 방식을 이용하여 7가지 색깔 섞은 후 설정 구현 화면(카드 앞면/뒷면) html 코드 - 없음 자바스크립트로 구현하려는 것을 미리 주석으로 html으로 짜봅니다. css 코드 .card { display: inline-block; width: 70px; height..
[js] 자바스크립트 toggle 적용하기(ft. add, remove) 자바스크립트를 이용한 toggle 메서드의 사용을 알아보겠습니다. toggle() 토글이란, on/off switch의 개념으로 스위치를 켰다, 껐다 하는 기능을 가지고 있습니다. add()와 remove() 메서드를 한번에 쓸 수 있는 합쳐진 개념입니다. 보통 click 이벤트에 classList를 이용하여 toggle로 css로 style을 준 클래스명을 on/off 처리합니다. 참고: class 아니고, classList 입니다. 변수명.addEventListener('click', function() { 변수명.classList.toggle('클래스명'); }); add() 지정한 클래스 값을 추가합니다. 변수명.addEventListener('click', function() { 변수명.clas..
[js] 자바스크립트로 틱택토(심화버전) 구현하기 이전 포스팅에서 구현했던 틱택토 게임에서 업그레이드된 심화 과정입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 틱택토 구현 BEFORE 버전은 아래 포스트로 이동하세요. https://goddino.tistory.com/102 [js] 자바스크립트로 틱택토 구현하기 자바스크립트를 이용하여, 틱택토(Tic Tac Toe) 게임을 구현하는 예제입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 순서도 css 코드 순수 자바스크립트 코드 goddino.tistory.com 추가 구현 기능: · 컴퓨터의 턴(나의 턴: X/컴퓨터의 턴: O) · 무승부일 경우 자바스크립트 코드 컴퓨터의 턴 순수자바스크립트 코드(컴퓨터의 턴) let table =..
[js]자바스크립트 스코프, 클로저(ft. 지역/글로벌/렉시컬 scope) 스코프(scope) scope는 영어로 범위라는 뜻 함수 스코프는 자바스크립트 함수의 범위, 즉 { } 안을 의미 스코프는 함수 호출할 때가 아니라 함수선언할 때 생깁니다. 함수 선언도 변수와 같이 스코프의 적용을 받습니다. 스코프의 원칙 변수는 자신을 감싸고 있는 함수 밖을 벗어날 수가 없습니다. 스코프의 종류 전역 스코프(global scope) 전역에 선언되어있어 어느 곳에서든지 해당 변수에 접근할 수 있다는 의미 지역 스코프(local scope) 해당 함수 내에서만 접근할 수 있어 함수를 벗어난 곳에선 접근할 수 없습니다. 함수 스코프(function-scoped) 함수를 선언할 때마다 새로운 스코프를 생성하게 됩니다. 함수 범위 내에 선언한 변수는 해당 함수 안에서만 접근할 수 있는데 이를 함..
[vue] vue 클래스 바인딩(다이너믹 클래스, 객체, 배열, 토글, 스타일 바로 적용) vue.js에서 속성 바인딩으로 클래스를 적용하는 방법을 알아보겠습니다. 다이너믹 클래스(Dynamic class) 미리 클래스 이름에 스타일을 지정해 놓고, 조건에 맞추어 해당 클래스 적용시킬 때 사용합니다. 다이너믹 클래스를 적용하는 방법은 2가지입니다. 사용할 예제 {{ item.subject }} 화면 결과 v-for로 items에서 subject만 추출하였고, style 태그 안에, 클래스 done/important/ready의 이름과 스타일을 지정해 주었습니다. 다이너믹 클래스를 적용하는 방법은 객체와 배열의 방식이 있습니다. 하나씩 알아보겠습니다. 1. 객체(object) 객체 속성에는 클래스 이름, 값은 조건을 넣어 줍니다. v-bind:class="{ 클래스 이름: 조건 }" 예제 1) ..
[js] 자바스크립트로 반응속도 테스트 구현 자바스크립트를 이용하여, 반응속도 테스트를 구현하는 예제입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 순서도 특이사항 준비 화면 상태 일 때 랜덤 한 시간 후에 자동으로 테스트 화면으로 전환 setTimeout으로 Math.floor(Math.random()*1000): 0-1초 사이 랜덤 시간 이후 click() 자동 클릭 시킴 html 코드 Click to start css 코드 #screen { width: 400px; height: 300px; text-align: center; user-select: none; /*해당요소의 드레그, 더블클릭, 블럭지정을 막는다.*/ font-size: 20px; font-weight: bold; } #screen.waiti..
[js] 자바스크립트로 가위바위보 게임 구현하기 자바스크립트를 이용하여, 가위바위보 게임을 구현하는 예제입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. html 코드 바위 가위 보 css 코드 #computer { height: 250px; width: 140px; } 순수 자바스크립트 1. background 이미지 설정 const computer = document.querySelector('#computer'); let left = 0; //컴퓨터 결과 = left //0.15초마다 가위/바위/보 이미지 변경 setInterval(function() { if (left === '0') { left = '-100px'; } else if (left === '-100px') { left = '-270px'; } e..
[js] 자바스크립트로 로또추첨기 구현하기 자바스크립트를 이용하여, 로또 추첨기를 구현하는 예제입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 구현 순서 번호 순서 사용 메서드 1 45개의 후보 숫자 만들기 2 후보 숫자 랜덤으로 섞기 while문, Math.random(), splice() 3 보너스 숫자 뽑기: 섞은 배열의 마지막 요소 4 로또 숫자 뽑기: 섞은 배열의 앞에서 6개의 요소 slice() 또는 splice() 5 추출된 숫자 화면 출력 css, sort() 6 타이머 기능: 1초에 숫자 하나씩 출력 setTimeout 순수 자바스크립트 1. 45개의 후보 숫자 만들기 방법1. const candidates = []; for (i = 1; i v = i+1 ); //결과: (45) [1, 2, ..
[js] 자바스크립트로 틱택토 구현하기 (ft. e.target.value, forEach) 자바스크립트를 이용하여, 틱택토(Tic Tac Toe) 게임을 구현하는 예제입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 순서도 css 코드 순수 자바스크립트 코드 전체 코드 forEach() *** · 배열의 반복문 배열의 반복문 · 주어진 콜백함수를 배열 요소 각각에 대해 실행 · 콜백함수를 받아옴 const food = ['🍕', '🥨', '🥪', '🍔']; food.forEach(function(ele, index) { console.log(ele, index); }); //결과 🍕 0 🥨 1 🥪 2 🍔 3 food.forEach(function(ele) { console.log(ele); }); //결과 🍕 🥨 🥪 🍔 arrow 함수 표현 food.forEa..
[js] 자바스크립트로 숫자야구 게임 구현하기 자바스크립트를 이용하여, 숫자야구를 구현하는 예제입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 구현 순서 순서 특이사항 컴퓨터가 랜덤 4자리 숫자 문제 제출 예시) 4385, 조건)겹치지 않는 4개 사용자가 답을 입력 입력한 답의 결과 발표 결과 발표: 홈런/스트라이크/볼 홈런) 숫자가 모두 일치할 경우 스트라이크) 자리수가 맞을 경우 볼) 자리수는 맞이 않으나, 숫자가 맞을 경우 답이 맞을때까지 10회 제한을 둠 순수 자바스크립트(리팩토링 전) 순수 자바스크립트(리팩토링 후) 리팩토링 부분 다음 문제 내는 코드가 3번 반복되므로 이를 함수로 만들어 준다. function selectNumFn() { candidate = [1, 2, 3, 4, 5, 6, 7, 8, ..
[js] 자바스크립트로 구구단 구현하기(순수 자바스크립트/ vue.js) 자바스크립트를 이용하여, 구구단을 구현하는 예제입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 구현 방법 1. 순수 자바스크립트 2. vue.js 화면 결과 1. 순수 자바스크립트 2. vue.js 간단한 구현 내용으로 vue.js cdn을 설치하였습니다. 구구단 {{ num1 }} 곱하기 {{ num2 }} 는? //focus() 처리를 위하여 ref 사용 결과 {{result}} parseInt() String을 Number 타입으로 바꾸는 함수 입니다. 타입을 바꾸기 위해 Number() 또는 String()을 사용하기도 합니다. parseIng() 예제 parseInt("10"); // 10 parseInt("-10") // -10 parseInt("10.5")..
[js] 자바스크립트로 검색 기능 구현하기 form 에서 자주 사용하는 기능, 검색을 구현하는 법입니다. 화면 결과 html, css 수도: Australia Canberra Argentina Buenos Aires Austria Vienna Bahamas Nassau Belgium Brussels Canada Ottawa Chile Santiago China Beijing Cuba Havana Czechia Prague Denmark Copenhagen Ecuador Quito Egypt Cairo Finland Helsinki France Paris Germany Berlin Greece Athens Hungary Budapest India New Delhi script 코드 1) indexOf() function filter() { let ..
[js] fetch로 Ajax 통신 사용법(ft. json placeholder데이터 출력) jsonplacehoder의 fetch를 사용하여 ajax 통신으로 데이터를 요청하여 화면에 출력해 보겠습니다. 구현내용 · fetch API 이용하여 ajax 통신으로 user 정보 가져오기 · 자바스크립트를 이용하여 버튼 클릭시 name, email 화면에 출력 평소에 데이터 서버 기능 구현을 위해서 테스트용으로 많이 사용하는 JSONPlaceholder 사용법을 알아보겠니다. 사이트 이동 https://jsonplaceholder.typicode.com/ JSONPlaceholder - Fake online REST API for testing and prototyping When to use JSONPlaceholder is a free online REST API that you can use ..
[vue] vue 모달창, 다이얼로그 기능 구현하기(ft. slot) vue.js 가이드를 활용하여 모달창을 구현하겠습니다. 참고문서 vuejs.org/v2/examples/modal.html Modal Component — Vue.js Vue.js - The Progressive JavaScript Framework vuejs.org 위의 링크로 이동하여, html과 css의 코드를 그대로 나의 문서에 적용시키면 됩니다. 모달창 적용 방법 1. Modal.vue 의 파일(모달용 하위 컴포넌트)을 하나 생성합니다. 2. 상위 컴포넌트에 Modal 컴포넌트를 부릅니다.(import) 3. 가이드의 코드를 위의 컴포넌트들에게 적용합니다. 구현 화면 Modal.vue(모달용 하위 컴포넌트) default header default body default footer close ..
[vue] vue.js로 todolist 투두리스트앱 만들기(리팩토링 전) vue.js와 vue material을 이용한 간단한 todolist 앱을 만들겠습니다. (before refactoring) 예제는 인프론의 Vue.js 끝장내기 강의를 듣고 참조하여 공부한 내용입니다. Todolist 앱화면 구현 내용: · header, input, list, footer component로 분리 · Things To Do라는 input 박스에 해야할일을 기입 · 해야할일 기입 후 enter 또는 오른쪽 plus버튼 클릭시, 아래 리스트에 추가 · CLEAR ALL 버튼 클릭시 전체 삭제 · refactoring 전 구현이 미완성된 상태 · vue material을 이용한 css · localstorage를 이용한 데이터 저장/불러오기/삭제하기 기능 App.vue TodoHeader..
[vue] vue.js에서 axios 사용하여 서버 통신(vue material 테이블에 데이터 뿌리기) 간단한 예제를 통하여 vue에서 axios를 통하여 서버 통신 하는 법을 알아보겠습니다. axios란 · axios는 Vue에서 서버를 통신할때 사용하는 HTTP 통신 라이브러리 입니다. · axios는 자바스크립트 비동기 처리에 사용되는 객체인 promise를 기반으로 이루어졌습니다. · aixos는 오픈소스이므로 axios github를 통하여 자세한 내용을 확인할 수 있습니다. · 이와 비슷하게 jQuery에서는 ajax를 이용하여 데이터를 호출, 받아오고, 수정하는 작업을 합니다. axios 요청 방법 데이터 불러오기: axios.get(url[, config]) 데이터 입력하기: axios.post(url[, data[, config]]) 데이터 수정하기: axios.patch(url[, dat..
[vue] vue.js 컴포넌트 생성(컴포넌트로 쪼개기) vue.js 하위 컴포넌트 만들기 한개 이상의 페이지를 레이아웃 또는 기능별로 쪼개어 분리하고, 상위 vue 파일에서 통합 관리 하는 것을 컴포넌트화 라고 합니다. 순서 1. 폴더 안에 각 하위 컴포넌트 vue 파일 생성 2. 상위 컴포넌트(App.vue) script 내에 하위 컴포넌트로 import로 콜 3. export default, components 메소드 안, import한 하위 컴포넌트 export 처리 4. 상위 컴포넌트 template 태그내, 각 하위 컴포넌트 태그 삽입 이렇게 컴포넌트 작업이 완료되었습니다. main.js 파일을 확인해 보면, 각각의 하위 컴포넌트가 하나로 합쳐진 App.vue 파일이 import가 되어 아래 vue 인스턴스를 통하여 Virtual Dom 화면에 출력..
[vue] vue.js 기초 정리 요약(pass props/emit event) vue.js 기초 정리편 vue 공식 문서, 기술 블로그와 인프런의 vue.js 기초강의, Vue.js 시작하기 - Age of Vue를 듣고 참조하여 정리하였습니다. Vue.js 공식 문서 https://vuejs.org/v2/guide/ Introduction — Vue.js Vue.js - The Progressive JavaScript Framework vuejs.org Vue.js란? Progressive Javascript framework for buiding user interfaces and front-end applications Vue.js의 핵심 Reactivity (반응성) Vue의 가장 큰 특징으로서, 데이터에 대한 변화를 vue에서 감지하여 화면에 바로 반영합니다. 즉, 데이터..
반응형

티스토리툴바