Persistence

useEffect Hook 사용하기 useEffect 훅은 함수형 컴포넌트에서 쓰이며 기존 클래스 컴포넌트의 라이프사이클 메서드들을 대체한다. 이를 정리하기 위해 간단히 라이프사이클 메서드를 설명하고, useEffect 훅의 효용을 적는다. LifeCycle Method - componentDidMount, componentDidUpdate 생명주기 메서드는 크게 두 종류이다. Will 메서드 : 어떤 작업이 실행되기 직전에 호출 Did 메서드 : 어떤 작업이 실행된 직후에 호출 생명주기 메서드에서는 Mount라는 단어가 등장하는데, 여기서 마운트는 리액트가 컴포넌트를 실제 DOM에 삽입한다는 것이다. (리액트는 가상DOM을 사용하니까) 예를 들어 componentDidMount는 컴포넌트가 실제 DOM..

리액트-리덕스 앱을 만들 때 고려해야 할 사항 폴더 구조를 어떻게 가져갈까(=컴포넌트를 어떻게 쪼갤까) 리액트만 사용한 경우의 케이스 페이스북 데모를 가정했을 때 크게 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) 브라우저에서 돌아가도록 한다. 예를 들어..

날짜 한 일 190725 도커 - 도커툴박스 설치, 이미지 및 컨테이너, 도커파일에 대한 이해 190727 프로젝트 셋업 - 파셀, 바벨, eslint, 프리티어 등 설치 - 번들러 글 정리 190729 리액트로 글 등록 및 조회, 댓글 등록 기능 구현 - 비슷한 기능이라서 코드 중복이 많이 되는데 어떻게 리팩토링 해야 할까? 190730 리액트 코드 리팩토링, styled-jsx 적용, n분 전으로 표현하는 기능 구현, 컴포넌트의 생명 주기 공부 - 훅스 사용해서 클래스 컴포넌트 바꾸기 - 생명 주기 활용하는 게 어렵다 190731 다른 분 리액트 코드 분석, HOC 아티클 읽기 - 리액트란 이렇게 논리적이었다는 것을 다른 사람의 코드를 보고 처음 깨달았다 190801 HOC 개념 정리 및 이해(조건부..

Docker 시작기(for Window7) Situation 학원컴퓨터는 윈도우7, 내 노트북은 OSX. 운영체제가 다르다 보니 맥북에서 작업하던걸 학원컴퓨터에서 실행하고 작업하려니 생기는 문제점들이 많았다. 처음에는 깃헙에 올리고 pull해서 쓰기만 하면 되겠지 싶었는데, 뭐가 뭔지 모를 에러가 나서 이럴 바에 도커를 시작해보자고 생각했다. 도커 툴박스 설치 및 이미지 pull docker for window가 있긴 하지만 윈도우 7에서는 사용할 수 없기 때문에, docker toolbox를 설치하였다. 설치하면 나름 귀여운 고래가 나온다. 시험 삼아 ubuntu 이미지를 pull 해보자. 4개의 이미지를 다운로드 받아 온다. docker pull ubuntu 그러나 docker images -a 하면..