우당탕탕 개발일지

RPG에서는 다양한 성장시스템을 통해 캐릭터를 강화한다. 이러한 효과들을 한데모아 관리하고, 실제 전투에 적용해야한다. IStatManager다양한 성장시스템을 통해 얻은 강화효과들을 한데 모아 관리하고, 전체 능력치 정보를 받아볼 수 있는 전체 매니저이다.효과는 총 3가지이다.FlatStatEffect : 단순한 스탯증가 효과이다. 아무런 조건이 없고, 전투와 상관없는 스탯증가이다.PersistentEffect : 전투중 효과. 조건이붙거나(a타입 무기 장착 시 공격력증가). 공격데미지 계산시, 이 이펙트먼저 적용된다.OneTimeEffect : 두번 더 때린다와 같이, 한번만 적용되어야하는 효과이다.효과를 적용할땐 StatModifier에 담아서 효과를 넣어준다.  StatModifier 어떤 강화내..

날짜를 표기하는 여러 포맷들이 있다.YYYY-MM-DD 나, YYYY년 MM월 DD일  등등.. 이런 다양한 날짜 포맷을 Date 형식으로 변환하는 작업이 필요했다. 이때 알게 된 것이 dayjs이다. 프로젝트에 dayjs를 설치한다.npm install dayjs 커스텀 날짜 포맷을 적용하여 Date로 변환하기 import dayjs from 'dayjs';dayjs.extend(customParseFormat); //여러가지 커스텀 포맷을 지원하기 위해 확장//변환포맷을 커스텀으로 여러개 설정해놓는다.date_formats = [ 'YYYY년MM월DD일', 'YYYY년M월D일', 'YYYY/MM/DD', 'YYYY-MM-DD', 'YYYY.MM.DD hh:mm:ss', ..

JS에서의 깊은복사, 얕은 복사를 공부해보자 . 그 전에, 구조분해할당과 spread 연산자를 알아보자.구조분해할당구조화 되어있는 배열, 객체와 같은 데이터를 destructuring 시켜서 각각의 변수에 담는것을 의미한다. //배열의 구조분해 할당.let arr = [1,2]let[one,two] = arrconsole.log(one,two) // 1, 2//객체의 구조분해 할당.//key와 변수이름이 동일해야한다.let obj= {name:"otter", gender:"male"};let {name, gender} = obj;console.log(name, gender) // otter, male값을 단순히 복사해서 넣는것이기 때문에 원본 데이터에 영향을 주지 않는다.let arr = [1,2]let..

!section 1.FreeCamp 강의노트프론트앤드와 백앤드의 이해프론트앤드웹 : HTML, CSS, JavaScript , Angular, Vue, React앱 : 코틀린(android) ,swift(ios), React native (cross) , 플러터 (cross)인터넷 브라우저 : html, css 로 작성된 파일을 유저가 보기 편하게 로드하는 역할을 한다.반응형 브라우저 : 유저의 해상도에 따라 UI구성이 달라지게끔 만들어진 브라우저.HTMLhtml 은Hyper Text Markup Language의 약자로,웹페이지에서 문서를 작성,조회,공유하기 위해 만들어진 체계이다.인터넷 브라우저는 이 html을 그려주는 도구이다.구역을 나누는 태그. block element로, 가로 전체를 차지한다...

추가))react-beautiful-dnd 로 구현을 끝냈을 때 계속 아래와 같은 warning이 나타났다. 실행하는데는 문제 없지만, 난 빨간색 로그를 굉장히 싫어하므로 없애고싶다. 이유를 검색해보니 현재 react-beautiful-dnd는  react-redux의 오래된 버전을 사용하고 있다고 한다. 그런데 beautiful-dnd 에서는 더이상 라이브러리를 업데이트하지않는다고.. 하기 때문에.. 다른 라이브러리로 바꾸는것이 좋겠다.. 사용할 것은 @hello-pangea/dnd 이다. 모든 동작은 beautiful-dnd와 동일하다 . 내용은 아래쪽에 수정해놓았다.  트렐로에서 사용하기만 했지 어떻게 만들지 생각조차 해보지 못했던... 드래그앤드롭을 구현해보도록 하겠다.  공식문서는 여기.. 이미..

공식문서https://tailwindcss.com/docs/installation Installation - Tailwind CSSThe simplest and fastest way to get up and running with Tailwind CSS from scratch is with the Tailwind CLI tool.tailwindcss.com  1. VSCode 에서 TailWindCSS IntelliSense 설치2. 프로젝트에 TailWindCSS 다운로드 및 init## 3가지 모듈 다운로드. -D 옵션은 개발에서 사용한다는 의미. -developmentnpm install -D tailwindcss npx tailwindcss init 3. tailwind.config.js 작성현..

React 에는 Class형 컴포넌트와 Funtional 컴포넌트 두 가지 종류가 있다. 두 가지 방법의 차이가 무엇이고, 어떤것을 더 많이 사용할까?? 클래스 컴포넌트는 코드가 복잡하고 속도가 느리지만 더 많은 기능을 제공한다. 이에 비해 함수형 컴포넌트는 코드가 간단하고 속도가 빠른 대신, 기능에 제한이 있었다.  어떤 기능의 제한이냐 하면, 아래의 생명주기를 이용할 수 없다는 극한의 단점이었다.  react의 생명주기는 위 그림처럼 Mouting, Updating, UnMouning 3단계로 이루어져있다. 처음 시작할때, 시작 한뒤 리렌더링할 때, 그리고 마운팅을 종료할 때 각각 알맞는 작업을 수행하고 싶을 것이다.  하지만 함수형 컴포넌트에서는 이 생명주기를 이용할 수 없었다. 그래서 성능이 더 ..

TodoList를 구현중이다. 이번 포스팅에서는 유저의 인터렉션을 통해 todoData 값을 변경시키고, UI를 갱신하는 작업을 할 것이다. 컴포넌트 안에서 데이터를 관리하기 위해 state를 사용한다.  더보기App.jsimport React, { Component } from "react";import "./App.css";export default class App extends Component { btnStyle = { color: "#fff", border: "none", padding: "5px 9px", borderRadius: "50%", cursor: "pointer", float: "right", }; getStyle = (completed) =>..