본문 바로가기
반응형

분류 전체보기127

Styled Components Styled Components를 사용하면 Sass를 따로 설치하지 않고도 사용할 수 있고 클래스명 없이도 스타일을 작업할 수 있다. 설치 : npm install --save styled-components import React, { Component, Fragment } from "react"; import styled, { createGlobalStyle } from "styled-components"; const GlobalStyle = createGlobalStyle` body { padding: 50px; margin: 0; background: pink; } `; class App extends Component { render() { return ( Hello Hello go to Goo.. 2019. 12. 8.
smart component, dumb component 리액트에서 컴포넌트를 정의할때 es6의 class문법을 사용합니다. 컴포넌트에서 라이프사이클을 사용해야 하거나 state를 사용해야 할때는 꼭 이렇게 사용해야합니다. 이것을 Smart Component 혹은 Container라고 부릅니다. import React, { Component } from 'react'; class App extends Component { render() { return ( Hello {this.props.name} ); } } export default App; 라이프사이클을 사용할 필요가 없거나 state도 사용할 필요가 없고 단순히 렌더만 해줘야한다면 아래처럼 컴포넌트를 만들 수 있습니다. import React from 'react'; function App(props).. 2019. 12. 2.
ES6 향상된 객체 리터럴 var test = { word: 10, // ES5 look: function(){ console.log('ES5') }, // ES6 look(){ console.log('ES6') }, // ES5 image: image, // ES6 image } 기존에 객체에 함수를 만들때 look: function(){ ... } 와 같이 만들었지만, ES6에서는 function 을 생략하고 look(){ ... } 처럼 축약해서 만들 수 있습니다. 또, 객체에서 속성과 값이 같으면 한개는 생략하고 사용할 수 있습니다. 2019. 11. 24.
slot 으로 재사용하기 slot은 vue의 좋은 기능중 하나로 컴포넌트를 재사용하기 굉장히 좋습니다. Vue 공식사이트의 모달 컴포넌트를 가져온 코드입니다. https://kr.vuejs.org/v2/examples/modal.html 모달 컴포넌트 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org default header default body slot에 name을 정의하고 상위 컴포넌트에서 재사용하고 내용을 재정의 할 수 있습니다. 경고!! 내용을 입력하세요. 2019. 11. 22.
jQuery로 간단한 todo 만들기 제이쿼리로 투두리스트 간단하게 만들어봤습니다. 인풋박스에서 텍스트 작성하고 엔터치면 리스트 추가되도록 했습니다. jQuery Todo List 청소하기 checkdel 장보기 checkdel 공부하기 checkdel 쇼핑하기 checkdel clear * { margin: 0; padding: 0; list-style: none; text-decoration: none; color: #333; text-align: center; box-sizing: border-box; } #main { padding: 30px 20px; margin: 0 auto; width: 500px; background: #ddd; } h1 { padding: 0 0 20px; color: #fff; } ul li { displ.. 2019. 11. 14.
CSS, JS 캐시 방지 유지보수를 하다보면 css/js 수정할 일이 있는데 파일을 수정하고 배포하면 캐시때문에 기존에 css/js가 남아있다. 파일의 이름을 바꿔도 되지만 해당파일을 불러오는 부분까지 수정해야하기 때문에 번거롭다. 위에서 ?v=1.2 이라고 파일명 뒤에 쿼리스트링을 붙여주었다. css를 수정한 후, 번거롭게 파일명을 바꾸는 대신 v 값만 다르게 주면 다른 URL로 인식되기 때문에 캐쉬된 파일이 사용되는 것을 방지할 수 있다. 2019. 11. 11.
반응형

티스토리툴바