Sign up form/#7 #50

seonghunYang · 2024-03-17T07:32:27Z

📌 작업 내용

구현 내용 및 작업 했던 내역

server action을 사용하여 회원가입 로직 구현
zod를 사용하여 회원가입 유효성 검사 로직 구현
useFunnel을 이용한 Funnel 구조의 회원가입 절차 구현
storybook 환경에서 테스트 진행을 위한 작업(msw 설정, test-runner 설정)
mocking 로직을 작성할 수 있도록 재구조화 및 모듈화
http 오류 처리를 위한 핸들러 개발
폴더 구조를 변경하면서 파일 변경이 많아졌습니다. 양해 부탁드립니다!

🤔 고민 했던 부분

'sign-up-form' 컴포넌트를 테스트하려 했으나, jest 환경에서 'useFormState'를 찾지 못하는 에러가 지속적으로 발생했습니다.
- 관련해서 조사한 결과, 최근에 저와 비슷한 이슈가 발생하고 있음을 확인했습니다. 하지만 아직 해결책이 제시되지 않은 상태입니다.
- 제 추측에 따르면, 'useFormState'가 서버와 클라이언트 양쪽에서 작동하는 훅이기 때문에, jest에서는 브라우저 환경만 실행되어 서버 측에서 'useFormState'를 실행하고 등록하는 과정이 생략되어 문제가 발생한 것으로 보입니다.
- 이 문제는 아마도 jest가 React-18의 실험적인 개념(서버에서 동작하는 컴포넌트와 훅)을 아직 지원하지 않아서 발생한 것 같습니다. 따라서 이 문제를 jest를 통해 해결하려는 시도는 어려울 것으로 판단됩니다.
- 다른 해결책을 고려한 결과, 스토리북은 playwright를 통한 상호작용 테스트를 지원하며, 이는 E2E 테스트 환경과 유사하므로 테스트가 가능할 것으로 결론지었습니다(실제로 Next 공식 문서에서도 단위 테스트보다는 E2E테스트를 권장하고 있습니다. 나온지 1년이 넘었는데, 언제 쯤 지원할까요..?)
  - https://nextjs.org/docs/app/building-your-application/testing/jest
  - https://nextjs.org/docs/app/building-your-application/testing/playwright
- 따라서 스토리북 기반으로 테스트를 진행할 수 있도록 설정을 진행했고, 성공적으로 확인했습니다. 개념적으로 E2E 테스트이긴 하지만, jest에서 진행하는 테스트와 동일한 수준의 통합 테스트로 볼 수 있습니다.
  - https://storybook.js.org/docs/writing-tests/test-runner#cli-options
  - https://storybook.js.org/docs/writing-tests/interaction-testing
- 느낀 점은, React와 Next의 새로운 기능을 지원하지 않는 곳이 많아, 예상보다 많은 어려움이 발생하였습니다. 앞으로도 이런 경우가 생길 수 있을 것 같은데, 그럴 때는 스토리북을 통해 테스트를 작성하는 방법으로 보완해야 할 것 같습니다.
Storybook의 MSW 애드온이 MSW 1.0을 지원하므로, 저희와 호환되지 않는 문제가 발생했습니다. 기존 핸들러를 재사용할 수 있도록 MSW 2.0을 지원하는 베타 버전을 활용했습니다.
- BREAKING CHANGE: Support MSW 2.0 mswjs/msw-storybook-addon#122
Mocking을 더 활용하기 위해 재구조화 및 모듈화를 진행했습니다. 유효성 검사는 핸들러에서 처리하고, 실제 비즈니스 로직은 mock-db에서 모킹하면 됩니다.
Funnel UI 패턴 구조를 관리하기 위한 useFunnel을 생성했습니다. 우선 라우터와 연계하여 히스토리를 관리할 필요는 없다고 판단하여, 흐름만 제어하는 정도로 구현했습니다.
전에 말씀드렸던 것 처럼 Server Actions를 사용하여 화원가입 로직을 구현했습니다. 그 이유는 다음과 같습니다.
- 보안: Server Actions는 POST 요청, 암호화된 클로저, 엄격한 입력 검토, 오류 메시지 해싱, 호스트 제한 등 다양한 보안 솔루션을 지원하며, Next.js 공식 문서에서도 안전한 폼 처리 방식으로 권장하고 있습니다. 솔직히 말해 이러한 모든 보안 사항을 완벽히 이해하고 있는 것은 아니지만, 클라이언트 측에서 민감한 데이터를 다루지 않는다는 점만으로도 보안상 더 안전한 방법이라고 생각했습니다.
  - https://nextjs.org/learn/dashboard-app/mutating-data
  - https://nextjs.org/blog/security-nextjs-server-components-actions
