개발야 기하하자

https://kr.vuejs.org/v2/guide/index.html

이 링크를 보고 Vue를 처음 시작해본다. 

Vue(/vjuː/ 로 발음, view 와 발음이 같습니다.)는 사용자 인터페이스를 만들기 위한 프로그레시브 프레임워크 입니다. 다른 단일형 프레임워크와 달리 Vue는 점진적으로 채택할 수 있도록 설계하였습니다. 핵심 라이브러리는 뷰 레이어만 초점을 맞추어 다른 라이브러리나 기존 프로젝트와의 통합이 매우 쉽습니다. 그리고 Vue는 현대적 도구 및 지원하는 라이브러리와 함께 사용한다면 정교한 단일 페이지 응용프로그램을 완벽하게 지원할 수 있습니다. 라고 명시되어 있다.

Vue는 특이하게 React와 Angular와 다르게 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 이 한줄의 Script면 Vue를 사용 할 수 있다.이점이 굉장히 신기했다.

그리고 바탕화면이나 원하는 폴더에 저장을 한다.

그러면 아래와 같이 생성될 것 이다.

이것을 열면 아래와 같이 나온다 ~ 

다른 Example Code들도 따라해보면서 천천히 익혀보자 !

text-decoration 은 선으로 텍스트를 꾸미게 해주는 속성입니다 !

• none : 선을 만들지 않습니다.
• line-through : 글자 중간에 선을 만듭니다.
• overline : 글자 위에 선을 만듭니다.
• underline : 글자 아래에 선을 만듭니다.
• initial : 기본값으로 설정합니다.
• inherit : 부모 요소의 속성값을 상속받습니다.

npm install --save styled-components 를 설치해줍니다.

Babel 플러그인 도 사용하는 것이 좋습니다 (필수는 아님) . 더 읽기 쉬운 클래스 이름, 서버 측 렌더링 호환성, 더 작은 번들 등과 같은 많은 이점을 제공합니다.

styled-components 는 태그가 지정된 템플릿 리터럴을 사용하여 구성 요소를 스타일링합니다.

컴포넌트와 스타일 사이의 맵핑을 제거합니다. 이는 스타일을 정의 할 때 스타일이 첨부 된 일반 React 컴포넌트를 실제로 생성한다는 것을 의미합니다.

이 예제는 래퍼와 제목이라는 두 가지 간단한 구성 요소를 작성합니다.

// Create a Title component that'll render an <h1> tag with some styles
const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;
// Create a Wrapper component that'll render a <section> tag with some styles
const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;
// Use Title and Wrapper like any other React component – except they're styled!
render(
  <Wrapper>
    <Title>
      Hello World!
    </Title>
  </Wrapper>
);

출처 : https://www.styled-components.com/docs/basics

http://fabricjs.com/

이구 

저는 사각형 원, 색 변경, 텍스트 추가를 하는 코드를 간단하게 구현해 봤습니다.

import React, { Component, ReactDOM } from 'react';
import {fabric} from 'fabric';  

class Fabrictest extends Component {

    width;
    height;
    canvas;
    text;
    fill;

    state = {
        winheight: 0,
        winwidth: 0
    }

    componentDidMount = () => { 
        this.canvas = this.__canvas = new fabric.Canvas('c');
        // create a rectangle object
        var rect = new fabric.Rect({
            width: 100,
            height: 100
        });
        // this.canvas.add(rect);
    }

    addRect = () => { 
        var rect = new fabric.Rect({
            width: 200,
            height: 200
        });
        this.canvas.add(rect);

    }

    onChange = (e, key) => {
        if(key === "text") {
            console.log('a');
            this.text = e.target.value;
         }
         else if (key === "fill") { 
             this.fill = e.target.value;
         } 
    }

    addCircle = () => { 
        var rect = new fabric.Circle({
            width: 500,
            height: 500,
            radius: 50
            
        });
        this.canvas.add(rect);
    }

    addText = () => { 
        var rect = new fabric.IText( this.text, {
            width: 500,
            height: 500,
            fill: this.fill
        });
        this.canvas.add(rect);
    }

    deleteObject = function() {
        this.canvas.getActiveObject().remove();
    }

    
    render() {
        return (
            <div>
                {/* <input type="text" name="width" onChange={(e) => this.onChange(e, "width")}/>
                <input type="text" name="height" onChange={(e) => this.onChange(e, "height")}/> */}
                <button onClick={this.addRect}>사각형</button><br />
                <button onClick={this.addCircle}>원</button><br />
                <input type="text" name="fill" onChange={(e) => this.onChange(e, "fill")}/> 
                <button onClick={this.addfill}>색 변경 </button> <br />
                <input type="text" name="text" onChange={(e) => this.onChange(e, "text")}/>
                <button onClick={this.addText}>텍스트 추가 </button> <br />
                <canvas id="c" width= "1000" height= "1000"  />

                
            </div>
        );
    }
    
}
export default Fabrictest;

결과값은

이렇게 색상도 바꿀 수 있고 원을 클릭 시 원이 생성되고 사각형을 클릭 시 사각형이 클릭됩니다.

색상은 #FFFFFF를 써도 상관없고 영어로 RED,YELLOW를 써도 됩니다

그리고 텍스트에 값을 넣고 추가하면 텍스트에 넣은 값이 생성됩니다!