[7주차] 아지토 미션 제출합니다. #8

CSE-pebble · 2024-06-26T14:34:23Z

🐻 배포 링크

https://react-vote-19th.vercel.app/

👩‍💻 구현 기능

유담

로그인
회원가입
토큰 관리

나현

투표 기능 개발

기술 스택

nextJS
tailwindCSS
cva
typescript
react-query
react-hook-form

React-hook-form?

제어 컴포넌트 vs 비제어 컴포넌트

제어 컴포넌트:

React state를 신뢰 가능한 단일 출처로 사용하여 입력 폼 엘리먼트를 제어.
실시간 값 동기화가 가능하지만, state가 증가하면 (인풋이 여러 개가 되면)컴포넌트 전체가 리렌더링되어 불필요한 연산이 발생.
유효성 검사를 위해 추가적인 state와 함수가 필요, 코드 복잡성 증가.

비제어 컴포넌트:

React에 의해 값이 제어되지 않는 컴포넌트.
실시간 동기화가 필요 없고, state로 값을 관리할 필요 없이 submit 시 값을 받아옴.
입력 폼이 늘어나도 state가 늘어나지 않으며, 값이 변경되어도 리렌더링되지 않음.

React Hook Form 사용 이유

React Hook Form의 장점:

비제어 컴포넌트의 장점 유지: 실시간 유효성 검사 및 동기화 기능 제공.
최소한의 리렌더링: 마운팅 속도 향상.
작은 패키지 크기: 종속성이 없는 가벼운 라이브러리.
타입스크립트 지원: 타입 안전성 보장.
친절한 공식 문서: 사용법과 예제를 쉽게 접근 가능.
지속적인 업데이트: 높은 다운로드 수와 꾸준한 업데이트.

로그인, 회원가입 페이지

react-hook-form 이용

로직 설명

인풋 창 클릭 시 호버
인풋이 하나라도 비어있으면 버튼 disabled
각 인풋에 대한 유효성 검증 로직
- 비밀번호, 비밀번호 확인 불일치
- 아이디, 비밀번호, 이메일, 유저 이름에 대한 각각의 정규표현식 검증 로직 존재
- 회원가입 : 아이디 중복, 이메일 중복 시 에러 띄우기
- 로그인 : 비밀번호 불일치 시 에러 띄우기
회원가입 성공 시 자동으로 로그인이 되는 방식으로 구현
회원가입 및 로그인 성공 시 홈화면으로 이동

트러블 슈팅

Mixed-content 에러 해결을 위한 rewrites 설정

문제

HTTPS로 배포된 사이트에서 HTTP 서버와 통신 시 Mixed-content 에러 발생.

해결 방법

next.config.js에 rewrites 설정을 추가하여 모든 api 요청을 HTTP 서버로 프록시하도록 설정.

예시
```
Request URL: https://react-vote-19th.vercel.app/login
Request Method: POST

프록시 설정에 의해 실제 요청 URL:
Request URL: http://<our-backend-server>/api/v1/login
Request Method: POST
```
그냥 백엔드가 https로 배포하면 안됨?

맞아요..^^ 근데 도메인도 사야하고 이미 아지토는 운영중인 사이트라 그 도메인을 같이 쓰기도 애매했습니다. 사실 조유담 이름으로 된 도메인이 하나 있는데 그걸 쓸 걸 하는 생각도 드네요.

- eslint : ++, -- 연산자 사용 허용 - prettier: Windows 스타일로 작성된 줄바꿈(CRLF) 감지 시 Unix/Linux 스타일로 작성된 줄바꿈(LF)으로 자동 변경

Feat/issue#2

Feat/issue#7

Fix: 데이터 로딩 중일 때(isLoading) 처리

Feat/issue#7

