분류 전체보기

리액트에서 이미지 미리보기 만들어보기 (React Image Preview)

서론 HTML의 input 태그로 이미지를 핸들링할 때 현재 선택한 이미지를 미리 보고 싶은 경우가 있다. 라이브러리를 통해 구현할 수도 있지만 어떤 방식으로 구현할 수 있을까 고민해보았다. Web API 중 FileReader라는 객체를 사용하여 구현해보도록 하겠다. React에서 ImagePreview 만들기 마크업은 위와 같다. 동작원리는 다음과 같이 설계했다. input 이미지가 변경될 때 onChange 함수 내부에서 파일을 체크한다. 위의 File 객체를 기반으로 이미지를 base64로 인코딩한다. 인코딩된 문자열을 imageSrc state에 넣음으로 렌더링 하여 프리뷰를 보여준다. 즉, input에서 사용자가 입력한 File 객체를 base64로 인코딩할 필요가 있다. 이를 위해서 File..

간단한 리액트 커스텀 훅 만들어보기. (React custom hook)

서론 React 16.8부터 추가된 Hook 은 리액트 함수형 프로그래밍의 근간이 된다. 다만 Hook은 리액트 어디서나 사용 가능한 것은 아니고 몇 가지 제약사항이 있다. 리액트 함수형 컴포넌트 내부 혹은 커스텀 훅 내부에서만 사용 가능하다. 함수형 컴포넌트 내부에서도 최상위에서 선언이 가능하다. (반복문, 조건문에서 선언 X) 오늘은 이 Custom Hook, 커스텀 훅 에 대해서 다루어보자. 커스텀 훅이란? 컴포넌트 내부에서 훅을 사용해 로직을 구현하다 보면 중복되는 부분이 발생하기 마련이다. 우리는 중복되는 훅들을 결합하고 추상화하여 사용하고자 하는 니즈가 생길 것이다. 이와 관련해 리액트 공식문서에서는 커스텀 훅에 대해 다음과 같이 말하고 있다. Hook을 추상화된 로직으로 사용할 수 있도록 결..

vscode에서 typescript warning, error 정보 안 보일 때

cmd + ,setting 들어간 뒤, typescript validate 검색 후 Enable/disable Typescript validation 체크

PostCSS에 대해 알아보자 (PostCSS란?)

https://postcss.org/ PostCSS - a tool for transforming CSS with JavaScript Enforce consistent conventions and avoid errors in your stylesheets with stylelint, a modern CSS linter. It supports the latest CSS syntax, as well as CSS-like syntaxes, such as SCSS. postcss.org 서론 웹팩의 로더에 대해 공부하던 중에 postcss-loader 라는 것을 보았다. Sass가 css의 전처리기(css pre-processor)라는 것은 알고 있었기에 postcss는 후처리기? 처럼 동작하지 않을까 예상해보..

리액트 절대경로 설정 및 모듈/경로 별명 짓기 with CRA (absolute path, path alias)

왜 절대경로를 사용할까? 위와 같은 디렉토리 구조를 갖는 프로젝트가 있다고 해보자. entry.js에서 target.js 을 import 해야 할 경우에 우리는 어떻게 경로를 작성해야 할까? 아마 다음과 같이 작성할 것이다. import target from '../../../target'; 상대 경로로 target.js를 찾다 보니 import 하는 path의 경로가 장황해졌다. 지금과 같이 간단한 예시에서는 별 문제가 아니라고 생각할 수도 있겠다. 하지만 프로젝트의 규모가 점점 커지고 디렉토리의 복잡도가 커질수록 import 의 경로를 찾는 게 점점 힘들어질 것이다. 심할 경우에는 다음과 같아질지도 모른다. import target from '../../SomeThing/../../SomePath/...

Babel이란? (preset, polyfill, plugin 등)

https://babeljs.io/ Babel · The compiler for next generation JavaScript The compiler for next generation JavaScript babeljs.io 1. 배경 ES6가 등장한 지 얼마 되지 않았을 때에는 대부분의 브라우저에서 지원하지 않았기 때문에 최신 문법을 사용하고 싶어도 사용할 수 없었다. 이때 바벨이 ES6 문법으로 작성된 자바스크립트 코드를 ES5로 변환해주었다. 즉, ES6 문법을 지원하지 않는 브라우저에서도 ES6 문법을 사용할 수 있게 된 것이다. 바벨이 등장함으로 브라우저 간 호환성을 지켜야 하는 크로스 브라우징 이슈를 어느 정도 해결해주었다고 본다. 시간이 지나며 단순히 ES6 to ES5의 변환뿐 아니라 리..

