본문 바로가기
반응형

분류 전체보기126

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.
VS Code 플러그인 제가 쓰는 VS Code 플러그인 중에 자주쓰고 유용한 플러그인들을 올려봤습니다. 1. Night Owl 코딩테마인데 개인적으로 색이 이뻐서 쓰고 있습니다. one dark pro도 괜찮습니다. 2. htmltagwrap alt + w 를 누르면 감싼 텍스트에 태그를 추가할 수 있습니다. 굉장히 편리합니다. 3. Live Server 로컬서버를 열고 실시간으로 변경을 감지해서 리로드 해줍니다. 4. Material Icon Theme VS Code 좌측에 뜨는 아이콘 테마입니다. 한눈에 알아보기 편리하고 이쁩니다. 5. Highlight Matching Tag 선택한 태그의 여는태그와 닫히는 태그부분이 하이라이트 표시되어 나타납니다. 2019. 11. 4.
반응형

티스토리툴바