[#12] 헤더 관련 문제 해결

Rose-my

이번 과제도 너무 수고많으셨어요 ...! 매번 코드리뷰할때마다 많이 배워갔는데 마지막까지 최고입니당
아지토 화이팅 > <

Rose-my · 2024-06-28T09:09:47Z

src/app/demo-day/vote/page.tsx

@@ -0,0 +1,68 @@
+"use client";
+import { useAtom } from "jotai";


teamValue 상태를 jotai의 useAtom을 통해 관리하시는군요! 상태 관리에 대한 이해가 높으신것 같아요...! 배워갑니다 !!

Rose-my · 2024-06-28T09:12:54Z

src/app/demo-day/vote/page.tsx

+import GenSelectBtn from "@/components/common/GenSelectBtn";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { postTeamVote } from "@/api/demo-day";
+import toast from "react-hot-toast";


토스트로 경고창 구현한 것도 멋져요...> <

Rose-my · 2024-06-28T09:21:14Z

src/api/auth.ts

+export const getUserInfo = async (): Promise<UserInfoRes> => {
+  return await instance.get("/auth");
+};


타입스크립트의 타입 안전성을 위해서 반환값을 지정할 수도 있을 것 같아요!

Suggested change

export const getUserInfo = async (): Promise<UserInfoRes> => {

return await instance.get("/auth");

};

export const getUserInfo = async (): Promise<UserInfoRes> => {

try {

const response = await instance.get<UserInfoRes>("/auth");

return response.data;

} catch (error) {

console.error("GetUserInfo Error:", error);

throw error;

}

Dahn12

마지막 스터디도 수고 많으셨습니다! 항상 꼼꼼하게 진행하신다는 생각이 들어서 아지토도 기대가 많이 됩니다!

Dahn12 · 2024-06-28T09:39:41Z

.github/PULL_REQUEST_TEMPLATE.md

풀리퀘 템플릿까지...!

Dahn12 · 2024-06-28T09:40:28Z

.github/workflows/deploy.yml

아지토 팀은 항상 이런 기본 설정들(?)을 정말 잘 해주시는 거 같아요...! 👍

Dahn12 · 2024-06-28T09:42:23Z

src/app/leader/page.tsx

+            <BigSelectBtn btnTexts={["FRONT-END", "파트장 투표"]} />
+          </Link>
+          <Link href="/leader/result-front">
+            <GenSelectBtn>결과보기</GenSelectBtn>


버튼과 같은 컴포넌트도 따로 빼주셨네요...! 정말 깔끔한거 같아요!

Dahn12 · 2024-06-28T09:44:24Z

src/app/sign-up/page.tsx

+        }
+      } catch (loginError) {
+        console.error("로그인 시도 실패:", loginError);
+        toast.error("회원가입은 성공했지만, 자동 로그인이 실패했습니다.");


자동 로그인...!

CSE-pebble and others added 30 commits June 20, 2024 16:43

Initial commit from Create Next App

d4af542

Merge branch 'main' of https://github.com/team-azito/react-vote-19th

f24f899

Chore: 쓸데없는 파일 및 코드 삭제

4220454

Chore: 파비콘 & 메타데이터 설정 및 절대경로 설정

4589206

Chore: ESLint + Prettier + Husky & lint-staged 설정

425c5e3

배포 테스트

c787518

Fix : 배포 에러 해결 중

b7b721e

이슈 템플릿 업로드

5976316

테스트 중

8d0cd1c

Create �deploy.yml

fec743a

배포 문제 해결 중

5f0d16b

폴더 이름 변경

0e9c4f2

폴더 이름 변경

e75480c

Chore: svgr webpack 설치 및 세팅

ab2a47c

Merge branch 'main' of https://github.com/team-azito/react-vote-19th

8c3f04d

Style : 폰트 설정 완료

0b2934a

Merge branch 'main' of https://github.com/team-azito/react-vote-19th

7edcc79

Chore: 폴더 구조 잡기

0ee3e3a

Merge branch 'main' of https://github.com/team-azito/react-vote-19th

8af4a32

Fix : 폰트 적용 안되는 문제 해결 중

2612af6

Merge branch 'main' of https://github.com/team-azito/react-vote-19th

845e0fd

Style : 폰트 적용 테스트

545d1f2

Chore: eslint 및 prettier 설정 추가

e9321ae

- eslint : ++, -- 연산자 사용 허용 - prettier: Windows 스타일로 작성된 줄바꿈(CRLF) 감지 시 Unix/Linux 스타일로 작성된 줄바꿈(LF)으로 자동 변경

자잘한 수정

459f99a

Chore: 쓸데없는 주석 삭제 및 prettier 수정

0693437

Merge branch 'main' of https://github.com/team-azito/react-vote-19th

1eb8568

Chore: pxr 단위 설정

0a811ec

Style: 색상 팔레트 설정

e61b65d

Style : layout 스타일링

2865dfa

Style: 전역 스타일 설정

699bfb4

CSE-pebble and others added 27 commits June 26, 2024 21:43

Feat: 투표 결과 화면 퍼블리싱

063bbb0

Fix: 충돌 해결

f659c0a

Merge pull request #6 from team-azito/feat/issue#2

e778eca

Feat/issue#2

Feat : 회원 정보 가져오기 구현 #7

a344a9f

Feat : 데모데이 투표 및 인증인가 페이지 border css 해결 #7

40e8eb9

Feat: 버튼 비활성화 시 클릭 이벤트 막기

0cdd085

Feat: 파트장 투표 API 연결

640750e

Feat: 테스트 데이터 삭제 및 투표 결과 API 연결 완료

b6c5c74

Fix: FE, BE 투표 결과 다른 query key로 설정

661494b

Edit: 유저 투표 여부에 따라 투표 버튼 disabled 되는 기능 삭제

2859ff7

Feat: 로그인 시 유저 정보 API 연결

f5995f2

Merge pull request #8 from team-azito/feat/issue#7

2979495

Feat/issue#7

Fix: 데이터 로딩 중일 때(isLoading) 처리

f5302c8

Merge pull request #9 from team-azito/feat/issue#7

f8aa9f9

Fix: 데이터 로딩 중일 때(isLoading) 처리

Fix: query key 잘못 입력한 것 수정

a5a6c23

컴포넌트 이동

5d893f4

Fix: 파트장 로그아웃 상태에서 투표 시 에러 처리

56bcbbb

Fix: 투표 결과 후보만 보이게 slice 처리

fb0ebe7

Feat: 로그아웃 기능 구현

a27d982

Merge pull request #10 from team-azito/feat/issue#7

a0b2cb6

Feat/issue#7

Fix : 로그인 회원가입 시 헤더에 바로 유저정보 반영되게 수정 #12

43d081e

Fix : 로그인 상태 전역으로 관리 #12

d3917ea

Merge pull request #13 from team-azito/fix/issue#12

c151a19

[#12] 헤더 관련 문제 해결

Fix : 엑세스토큰이 있을 때에만 데이터 패칭

c978c43

Fix: 빌드 에러 해결

0a68fca

Feat : 투표 완료 시 투표 결과 창으로 이동 및 결과 바로 반영되게 수정

e21ab91

Fix : 데모데이 투표 시 투표 결과가 바로 반영되게 수정

1fc02a1

Rose-my reviewed Jun 28, 2024

View reviewed changes

Dahn12 reviewed Jun 28, 2024

View reviewed changes

Update README.md

8b01ee5

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[7주차] 아지토 미션 제출합니다. #8

[7주차] 아지토 미션 제출합니다. #8

CSE-pebble commented Jun 26, 2024 •

edited

Loading

Rose-my left a comment

Rose-my Jun 28, 2024

Rose-my Jun 28, 2024

Rose-my Jun 28, 2024

Rose-my Jun 28, 2024

Dahn12 left a comment

Dahn12 Jun 28, 2024

Dahn12 Jun 28, 2024

Dahn12 Jun 28, 2024

Dahn12 Jun 28, 2024

		@@ -0,0 +1,68 @@
		"use client";
		import { useAtom } from "jotai";

-export const getUserInfo = async (): Promise<UserInfoRes> => {
-  return await instance.get("/auth");
-};
+export const getUserInfo = async (): Promise<UserInfoRes> => {
+  try {
+    const response = await instance.get<UserInfoRes>("/auth");
+    return response.data;
+  } catch (error) {
+    console.error("GetUserInfo Error:", error);
+    throw error;
+  }

[7주차] 아지토 미션 제출합니다. #8

Are you sure you want to change the base?

[7주차] 아지토 미션 제출합니다. #8

Conversation

CSE-pebble commented Jun 26, 2024 • edited Loading

🐻 배포 링크

👩‍💻 구현 기능

유담

나현

기술 스택

React-hook-form?

제어 컴포넌트 vs 비제어 컴포넌트

React Hook Form 사용 이유

로그인, 회원가입 페이지

로직 설명

트러블 슈팅

문제

해결 방법

예시

그냥 백엔드가 https로 배포하면 안됨?

Rose-my 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

Choose a reason for hiding this comment

Dahn12 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

Choose a reason for hiding this comment

CSE-pebble commented Jun 26, 2024 •

edited

Loading