Home

2020
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

frontendDevEnv

Storybook을 Netlify로 정적 사이트 배포하기

시작하기서버와의 API통신없이 프론트엔드로만 구성된 정적 애플리케이션을 배포하는 용도로 최적화된 서비스입니다.netlify 홈페이지 사전작업 깃헙 저장소에 프로젝트가 있어야 합니다. 프로젝트에 스토리북이 있어야합니다. 설정하기사이트에 깃헙계정으로 로그인을 합니다. 스토리 보드 혹은 프로젝트를 빌드해줄 명령어와 명령어 입력후 만들어지는 static 폴더를

frontendDevEnv

webpack typescript 적용하기

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

Js / Tstypescript

Eslint 적용하기(React + Typescript + Prettier)

시작하기기존 프로젝트에서 tslint를 사용해 왔었는데 이번에 tslint는 deprecated 되었습니다.그렇기에 tslint 대신에 eslint로 설치를 하겠습니다.react + typescript + prettier에 eslint를 설정하고, airbnb 규칙을 적용하겠습니다. 1. Eslint 설치 및 설정1npm install -D eslint @

frontendReactNative

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

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