[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..
[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. 프로토 타입, 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] 피셔 예이츠 셔플, 알고리즘
피셔-예이츠 셔플 알고리즘에 대하여 알아보겠습니다. 피셔 예이츠 셔플(Fisher-Yates Shuffle) 알고리즘 값을 랜덤 하게 섞을 때 사용하는 알고리즘입니다. 로날드 피셔(Ronald Fisher)와 프랭크 예이츠(Frank Yates)가 만들어 피셔-예이츠 셔플이라고 합니다. 제로초님의 자바스크립트를 이용한 게임을 구현하면서 이 셔플을 알게 되었고, 랜덤 정렬이 필요할 경우마다 사용되므로 아주 유용한 알고리즘입니다. 저는 자바스크립트를 이용한 게임 야구, 로또 추첨기, 카드 뒤집기 게임에서 사용하였고, 음악 앱에서 음악 랜덤 플레이를 만들때도 사용한다고 합니다. 피셔 예이츠 셔플 예제 숫자 야구 //숫자뽑기 let candidate = [1, 2, 3, 4, 5, 6, 7, 8, 9]; let..
[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..
