지금 만드는 토이프로젝트에 tslint, eslint, prettier을 적용한 겸 세팅값을 블로그에도 적어둔다. CRA로 만든 프로젝트에 따로 webpack config를 eject 하지 않고 위에 3개를 적용할 수 있는 방법임. Refer: https://dev.to/benweiser/how-to-set-up-eslint-typescript-prettier-with-create-react-app-3675...
Problem 에러가 났을 때 빨간 글자색을 보여주기 위해 StyledComponent에 hasError 프로퍼티를 넘기고 <StyledField hasError={hasError} /> 이를 스타일링만 하기 위해 StyledComponent에서만 받아 썼더니 const StyledField = styled(Field)` color: ${({...
이 포스트는 지난 5월 27일 “React 사용자를 위한 리액트 부트캠프“의 5일차 강의 때 사용한 발표자료와 스크립트를 글로 옮긴 것입니다. 스크립트를 거의 그대로 옮겼기 때문에 군데군데 구어체가 혼용되었으며 평소...
Background 처음에는 emmet 방식처럼 간략한 텍스트를 입력하고 tab을 누르면 자동완성 되는 방향으로 했는데 반응이 너무 느려서 그냥 명령어 + 탭으로 보이는 경우가 왕왕 있었다. 그래서 스니펫 말고 키보드...
개발 일반 번역 2019년, 프론트엔드 개발자는 여전히 좋은 선택일까? – 프론트엔드개발에 대한 장점/단점/갖춰야할 역량들을 짚어보는 글. 트렌드에 흔들리지 않기 위해서 프레임워크보다는 기본 개념과 원리를 공부하는 것에 대해 강조하고...
왜 함수형으로 코드를 쓰는가 Explicit한 코드를 Implicit(암묵적)하게 바꾼다는 이점 Explicit하게 짠 제곱함수 function squareAll(numbers) { var squared = []; for (var i=0; i < numbers.length; i++) { squared.push(numbers[i]...
일하고 있는 곳에서 hapi를 사용하고 있어 관련 글을 하나 번역해봅니다. 원글은 Why You Should Consider hapi입니다. 새로운 웹 애플리케이션을 시작할 때, 플랫폼을 처음 선택합니다.: node, Go, Rails 및...
이 글은 Vue.js 가이드를 중심으로, 쉽고 빠르게 배우는 Vue.js 2 프로그래밍, Vue.js 퀵 스타트, Vue.js 이 정도는 알아야지를 참고하였습니다. Vue.js를 처음 접하시는 분들은 Vue.js 가이드를 중심으로 진행하시길 권장해...
TypeScript는 React에서의 컴포넌트 타이핑을 강력하게 할 수 있도록 돕는다. 이번 글에서는 TypeScript를 이용한 React 컴포넌트 타이핑 방법을 다양하게 알아본다. Basic 가장 기본적인 형태의 클래스 React Component 타입 정의다....
React에서 사용하는 onClick, onChange 등을 통해서 핸들링할 수 있는 이벤트 객체는 브라우저 네이티브 이벤트 객체가 아니다. 브라우저 네이티브 이벤트 객체를 감싼 React 고유의 이벤트 객체인데, 이를 React에서는 SyntheticEvent라고...
전역에서 함수를 할당하면 window로 들어가는구나. 그래서 그 속에서 this를 찍어보면 Window객체가 나온다. new Foo()로 초기화하면 예상했던 대로 Foo { }가 나오고. 면접에서 털리고 광광 울며 정리중 js에서 모든...
TypeScript 를 도입하기가 망설여지는 이유 중 하나는 매번 일일이 변수를 선언할 때마다 타입을 선언해야하고 필요한 타입을 정의해야하는 비용에 대한 걱정일 것이다. 필요한 타입이 있을 때 타입을 정의하는 일은...
[일일코딩 #32] Two Sum Question 링크 Given an array of integers, return indices of the two numbers such that they add up to a specific target. You may...
이전 글에서는 React를 배제한 채로 MobX만 사용했었고, Angular 혹은 jQuery와 연계해서 사용할 수도 있지만 MobX는 React랑 함께 사용되는 게 가장 일반적이다. 이번 글에서는 MobX와 React를 연계해서 사용하는 내용에...
Simple, scalable state management MobX는 프론트엔드를 위한 어플리케이션 상태 관리 라이브러리다. 주로 React에 바인딩되어 사용되고, 상태 관리 라이브러리라는 특성 때문에 종종 Redux와 비교된다. Redux가 함수형 아이디어를 적용했다면 MobX는...
도입배경 올해 초 부터 Vue.js에 관심이 생겨 개인적으로 학습하고 있었다. 2017 1사분기를 회고하는 글에 이런 내용을 적었었다. “회사 개발자 세미나에서도 해당 주제로 발표할 예정이며, 가능하다면 외부 밋업에서도 발표하고...
이전 글 - TypeScript: 제네릭(Generic) JavaScript를 쓰면서 느끼게 되는 아쉬운 점 하나는, Enum(Enumeration, 열거형)의 부재다. 사실 JavaScript 같은 동적 타입 언어에서 Enum이 없는 게 당연하지만, 유한하면서도 여러가지의 상태를...
상황: 모바일에서 사이드 네비게이션이 열린 상태에서 스크롤시 body는 스크롤 되지 않게 하고싶다 Solution A: CSS html, body { overflow: hidden; position: relative; height: 100%; } PC에선 문제 없이...
작년에 React Study Plan이라는 글을 쓴 적이 있다. 그렇게 공부하면 당연히 React로 뭔가 개발을 할 수 있다고 생각했다. 내가 너무 기초가 안 되어 있는 상태에서 배우기에는 버거운 상대였다....
상황: 페이지의 일부만 프린트하고 싶다! 구글링 하면 2가지 방법이 나온다. 근데 둘다 내 상황에는 문제점이 있었다. 팝업으로 DOM을 복사해 프린트: 편하긴 한데 css, js가 떨어짐 전체 돔, 프린트...
이전 글 - TypeScript: 함수(Function) 제네릭은 Java 등의 정적 타입 언어를 사용하던 사람에게는 익숙한 단어일지도 모르겠다. 그러나 JavaScript를 사용해왔던 개발자에게는 그렇지 않다. 제네릭은 어떠한 클래스 혹은 함수에서 사용할...
const is not immutable? 얼마 전에 어떤 페이스북 그룹에서 공유된 글 중에 이런 글이 있었다. 본문에는 이런 문장이 있다. ES6 const does not indicate that a value is...
이전 글 - TypeScript: 인터페이스(Interface) 함수 타입 선언 전에 한 번 다룬대로, TypeScript는 함수에도 타입을 선언할 수 있다. 타입 지정 대상은 함수로 전달되는 매개변수와 최종 리턴 값이 될...
이전 글 - TypeScript: 클래스(Class) 클래스와 인터페이스 지금껏 JavaScript만을 다뤄본 개발자라면 인터페이스라는 개념은 익숙치 않을 것이다. 하지만 Java나 C# 등의 정적 타입 언어에서는 이미 많이 쓰이는 개념이다. 인터페이스는...
이전 글 - TypeScript: Basic Type 클래스는 JavaScript 생태계 속에서도 TypeScript에만 있는 개념이 아니다. CoffeeScript나 ES2015를 사용해봤다면 이미 클래스를 몇 번 쯤은 사용해보았을 것이다. 이 글에서는 ES2015의 클래스를...
요약: RxJS는 이벤트 스트림과 데이터를 쉽게 만들고 다룰 수 있도록 도우는 라이브러리다. 복잡하지만 가독성이 좋은 비동기적 코드를 더 쉽게 작성할 수 있도록 도운다. 큰 규모의 비동기 어플리케이션을 작성하는...