Persistence

리액트-리덕스 앱을 만들 때 고려해야 할 사항 폴더 구조를 어떻게 가져갈까(=컴포넌트를 어떻게 쪼갤까) 리액트만 사용한 경우의 케이스 페이스북 데모를 가정했을 때 크게 UI 상에서 Home과 Navigation으로 나눌 수 있다. Home 내부에는 일단 포스트를 등록하는 PostForm이 보여지고 있다. 또한 포스트를 등록하면 등록된 Post가 보인다. Post 내부에 뭐가 있는지 보면 코멘트를 입력할 수 있는 CommentForm과, 코멘트를 등록하면 보이는 Comment, CommentList가 있다. (개인 기호에 따라 Comment와 CommentList로 나눌 수도 있고 그냥 하나로 할 수도 있다.) Navigation 내부에는 페이스북 Logo, 로그인 된 상태에서는 Profile과 ''로그아..

HOC(High Order Component) 예제 HOC란 HOC란 리액트 컴포넌트를 아규먼트로 받아서 새로운 리액트 컴포넌트를 리턴하는 함수이다. 코드의 반복을 줄이고, 컨테이너 컴포넌트(비즈니스 로직 담당)와 presentational 컴포넌트(뷰 담당)를 분리하기 위한 목적으로도 쓰인다. 가짜 코드로 나타내면 이런 식이다. 기존의 컴포넌트를 받아서 향상된 컴포넌트를 리턴한다. const HOC = ReactComponent => EnhancedReactComponent; 기본적인 사용 형식 클래스 컴포넌트를 리턴하는 경우와 함수형 컴포넌트를 리턴하는 경우가 있는데 훅스 사용 때문에 함수형을 주로 사용할 것이기 때문에 함수형을 리턴하는 경우를 보면이런 식이다. 위 경우는 기존의 컴포넌트에 newPr..

CRA 없이 Parcel로 프로젝트 셋업하기(with yarn) 설치할 툴, 플러그인, 확장 프로그램 등 yarn prettier eslint, eslint-plugin-react, eslint-plugin-import babel/core, babel/preset-react, babel/preset-env, babel/plugin-proposal-class-properties parcel-bundler styled-jsx 프로젝트 디렉토리 생성(yarn 사전 설치 필요) package.json, yarn.lock 파일 등 생성 mkdir react-project yarn init -y 프리티어 설정(Code Formatter) yarn add prettier -D D 플래그로 devDependencies..

