[react] 리액트 테이블 게시판 만들기 ver.2 (데이터 추가, 수정, 저장, hooks, form)
구현내용 · npm package: creat-react-app · css 라이브러리: tailwind · axios를 통한 서버 통신 · 테이블 형식의 게시판 구현 · 데이터 추가/수정/삭제 기능 추가 · 모달 팝업창 오픈 구현 화면 이전 시간에 이어서 폼을 삽입하여 새로운 데이터를 추가하고, 수정 버튼을 클릭하면 모달창을 띄워서 해당 데이트를 바로 수정하고, 저장하는 기능을 알아보겠습니다. 데이터 추가하기 onChange, onSubmit, spead 연산자/concat Form, input 태그를 사용하여 만들었고, input에 name, value, onChange 속성을 만들어 onChange 이벤트로 입력할때 마다 각각의 name 속성에 value 값을 넣어줍니다. Post.js (하위1 컴포..
[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..