- 네이티브에 가깝고, Zod와의 호환성도 뛰어납니다.

🔊 도움이 필요한 부분

HTTP 에러를 처리하기 위해, 에러를 서브클래싱하는 핸들러를 생성했습니다. 그러나 fetch에서 Network error와 TimeoutError(abort)를 처리하도록 설정했기 때문에, 모든 에러를 서브클래싱 하지 못하는게 아쉽네요. 이 부분과 함께, 인터셉터가 없어 핸들러를 어디에 붙여야 재사용 가능하도록 만들지에 대한 고민이 필요해 보입니다.

리뷰 이후 작업

useFunnel에 대한 개선 작업을 진행했어요. 이 부분에 대해 다시 한번 자세히 리뷰 부탁드려요.
아래 링크를 참조하여 useSearchParams를 사용한 컴포넌트를 Suspense로 감싸주었습니다.
- https://nextjs.org/docs/app/api-reference/functions/use-search-params#static-rendering
그런데, 개발 모드에서는 Suspense의 fallback이 보이지 않았습니다.
빌드 후 실행하면 보이는 것을 확인했습니다.
왜 그런지 고민해 봤는데, 아마 정적 렌더링이 개발 모드에서는 적용되지 않아서 그런 것 같습니다.

app/(sub-page)/sign-up/page.tsx

gahyuun

고생하셨습니다!
error handler에 대해서는 잘 확인했습니다:) 현재는 fetch 에서 response를 받아온 후 함수를 통해서 처리해주는데 fetch를 custom 하면 fetch 내부에서 처리해주면 좋을 것 같네요!
이 부분에 대해서는 fetch custom 할 때 더 고민해보겠습니다!
계층에 따라 error handling을 해주는 부분도 좋은 것 같습니다!

gahyuun · 2024-03-18T01:34:12Z

app/(sub-page)/sign-up/components/sign-up-container.tsx

router로 따로 관리하지 않기 때문에 회원가입 폼에서 뒤로가기 버튼 클릭 시 약관 모달이 나오지 않는 걸 확인했습니다!
따로 이유가 있을까용?

오늘 시간이 좀 생겨서 history를 관리할 수 있게 개선해봤어요. 이 부분에 대해 다시 한번 자세히 리뷰 부탁드려요.

PR 메시지에 작업 중 발생한 이슈들도 기록해 두었으니 확인 부탁해요.

e5a783d

fa2a5ad

확인했구 리뷰 남겼습니다!

gahyuun · 2024-03-18T01:48:47Z

app/(sub-page)/sign-up/components/sign-up-success.tsx

sign-up-success랑 sign-up-terms 가 페이지 컴포넌트에 있는 이유가 데이터가 유저 도메인에 의존하기 보단 페이지에 의존해서가 맞을까요!?

저도 사실 약관의 내용이 유저 도메인에 속하는 것이 맞기에 이 부분에 대해서 고민을 좀 했습니다.

주요 쟁점은 내용을 데이터나 상태로 관리하지 않고 정적 텍스트로 관리하는 경우에도 도메인 컴포넌트로 볼 것인지 이었는데요.

만약 약관 내용이 데이터베이스에 저장되거나 클라이언트에서 상태로 관리한다면 도메인 컴포넌트로 분리하는게 맞으나, 현재처럼 정적 텍스트로 처리한다면 페이지 컴포넌트로 구성하기로 결정했습니다.

앞으로 비슷한 상황에도 이 컨벤션을 유지할 것 같아요.

gahyuun · 2024-03-18T01:57:55Z

app/business/user/user.type.ts

저는 type 을 type 폴더에 분리했는데 business 폴더에 분리하신 이유가 있을까요!?
맞추면 좋을 것 같아요!

이 부분에 대해서는 두 가지 이유가 있습니다.

우선, 저는 기본적으로 근접한 코드를 같은 위치에 두는 'colocate' 방식을 선호합니다.

https://koenvangilst.nl/blog/code-colocation-is-king

