전체보기 (286) 썸네일형 리스트형 리액트에서 자식을 포함한 엘리먼트 추가 방법 counter.jsx import React, { Component } from 'react'; class Counter extends Component { render() { // return되는 부모 엘리먼트는 하나만 올 수 있고 // 로 감싸주면 자식들을 넣을 수 있다. // 는 렌더링시 포함되지 않는다. return ( Hello World Button ); } } export default Counter; 비교 : https://thinkforthink.tistory.com/126 참고 : https://youtu.be/Ke90Tje7VS0?t=1902 다른 파일에 들어 있는 클래스 불러오는 방법 class를 만들다보면 하나의 파일로 묶어둘 필요가 있다. 여러 클래스를 한 데 모아 놓은 js 파일을 모듈이라고 부른다. 대신 모듈을 불러다 쓰려면 모듈에서 export를 해주고 받는 쪽에서 import를 해줘야 한다. // Human 클래스를 export export class Human { constructor() { } } // person 파일에 들어 있는 Human 클래스를 import import { Human } from './person'; class Student extends Human { } Spread Operator의 활용법 1. 둘 이상의 배열을 합칠 때 const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const arr3 = [...arr1, ...arr2]; 2. 배열을 깊은 복사할 때 const arr4 = [...arr1]; 3. 둘 이상의 객체를 합칠 때 const obj1 = { prop1: 1 }; const obj2 = { prop2: 2 }; const obj3 = { ...obj1, ...obj2 }; 4. 객체를 깊은 복사할 때 const obj4 = [...obj1]; node.js에서 텍스트 파일 불러오는 방법 const fs = require('fs'); fs.readFile('sample.txt', 'utf8', function(err, data) { console.log(data); // data에 sample.txt의 내용이 담긴다. }); CSS 트랜스폼을 이용한 트랜지션 예제 1. 버튼 div { width: 100px; height: 100px; background-color: mistyrose; transition-property: transform; transition-duration: 300ms; transform: scale(1); } div:hover { transform: scale(1.1); /* 마우스를 올려 놓을 때 크기가 부드럽게 살짝 커진다. */ } 2. 시계 div { width: 100px; height: 100px; position: relative; background-color: antiquewhite; /* 아래 정의한 keyframes를 가져온다. 여럿을 지정할 수도 있다. */ animation-name: rotate; animation-.. CSS 애니메이션 예제 div { width: 100px; height: 100px; position: relative; background-color: antiquewhite; /* 아래 정의한 keyframes를 가져온다. 여럿을 지정할 수도 있다. */ animation-name: move; animation-duration: 3s; animation-iteration-count: infinite; /* 반복 횟수 */ } @keyframes move { 0% { left: 0; } 50% { left: 300px; } 100% { left: 0; } } /* 아래와 같이 할 수도 있다. */ @keyframes move { from { left: 0; } /* 0에서 300px로 */ to { left: 300px; }.. CSS 트랜지션 예제 마우스를 올려 놓고 내릴 때 애니메이션을 주는 방법이다. div { width: 100px; height: 100px; background-color: mistyrose; /* width와 background-color에 transition을 준다. */ transition-property: width, background-color; /* 변화 속도를 지정한다. */ transition-duration: 1s, 2s; } /* 마우스를 엘리먼트 위에 올려 놓을 때 */ div:hover { width: 200px; background-color: honeydew; } 참고 : https://poiemaweb.com/css3-transition CSS 그라디언트 사이트 그라디언트 디자인 할 수 있는 사이트 https://www.colorzilla.com/gradient-editor/ 이전 1 ··· 24 25 26 27 28 29 30 ··· 36 다음