An unexpected error occurred: "https://registry.yarnpkg.com/: Not found"](https://github.com/yarnpkg/yarn/issues/5865#) 상황 윈도우 64bit에서 빌딩한 리액트 프로젝트를 깃헙에 올린 후 맥os에 pull하여 사용하려니 특정 패키지에 대한 에러가 남 해결 yarn을 최신버전으로 업데이트하는 것은 yarn self-update이고 yarn upgrade는 패키지를 최신버전으로 업그레이드하는 것임. 나는 babel-preset-env라는 특정 패키지 에러가 났으므로 yarn upgrade를 하였는데 디펜던시가 리빌딩되면서 해결됨.

The Bundler 번들러란 번들러란 웹개발자가 하위 툴 그룹을 관리하는 데 도움을 주는 도구. 플러그인을 사용하여 하위 툴을 관리하는 meta-tool이라고 생각할 수 있다. 번들러가 필요한 이유는 자바스크립트 모듈의 특성때문이다. 원래 브라우저에서는 모듈을 지원하지 않는다. (2017년부터 브라우저에서도 Import를 사용할 수 있지만 단순히 다른 경로의 자바스크립트를 불러오는 기능만 한다) 흔히 import, export 구문으로 모듈 시스템을 활용하는 것은 브라우저가 아닌 자바스크립트 런타임 Node.js 위에서 가능한 일이다. 이러한 기능을 브라우저에서도 사용하기 위해서는 번들러를 사용해야 하는데, 번들러는 이 모듈들을 하나의 파일로 묶어(bundle) 브라우저에서 돌아가도록 한다. 예를 들어..

[jQuery] .click event pass parameters 상황: 제이쿼리 사용해서 click 이벤트 설정 시 패러미터를 설정하고 싶었다. 잘못된 코드 1 // Wrong code ex1 var someword = 'blahblah'; function test(param) { alert(param); } $('#somebtn').click(test(someword)); 이렇게 하면 클릭 뒤에 콜백이 실행되는게 아니라 윈도우가 로딩되면 바로 함수 내용이 실행되버린다. 잘못된 코드 2 // Wrong code ex2 var someword = 'blahblah'; function test(param) { alert(param); } $('#somebtn').click({param: someword}..

리덕스 미들웨어 redux-promise 패키지를 설치하여 어플리케이션 안에 ajax 리퀘스트를 처리하도록 할 수 있다. ajax 를 사용하기 위해서 axios 라이브러리 사용한다.(제이쿼리는 너무 기능이 많아서) // WeatherReducer export default function(state = null, action) { console.log("Action received", action); return state; } 리덕스 미들웨어는 리듀서가 호출되기 전의 문지기 같은 역할을 하면서 액션을 잠깐 멈출 수 있다. 지금 만들어진 액션의 payload는 프로미스인데, 원래는 리듀서에 넘겨야 하지만 payload가 프로미스인 것을 확인하면 미들웨어가 프로미스가 resolved될 때까지 기다린 다음에..

this와 함수 Context 루비나 자바에서는 this는(루비에서는 self) 항상 메서드가 정의된 객체를 가리킨다. 예를 들어 Bar 클래스 내부에 foo 라는 메서드를 정의하면 this(또는 self)는 Bar 클래스의 인스턴스를 가리킬 것이다. 자바스크립트에서 function context는 함수가 정의될 때가 아니라 호출될 때에 정해진다. 이것이 자바스크립트가 다른 언어와 구별되는 큰 차이점이라고 한다.(나는 자바스크립트로 시작해서 잘 모르겠지만…) 호출된 함수의 컨텍스트를 정의하는 4가지 함수 호출 패턴이 있다. function invocation pattern method invocation pattern constructor invocation pattern apply invocation ..

Redux - BookList 예제 - 1. 컨테이너 만들기 Why Redux? 리액트에서는 스테이트에 접근하기 위해서 부모 컴포넌트로부터 자식 컴포넌트로 계속 props를 전달해야만 했다. 이 관계가 복잡해지고 멀어질 수록 스테이트가 어디서 어떻게 변화하고 있는지 파악하기 어려워지며 비효율적이다. 그러나 리덕스를 사용하면 스테이트에 접근하고자 하는 컴포넌트가 부모 컴포넌트를 통하지 않고도 직접 스테이트에 접근할 수 있게 해준다. 따라서 리액트에 스테이트 관리자인 리덕스를 추가하여 사용하면, 다음과 같은 장점을 누릴 수 있다. Predictable state updates - 데이터 플로우를 이해하기 쉽게 해준다 순수 함수인 리듀서를 사용함으로써 로직을 테스트하기 쉽다. (스토어라는 하나의 객체에 모든 ..

Why Redux? 리덕스는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너이다. 간단한 앱이라면 별도로 스테이트를 관리할 필요가 없을 수 있다. 하지만 컴포넌트가 많아지면 어떨까? A, B, C, D, E, F, G … 등 많은 컴포넌트가 있고, 이 중 G 컴포넌트에 있는 함수가 A 컴포넌트에 있는 상태 값에 영향을 준다고 하자. 컴포넌트가 어떻게 연결되어 있느냐에 따라 다르겠지만, 복잡한 경우 G 컴포넌트의 함수가 호출된 결과 값이 A에게 전달되기까지 많은 컴포넌트들을 불필요하게 거쳐야될 수 도 있다.그러나 리덕스가 있다면 앱이 지니고 있는 상태와, 상태 변화 로직이 들어있는 스토어를 통하여 컴포넌트 A에 직접 상태값과 함수를 주입해줄 수 있다. 즉 상태와 직접 관련이 없는 컴포넌트들을 거치게 되면..

jQuery의 Ajax API 참고 - Ajax란?(MDN 문서) 지원 API $.ajax() $.get() $.post() $.getJSON() $(응답받은 내용을 추가할 부모태그).load() $.ajax로 xml 파일 요청하기 // jQuery $(document).ready( function() { $.ajax('content/sample.xml', { success : function(data) { $(data).find('testxml').each(function() { $('body').append(""+$(this).find('name').text() + ''); $('body').append(""+$(this).find('age').text() + ''); $('body').append(..

HTML로 카드 만들기 - 1 구현하고자 하는 것 구현 기능 카드의 배경색 및 테두리색 지정 카드에 스티커 추가(드래그 앤 드롭 기능) 스티커 크기 선택 가능(S,M,L) Canvas API 사용 카드에 메세지 추가 컬러 및 폰트 크기 변경 가능 카드 세이브 및 읽어오기 기능 카드 지우기(백지화) 기능 Further Issues UI :) ... 전체 지우기 기능 말고, 바로 직전의 행동 삭제하는 기능 추가 기능별 Code 전체 코드 카드의 배경색 및 테두리색 지정 // javascript var bgBtn = document.getElementById("bgBtn"); var brBtn = document.getElementById("brBtn"); var canvas = document.getElem..

유튜브 Data API(v3)를 활용한 비디오 렌더링 video_list.js import React from 'react'; import VideoListItem from './video_list_item'; const VideoList = ({videos, onVideoSelect}) => { const videoItems = videos.map((video) => { return ( ) }) return ( {videoItems} ) } export default VideoList; 비디오 리스트 컴포넌트 구조 함수형 컴포넌트 스테이트가 필요없기 때문에 함수형 컴포넌트이다. 비디오 리시트 컴포넌트의 특이한 점은 VideoListItem으로 각 아이템을 보내기 위한 중간 역할을 한다는 것이다. vid..

유튜브 Data API(v3)를 활용한 비디오 렌더링 search_bar.js import React, {Component} from 'react'; class SearchBar extends Component { constructor(props) { super(props); this.state = { term: '' } } render() { return ( this.onInputChange(event.target.value)} /> ) } onInputChange(term) { this.setState({term}); this.props.onSearchTermChange(term); } } export default SearchBar; 서치바 컴포넌트 구조 클래스 컴포넌트 - 사용자가 search한 ..

유튜브 Data API(v3)를 활용한 비디오 렌더링 index.js import _ from 'lodash'; import React, { Component } from 'react'; import ReactDOM from 'react-dom'; import SearchBar from './components/search_bar'; import VideoList from './components/video_list'; import VideoDetail from './components/video_detail'; import YTsearch from 'youtube-api-search'; /* 보안상 이유로 비공개 */ const API_KEY = ''; class App extends Component..