위 링크에서 '근접성'이란 함께 변하는 성질을 의미합니다. 그래서 'colocate' 방식이 매력적인데, 이는 코드의 위치 결정를 결정하는 여러 방법 중 가장 변화에 강하다고 느껴집니다.

두 번째 이유는 '일반 타입'인지 'Response 타입'인지에 대한 문제입니다.

저는 서버가 보내는 요청이나 응답에 모두 'Request'나 'Response'라는 접두사를 붙입니다.

예를 들어 'TakenLectures'의 경우 'TakenLecturesResponse'가 되겠죠?

이렇게 하는 이유는, 서버에서 바로 보내주는 데이터를 기반으로 'TakenLectures' 타입을 만들고 이를 컴포넌트에서 사용할 경우, 서버에서 보내주는 데이터가 변경될 때 컴포넌트까지 변경되어야 하는 문제가 생깁니다.

그래서, 서버에서 보내는 응답값에는 'Response'를 붙이고, 컴포넌트에서 사용하는 데이터는 'TakenLectures'로 지정하여 둘을 분리합니다.

아키텍처 구조 상 'TakenLectures'를 따로 만들지 않고 'TakenLecturesResponse'를 바로 사용할 수도 있지만(현재 우리의 구조가 이렇습니다), 최소한 표기를 통해 데이터의 출처를 밝히고 변경으로 인한 문제가 있을 수 있음을 드러내는 효과가 있습니다.

BE에서 논의되는 매핑에 대한 논의와 비슷한 측면이 있는 것 같네요. 물론 typescript는 덕 타이핑이기 때문에 매핑에서 좀 더 자유롭긴 하지만, 변경에 대한 리스크는 여전히 존재합니다.

https://devkingdom.tistory.com/346

정리하면, 제가 정의한 타입 파일은 서버의 요청과 응답에 대한 타입이며, 이는 query 또는 command와 강하게 연결되어 있으므로 'colocate' 철학에 따라 같은 폴더에 위치하는 것이 좋다고 생각합니다.

'TakenLectures' 타입을 만들고 이를 컴포넌트에서 사용할 경우, 서버에서 보내주는 데이터가 변경될 때 컴포넌트까지 변경되어야 하는 문제가 생깁니다.

결국 type에 대한 변경이 일어났을때 TakenLecturesResponse의 변경은 필수적이며, 연결을 위한 계층이 하나 더 생성되는 것이므로 컴포넌트에서 직접 변경하는 것과 비교해서 명확하게 장점으로 드러나는지에 대한 공감은 들지않습니다. 개개인에 따라서 계층이 하나 추가된다는 것에 대해 불편하다는 의견이 존재할 수 있을 것 같아요.

하지만 컴포넌트의 안정성을 높일 수 있다는 의견에 동의하여 해당 구조를 채택하고 싶습니다. 더불어 안정성 및 유연성을 목적으로 사용하는 만큼 colocate방식을 통한 response type관리가 유용할 것 같다는 의견에도 동의합니다.

응답값 타입에 Response를 붙이는 것과 함께 변하는 것에 대해 근접하게 두는 것 좋은 것 같습니다!
다만, 서버에서 보내주는 데이터 타입과 컴포넌트에서 사용하는 데이터 타입을 분리했을 때 ( 둘의 타입이 같다는 가정 하 )서버에서 보내주는 데이터가 변경될 때 컴포넌트까지 변경되어야 하는 문제가 생기는 걸 방지하고 안정성이 높아진다는 것에 공감이 안되는데 이 부분에 대해서 스프린트 회의때 조금 더 설명해주실 수 있나요??

gahyuun · 2024-03-18T07:25:40Z

.storybook/preview.ts

@@ -1,7 +1,12 @@
 import type { Preview } from '@storybook/react';
 import '../app/globals.css';

+import { initialize, mswDecorator } from 'msw-storybook-addon';
+
+initialize();


https://storybook.js.org/addons/msw-storybook-addon
parameters 대신 initialize에서 한 번에 handlers 를 설정해줄 수 있을 것 같아요!

9c49969
좋네요. 고마워요

gahyuun · 2024-03-18T08:16:12Z

app/mocks/handlers/user-handler.mock.ts

