All Story
[ Database ] ER 다이어그램 / ERD 기호 및 표기법
데이터베이스를 다루는 과정에서 한 번쯤은 들어봤을 ERD. 이번 게시글에서는 ERD에 대해 다뤄보자. ERD ' Entity Relationship Diagram ' 흔히 E-R 다이어그램이라고 불리우며 ERD 라고 줄여 부르기도 한다. 영어 약자 그대로 '존재하고 있는 것(Entity)들의 관계(Relationship)을 나타낸 도표(Diagram)' 이다. 여기서 말하는 존재하고 있는 것이란 데이터를 뜻하니 데이터들의 관계를 나타낸 도표인 셈이다. 그럼 데이터의 관계를 어떻게 나타내는지 그림들을 참고해 이해해보자. 먼저 ERD의 규칙을 살펴보면 아래와 같다. A는 부모, B는 자식의 관계를 가진 ERD이다. 여기서 '~B로 구성되어 있다'라는 말이 살짝 헷갈..
[ Database ] IE 표기법과 BARKER 표기법 ( 참고용 )
바커 표기법 (Baker Notation) 영국 컨설팅 회사 CACI에 의해 처음 개발되었고 리차드 바커(Richard Barker)에 의해 지속으로 업그레이드 되었다. 오라클에서 Case Method(Custom Development Method)로 채택하여 사용하고 있다. 엔터티(Entity) 엔터티는 기업에서 지속적으로 저장하고 관리해야 할 대상이다. 하나의 관리 대상이 엔터티가 되기 위해서는 반드시 두개 이상의 속성을 가져야 한다. 속성이 없는 실체는 존재할 수 없으며 엔터티란 실제 세상에 있는 객체(Object)이다. 엔터티는 네 부분의 모서리가 둥근 형태인 소프트-박스(Soft-box)로 표현한다. 엔터티는 하나 이상의 속성으로 구성된다. 속성(Attribute) 속성은 하나의 엔터..
[ React ] 리액트 Material UI 사용해보기
Material-UI 란 리액트 개발에서 쉽게 사용할 수 있는 UI Framwork 이다. 엘리먼트들의 디자인부터 아이콘까지, 다양한 디자인에 대해 집중되어져있다. 이번 포스팅은 전 포스팅의 프로젝트에 Material Ui 를 적용해 보다 맛깔나게 만들어 보도록 하자. 먼저 Material Ui 를 설치해야한다. // yarn install yarn add @material-ui/core // npm install npm install @material-ui/core 사용법은 너무나도 간단하다. import 하고 그냥 사용하던 커스텀 마이징해서 사용하면 된다. 본 포스팅은 커스텀 마이징은 귀찮아서 하지 않았당 ㅎ. 먼저 가장 초기에 아무 style 이 걸려있지 않은 실행 화면은 다음과 같았다. 너무 못 ..
[ React ] 리액트 React-Hook-Form
만약 프로젝트에서 리액트를 사용한다면 아주 작은 사이즈의 프로젝트가 아닌 이상, 폼 양식을 사용하지 않는 프로젝트는 드물 것이다. 하지만 리액트만으로 Input Validation, Form Submit 등 폼 관리를 하기엔 너무 고단하다. 이러한 문제점을 위해 보다 적은 코드양으로 쉽게 작성할 수 있는 라이브러리가 존재하는데, 그것이 React-Hook-Form 이다. React-Hook-Form 을 사용하기 위해 아래와 같이 설치해야 함. yarn add react-hook-form 저번 포스팅에서 다루었던 BoardNew.js 컴포넌트를 위주로 훅 폼을 적용시켜 살펴본다. ( 현 포스팅만 봐도 무방하다. ) 먼저 기존의 BoardNew.js 코드는 아래처럼 되어있다. import React from..
[ React ] 리액트 Saga + Toolkit ( 미들웨어 사가, 리덕스 툴킷 )
지금껏 다룬 포스팅의 project 에 Middleware Saga 와 Redux Toolkit 을 적용시켜보자. 먼저 해당 포스팅에서 사용할 기능들을 설치하자. // Redux 와 React-Redux 설치 yarn add redux react-redux // Redux Toolkit 설치 yarn add @reduxjs/toolkit // 비동기 통신을 위한 axios 설치 yarn add axios // 미들웨어 Saga 설치 yarn add redux-saga // Json Server 설치 yarn global add json-server Directory 구조는 다음과 같다. src ┕ api ┕ posts.js ┕ component ┕ BoardList.js ┕ BoardNew.js ┕ co..