Frontend

안녕하세요. 이번 포스팅에서는 Redux Thunk에 대해 알아보려 합니다. 일반적으로 thunk는 asynchronous한 로직에 사용한다고 알려져 있는데요. Redux state와 dispatch에 접근할 수 있기 때문에 다양하게 활용할 수 있습니다. 이 포스팅을 읽고 난 후에는 아래의 내용들을 얻어가실 수 있습니다. synchronous한 로직에 thunk를 활용하기 여러 action을 위해 thunk에서 dispatch Synchronous complex logic 복잡한 로직은 reducer에서 처리하는 것이 일반적이 케이스이기 합니다. 그렇지만 만약 state에 접근이 필요한 경우 Thunk에서 로직을 작성할 수도 있습니다. const addTodoThunk = createAsyncThunk(..

책 후기 유튜브 영상을 통해 단위테스트라는 책을 추천받아서 읽었는데 느낀점과 정리한 내용을 간략히 공유해보겠습니다. 느낀점 integration testing vs unit testing 과거에 프런트엔드 테스팅(엄밀히 말하자면 redux testing)에 관한 아티클을 읽었는데 integration testing으로 점점 더 옮겨가는 추세라는 내용의 article이었습니다. 하지만 지금 생각으로는 복잡하지 않은 어플리케이션에서는 integration testing으로 충분히 가능하지만 복잡한 SaaS 프러덕트의 경우는 integration testing으로는 힘들다고 결론을 내렸습니다. 복잡한 비지니스 로직을 integration testing으로 커버하기에는 한계점이 있습니다. integration ..

안녕하세요. 이번 포스팅에서는 실무에서 겪었던 렌더링 성능 이슈와 어떠한 과정을 거쳐서 해결했는지 공유해보도록 하겠습니다.Issue문제가 된 이슈에 대해 간략히 설명해보겠습니다. 여러 개의 text를 선택해 tts 요청을 보내고 response가 왔을때 성공했다는 UI를 그리게 위해 state를 업데이트하는 상황입니다. 그러나 여러 개의 text를 가지고 있는 컴포넌트들의 숫자가 굉장히 많아질 경우 리렌더링이 여러번 발생하기 때문에 토스트를 띄운다거나 할때 토스트 애니메이션이 버벅이는 jank 현상이 있었습니다.Chrome devtools performance tab먼저 큰 그림에서 어떤 부분이 문제인지를 파악하기 위해 chrome devtools에서 performance tab을 활용했습니다.아래 이미..

이번에 Next.js 13.2버전이 나오면서 여러 기능들이 추가됐습니다. 어떤 내용인지 알아봅시다. Built-in SEO Support 기존의 Next.js 12버전에서는 next/head를 사용했고 Next.js 13버전에서는 head.js 파일에서 meta 태그나 open graph를 넣어줬죠. Next.js 13.2에서는 좀 더 쉬운 인터페이스를 사용합니다. 아래 코드와 같이 static, dynamic 메타데이터를 define할 수 있습니다. // app/layout.tsx import type { Metadata } from 'next'; // static한 메타데이터 export const metadata: Metadata = { title: 'Next.js 13.2&#..