Persistence

콜백함수와 프로미스의 차이 function add10(a, callback) { setTimeout(() => callback(a+10), 100); } add10(5, res=> { console.log(res); }) // 15 function add20(a) { return new Promise(resolve => setTimeout(()=>resolve(a+20), 100)) } add20(5).then(console.log); // 25 add20(5).then(add20).then(console.log); // 45 프로미스의 가장 중요한 특징은 콜백함수와 달리 결과를 값으로 받아 저장할 수 있다는 것이다. 프로미스를 받아 then으로 이어 또 다른 작업을 할 수 있기 때문에, 코드도 간결해질..

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

Cheerio로 cgv 웹 크롤링(키워드 찾기) 알라딘 4dx를 예매하려고 크롤링 튜토리얼을 해보았다. 원래는 찾고자 하는 키워드를 홈페이지에서 찾은 뒤 텔레그램으로 알림을 줄 생각이었지만, 하다가 예매가 오픈해버리는 바람에..:) 키워드 찾는 데까지만 하고 일단 정리. source code crawler.js var request = require('request'); // used to make HTTP request var cheerio = require('cheerio'); // parse and select HTML elements var URL = require('url-parse'); // parse URLs // 키워드를 검색할 url 주소. 극장..

Yesterday & Today I Learned 미니 웹 프로젝트 완성 및 발표 cgv 웹 크롤링 시도 도커 관련 아티클 읽음 & 윈도우에 도커 설치 시도 Yesterday & Today was 웹 프로젝트가 끝났기 때문에 한숨 돌렸다. 이번 프로젝트를 통해 더욱 프론트에 대한 열정이 타올랐다... 이제 본격적으로 리액트를 혼공하려고 하는데 혼자 쳐지지 않고 잘 프로젝트까지 마무리할 수 있을까 걱정은 된다. 리액트 플젝을 학원 컴과 맥북에서 왔다갔다 하면서 하려고 도커를 학원컴에 설치하려고 했는데, os가 윈도우 7이라서 도커 for 윈도우는 안깔리고 도커툴박스를 설치해야 했다. 툴박스 다운로드가 2시간 걸린다고 나올때부터 심상치 않더니만 결국 다운이 실패했다. 으음... 도커 설치가 너무 오래걸려서 ..

Today I Learned 미니 웹 프로젝트 네아로 연결 메인 화면에 트렌딩북 슬라이드 형태로 렌더링 자잘한 UI 수정 Today was 다른 분이 한거랑 머지도 다 했고 거의 다 완성! 왜인지 네아로 결과 화면은 css 적용이 전혀 안돼서 홈화면으로 바로 리턴하지 못하고 다른 파일을 하나 만든 뒤 그 다음 자동으로 메인으로 이동하게 했다.

Yesterday & Today I Learned 미니 웹프로젝트 맥북에 도커, 오라클 설치 관심있는 책 리스트 중앙 정렬로 출력하도록 수정 js로 동적으로 부트스트랩 컴포넌트를 만든 뒤 그 뒤에 이미지를 append하는 방법으로 처리. 자바스크립트 안에 jstl을 사용할 수 있는 것을 처음 알았다. 원래 자바스크립트로 row, col를 만든 뒤 jstl의 forEach문으로 하나씩 꺼내고 그 안에 스크립트 태그를 써서 append하려고 했는데 되지 않았다. 찾아보니 jsp는 서버쪽에서 만들어서 오기 때문에 클라이언트쪽에서 row랑 col을 뒤늦게 만들어서 순서가 안맞는 것이었다. 그래서 자바스크립트 안에 jstl을 넣어서 이를 해결했다. 동적으로 컴포넌트를 추가하니 css도 먹히지 않아서 전부 제이쿼리..

Today I Learned 미니 웹 프로젝트 UI 수정 관심 책 검색 기능 추가 전체 목록 보는 버튼 추가 사이드바 토글 버튼 오류 수정(custom Scroller의 임포트 위치 문제) 이상하게도 메인 홈 화면에서는 커스텀 스크롤러를 바디의 밑부분에 임포트하는 게 오류가 안나고 읽은 책, 관심 책 등록 화면에서는 헤드 태그 안에서 jQuery 밑에 임포트하는게 오류가 안난다. 왜지.. Today was 오늘은 다른 분들이 한 것까지 드디어 머지를 했다! 생각했던대로 db를 머지하는 것은 쉽지 않았다 세부적인 것은 더 수정해야 하지만 일단 넣고자 한 기능들은 잘 돌아가서 기분이 좋았다 네아로도 구현하고 싶은데 다음주 월요일까지 되려나 모르겠다. 검수요청인가 뭐 해야 다른 사람들이 로그인할 수 있던데....

Today I Learned 미니 웹 프로젝트 UI 변경 로그인, 회원가입을 옆의 빈 공간으로 이동 내가 등록한 책 검색 input 추가 내가 등록한 책 검색 input이 부모 div가 확장될 때에도 고정이도록 변경 내가 등록한 책 검색 기능 추가 네이버 책 이미지 image url 변경하여 고화질 이미지로 변경 등록한 책 이미지 밑에 타이틀 렌더링 Today was 부트스트랩을 써서 컴포넌트를 고정하기가 어려워서 테이블 디스플레이를 썼다 마이바티스 매퍼에서 sql명령을 쓸 때 뒤에 ; 를 붙이면 배드sql그래머 에러가 난다.. 와우.. 맥북에서 톰캣을 깔고 깃헙에서 프로젝트를 가져와서 연결하는 데 좀 애먹었다. 일단 서버에 등록하려고 할 때에 add and remove할 수 있는 리소스가 없다는 경고창..