song.log

1. margin / padding ? margin : 바깥쪽 여백 padding : 안쪽 여백 2. margin / padding의 사용법 1. 방향마다 각각 지정 margin-top:10px; margin-right:20px; margin-bottom:15px; margin-left:30px; padding-top:10px; padding-right:20px; padding-bottom:15px; padding-left:30px; 2. 상하 좌우 같을 때 (margin/padding: [상=하] , [좌=우]) margin: 10px 20px; margin: 0 20px; margin: 20px 0; padding: 10px 20px; padding: 0 20px; padding: 20px 0; 3...

1. React에서 FullCalendar를 사용할 때 필요로 한 모든 npm 설치 npm install --save @fullcalendar/react @fullcalendar/core @fullcalendar/daygrid npm install style-loader css-loader sass-loader node-sass --save 모든 모듈의 설치가 끝났으면 FullCalendar를 적용시키자. import React, { Component } from 'react'; import FullCalendar from '@fullcalendar/react'; import dayGridPlugin from '@fullcalendar/daygrid'; class MyCalendar extends Com..

버튼을 클릭하거나, 이벤트가 발생했을 때 태그의 readonly 속성을 없애는 방법을 알아보도록 하자. 태그의 id, class, name 별로 삭제하는 방법에 대해 알아보겠다.

본격적인 프로젝트에 앞서 Front-end(Client), Back-end(Server) 의 뼈대를 만들기 위해 틀을 만들어야 한다. React의 create-react-app과 Node.js의 미들웨어 'express', 'http-proxy-middleware'를 활용하여 연동해보자. 1. create-react-app 설치 npm install -g create-react-app create-react-app을 설치할 때 자동으로 설치되는 파일을 받기 위한 폴더에 다운로드 한다. create-react-app myexample 모든 다운로드가 끝나면 아래와 같이 자동으로 파일들이 생성 되어있다. 'npm start'로 리액트가 제대로 실행되는지 확인. 매번 리액트 작업을 확인하고자 할 때에는 'np..

1. User Snippets이란? 코딩을 할 때 반복적으로 작성해야하는 코드들이 분명히 있다. 이 반복되는 틀을 간편하게 불러오기 위한 기능이 User Snippets이다. VSCode에서 리액트의 컴포넌트 코드를 만들어주는 React Snippets Extension이라는 기능도 있지만, 단축어들을 파악해야하기 때문에 따로 User Snippets을 이용하여 전체 틀을 한꺼번에 불러와 약간의 수정을 해서 코딩할 수 있도록 하려 한다. 2. User Snippets 설정 File > Preference > User Snippets User Snippets를 클릭하면 새로 User Snippets를 만들어서 모든 영역에서 사용하도록 하는 방식과 현재 프로젝트에서 사용할 파일을 생성할 수 있도록 선택권이 ..

1. State 사용 state를 사용하기 위해서는 클래스형 컴포넌트가 기반이 되어야 한다. 기본 형태로는 아래와 같다. 1) state로 부모 컴포넌트 > 자식 컴포넌트로 값 넘겨주기 먼저 생성자에 state를 선언해주고 그 state 값을 렌더링할 때 사용할 수 있다. 또한 이 state 값을 자식 컴포넌트에게 넘겨준다면, 자식 컴포넌트는 이 데이터를 props를 통해 사용할 수 있게 된다. //부모 컴포넌트 Test import React, { Component } from 'react'; import TestChild from './TestChild'; class Test extends Component { constructor(props){ super(props); this.state ={ na..

1. JSX 란? JSX의 형태를 먼저 보면 HTML의 형태와 굉장히 유사하다. const element = Hello, world!; JSX는 자바스크립트 문법을 기반으로 한 자바스크립트 확장형 문법이다. 리액트 컴포넌트를 작성할 때 주로 사용된다. 2. JSX의 기본 규칙 1) 태그는 언제나 닫아줘야 한다. HTML에서 input태그를 사용할 때 닫아주지 않고도 사용이 가능했다. 하지만 JSX에서는 어떤 태그던지 모두 닫아줘야하는 규칙이 있다. 2) 두 개 이상의 element는 무조건 하나의 element로 감싸져있어야 한다. hello React 불필요하게 태그가 많아서 불편할 경우, Fragment 기능을 사용하면 된다 (v16.2부터 도입된 기능) import React, { Component..

1. Props와 State의 차이 Props: 먼저 Props는 Properties의 줄임말로 State와의 간단한 차이는 변할 수 없다는 것. 컴포넌트는 상속하는 부모 컴포넌트로부터 props를 받고 이 props는 상속받은 컴포넌트 내에서 수정이 불가능하다. 리액트에서는 부모 > 자식의 일방향성 상속이라는 특징 때문이다. props는 컴포넌트가 가지고 있는 다양한 값을 나타내기 위한 존재로 'this.props,xxx'로 나타낸다. - 읽기 전용 - 부모 요소에서 설정하는 것 - 초깃값과 자료형의 유효성 검사가 가능 State: State는 컴포넌트의 상태를 나타내며, props와 반대로 변할 수 있다. 컴포넌트의 내부에서 선언되기 때문이다. 이러한 state는 외부에 공개하지 않고, 컴포넌트가 스..