JavaScript 썸네일형 리스트형 zero base 환경 설정 https://velog.io/@kyusung/Vue-app-sfc-without-vue-cli [Vue] 개발환경 만들기 (without vue-cli) 원문: https://bit.ly/2E1zTUz 이 글은 번역한 내용이 아니라 원문 내용 공부할 목적으로 작성한 내용입니다🤣 일반적으로 Vue로 개발할 때, vue-cli를 사용하여 프로젝트 구조를 생성합니다. 아래 내용은 vue-cli를 사용하지 않고, vue 단일 파일 컴포넌트를 빌드하는 방법을 설명합니다. vue.js의 CDN을 사용하면 스크립트... velog.io arrow function의 this 자바스크립트에서 일반함수의 this의 경우 함수 호출 방식에 의해 this에 바인딩할 어떤 객체가 동적으로 결정된다. 다시 말해, 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되는것이 아니고, 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다. 콜백 함수 내부의 this는 전역 객체 window를 가리킨다. function Prefixer(prefix) { this.prefix = prefix; } Prefixer.prototype.prefixArray = function (arr) { // (A) return arr.map(function (x) { return this.prefix + ' ' + x; // (B) }); }; var pre =.. 리액트 LifeCycle componentWillMount() { // v16.3 이후부터는 UNSAFE_componentWillMount() 라는 이름으로 사용 console.log("componentWillMount"); } componentDidMount() { // 외부 라이브러리 연동: D3, masonry, etc // 컴포넌트에서 필요한 데이터 요청: Ajax, GraphQL, etc // DOM 에 관련된 작업: 스크롤 설정, 크기 읽어오기 등 console.log("componentDidMount"); } componentWillReceiveProps(nextProps) { // this.props 는 아직 바뀌지 않은 상태 console.log("componentWillReceiveProps"); } stati.. 리액트 16.3 Context API 파헤치기 출처 : https://velopert.com/3606 리액트 16.3 에 소개된 새로워진 Context API 파헤치기 | VELOPERT.LOG 3월말에 리액트 16.3 이 정식 릴리즈되면서, LifeCycle 몇개도 사라지고 (componentWillMount, componentWillUpdate, componentWillReceiveProps), 기존에 존재하던 Context API 가 새로워졌는데요, 이번 튜토리얼에서는 새로워진 Context API 에 대해서, 한번 자세히 다뤄보도록 하겠습니다. 프로젝트에 사용된 코드는 GitHub Repo 에서 확인 할 수 있습니다. 시작하기 Contex velopert.com 3월말에 리액트 16.3이 정식 릴리즈되면서, LifeCycle 몇개도 사라지고 .. 호이스팅 아래의 코드를 실행하면, onclick 안의 i는 6이 되기 때문에 onclick이벤트 시, i를 활용하지 못한다. window.onload = function() { var $wrap = document.getElementById('wrap'); var $nav = document.getElementsByTagName('nav')[0]; var $nav_li = $nav.getElementsByTagName('li'); var len = $nav_li.length; console.log(len); for (var i = 0; i < len; i++) { $nav_li[index].onclick = function() { $wrap.className = 'box' + index; for (var k = .. Reselect를 이용하여 React와 Redux 최적화하기 출처: http://guswnsxodlf.github.io/optimize-react-component-using-reselect Reselect를 이용하여 React와 Redux 최적화하기 React와 Redux를 같이 사용하면 서로의 관심사를 분리할 수 있는 좋은 조합이 된다. 하지만 어플리케이션이 복잡해질수록 설계를 제대로 해주지 않으면 성능은 떨어지기 마련이다. React에서 가장 시간이 오래 걸리는 작업 중 하나는 바로 렌더링 싸이클이다. 컴포넌트의 State... guswnsxodlf.github.io Reselect를 이용하여 Reactdhk Redux 최적화하기 React와 Redux를 같이 사용하면 서로의 관심사를 분리할 수 있는 좋은 조합이 된다. 하지만 어플리케이션이 복잡해질수록 설계.. HOC (Higher Order Component) 리액트 Higher-order Component(HOC) 코드를 작성하다보면, 자주 반복해서 작성하게 되는 코드들이 있다. 우리는 주로 그러한 것들을 함수화해서 재사용 하곤 한다. 컴포넌트 또한 비슷하다. 같은 UI 관련 코드가 재사용 될 수 있다면 우리는 컴포넌트를 만들어서 컴포넌트를 재사용한다.그런데 컴포넌트 기능 상에도, 자주 반복되는 코드들이 나타날 수 있다. 소프트웨어 개발 원리 중에서 DRY 라는 개념이 있다. - 같은 작업을 반복하지 마라 (Don't repeat yourself) 리액트 컴포넌트를 작성하게 될 때 반복될 수 있는 코드들은, HOC를 만들어서 해결해줄 수 있다. HOC는, 하나의 함수인데, 함수를 통하여 컴포넌트에 우리가 준비한 특정 기능을 부여한다. 직접 만들어볼 때 까지는.. Redux 폴더 구조 React와 Redux를 사용하는 프로젝트의 폴더는 크게 action폴더와 component폴더, reducer폴더, store 폴더로 구성된다. action 폴더 action 폴더는 애플리케이션에서 사용하는 명령어(action type)와 API 통신과 같은 작업을 하는 액션 매서드(action creator)를 모아둔 폴더다. 서비스에 따라 모든 명령어와 액션 메서드를 한 곳에 모아 두거나 도메인별로 구분해 나눠 놓기도 한다. // action type(명령어) export const COMPLETE_TODO = 'COMPLETE_TODO' // action creators(액션 메서드) export function complete({complete, id}) { return { type:.. 이전 1 ··· 7 8 9 10 11 12 다음