React

Parcel로 React, TypeScript, Styled Components 쓰기

Parcel은 Webpack, Rollup보다 훨씬 간편하게 JS 번들을 관리하게 해준다. 별도의 설정 없이 간편하게 시작하고 싶다면 Parcel을 추천한다. 오늘은 Parcel을 이용해 React 프로젝트를 생성하고, TypeScript, Styled Components를 적용해본다.

React에서 contenteditable을 이용해 글자수에 따라 width가 바뀌는 textfield 만들기

React에서 input 텍스트가 입력될 때, 텍스트의 길이만큼 점진적으로 width가 늘어나도록 구현해 봅니다. contenteditable 속성을 활용하며, 일반 input이나 textarea처럼 placeholder를 넘겨 사용합니다. contenteditable로 입력할 수 있는 최대 글자수를 제한하는 방법도 알아봅니다....

Google OAuth using Firebase in React

How to implement Google OAuth in React using Firebase Auth.

How to Implement React forceUpdate in Functional Component

How to Implement React forceUpdate in Functional Component

Jest와 Enzyme을 이용한 React 커스텀 훅(custom hook) 테스팅(test)

Jest와 Enzyme을 이용해 TypeScript 기반의 React에서 API 요청을 담당하는 Custom Hook을 테스트하는 방법들을 알아본다.

React에서 SVG 요리하기

React에서 TypeScript로 SVG를 편하게 사용하는 방법을 알아봅니다.

React에서 TypeScript로 Redux-Saga 사용하기(예제)

튜토리얼(예제)을 직접 따라하며 React에서 TypeScript로 Redux-Saga의 사용법을 배워봅니다.

React - TypeScript로 React에서 Kakao Maps 사용하기

React에서 TypeScript로 카카오 지도 API(Kakao Maps API)를 사용하는 방법을 알아본다.

리액트(React)란 무엇인가

리액트(React)란 무엇인지 알아본다. 왜 React가 필요한지, 그리고 React가 왜 2018년 가장 핫한 프론트엔드 라이브러리인지 알아본다.

Express 서버와 React: Proxy 활용과 빌드 및 헤로쿠(Heroku) 배포

Dev 환경에서 Proxy를 이용해 Express 서버와 Create-React-App 서버를 함께 돌리는 방법을 살펴본다. 이후 빌드(Build)를 하고 Heroku에 해당 앱을 배포하는 과정에 대해 알아본다.