Frontend

안녕하세요. 이번 시간에는 최근 Turborepo를 회사에 도입하며 겪었던 이슈들 그리고 앞으로 이를 더 잘 사용하기 위해 어떻게 해야할 지에 대한 내용을 공유해보겠습니다. 왜 Turborepo일까? 모노레포를 구성하기 위한 여러 도구들이 있는데 왜 Turborepo를 선택했을까요? 그건 현재 Frontend의 인프라 대부분이 Vercel에 있기 때문입니다. 최근 Vercel이 Turborepo를 인수하기도 했고 실제로 배포할때 Turborepo에 대한 지원이 잘 되어있기 때문이죠. React Framework인 Next.js 발전과 함께 Vercel을 Frontend의 인프라로 사용하는 분위기가 강해졌다는 생각이 드네요. 실제로 lerna와 비교했을때 turborepo의 인기가 점점 더 치고 올라가는 ..

Next.js conf에서 13버전이 공개됐습니다. 프런트엔드 개발자로서 이번 conf를 보고 대격변이라고 생각이 들 정도로 많은 기능들과 제품들을 소개했는데요. 어떤 것들이 있었는지 Next.js beta 공식문서를 하나씩 읽어보면서 알아보겠습니다. Routing Next.js 13에서는 새로운 file-system routing이 추가됐습니다. 기존에는 pages/ 디렉토리를 사용했었는데 이제는 app/ 을 사용하시면 됩니다. 점진적으로 도입하기 위해서 pages/ 디렉토리를 여전히 사용할 수도 있습니다. app에 생성한 component는 기본적으로 React Server Component이지만 Client Component로도 생성할 수 있습니다. React Server Component와 Cli..

이번 포스팅에서는 실무에서 cypress를 github actions CI에 연동하며 겪었던 이슈들을 공유해보려 합니다. 아래와 같은 순서로 글을 이어가겠습니다. cypress를 github actions에 연동을 하려 했던 배경 github actions에 대한 설명 그리고 발생했던 이슈 trouble shooting Cypress를 github actions에 연동하려한 배경 최근에 장기간 진행했던 프로젝트의 알파버전 출시를 위해 QA를 돌리는 과정에서 문제가 됐습니다. 이미 해결한 QA항목들에 대해 새로운 PR이 머지되고 다시 QA를 돌리게 되면 해결됐던 버그들이 다시 발생했습니다. 아무래도 사람이 직접 테스트를 하다보니까 regression test가 제대로 되지 않았나 봅니다... 이런 문제들을..

안녕하세요. 이번 포스팅에서는 지금 다니고 있는 회사에서 react-query를 왜 도입했고 어떻게 사용하고 있는지에 대해 공유해볼까 합니다. 도입한 이유 기존 프로젝트에서는 상태관리를 하기 위해 redux-toolkit을 사용했습니다. 서버 데이터를 불러오기 위해 내장된 redux-thunk를 사용했는데요. 비동기 상태에 대한 코드를 아무래도 직접 관리해줘야 하니, 앱의 규모가 커지면 커질수록 작성해야 하는 코드가 늘어나는 불편함이 있었습니다. 이를 해결하기 위해 react-query를 도입하게 됐습니다. 적용 방법 react-query를 잘 사용하기 위해 했던 고민들 중에 몇가지를 공유해보겠습니다. custom hook selector Custom Hook react-query에서 제공해주는 기본적인..