Category: frontend

2020
frontendreact

React 상태 관리 라이브러리 Recoil-js 사용해보기

시작하기리액트 유럽에서 리액트의 새로운 상태관리 라이브러리 recoil을 발표했습니다.기존에 사용하던 redux 라이브러리와 어떤차이가 있는지 사용해보도록 하겠습니다.Recoil js홈페이지에서 자세한 내용을 확인 할 수 있습니다.Recoil 소개 유투브 설치하기1npx create-react-app my-app 프로젝트를 생성합니다. 1npm insta

frontendreact

React Next js에서 카카오맵 사용하기

시작하기지도를 표시해주는 어플리케이션을 만들기 위해서는 맵이 필요한데 많은 api중에 카카오 맵 오픈소스api를 사용해보도록 하겠습니다. 개발자계정 로그인카카오맵 개발자 사이트에 접속해서 로그인을 해줍니다. 로그인후 내 어플리케이션을 선택합니다. 어플리케이션을 추가해주도록합니다. 추가한 어플리케이션을 선택하면 대시보드가 나옵니다. 좌측의 플랫폼을 선택합니다

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 등을 추가하는 여러 가지 방법이 있습니다. 캔버스 그리기

frontendTesting

Nextjs jest와 enzyme로 테스트하기

시작하기Nextjs에 jest로 테스트를 추가해보도록 하겠습니다.이전 포스트에서 i18n과 redux등을 추가 했었는데요.테스트를 할때 useTranslation, useSelector, useDispatch가 에러가 나는 것도 해결해 보도록 하겠습니다. 설치하기1yarn add -D jest ts-jest enzyme enzyme-adapter-react

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

frontendTesting

Jest 이미지 테스트 에러

시작하기jest 테스트를 하던 도중 이미지 import image from './image.svg'; 부분이 에러가 발생시 해결방법입니다. 설정파일 만들기프로젝트의 루트폴더에 assetsTransformer.js 파일을 생성해줍니다. assetsTransformer.js1234567const path = require('path');modul

frontendDevEnv

webpack 이미지 설정

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