Home

2020
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

backendnode

Node 와 Window 의 setInterval 비교

시작하기타입스크립트로 React 프로젝트를 진행하면서 setInterval 타입을 정의 할때 어떤타입으로 정의 해야하나 고민을 했습니다.window 의 interval과 node의 interval의 타임은 다릅니다. window 브라우저의 interval 타입 Window setInterval1function setInterval(handler: (...a

DevTILAlgorithm

Algorithm 삽입(insertion) 정렬

시작하기처음에는 왼쪽 끝의 숫자를 정렬이 끝났다고 간주합니다.계속해서 아직 작업하지 않은 숫자 중에서 왼쪽끝에 있는 숫자를 꺼내서 왼쪽의 작업이 끝난 숫자와 비교합니다.왼쪽의 숫자가 더 크면 숫자를 바꿉니다.이 작업을 자신보다 작은 숫자가 나타나거나 왼쪽 끝에 도착할 때까지 반복합니다. [ 4, 2, 6, 8, 3, 1, 5, 7] 왼쪽의 4를 정렬이 끝났