Tag: react

2020
frontendreact

React Ref사용하기

시작하기React에서 엘리먼트로 접근해서 사용하기 위해서는 Ref를 사용하는 것을 권장하고 있습니다.input focus, element 사이즈 측정 등에서 이용합니다. 사용법Ref를 사용하는 여러가지 방법이 있습니다. 다양한 방법을 알아보겠습니다. class에서 사용하기class에서 Ref를 사용하는 방법은 12345678910111213141516171

frontendhtml5

Canvas 기본 설정 및 사용해보기

시작하기HTML5에서 부터 등장한 새로운 기능인 canvas기능을 살펴보겠습니다.HTML canvas요소는 웹 페이지에 그래픽을 그리는 용도로 사용됩니다.canvas에 그래픽을 그리기 위해서는 Javascript를 사용해야합니다.canvas에는 Path, Rect, Circle, Text, Image 등을 추가하는 여러 가지 방법이 있습니다. 캔버스 그리기

frontendreact

Nextjs에서 다국어 지원 next-i18next 적용하기

시작하기이전에 react에서 다국어 i18n을 지원하는 포스트를 작성했었습니다.nextjs에서는 다른 방법으로 i18n을 설정해 주어야 합니다.시작해보도록 하겠습니다. 설치하기Nextjs 에서 typescript 적용하기 포스트 를 참고하여 프로젝트를 생성해줍니다. 1yarn add i18next next-i18next react-i18next i18nex

frontendreact

React에 Apollo Client 적용하기

시작하기REST API의 단점을 보완하고 더 개선된 사용 환경을 제공하기 위해 GraphQL을 기반으로 한 Apollo Client 입니다. GraphQL 기본 쿼리문 query: 데이터를 받아올 때 사용합니다 (get). mutation: 데이터를 생성, 수정, 삭제할 때 사용합니다 (post, put, patch, delete). subscriptio

frontendDevEnv

webpack 이미지 설정

시작하기이전 포스트 웹팩설정에 이어서 프로젝트에서 이미지를 불러오려면 webpack에서 몇가지 설정을 해주도록 하겠습니다. 설치하기1npm install --save-dev file-loader file loader 패키지를 설치해줍니다. 설정하기webpack.config.js파일 모듈의 룰 부분에 file loader를 추가 해주도록 합니다. webpa

frontendDevEnv

webpack typescript 적용하기

시작하기이전 포스트를 통해 Babel과 webpack 기본 설정을 했습니다.이번 포스트에서는 기본설정에서 typescript를 적용하겠습니다. 설치하기1npm install --save-dev @types/react @types/react-dom typescript ts-loader 타입스크립트 관련 패키지를 설치해줍니다. 1npx typescript -

frontendReactNative

React native (리액트 네이티브) 초기설정하기

시작하기react native 라이브러리를 이용하여 android, ios 크로스 네이티브 애플리케이션을 제작할 수 있습니다.react native를 사용해보면서 느꼈던 장단점이 있습니다. 이 내용은 매우 주관적이므로 참고만 해주시길 바랍니다. react native 장점재활용웹에서 사용한 react 나 자바스크립트로 작성한 로직 부분의 코드를 재활용할 수

frontendDevEnv

Webpack4 그리고 babel7으로 React 개발환경 구축하기

시작하기Create-react-app을 이용해서 작업을 해오면서 eject를 하지 않는 이상 webpack과 babel의 설정을 해볼 기회는 많이 없습니다.하지만 webpack과 babel을 알고 개발환경을 구축하면서 이해를 돕도록 하겠습니다. 설치하기프로젝트 폴더를 만들어 주도록 합니다. 123mkdir ft-webpackcd ft-webpacknpm i

Clone

React와 SVG로 Circular 타이머 구현하기

시작하기svg와 react, moment를 이용해서 다음 이미지와 같지는 않더라고 흡사한 타이머를 구현해 보도록 하겠습니다. 설치하기123create-react-app timer --typescriptcd timernpm i moment @types/moment styled-components @types/styled-components @fortawes