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..

[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될 때까지 기다린 다음에..

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(..

유튜브 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..

render render: 컴포넌트를 html로 바꾸어 브라우저에 나타나게 하는 것 리액트의 컴포넌트는 클래스 기반, 함수형으로 나눌 수 있는데 클래스 기반 컴포넌트에서는 render함수를 반드시 호출해야 한다. import React, { Component } from 'react'; // destructing class SearchBar extends Component { // render 함수 호출 render() { return } } export default SearchBar; render함수는 위처럼 사용 한다. render() {} 컬리브라켓 안에 리턴이 있으며, 이때 반드시 JSX를 리턴해야만 브라우저에 보여진다. 상속받은 Component 는 destructing 한 것으..

Express.js const express = require('express'); const app = express(); app.get('/', (req, res) => { res.send("getting root"); }) app.get('/profile', (req, res) => { res.send("getting profile"); }) app.post('/profile', (req, res) => { const user = { name: "Sally", hobby: "soccer" } res.send(user) }) app.listen(3000); // port express는 한줄 한줄 읽어서 시행한다. 첫 번째 요청의 경우 get method를 사용하여 그 url을 요청할 경우 {} 안의..