[React.js] Error Boundary와 Fallback UI 에 대하여

서론 리액트에서는 예외 발생 시 예외를 발생한 컴포넌트만 언마운트 되지 않는다. 예외 발생 시 모든 컴포넌트가 언마운트 된다. 이는 잘못된 정보를 사용자에게 보여 주는 것보다는 아무것도 보여주지 않는 것이 낫기 때문이다. 하지만, 아무것도 보여주지 않는 것은 잘못된 정보를 제공하지 않았을 뿐이지 나쁜 사용자 경험을 제공하게 된다. 이러한 문제점을 해결하기 위해 등장한 것이 Error Boundary 이다. Error Boundary는 하위 컴포넌트에서 발생한 예외를 catch(try-catch 와는 다름)하여 Fallback UI를 보여주는 등의 처리를 해주는 컴포넌트이다. 웹 페이지를 이용하다가 갑자기 흰 화면만 덩그러니 나오는 것보다는 현재 상태가 어떤 지 표시해주는 게 훨씬 좋은 사용자 경험을 제공..

SOPT 29기 YB 웹파트 면접 후기

http://sopt.org/wp SOPT Copyright © 2014 Shout Our Passion Together All Rights Reserved sopt.org 서론 정신이 없어서 면접 후 2주 정도가 지나고 이제야 후기를 작성하게 됐다. 원래는 작성할 생각이 없었는데 생각해보니 이전 기수분들이 작성해놓은 면접 후기가 면접 준비하는 데 많은 도움이 됐다. 그래서 나도 누군가에게 도움이 되지 않을까하는 마음에 후기를 작성해본다. 면접 구성 임원진 면접 25분 + 파트장 면접 25분 임원진 면접 임원진 면접은 SOPT의 임원진 분들과 多 대 多 로 이루어진다. 필자의 경우에는 면접자 6, 면접관 2 로 구성된 면접이었다. 말을 길게 하면 커트당하는 경우도 있다. 25분이라는 제한된 시간 안에 모..

[React.js] useEffect, cleanUp, deps, unMount에 대하여

useEffect의 클린업 함수 실행 시점과 deps 배열 (= 의존성 배열) 이 미치는 영향에 대해 알아보자. 클린업, cleanUp 하나의 상황을 가정해보겠다. 클릭할 때마다 카운트가 올라가는 Count라는 컴포넌트가 있다. 컴포넌트가 언마운트 되었을 때 해당 컴포넌트가 갖고 있는 state인 count의 값을 로깅하고 싶다. 어떻게 구현하겠는가? 가장 먼저 떠올릴 수 있는 방법이 useEffect의 cleanup을 이용하는 것이다. 언마운트 될 때만 실행하면 되니까 deps 에는 빈 배열을 주면 될 것 같다. 자, 카운트를 증가시키고 언마운트 시킨 뒤 로그를 확인해보자. 예상대로 동작하지 않는다. 왜 그럴까? useEffect의 deps가 빈 배열일 경우 effect 내부의 props, state ..

[Javascript] Iterable, 반복자 그리고 생성자 함수에 대하여

Iterable이란 ? 자바스크립트에서 iterable이란 반복이 가능함을 의미한다. 반복이 가능한 요소는 무엇이 있을까? 배열, Map, Set 등 모두 iterable 한 요소이다. 이러한 요소들이 iterable 한 것은 Iteration Protocol을 따르기 때문이다. Iteration Protocol 을 따름으로써 for ... of 구문이나 spread 문법 등을 사용할 수 있게 된다. Iteration Protocol이란? Object를 iterable하도록 만드는 표준방법을 제시하는 일종의 규약이다. 이 프로토콜을 따라 iterator을 구현할 수 있다. Object가 iterable 하기 위해서는 @@iterator 메소드를 가지고 있어야 한다. 이는 Object가 [Symbol.i..