0. 들어가기이전 게시글에서 useMemo, useCallback에 대해 공부를 해봤다.이번 챕터는 useState에 대한 내용이다. 1. useStateuseMemo는 불변 상태(변하지 않는 상태)를 캐시하지만, useState는 가변 상태를 캐시한다.const [값, 값을_변경하는_세터_함수] = useState(초깃값) useState 훅이 반환하는 세터 함수는 리액트가 컴포넌트 내부의 상태 변화를 쉽게 감지하게 한다.즉 리액트는 세터 함수가 호출되면 컴포넌트 상태에 변화가 있다고 보고 즉시 해당 컴포넌트를 리렌더링 한다. 그러나 상태에는 타입이 존재한다.상태는 number, boolean, string 같은 원시 타입일 수도 있고 객체나 배열, 튜플 타입일 수도 있다. useState의 선언문을..
0. 들어가기최근 실시간 구현 과제를 받고, 코드를 작성한 뒤 질의 응답을 받은 적이 있었다.useMemo, useCallback에 대해 알고 있냐는 질문을 받았는데, 면접 대비를 했기 때문에 대답 자체는 무난하게 했다고 생각했다.하지만 잘 알고 있었다면 해당 과제에 이 두 훅이 적용됐어야 한다는 것을 뒤늦게 알게 됐다.즉 머리로만 알고 실제로 코드에는 적용하지 못하는 어리석은 모습을 보였던 것 같다. 약 1년 가량 코딩을 하면서 useMemo와 useCallback을 적용한 적이 거의 없는 것 같다.위에서 말한대로 이론으로만 알고 있기 때문에, 아니 오히려 이론으로도 모른다는 걸 인지했다.해당 개념을 알게 된 것도 거의 1년 전이라 기억이 안 나기도 했고... 🥲 며칠 전 빌려본 책에서 useMemo..
TDD란성공/실패 케이스를 작성한 테스트 코드를 먼저 구현하고 해당 테스트 케이스에 맞게 코드를 구현하는 것이전까지 진행한 방식은 컴포넌트를 먼저 만들고 기능 구현을 한 다음에 테스트 코드를 붙인 거라 TDD라고 할 수는 없다고 한다. 회원가입 로직으로 TDD를 진행해보자.SignupPage.tsx에 있던 ui는 모두 지워준다.// signup.cy.jsdescribe('회원가입 테스트', () => { it('사용자는 이메일과 비밀번호를 사용해서 회원가입한다', () => { // given - 회원가입 페이지에 접근한다 cy.visit('/signup'); // when - 이메일과 비밀번호를 입력한다 + 비밀번호와 비밀번호 확인값이 일치한다 // then - 회원가입 버튼이 ..
Cypress cloud 환경 설정첫 번째 테스트 자동화 도구는 cypress cloud다.cypress에서 무료로 제공하는 클라우드로, 테스트가 돌아가면 각 테스트에 대해 대시 보드를 볼 수 있다.또한 에러나 스펙에 대해서도 확인할 수 있고, pr이나 push가 발생했을 때 자동으로 테스트를 실행할 수도 있다.이것을 실행하기 위해 먼저 환경 설정을 해보자. Testing Frameworks for Javascript | Write, Run, Debug | CypressSimplify front-end testing with Cypress' open-source app. Explore our versatile testing frameworks for browser-based applications an..
스토리북UI 컴포넌트를 독립적으로 개발하고 문서화 할 수 있는 환경을 제공하는도구UI 컴포넌트에 story(UI 컴포넌트의 state를 의미)를 부여해서 렌더링을 테스트 한다. (ex. button - disabled, enabled, primary 등) 스토리북은 단순히 프론트엔드 개발자가 UI 컴포넌트를 테스트 하는 용도 뿐만 아니라, 디자인 시스템 구축에 중요한 역할을 한다.개발한 컴포넌트가 디자인 가이드에 맞는지, 스타일이 일관성 있는지, 재사용성 및 문서화와 더불어 프론트엔드 - 프론트엔드, 프론트엔드 - 디자이너 간의 협업과 의사소통이 수월해질 수 있도록 도와준다. 설치npx storybook@latest init 공식 문서 참고 (yarn은 yarn berry를 사용해야 에러가 없는데 저는..
Cypress로 공통 컴포넌트 테스트 하기 주문을 테스트 하려고 한다.이 때 사용자는 배달/주문 중 원하는 유형을 하나 선택할 수 있다./ 페이지에 오면 배달 버튼과 포장 버튼이 보인다.배달 버튼을 클릭하면 /food-type으로 이동하면서 여러 음식 종류가 노출되어야 한다. describe('주문을 테스트 한다', () => { it('사용자는 배달/주문 중 원하는 유형을 선택할 수 있다', () => { cy.visit('/'); cy.get('[data-cy=deliveryBtn]').should('be.visible').as('deliveryBtn'); cy.get('[data-cy=pickupBtn]').should('be.visible').as('pickupBtn'); ..
Cypress Testing Frameworks for Javascript | Write, Run, Debug | CypressSimplify front-end testing with Cypress' open-source app. Explore our versatile testing frameworks for browser-based applications and components.www.cypress.io 최신 웹 애플리케이션에 대한 E2E 테스트를 쉽게 생성하고, 시각적으로 디버그하고, 지속적 통합 빌드를 통해 자동으로 실행할 수 있는 테스트 도구 Cypress 설치 및 환경 설정npm install --save-dev cypress // package.json"cypress": "npx cypre..
로직이메일로 로그인을 하는 기능을 구현하려고 한다.회원가입과 유사한데 이메일 + 비밀번호 입력 후 로그인을 시도했을 때 로그인이 실패하면 에러 메세지가 나오게 해야 한다.하지만 실제로 HTTP 요청을 보낸다는 점에서 회원가입과 차이가 있다. 예제에서 사용하는 LoginPage에서는 useMutation이라는 훅을 사용하고 있다.비동기로 로그인 요청을 처리하고 요청이 실패할 경우 에러를 던지는 코드다.const useLogin = () => useMutation( ["login"], async (loginInfo: LoginProps) => postLogin(loginInfo), { onError() { throw Error("login failed"); }..
성공 케이스 작성이전 게시글에서 회원가입 시 비밀번호와 비밀번호 확인의 값이 달라 실패하는 케이스를 작성했다.이번에는 비밀번호와 비밀번호 확인의 값이 같을 때 회원가입 버튼이 활성화되는 케이스를 작성해보자. 이전 게시글의 given(회원가입 페이지가 그려진다)는 동일하고, when과 then만 수정해주면 된다.when은 비밀번호와 비밀번호 확인의 값이 일치할 때로, then은 회원가입 버튼이 활성화되는 것으로! 이 때 beforeEach를 사용하면 더 간단해진다.beforeEach는 각 describe의 it 또는 test가 동작하기 전에 동작하는 함수였다.given을 beforeEach로 감싸주고 각 test만 진행하면 된다.describe("회원가입 테스트", () => { beforeEach(()..
Jest 설치 및 환경 설정npm install --save-dev jest @types/jest ts-jest jest-environment-jsdom @testing-library/react @testing-library/dom @testing-library/jest-dom 터미널에 위와 같은 명령어를 입력해 Jest를 설치해준다.정확히 어떤 것들인지 잘 몰라서 하나하나 서치해서 정리해봤다. 먼저 강의에서는 TS를 사용하기 때문에 Jest의 타입을 정의해줄 @types/jest와 ts-jest도 설치해줬다. jest-environment-jsdom은 Jest 테스트 환경을 JSDOM으로 설정하는 패키지다.JSDOM은 Node.js 환경에서 브라우저 환경을 시뮬레이션 해서 DOM API를 사용할 수 있..
