RTK (Redux Toolkit) Redux Toolkit (이하 RTK)은 Redux 개발을 효율적으로 할수있게 하는 공식 개발도구이다. 기존 Redux는 많은 보일러 플레이트 코드가 필요했고, 조금 더 유용하게 사용하기 위해 더 많은 패키지들을 추가로 설치해야 했다. 이런 불편한 점을 해소하기 위해 RTK가 나왔다고 할 수 있겠다! 설...

Branch git checkout [해시코드, 브랜치] : HEAD를 명시한 브랜치, 해시코드로 옮긴다. (브랜치 이동같은 경우 git switch 명령어를 사용해도 된다) git branch --merged : 현재 브랜치에 merge된 브랜치들을 확인할 수 있다. git branch --no-merged : 현재 브랜치에 merge...

Pick import { FormikHandlers } from "formik"; interface Values { [key: string]: string; } interface Props { handleChange: Pick<FormikHandlers, "handleChange">; handleSubmit: Pick<...

클로저 활용 if문 줄이기 const log = (value) => { return (fn) => { fn(value); } }; const customLog = log('Hi :)'); customLog((message) => console.log(message)); customLog((message) =&g...

class에서의 화살표 함수 class Parent { parentMethod() { console.log('parentMethod'); } parentArrowMethod = () => { console.log('parentArrowMethod'); } overrideMethod = () => { ...

구조분해할당 활용 배열의 구조분해 문법은 리액트에서 당연하게 사용한다. const [isLoading, setIsLoading] = useState(false); 아래와 같은 방법도 많이 봤을 것이다. const orders = ['First', 'Second', 'Third']; const [first, , thrid] = orders;...

해당 글은 FEConf Korea - 컴포넌트, 다시 생각하기 영상을 보고 정리한 글 입니다. 의존성 케이크를 만드려면 밀가루, 설탕, 계란이 필요하다. 케이크는 밀가루, 설탕, 계란에 의존한다. 라는 말과 같은 의미이다. 케이크의 의존성: 밀가루, 설탕, 계란 위의 3 문장은 모두 같은 의미이다. 그렇다면 리액트 컴포넌...

getStaticProps getStaticProps는 서버측에서 실행 된다. Development 모드에서는 모든 요청에 대해 실행된다. Production 모드에서는 빌드 시 실행된다. pages에 있는 page 파일에서만 export 할 수 있다. 그 이유중 하나는 리액트는 페이지가 렌더링 되기 전에 필요한 ...

Layout Shift란? 단어 그대로 화면상에서 어떤 각 요소들이 로딩 속도나 다른 이유를 통해 화면에 보여지는 시점이 달라지면서 발생하는 요소 밀림 현상을 말한다. 크롬 개발자 도구의 성능탭에서도 확인할 수 있다. 빨간색으로 표시된 부분에 마우스를 올리면 친절하게도 어떤 요소에 Layout Shift가 발생했는지 확인할 수 있다. Layo...

다른 요소들과 마찬가지로 CSS도 최적화를 할 수 있다. 개발자도구의 커버리지탭을 보면 각 요소들에 대한 사용량을 보여준다. (빨간색 그래프가 사용하지 않는 부분임) 해당 내용을 더 자세하게 보기 위해선 위에 소스탭을 켜두고 자세히 보고자 하는 요소를 아래 커버리지탭에서 클릭하면 확인할 수 있다. 여기도 마찬가지로 빨간색과 파란색으로 표시...