Archive: 2020

2020
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

backenddb

macOS에서 Mongodb 다운로드 및 설치하기

시작하기MongoDB는 문서 데이터베이스이므로 JSON과 같은 문서에 데이터를 저장합니다.기본 sql에서 사용하는 행/열 모델보다 훨씬 표현적이고 강력하다고 생각합니다.그러한 mongodb를 설치해보도록 하겠습니다. 설치하기홈브루 사이트에 접속해서 커맨드를 복사한 후 터미널에 입력해서 homebrew를 설치합니다. 1/usr/bin/ruby -e "$(cu

frontendreact

React에 Apollo Client 적용하기

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

DevTILStudy

Mac에서 R 설치하기.study

시작하기데이터 분석에 특화된 프로그램으로 다양한 통계 방법론이 적용됩니다.R이 가진 강점은 바로 시각화라 할 수 있습니다.지도, GIS, 시계열을 잘 나타내주는 동적 그래프 등을 모두 지원하고 있습니다.2D와 3D 그래픽을 잘 보여줍니다. R 설치하기R 공식사이트에 접속합니다.이후 좌측의 Download => CRAN를 선택합니다. CRAN을 클릭하면

DevTILStudy

Mac에서 C언어 사용하기.study

시작하기window에서는 주로 visual studio를 사용하고 mac에서는 xcode를 사용합니다.현재 mac을 이용하고 있기에 xcode로 c언어 프로그램을 작성해보도록 하겠습니다. xcode실행하기xcode를 실행시킵니다 생성하기macOS를 선택한후 명령어 툴을 선택합니다. 프로젝트의 이름과 오너를 입력해줍니다.이후 language를 c로 변경합니다

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

frontendDevEnv

Storybook 설치 및 테마 설정하기

시작하기Storybook은 React, Vue 및 Angular와 독립적으로 UI 구성 요소를 개발하기위한 오픈 소스 도구입니다.뛰어난 UI를 체계적이고 효율적으로 구축 할 수 있습니다.공식 홈페이지에서 자세한 내용을 알 수 있습니다. 설치하기프로젝트 내부에서 1npx -p @storybook/cli sb init --type react storybook