+    await delay(500);
+
+    if (!isSuccess) {
+      return HttpResponse.json({ status: 400, message: '이미 가입된 학번입니다.' }, { status: 400 });


혹시 status:400 객체를 또 전달하는 이유가 따로 있을까용?

후자의 status는 MSW의 응답을 결정하는 것이고,

전자는 졸부의 실제 응답을 모방한 것입니다.

졸부 API를 확인해보니, 실패 시 data에는 저렇게 보내주는 것 같습니다. 'status'라는 이름만 같을 뿐, 아마 실제 응답코드랑 별개인 것 같습니다.

yougyung

수고하셨습니다 !

app/business/user/user.command.ts

app/(sub-page)/sign-up/components/sign-up-container.tsx

app/hooks/useFunnel.tsx

yougyung · 2024-03-18T12:45:52Z

next.config.mjs

+  experimental: {
+    serverActions: {
+      // https://github.com/vercel/next.js/issues/58295
+      allowedOrigins: ['localhost:3000', 'ideal-waddle-5xwrj5ppjvxhvq7x-3000.app.github.dev'],


이슈를 확인해보았지만 명확하게 어떤 이유에서 추가 된 설정인지 모르겠습니다. 설명을 덧붙여주실 수 있을까요?

제가 사용하는 codespace에서는 로컬에서 호스팅하는 것이 아니라 다른 도메인에 프록시를 연결하여 호스팅합니다. 즉, localhost:3000을 ideal-waddle-5xwrj5ppjvxhvq7x-3000.app에서 실행하는 것입니다.

그러나 이렇게 하면 서버 액션이 cors 오류로 인해 발생하므로, 허용 도메인을 추가하였습니다.

제 개발 환경에서 동작하기 위해 설정한 것으로 이해하시면 됩니다.

그렇군요. 로컬에서 호스팅하는 것이 아니라 다른 도메인에 프록시를 연결하여 호스팅하시는 이유는 무엇인지 궁금합니다!

Co-authored-by: yougyung <[email protected]>

…ey for history

…ltState

… sign-up-form.stories.tsx

seonghunYang · 2024-03-19T14:11:46Z

수고하셨습니다 !

defaultState 오류 남긴거 수정했어요. 고마워요.
73f94bc
이후에 defaultStep이란 더 적절한 이름이 떠올라서 수정했어요
9353625

gahyuun · 2024-03-20T11:44:56Z

app/hooks/useFunnel.tsx

+
+  const stepQueryKey = options?.stepQueryKey ?? DEFAULT_STEP_QUERY_KEY;
+
+  const step = searchParams.get(stepQueryKey) as Steps | undefined;


단언을 해주지 않으면 step이 null 또는 string 타입인 걸 확인했습니다 ! 이때 undefined 로도 단언해주신 이유가 궁금합니다!

github-actions · 2024-03-27T10:18:40Z

🚀storybook: https://65ccb85d5afe55a024495bc0-kbqxvmbrmd.chromatic.com/

seonghunYang added 30 commits March 8, 2024 10:42

feat: Add Alert and AlertDestructive components

c6c9926

refactor: Refactor form state structure

b99e407

feat: Add alert component to form

3ce84ad

feat: Add mock action function in form stories

2eb2eff

rename: Rename auth domain to user domain

d7d31d3

feat: Update user command and add sign-up form

3fb7609

feat: Add user API endpoint to API_PATH

ad7663e

feat: Add mock database

94acb42

refactor: Refactor mock handlers structure

0778dd6

chore: Add experimental serverActions configuration to next.config.mjs

7d14ef1

refactor: Refactor user command and user type files

13eb3da

feat: set Content-Type header in createUser function

820bc23

feat: Fix createUser function to prevent duplicate user creation

66defae

feat: Refactor user creation and error handling

1ffb3cf

feat: Add http error handling logic

fa05b5b

refactor: Refactor user command and sign-up form

138e06c

fix: Fix select root component

fc60afa

refactor: Update form field names and translations

03e870a

refactor: update error message

39ddab6

fix: Update English level options in sign-up form

c888fd9

feat: Add msw-storybook-addon dependency

2779ee5

chore: setting msw addon to storybook

4198e04

fix: Update API base URL in api-path.ts

7ba5b37

chore: Add test-storybook script to package.json

37665b8

feat: Add sign-up form component and stories

dd127e0

test: Add aliases and mock files for testing in Storybook

c6e8e9e

feat: Update user-handler.mock.ts and sign-up-form.stories.tsx

366f2e7

feat: Add isSuccess property to FormState

f71e81f

feat: Add sign-up page component

11c308b

feat: Add useFunnel hook for managing multi-step processes

b22027a

seonghunYang added 6 commits March 17, 2024 06:35

refactor: Refactor sign-up page component

4b1ff85

test: Add success and failure scenarios test for sign-up form

4a7308c

refactor: Refactor app-router context provider and remove unused file

70cd343

chore: Update sign-up components with mock content and styles

414f300

refactor: Update SignUpFormSchema to SignUpFormMockSchema

e20d8fc

refactor: Remove console.log statement in SelectRoot component

74f5861

seonghunYang requested review from yougyung and gahyuun as code owners March 17, 2024 07:32

yougyung reviewed Mar 18, 2024

View reviewed changes

app/(sub-page)/sign-up/page.tsx Outdated Show resolved Hide resolved

gahyuun previously approved these changes Mar 18, 2024

View reviewed changes

yougyung reviewed Mar 18, 2024

View reviewed changes

seonghunYang dismissed gahyuun’s stale review via 73f94bc March 19, 2024 12:44

seonghunYang and others added 9 commits March 19, 2024 21:44

Update app/hooks/useFunnel.tsx

73f94bc

Co-authored-by: yougyung <[email protected]>

fix: Fix typo in useFunnel hook

2e109ec

feat: Add ContentContainer component to sign-up page

812c794

chore: Remove revenue chart from dashboard page

ffbde27

refactor: Refactor useFunnel hook to include options for step query k…

e5a783d

…ey for history

feat: Refactor sign-up page to use Suspense and LoadingSpinner

fa2a5ad

refactor: Refactor useFunnel hook to use defaultStep instead of defau…

9353625

…ltState

chore: update initialization in preview.ts and remove userHandlers in…

9c49969

… sign-up-form.stories.tsx

refactor: Refactor user command module and add form validation

397f150

yougyung previously approved these changes Mar 20, 2024

View reviewed changes

gahyuun previously approved these changes Mar 20, 2024

View reviewed changes

chore: Merge branch 'main' into sign-up-form/#7

f6e7028

seonghunYang dismissed stale reviews from gahyuun and yougyung via f6e7028 March 27, 2024 10:15

seonghunYang merged commit e44512e into main Mar 27, 2024
3 checks passed

seonghunYang deleted the sign-up-form/#7 branch March 27, 2024 10:22

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Sign up form/#7 #50

Sign up form/#7 #50

seonghunYang commented Mar 17, 2024 •

edited

Loading

gahyuun left a comment

gahyuun Mar 18, 2024

seonghunYang Mar 19, 2024 •

edited

Loading

gahyuun Mar 20, 2024

gahyuun Mar 18, 2024

seonghunYang Mar 19, 2024

gahyuun Mar 18, 2024

seonghunYang Mar 19, 2024 •

edited

Loading

yougyung Mar 20, 2024

gahyuun Mar 20, 2024

gahyuun Mar 18, 2024

seonghunYang Mar 19, 2024

gahyuun Mar 18, 2024

seonghunYang Mar 19, 2024

yougyung left a comment

yougyung Mar 18, 2024

seonghunYang Mar 19, 2024

yougyung Mar 20, 2024

seonghunYang commented Mar 19, 2024 •

edited

Loading

gahyuun Mar 20, 2024

github-actions bot commented Mar 27, 2024


		const stepQueryKey = options?.stepQueryKey ?? DEFAULT_STEP_QUERY_KEY;

		const step = searchParams.get(stepQueryKey) as Steps \| undefined;

Sign up form/#7 #50

Sign up form/#7 #50

Conversation

seonghunYang commented Mar 17, 2024 • edited Loading

📌 작업 내용

🤔 고민 했던 부분

🔊 도움이 필요한 부분

리뷰 이후 작업

gahyuun left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

seonghunYang Mar 19, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

seonghunYang Mar 19, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yougyung left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

seonghunYang commented Mar 19, 2024 • edited Loading

Choose a reason for hiding this comment

github-actions bot commented Mar 27, 2024

seonghunYang commented Mar 17, 2024 •

edited

Loading

seonghunYang Mar 19, 2024 •

edited

Loading

seonghunYang Mar 19, 2024 •

edited

Loading

seonghunYang commented Mar 19, 2024 •

edited

Loading