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

식민사관의 비판 이전 글에서 식민사관에 대하여 숙지하고 보셔야 이해가 쉽습니다. 타율성론 비판 타율성론은 한국사의 전개과정이 외세에 의하여 결정되어 왔다는 것이다. 한국은 강력한 대륙국가인 중국과 남쪽에 해양국가인 일본과의 사이에 존재하는 반도국가라는 것이다. 사실 만주지방에 역사적 배경을 두었던 고조선을 비롯하여 고구려, 부여, 발해의 존재는 적어도 우리 역사를 반도사로 규정할 수 없다. 하지만 고려시대 이후 약 1000년 동안의 우리 역사는 반도사라고 볼 수 있다. 한마디로 지리적 결정론은 시대적인 상황논리에 불과한 것이다. 또 반도국가라 하여 모두가 외세의 힘에 휘둘린 역사를 갖지는 않았다. 일례를 들어 그리스나 로마는 어떻게 설명해야 하나. 특히 로마는 이탈리아반도를 배경으로 성장한 국가이다. 로..

식민사관의 잔재 우리는 종종 '식민사관의 잔재' 라는 용어를 접하며 살고 있다. 식민사관이 무엇이기에 해방된 지 반 세기가 훨씬 지난 오늘까지도 이와 같은 용어가 반복되고 있는지... 일제 강점기 때 핵창시절을 보낸 현재의 우리 할머니 할아버지세대는 학교 수업을 통하여 우리 민족에게 패배감과 열등의식을 심어준 식민사관을 교육 받았다. 반면에 해방 이후에 태어난 아버지 어머너 세대는 식민사관에 대한 내용이나 비판적인 교육을 받지 못하여 일본에 대한 적개심을 비이성적으로 노출하는 경우가 많이 있다. 예를 들어 한.일 축구경기가 열릴 때면 비이상적인 관심과 열광적인 응원전이 벌어지는 현상도 아마 이와 연관이 없지 않을 것 같다. 반면 오늘날의 우리 세대는 식민사관 자체에 대하여 그다지 관심이 없어 보인다. 나..

왜 담배인가 오늘날 주위에서 흔히 볼 수 있는 커피, 초콜릿, 술 담배 등은 현대인의 생활에 없어서는 안되는 중요한 기호품으로 자리매김하고있다. 일반적으로 '향기나 맛, 자극을 즐기기 위해 먹거나 마시는 것'을 의미하는 기호품은 시대와 문화에 따라 그 역할이 변화해 왓는데, 담배에 대한 인식 역사 마찬가지다. 한때 부와 지식의 상징으로 여겨졌던 담배는 현재 '건강'이라는 문제 앞에 그 의미를 상실하였다. '웰빙(well-being)'이라는 말이 각광을 받으며 키워드로 새롭게 ㄸ오른 오늘날, 이제는 담배가 더 이상 기호품으로서의 긍정적 효과보다는 가난의 상징, 각종 질병과 사망의 원인으로 현대인들에게 각인되면서 멀리해야 하는 부벙적 이미지로 정착되기에 이르렀다. 그러나 아직도 외부의 온갖 압력에도 불구하고..

컨테이너와 컴포넌트의 차이점에 대해 공부해 봤습니다. 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..