본문 바로가기
[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: ..
[react] 리액트 컴포넌트 props로 데이터 전달 리액트에서 컴포넌트간 데이터 전달 방법, props에 대하여 알아보겠습니다. props 부모컴포넌트에서 자식 컴포넌트로 데이터 전달 방식입니다. props 사용방법 //컴포넌트 태그내 예제1. 반복문을 컴포넌트 분리 class 방식 태그의 반복되는 부분을 컴포넌트로 만듭니다. props를 이용하여 데이터를 전달합니다. 부모 컴포넌트 import React, { Component } from 'react'; import Fruit from './Fruit'; class Map extends Component { state = { fruits: [ {fruit: '🍉', color: 'green' }, {fruit: '🍓', color: 'red' }, {fruit: '🍊', color: 'orange' }..
[react] react의 반복문 map, 컴포넌트 사용법(ft. props) 리액트 반복문 map()의 사용법에 대하여 알아보겠습니다. · 리액트에서는 반복문을 map으로 사용합니다. · 자바스크립트에서 배열의 반복문에 사용하는 map() 입니다. · vue는 v-for를 통한 반복문을 사용하는데 반해, 리액트는 map()을 사용하여 제 생각에는 가독성이 떨어집니다. 예제1: 배열의 반복 import React, { Component } from 'react'; class Map extends Component { state = { fruits: ['🍉', '🍓', '🍊', '🍋', '🍌', '🍍', '🥭'], } render() { return ( {this.state.fruits.map((fruit) => { return ({fruit}) })} ) } } export def..
[react] 리액트 webpack 설정(ft. npm, babel, webpack.config.js) 리액트를 위한 webpack 설정 하는 법입니다. webpack을 사용하는 이유 수많은 자바스크립트 파일(컴포넌트)을 합쳐서 한개의 자바스크립트 파일로 만들어 관리하기 위함입니다. node 설치 자바스크립트 실행 도구 webpack을 사용하기 위해서는 사전에 node가 설치 되어있어야 합니다.(npm 자동 설치) webpack 설정 1. package.json 파일 생성 package.json 파일에 개발에 필요한 모든 패키지들이 dependencies, devDependencies(-D, 개발환경에서만 사용되는 라이브러리)에 포함됩니다. npm init 2. react, react-dom 설치 · react: 리액트 라이브러리 · react-dom: brower, dom 관리 · node_modules..
[react] 리액트로 구구단 게임 만들기(ft. hooks 방식, cdn 설치) 리액트 hooks로 구현한 구구단 게임 입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. Class 방식과 Hooks 방식의 비교 Class 방식과 Hooks 방식의 비교 · Class보다는 Hooks를 리액트에서 권장하고 있는 방식입니다. · Class보다 Hooks가 코드가 훨씬 간결합니다. · 모든 state를 쪼개서 선언합니다. · this.state, this.setState을 사용 안합니다. · ref를 React.useRef으로 문법을 사용합니다. · render() 함수 부분은 같습니다. · Class에서는 state가 변경될 때마다 render함수 내에서만 재실행되지만, Hooks에서 함수 전체가 재실행되기 때문에 속도가 더 느릴 수 있습니다. state..
[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.3) 자바스크립트를 이용하여 자스스톤 게임을 구현하는 예제(ver.3)입니다. - 카드세팅 리팩토링 - 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 리팩토링 중복되는 코드는 함수를 만들어 제거합니다. 딕셔너리 구조로 객체화 리팩토링 딕셔너리 구조를 위해서 변수를 상대 쪽 데이터/ 내쪽 데이터로 나눈 후, 객체화합니다. before const 상대영웅 = document.getElementById('rival-hero'); const 상대덱 = document.getElementById('rival-deck'); const 상대필드 = document.getElementById('rival-cards'); const 상대코스트 = document.getElementById('riv..
[js] 생성자, 카드세팅 (ft. 자바스크립트로 자스스톤 게임 구현 ver.2) 자바스크립트를 이용하여 자스스톤 게임을 구현하는 예제(ver.2)입니다. - 카드 세팅, 팩토리, 생성자 패턴 - 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 구현 내용 1 클릭한 일반(쫄병) 카드 덱에서 필드로 그대로 옮기기 indexOf(), splice(), 카드돔연결 함수 2 카드를 뽑을 때마다 카드 추가로 생성하기 일반카드 총 5개 유지 3 일반 카드를 뽑을 때마다 코스트 점수(시작:10)에서 차감 Number() 4 턴 넘기기(버튼 클릭 이벤트)와 턴 표시 5 턴 넘길 때마다 코스트 점수 10으로 충전 6 자기 턴에서 상대편 카드 클릭 방지 카드돔연결 함수 이용 7 필드에 올라간 이미 선택한 카드 클릭 방지 구현 화면 script 코드 const 상대영웅 = do..
[js] 팩토리, 생성자 패턴, 카드세팅 (ft. 자바스크립트 자스스톤 게임 구현 ver.1) 자바스크립트를 이용하여 자스스톤 게임을 구현하는 예제(ver.1)입니다. - 카드 세팅, 팩토리, 생성자 패턴, cloneNode() - 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 구현 내용 1 위쪽: 상대편, 아래쪽: 내편 2 상대편과 내편 각각 덱에 일반 카드 5개와 영웅 카드 1개씩 세팅 팩토리 패턴, 생성자 3 카드 속성: 공격력(att)과 체력(hp), 코스트(cost) 4 영웅카드: 공격력 낮고, 체력만 높고, 코스트는 없음 5 중복되는 부분 팩토리 패턴 함수로 처리 리팩토링 구현 화면 html 코드 코스트:10/10 턴 교체 현재 턴: 나의 턴 코스트:10/10 css 코드 #my, #rival { display: inline-block; vertical-al..
[js] 생성자 패턴/인스턴스(ft. this, 팩토리 패턴과의 비교) 생성자 패턴을 팩토리 패턴과 비교하여 알아보겠습니다. 생성자/인스턴스 객체지향 프로그래밍입니다. 객체를 생성하는 함수를 생성자(constructor) 함수라고 부릅니다. 함수 이름 첫 글자를 대문자로 표기하는 것이 규칙입니다. this, new를 사용합니다. new를 이용하여 함수처럼 호출합니다. 생성자 함수가 다른 언어의 class의 역할을 대신합니다. 팩토리 패턴 팩토리 패턴과 Object.create()를 이용하여 프로토 타입을 적용한 패턴 예제 let prototype = { type: 'friend', personality: function() { console.log('nice'); } } function friendMaker(name, age, job, sex) { let friend = O..
[js] 팩토리 패턴(ft. 프로토 타입, Object.create(), 코드 중복 방지 방법) 디자인 패턴 중, 팩토리 패턴에 대하여 알아보겠습니다. 객체에서 중복되는 코드를 팩토리 패턴을 사용하여, 코드를 줄이거나 제거할 수 있습니다. BEFORE let friend1 = { name: '박지수', age: 20, job: 'nurse', sex: 'female', type: 'friend', personality: function() { console.log('nice'); } } let friend2 = { name: '박지석', age: 39, job: 'cops', sex: 'male', type: 'friend', personality: function() { console.log('nice'); } } let friend3 = { name: '강주동', age: 16, job: 'pr..
[js] 자주 쓰이는 정규식(regular expression) 모음 (ft. 정규표현식) 자주 쓰이는 정규식 1. 암호 조건1. 6~20 영문 대소문자, 최소 1개의 숫자 혹은 특수 문자를 포함해야 함 /^(?=.*[a-zA-Z])((?=.*\d)|(?=.*\W)).{6,20}$/ 조건2. 8 ~ 10자 영문, 숫자 조합 var regExp = /^(?=.*\d)(?=.*[a-zA-Z])[0-9a-zA-Z]{8,10}$/; 조건3. 특수문자 / 문자 / 숫자 포함 형태의 8~15자리 이내의 암호 정규식 var regex = /^.*(?=^.{8,15}$)(?=.*\d)(?=.*[a-zA-Z])(?=.*[!@#$%^&+=]).*$/; 2. 이메일 /^[a-z0-9_+.-]+@([a-z0-9-]+\.)+[a-z0-9]{2,4}$/ 3. 핸드폰 /^010([0|1|6|7|8|9]?)-?([0-9]..
[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..
[vscode]비주얼스튜디오 유용한 플러그인 추천 최근에 가장 인기있는 코드 에디터, 비주얼 스튜디오의 대표적인 플러그인을 소개합니다. 비주얼 스튜디오 플러그인 리스트 Live Server : 정적 파일을 로컬 서버에 올리고 자동 갱신해주는 플러그인 Auto Close tag : HTML 태그 자동 닫기 플러그인 Material Icon Theme : 폴더 아이콘 테마 ESLint : 자바스크립트 문법 검사 플러그인 TSLint : 타입스크립트 문법 검사 플러그인 Prettier : 코드 Formatter 기능 Vetur : Vue.js 전용 플러그인 Material Dark Syntax : 코드 하이라이팅 플러그인 Live Server 가장 필수인 플러그인, 실시간 미리 보기입니다. Auto Close tag 자동으로 닫는 태그를 생성해줍니다. Mat..
[vue] vue.js props / emit 사용방법 일반적인 컴포넌트에서의 데이터 전달 방식인 props, emit의 사용방법을 알아보겠습니다. 구현 화면 코드 예제 폴더 구조 AppHeader.vue(하위 컴포넌트1) 상위 컴포넌트에서 제목을 props로 받아와 출력합니다. AppContent.vue(하위 컴포넌트2) 상위 컴포넌트에서 데이터를 받아와 리스트를 출력하고, 클릭하면 emit으로 상위 컴포넌트로 올라와서, 상위 컴포넌트에서 다시 메소드를 이용하여 변경된 데이터를 뿌려줍니다. //emit 방법 1 - method 통해 emit 처리 @click="method 이름()" //methods에서 this.$emit('emit 이름') 처리 //emit 방법 2 - 바로 emit 처리 @click="$emit('emit 이름')" App.vue(상위..
[vue] vue.js 리팩토링: 공통 컴포넌트화(api 통해 뉴스 사이트 구현 ver.7) 오픈 API를 통하여 블로그 형식의 뉴스 사이트를 vue로 구현하는 예제(ver.7)입니다. - 리팩토링, 공통 컴포넌트화 - 예제는 인프런의 캡틴 판교, "장기효"님의 Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념을 들으면서 공부한 내용입니다. 리팩토링 컴포넌트 공통화 페이지에서 사용되는 컴포넌트들의 패턴이 중복되어 사용되었을 때 이를 공통 컴포넌트화 시킴으로써 코드를 간편화, 구조화시킵니다. 구현 내용 각각의 페이지에서 사용되는 user information을 하나의 컴포넌트화 시키기 위한 작업을 합니다. 리팩터링 작업 · components > UserProfile.vue 파일 생성 · 기존의 ItemView.vue의 내용(위 오른쪽 UI)을 copy //기존 ItemView.v..
무료 이미지 배경 제거 사이트 추천(ft. 포토샵 없이 누끼따기) 이미지 작업할 때 꼭 한 번씩 하게 되는 누끼 따기. 무료로 누끼따기를 초간편하게 할 수 있는 사이트를 추천하겠습니다. 1. 배경 제거 사이트 removebg https://www.remove.bg/ko 이미지에서 배경 제거 – remove.bg 이미지 배경 제거: 클릭 한 번 없이, 5초만에, 100% 자동, 무료. www.remove.bg 제가 가장 애용하는 사이트입니다. 회원 가입조차도 필요 없이, 이미지 삽입 후 3초 안에 결과물(png 파일)이 출력됩니다. 사용방법 이미지를 드래그 앤 드롭 또는 파일 업로드를 합니다. 업로드 후 3초 만에 누끼 까기가 완성됩니다. 이미지 업로드를 클릭하면 바로 다운로드가 됩니다. 2. 배경 제거 사이트 background burnner https://burner..
[css] 수직 수평 가운데 정렬(ft. flex, align-items: center, justify-content: center;) css로 수직 수평 가운데 정렬하는 가장 간편한 방법입니다 css를 통하여 text-align: center 또는 margin: 0 auto 등을 이용하여, 수평 가운데 정렬을 하는 방법은 많이 알고 있지만, 수직 가운데 정렬하는 방법은 정확하지 않고, tricky 한 편입니다. 이때 간편하게 가운데 배치하는 방법이 display: flex 입니다. 수직 가운데 정렬 부모 또는 해당 요소 css display: flex; align-items: center; 예제 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam nulla, quaerat itaque, magnam tempora quam, voluptate eos rerum iste..
[css] reset css 기본값 코드(ft. 기본 css 세팅) 사이트를 제작할 때 css 작업 초기에는 reset css 자료를 꼭 찾게 됩니다. 기본 reset css 코드를 소개하겠습니다. Reset CSS 스타일 초기화를 위한 css 기본값 Eric Meyer’s “Reset CSS” 2.0 css 코드 /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q..
[vue] vue 리팩토링: 공통 컴포넌트화(api 통해 뉴스 사이트 구현 ver.6) 오픈 API를 통하여 블로그 형식의 뉴스 사이트를 vue로 구현하는 예제(ver.6)입니다. - 리팩토링 - 예제는 인프런의 캡틴판교, "장기효"님의 Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념을 들으면서 공부한 내용입니다. 리팩토링 컴포넌트 공통화 페이지에서 사용되는 컴포넌트들의 패턴이 중복되어 사용되었을때 이를 공통 컴포넌트화 시킴으로써 코드를 간편화, 구조화 시킵니다. 구현 내용 News/Ask/Jobs 각 페이지를 ListItem.vue에서 컴포넌트를 시킨 후 각각의 페이지에서 ListItem.vue를 import 시킵니다. 리팩토링 before vue > NewsView.vue {{ item.points }} {{ item.title }} {{ item.time_ago }}..
반응형

티스토리툴바