전체 글

팩토리 패턴 팩토리 패턴은 클라이언트와 구체 클래스의 직접적인 의존성을 끊기 위해 사용합니다. 따라서 팩토리 메서드 패턴과 추상 팩토리 패턴도 큰 범주에서는 같은 역할을 합니다. 아래의 코드를 보면 클라이언트(orderPizza)가 구체 클래스(CheesePizza, PepperoniPizza)를 직접적으로 알고 있습니다. 만약 여기서 파인애플 피자가 추가된다면 어떨까요? orderPizza의 코드를 변경해야 합니다. 변경에는 닫혀 있고, 확장에는 열려있어야 하는 OCP(Open Closed Principle) 법칙도 위반하게 되죠. function orderPizza(type) { let pizza = null; if (type === "치즈") { pizza = new CheesePizza(); } ..

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에서 제공해주는 기본적인..