프론트엔드관련 책예제실습정리 (32) 썸네일형 리스트형 10 ES6 추가기능:객체리터럴확장 //ES6에서추가된 객체리터럴 확장 //1.프로퍼티와 키가 동이할때 프로퍼티 키 생략 { let x = 1, y = 2 let obj = {x,y} console.log(obj) //{x:1, y:2} } //2.계산된 프로퍼티 사용시 대괄호 { let prefix = 'prop' let i = 0; let obj = {}; obj[prefix + '-' + ++i] = i; obj[prefix + '-' + ++i] = i; obj[prefix + '-' + ++i] = i; console.log(obj) } //{prop-1: 1, prop-2: 2, prop-3: 3} //3.메서드축약표현 { const obj = { name:'lee', sayHello(){ console.log(`${this.n.. 유사배열객체 유사배열객체란 마치 배열처럼 인덱스로 프로퍼티에 접근 가능하며 length 프로퍼티를 갖는 객체를 의미한다. 문자열의 유사배열 객체의 대표적 예중 하나이며, 이터러블(이터러블 프로토콜을 준수한 객체, symbol.iteraator을 프로퍼티 키로 사용한 메서드를 구현하거나 체이닝을 통해 상속받은 객체를 의미)이므로 for문으로 순회도 가능하다. //유사배열객체 { let str = 'string'; console.log(str[0]); console.log(str.length) //6 console.log(str.toUpperCase()) //STRING //but 문자열은 원시값이므로 변경이불가하다. { let str = 'string' str[0] = 'S'; console.log(str) //str.. 10프로퍼티 추가 삭제 //프로퍼티 : 객체는 프로퍼티의 집합, 프로퍼티는 키와 값으로 구성 { let person = { name:'Lee', age:20 } console.log(person) } //문자열 또는 문자열로 평가할수 있는 표현식은 프로퍼티 키를 생성할때 동적으로 생성 가능 , 이 경우 프로프티 키를 대괄호로 묶어아햠 { let obj = {}; let key = 'hello'; obj[key] = 'world' console.log(obj) } { let person = { 'last-name': 'lee', 1:10, hello:'world' } person['last-name'];//lee person['1']//10 person['hello']//world } //key 값으로 빈문자열, 식별자네이밍규칙.. 10 일정관리웹어플리케이션만들기 01 1. create react-app으로 어플리케이션 설치 및 node sass,classNames,react-icons 설치(package.json) yarn create react-app todo-app / yarn add node-sass@4.14.1 classNames react-icons 2.prettier설정 src폴더에 component 디렉토리만들고 js파일들 추가 3.TodoTemplate.js import React from 'react'; import './TodoTemplate.scss'; const TodoTemplate = ({ children }) => { return ( 일정관리 {children} ); }; export default TodoTemplate; 4.App.js .. 09컴퍼넌트스타일링 CSSModule을 활용한 클래스네임적용, global css 작성 global css를 활용할 수 있으며, 두개 이상의 클래스 적용시 ${styles.클래스명}으로 표기한다. :global 대신 :local을 사용할 수도 있음 //CSSModule.moduel.css .wrapper { background: black; padding: 1rem; color: white; font-size: 2rem; } .inverted { color: black; background: white; border: 1px solid black; } :global .something { font-weight: 800; color: aqua; } 클래스목록이 많아질 경우 배열로 작성할수도 있다. //CSSModule.js import React from "react"; import styl.. 09컴퍼넌트스타일링 node-modules에서 라이브러리 불러오기(open-color, include-media) Sass 라이브러리 설치(open-color, include-media) $yarn add open-color include-media node_modules의 라이브러리 블러올시 내부경로 ~로 표기 768px media min 에서 background $oc-gray-9 로 변경 //utils.scss @import "~include-media/dist/include-media"; @import "~open-color/open-color"; $red: red; $orange: orange; $yellow: yellow; $green: green; $blue: blue; $indigo: indigo; $violet: violet; @mixin square($size) { $calculated: 32px .. 09컴퍼넌트스타일링 scss @import로 공통 믹스인 분리하기 utils.scss에서 선언한 변수와 믹스인을 SassComponent.scss로 import하기 /*utils.scss*/ $red: red; $orange: orange; $yellow: yellow; $green: green; $blue: blue; $indigo: indigo; $violet: violet; @mixin square($size) { $calculated: 32px * $size; width: $calculated; height: $calculated; } @import "./styles/utils"; .SassComponent { display: flex; .box { background: red; cursor: pointer; transition: all 0.3s ease-in;.. 08hooks/커스텀 hook만들기 useReducer를 활용하여 작성한 로직을 hook으로 커스텀하여 info컴포넌트에서 사용하기 //useInputs.js import { useReducer } from "react"; function reducer(state, action) { return { ...state, [action.name]: action.value, }; } export default function useInputs(initialForm) { const [state, dispatch] = useReducer(reducer, initialForm); const onChange = (e) => { dispatch(e.target); }; return [state, onChange]; } //info.js import Rea.. 이전 1 2 3 4 다음