Day of Nomad

React 디자인 패턴 Container + Pressenter Pattern 소프트웨어를 디자인할때 function class를 작성하는 여러가지 패턴이 있다. 책도 많고, 디자인 패턴 종류도 여러가지 있다. 또 회사마다도 쓰는 패턴 종류도 각양 각색이다. CSS를 작성할때 BEM, smax 등 여러 이론과 방법론이 있는 것 처럼... 우선 개인적으로 가장 선호하는 패턴이자 많은 곳에서 쓰여지고 있는 Container presneter Pattern에 대하여 알아보겠다. Goal실습 목표! Call an API to get the latest blog posts. Show a 'loading' status in the meantime. When the call to the API is resolved,..

컨테이너와 컴포넌트의 차이점에 대해 공부해 봤습니다. booklist를 컴포넌트 대신에 컨테이너로 만들기로 결정했죠. 리액트와 리덕스는 아무런 접점이 없다는거 알고 계시죠? 데이터를 가지고 있는 어플리케이션 스테이트를 위한 리덕스와 실제 컴포넌트를 연결하기 위하여, 독립적인 라이브러리인 리액트-리덕스를 사용해야하는데요. 이를 통해 연결하게 되죠. 컴포넌트와 리덕스를 연결할 때마다 컴포넌트는 컨테이너로 변환되거나 사용을 원하는 방식의 컴포넌트로 변환이 됩니다. 자 그럼 이전에 만들었던 booklist 컴포넌트를 만들었는데요, 그러나 아직 어플리케이션 안에 사용하지 않았지요. app.js로 넘어가, 어플리케이션 안에서 렌더링이 되도록 해봅시다. // src/components/app.js import Rea..

요번에는 우리가 작성한 코드를 확인하고 실제로 사용가능한 state를 만들어 보겠습니다. 이를 리액트 안에 booklist 컴포넌트를 생성하면서 시작하겠습니다. 이 컴포넌트의 목적은 책 리스트를 랜더링하는 것입니다. // src/components/book-list.js import React, { Component } from 'react'; export default class BookList extends Component { renderList() { return this.props.books.map((book) => { return ( {book.title} ) }); } render() { return ( {this.renderLikst()} ) }} 6줄 : 책 리스트를 this,props ..

reducer란 무엇인가? 간단히 말하면, 리듀서는 어플리케이션 state를 반환하는 함수입니다. 왜냐하면, 어플리케이션은 많은 다른 스테이트를 가지고 있고 많은 리듀서를 가집니다. 이 어플리케이션 state는 책 목록과 현재 선택한 책 두개를 가지고 있습니다. 즉, 두개의 리듀서를 가지고 있는데요. 하나는 책 리스트를 만드는 것을 담당하고, 다른 하나는 현재 선택한 책을 만드는 것을 담당합니다. 다시 강조하면, 이 어플리케이션 state는 평번한 자바스크립트 객체 입니다. 약간 다른 다이어그램을 봅니다. 여기 어플리케이션 스테이트는 큰 오브젝트로 대변되며, 두개의 키를 가지고 있습니다. 두개의 스테이트는 books와 activeBook이죠. 이 books 스테이트는 book 리듀서에 의해 만들어지구요...

리덕스가 필요한 이유는?Why do we need it? Components have local state, but apps have global state.컴포넌트는 local state를 갖고 있고, 앱은 global state를 가지고 있기 때문이다. We need to save the shared state somewhere.state는 공유되어야 한다. 유저가 로그인 했는지 안했는지 여부를 모든 컴포넌트들이 알기를 원하기 때문. 따라서 해당 정보를 많은 컴포넌트에서 공유하고 싶다. 예를 들어, 좋아요 컴포넌트는 이를 댓글 혹은 네비게이션 컴포넌트에게 정보를 전달할 필요는 없다. 하지만 글로벌에서 유저가 로그인을 했는지는 안했는지 여부는 알아야한다. 이렇게 공유된 state를 저장하는 방법이 리덕..

리액트 네이티브란 무엇인가! 네이티브 웹 어플리케이션을 빌드하게 도와주는 UI 라이브러리리다. 리액트 네이티브는 html, css 어플리케이션을 생성하지 않는다. html, css앱을 만드는 아파치 코르도바, 아이오닉과 같은 것과 차이점은 이것은 네이티브라는 점이다. 즉, 이건 objective-c 이고, java 이다. 여기서 objective-c는 iOS를 위한거고, java는 android를 위한거다. 이것이 자바스크립트라서 네이티브라고 생각을 안하게 되는거 같다. 마지막 컴파일링 할때, 각각 iOS(object-c)/android(java) 네이티브 코드로 실행 된다. 리액트 네이티브는 어떻게 구동될까? 일단 JSX, 자바스크립트로 작성을 하고, 그 뒤에서 자바스크립트가 objective-c 혹은..

웹팩(Webpack)이란? 모던 웹 개발에 있어서 Webpack은 매우 중요한 도구중에 하나로 자리 잡았습니다. 웹팩은 우리의 코드를 변환시키는 역할을 합니다. 자세히 살펴보면 다음과 같은 4 가지 요소가 있습니다. 1. 첫번째는 entry. 이는 웹팩이 어디서부터 코드를 변환시키는지 알려줍니다. Entry: Tells webpack where to start. module.exports = { entry: "./path/to/my/entry/file.js'} 2. 두번째는 output. 변환이된 코드를 어디에 놓을지를 알려줍니니다. 변환이 끝난후에... Output : Where to put the finished code. const path = require('path'); module.export..