ts
-
husky + lint-staged를 활용하여 git hook걸기Git 2021. 11. 10. 12:45
이 글에서는 가장 많이 사용하는 git hook인 pre-commit을 기준으로 설명하겠다. 먼저 이 글을 작성하게 된 가장 큰 원인인 husky@4에서 사용하던 아래와 같은 방법을 사용할 수 없게 되면서 였다. // package.json { ... "husky": { "hooks": { "pre-commit": "lint-staged" } } } 일단 나와 같이 husky가 설치되어 있는 사람의 경우 아래를 실행하여 husky의 버전을 올리고 husky를 init 해준다. npm i -D husky@latest // husky@7.0.4 기준 npx husky install 처음 설치하는 사람의 경우 아래를 실행하여 간단하게 설치할 수 있다. npx husky-init && npm install 위의..
-
NextJS + Redux-Toolkit + next-redux-wrapper 설정하기Next.js 2021. 9. 24. 18:33
해당 글은 next-redux-wrapper@7 버전을 기반으로 작성되었습니다. 해당 방법은 필자 개인이 설정한 방법으로 언제든 더 좋은 방법이 있다면 공유해주시기 바랍니다. NextJS의 큰 장점 중 하나인 SSR을 사용할 때 조금 더 편하게 사용하기 위해 next-redux-wrapper를 이용하여 dispatch를 사용할 수 있게 된다. // testReducer.ts export const initialState = { // ...states } export type TestReducerState = typeof initialState; const testSlice = createSlice({ name: 'user', initialState, reducers: {}, extraReducers: (..
-
Javascript concat vs spread vs push 성능에 대해Tip 2021. 9. 9. 11:54
결론부터 말하자면 큰 배열의 경우 concat을 작은 배열의 경우 spread가 효율이 좋다. 그리고 concat은 배열에 배열을 합칠 때, pushs는 배열에 새로운 인자를 합칠 때 그 효율이 좋다. 먼저 concat과 push에 대해 설명하자면 concat의 경우 실행 시 배열을 리턴하고, push의 경우 배열의 총길이를 리턴함으로 성능에 있어서는 push가 더 좋을 수밖에 없다. 위의 이미지에서처럼 대량의 데이터의 경우 concat의 속도가 더 뛰어나다. 심지어 spread의 경우 데이터가 너무 크다면 Maximum call stack size exceeded 에러까지 발생한다. 물론 바벨을 이용한다면 아마 spread는 바벨을 걸쳐 concat으로 변경되기 때문에 성능상의 큰 차이는 없을 것이다...
-
ESLint dependency cycle detected import/no-cycle Error 해결하기Tip 2021. 8. 18. 18:15
나의 경우 해당 에러가 interface를 import 해서 사용할 때 나왔다. 이 에러의 의미는 간단하게 설명하자면 A 컴포넌트를 B에서 import 해서 사용하는데 B에서 A의 항목을 import 해서 생기는 문제이다. A -> B -> A 그래서 나의 경우 interface들을 따로 파일로 쪼갠 뒤 아래와 같은 방식으로 사용해 해결해 냈다. // A.tsx import {Props} from './type'; import B from './B' // B.tsx import {Props} from './type'; ... any: [] as Props
-
Styled-Components 테마 적용하기React 2021. 7. 30. 19:37
npm install styled-components 만약 TS를 사용한다면 추가적으로 Types를 설치해 준다. // react npm install @types/styled-components // react-native npm install @types/styled-components @types/styled-components-react-native 아래부터는 TS로 설명하겠습니다. TS를 사용하지 않는다면 declare파일만 만들어 주지 않으면 큰 차이가 존재하지 않습니다. // styled.d.ts import 'styled-components'; declare module 'styled-components' { export interface DefaultTheme { main: string;..
-
React Native에서 SVG 이미지 사용하기React Native 2021. 7. 22. 17:35
// expo일 때 expo install react-native-svg // expo가 아닐 때 npm i react-native-svg cd ios pod install 설치한 뒤 공통으로 종속성 하나를 더 설치한 뒤 metro.config.js를 수정한다. npm i -D react-native-svg-transformer const { getDefaultConfig } = require('expo/metro-config'); // expo일 때 const { getDefaultConfig } = require('metro-config'); // expo 아닐 때 module.exports = (async () => { const { resolver: { sourceExts, assetExts },..
-
React Native에서 이미지 import로 불러오기React Native 2021. 7. 21. 17:46
ESlint에서 global-require 속성을 끈다면 형식으로 불러올 수 있지만 개인적으로 이미지만을 위한 require는 코드를 볼 때도 별로 라는 생각이 많이 든다. 나와 같은 생각을 가진 사람들은 선언 파일 하나로 이미지를 import 할 수 있다. // import-image.d.ts declare module '*.jpg'; *.jpg 형식의 모듈이 이미 선언되었다고 파일을 생성하는 것이다. png, webp등의 형식도 위와 비슷하게 제작하면 된다. import Any from './path/any.jpg'; 이제 TS에러가 사라지는 것을 볼 수 있다.