Archive: 2020

2020
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 나 자바스크립트로 작성한 로직 부분의 코드를 재활용할 수

etcetc

Mac Catalina zsh에서 nvm not found 해결방법 (bash로 사용하기)

개요macOS Catalina 버전부터 터미널의 기본 셸이 zsh로 바뀌었습니다. zsh(Z 셸)는 macOS Catalina 베타부터 새로 생성되는 모든 사용자 계정의 기본 셸입니다. bash는 macOS Mojave 및 이전 버전의 기본 셸입니다. nvm 설치 포스트방법대로 설치를 하고 source ~/.bash_profile로 서버를 재시작해주면

frontendDevEnv

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

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

style

styled-components lint 적용하기

시작하기styled-components를 사용시에 작성오류를 찾거나 교정을 해줄수 있도록 lint를 추가해보도록 하겠습니다. 설치하기 styledlint (duh) stylelint-processor-styled-components ( 스타일 추출 ) stylelint-config-styled-components ( 구성 요소와 충돌하는 stylelint

style

CSS will-change 속성

시작하기웹킷 계열 브라우저에서 CSS transform이나 animation 같은 프로퍼티를 사용할 때 발생하는 깜빡이는 현상에 관해 알고 있는 사람은 “하드웨어 가속”이라는 용어를 한번쯤 들어본 적이 있을 것 입니다. 하드웨어 가속하드웨어 가속을 활성화하는 방법으로 브라우저를 속여 강제로 animation이나 transform의 시키는 방법을 이용했습니

style

styled-components 반응형 및 스타일 리셋 설정하기

시작하기저번 포스트에서 styled-components 간단한 사용방법을 알아보았습니다.이번 포스트에서는 브라우저 스타일을 리셋하는 방법과 함께 반응형 설정하는 방법을 알아 보겠습니다. npm install styled-components @types/styled-components패키지를 설치해줍니다. 초기 설정브라우저 스타일 리셋을 하도록 하겠습니다.먼

Clone

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

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