TwentyTwentyOne

overview 리덕스의 action 과 reducer를 간단하게 정의해 놓았습니다. 이제 todolist 등록하고, delete하는 기능을 적용하기 위해 reducer를 수정해 줍니다. // src\Redux\TodoList\index.js const CREATE = "todolist/ADD"; const READ = "todolist/READ"; const UPDATE = "todolist/UPDATE"; const DELETE = "todolist/DELETE"; export const onCreate = (todoItem) => { return { type: CREATE, item: todoItem, }; }; export const onRead = () => { return { type: REA..

Overview Redux 는 기본적으로 액션 - 리듀서 - 스토어 - 상태 로 이루어져 있다고 이해하고 있다. 추가적으로 구독이나 디스패치, 미들웨어 등이 있다. 중요한 개념은 스토어에 등록된 리듀서에서 디스패치된 액션 타입 별로 상태를 변화 시켜 주는것으로 이해된다. 나는 Redux 디렉토리를 만들고 그 안에 Redux를 사용하는 프로젝트 별로 액션과 리듀서를 작성하고, CombineReducers를 index.js에 선언에 RootReducer를 Export하는 방식으로 사용할 계획을 가지고 시작한다. 1. 디렉토리 및 파일 만들기 src 디렉토리에 Redux 를 디렉토리를 만들고, 그안에 TodoList 디렉토리를 만들어 준다. 각각 index.js 파일을 만들어 준다. 그리고 webpack.co..

Overview 리액트 관련 프로젝트에서 많이 사용하는 상태 관리 라이브러리로서 Redux(리덕스)를 사용해 보면서 정리하는 글을 작성해 보고자한다. 간단한 Todo List의 상태를 Redux로 상태 관리하는 것을 통해 정리해보고자한다. 먼저, Dummy data를 통해 초기 페이지 UI를 간단하게 만들어 본다. Todo List UI 세팅 1. Data Structure TodoList에 필요한 데이터는 아이디 , 제목, 내용, 생성날짜,완료 체크 이다. 추후에 추가될수도있지만, 우선은 이포맷으로 더미 데이터 3개 정도를 만들어 준다. // ./data.js export const dummy = [ { id: 1, title: "블로그 작성", contents: "리액트 블로그 작성하기", done:..

[Project][SVG] Text를 그려보자!SVG 에는 text 태그를 이용해 원하는 text를 표현할 수 있습니다.x,y 속성을 통해서 위치를 정하고, textAnchor 나 alignmentBaseline 등으로 text를 좌표기준 정렬 시킬수 있습니다. https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text 전체 코드 // src\project\s\svg\components\text.js // modules import React, { useRef, forwardRef, useEffect, useState } from "react"; const Text = forwardRef(({ x, y, children, config = {} }, re..

[Project][SVG] Arc 를 그려보자! SVG 로 Arc를 그리기 위해서는 path를 사용해야합니다. path의 d 속성에는 여러개의 명령어가 있는데, 그중 M 과 A 를 이용해 그려보는 react 용 Arc Component를 만들어 봅니다. https://developer.mozilla.org/ko/docs/Web/SVG/Tutorial/Paths A 명령어 원호를 그릴수 있는 명령어인 A는 A rx ry x축-회전각 큰-호-플래그 쓸기-방향-플래그 x y 로 이루어져있습니다. rx 는 x축 반지름 ry 는 y축 반지름 입니다. 큰-호-플래그 는 180도를 기준으로 중심각을 결정합니다. M 명령어 M 명령어는 Move To 호를 그릴 시작 좌표를 지정해줍니다. Arc Components Ar..