[DEV] 이미지 데이터 전송 api #41

causyj · 2024-10-17T14:22:22Z

Summary

이미지 데이터를 전달하는 api 작업을 했습니다.

Description

성별, 이미지 url, 이메일 주소 값 모두 잘 들어가는 것을 확인했습니다.
전송이 성공적일때 waiting 페이지로 이동합니다.
이메일을 입력하지 않을 경우에 null값을 두고 다음 페이지로 이동합니다.
-gender 값이 female 일경우에는 1, male일 경우에는 0으로 변환하여 저장하였습니다.

src/app/email/page.tsx

ldh019

답변만 해주시면 어프루브가! 싸다 싸

1lsang

수고하셨습니다~~!

1lsang · 2024-10-17T14:50:02Z

src/app/email/page.tsx

+export default dynamic(() => Promise.resolve(EmailEnterView), {
+  ssr: false,
+});


혹시 동적 import를 위해서 사용한 부분일까요?! 왜 이렇게 하셨는지 궁금합니다!

저번 PR 내용에도 있던 부분인데요,
아래의 코드와 같이 토큰을 불러오는 과정에 window객체가 쓰이는데

const storedToken = window.sessionStorage.getItem('accessToken') || '';

이 코드를 useEffect안에 넣는 것보다 밖으로 빼는게 나을 것 같다고 하셔서 밖으로 빼고 저 코드를 같이 썼습니다!

계속 의문이였던게 왜 storedToken을 계속 세션 스토리지에서 불러오는지 궁금했습니다.
login/page.tsx 파일을 보시면

useEffect(() => { if (storedToken !== '') { fetch( `${process.env.NEXT_PUBLIC_CLIENT_ADDRESS}:${process.env.NEXT_PUBLIC_CLIENT_PORT}/api/validate?code=${storedToken}`, ) .then((response) => response.json()) .then(async (data) => { if (data.loginSuccess === false) { const reissueResponse = await fetch( `${process.env.NEXT_PUBLIC_CLIENT_ADDRESS}:${process.env.NEXT_PUBLIC_CLIENT_PORT}/api/reissue?code=${storedToken}`, ); if (reissueResponse.ok) { const reissueData = await reissueResponse.json(); setInsertToken(reissueData.accessToken); } else { setInsertToken(''); setErrorMessage(LOGIN_ERROR_MSG); setErrorCheckMessage(LOGIN_ERROR_CHECK_MSG); router.push(ROUTE_TYPES.ERROR); } } }) .catch(() => { setInsertToken(''); setErrorMessage(LOGIN_ERROR_MSG); setErrorCheckMessage(LOGIN_ERROR_CHECK_MSG); router.push(ROUTE_TYPES.ERROR); }); } else { setInsertToken(storedToken); } }, [

맨 마지막에 storedToken을 atom에 넣기 때문에 이후에는 세션 객체를 직접 접근할 필요가 없어서 lazy loading이 필요없습니다.
혹시 이 storeToken을 담는 대상인 tokenAtom의 값을 추출해보신적이 있으신가요? #21
지금 뒤에 있는 모든 코드가 세션스토리지에서 직접 코드를 가져오는데 만약에 tokenAtom에 값이 정상적으로 있다면 이슈 파서 세션 스토리지에서 코드를 가져오는 부분을 전부 제거하고 lazy loading도 삭제하는 것이 좋아보입니다.

tokenAtom이 있었군요..!
지금 서버가 꺼져있어서 켜지면 수정하겠습니다!

이 부분은 이슈 파두었습니다
서버 켜질 때 다른 코드 같이 수정하겠습니다!

1lsang · 2024-10-17T14:58:14Z

src/app/api/email/route.ts

+  const { searchParams } = new URL(request.url);
+  const searchCode = searchParams.get('code') || '';


토큰을 넘기기 위해서 searchParams를 사용한 것 같은데 이런 방법은 불가능할까요?

Suggested change

const { searchParams } = new URL(request.url);

const searchCode = searchParams.get('code') || '';

const headers = request.headers;

// fetch

const response = await fetch(url, {

method: 'POST',

headers,

body

})

우왓 위 코드로도 잘 작동합니다!
궁금한 점이 있는데요, 그러면 저렇게 작성했을때 기존에 있었던 Authorization부분 코드를 작성하지 않아도 되는 건가요?? 클라이언트에서 헤더에 Authorization부분을 포함했기 때문에 상관이 없는 지 궁금합니다!

클라이언트에서 헤더에 담아서 보낸 내용을 그대로 헤더로 사용하는 코드입니다! 클라이언트에서 헤더에 토큰을 담아주었기때문에 굳이 따로 파싱하는 과정을 거칠 필요는 없습니다.

아하 감사합니다!

1lsang · 2024-10-17T14:58:46Z

src/app/api/email/route.ts

+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${searchCode}`,
+      },
+      body: JSON.stringify(body),


stringify를 실행하는 이유가 있을까요?

JSON.stringify를 안쓰면 에러가 났었는데 찾아보니까 JavaScript의 fetch API나 다른 네트워크 요청 라이브러리는 요청 본문을 문자열로 전송해야 한다고 하네요!
아니면 혹시 다른 방법이 있을까요?

아아 fetch 메서드에서는 객체를 직접 답을 수 없었네요. 매번 axios를 사용하다보니 잊고있었네요! 그대로 사용하면 될것 같습니다!

falconlee236

상수 관련 리뷰 하나랑 에러 페이지 라우팅 관련 리뷰 하나 했습니다!
그리고 맨 마지막에 lazy loading에 대해서 궁근한 점 남겨드렸습니다

falconlee236 · 2024-10-18T01:34:13Z

src/app/email/page.tsx

+export default dynamic(() => Promise.resolve(EmailEnterView), {
+  ssr: false,
+});


계속 의문이였던게 왜 storedToken을 계속 세션 스토리지에서 불러오는지 궁금했습니다.
login/page.tsx 파일을 보시면

useEffect(() => { if (storedToken !== '') { fetch( `${process.env.NEXT_PUBLIC_CLIENT_ADDRESS}:${process.env.NEXT_PUBLIC_CLIENT_PORT}/api/validate?code=${storedToken}`, ) .then((response) => response.json()) .then(async (data) => { if (data.loginSuccess === false) { const reissueResponse = await fetch( `${process.env.NEXT_PUBLIC_CLIENT_ADDRESS}:${process.env.NEXT_PUBLIC_CLIENT_PORT}/api/reissue?code=${storedToken}`, ); if (reissueResponse.ok) { const reissueData = await reissueResponse.json(); setInsertToken(reissueData.accessToken); } else { setInsertToken(''); setErrorMessage(LOGIN_ERROR_MSG); setErrorCheckMessage(LOGIN_ERROR_CHECK_MSG); router.push(ROUTE_TYPES.ERROR); } } }) .catch(() => { setInsertToken(''); setErrorMessage(LOGIN_ERROR_MSG); setErrorCheckMessage(LOGIN_ERROR_CHECK_MSG); router.push(ROUTE_TYPES.ERROR); }); } else { setInsertToken(storedToken); } }, [

맨 마지막에 storedToken을 atom에 넣기 때문에 이후에는 세션 객체를 직접 접근할 필요가 없어서 lazy loading이 필요없습니다.
혹시 이 storeToken을 담는 대상인 tokenAtom의 값을 추출해보신적이 있으신가요? #21
지금 뒤에 있는 모든 코드가 세션스토리지에서 직접 코드를 가져오는데 만약에 tokenAtom에 값이 정상적으로 있다면 이슈 파서 세션 스토리지에서 코드를 가져오는 부분을 전부 제거하고 lazy loading도 삭제하는 것이 좋아보입니다.

falconlee236 · 2024-10-18T01:36:16Z

src/app/email/page.tsx

+        if (response.status === 200) {
+          router.push(ROUTE_TYPES.WAITING);
+        } else {
+          setErrorMessage(IMG_GENERATED_ERROR_MSG);


이 코드에서는 에러 메시지는 잘 작성하셨는데 정작 중요한 에러 페이지로 라우팅이 되지 않는것 같습니다.

어웃 그러네요 감사합니다!

falconlee236 · 2024-10-18T01:37:20Z

src/app/email/page.tsx

+  const setErrorMessage = useSetAtom(errorMessageAtom);
+  const setErrorCheckMessage = useSetAtom(errorCheckMessageAtom);
+  const storedToken = window.sessionStorage.getItem('accessToken') || '';
+  const gender = genderString === 'female' ? 1 : 0;


남성 여성을 1과 0으로 구분하지말고 ROUTE_TYPE 처럼 상수로 구현해서 GENDER.MALE, GENDER.FEMALE 형식으로 구현하는 방법에 대해서는 어떻게 생각하시나요

넵 수정해두었습니다~

yymin1022

요구사항 모두 확인된 것 같은데, Approve해도 되는거 아니에요??

yymin1022 · 2024-10-24T08:22:40Z

@falconlee236 ChangeRequested 걸려있어서 Merge가 블락되어있습니다. 확인부탁드려요!

falconlee236 · 2024-10-24T08:36:32Z

@falconlee236 ChangeRequested 걸려있어서 Merge가 블락되어있습니다. 확인부탁드려요!

리팩토링할거 남아서 서버켜질때 수정해야합니다 하하 @yymin1022

causyj · 2024-10-24T08:56:22Z

@falconlee236 ChangeRequested 걸려있어서 Merge가 블락되어있습니다. 확인부탁드려요!

리팩토링할거 남아서 서버켜질때 수정해야합니다 하하 @yymin1022

storedToken 불러오는거는 수정할 페이지들 더 있어서 따로 pr올리려고 이슈 파놨습니당

causyj added 4 commits October 17, 2024 22:27

Update email/page.tsx : post api for img request

5833133

Update email/page.tsx: edit atom state

a19f962

Update email/page.tsx : add error msg

0a0edb6

Update email/page.tsx: change gender value from string to int

743f46e

causyj added the dev New feature or request label Oct 17, 2024

causyj self-assigned this Oct 17, 2024

causyj requested review from falconlee236, 1lsang, ldh019 and yymin1022 as code owners October 17, 2024 14:22

causyj linked an issue Oct 17, 2024 that may be closed by this pull request

[DEV] 이메일 전달 API #38

Closed

ldh019 reviewed Oct 17, 2024

View reviewed changes

src/app/email/page.tsx Outdated Show resolved Hide resolved

ldh019 reviewed Oct 17, 2024

View reviewed changes

1lsang previously approved these changes Oct 17, 2024

View reviewed changes

causyj added 2 commits October 18, 2024 10:02

Update page.tsx : edit email null

ab52197

page.tsx: edit header

9455ea9

falconlee236 requested changes Oct 18, 2024

View reviewed changes

falconlee236 added this to the 1.0.0 milestone Oct 18, 2024

causyj added 2 commits October 18, 2024 10:56

Update page.tsx : add error routing

1a54144

Add gendervalue.ts : add gender value constants

7d45c62

causyj mentioned this pull request Oct 18, 2024

[FIX] 토큰받아오는 코드 리펙토링 #42

Open

yymin1022 approved these changes Oct 24, 2024

View reviewed changes

ldh019 approved these changes Nov 5, 2024

View reviewed changes

causyj dismissed 1lsang’s stale review via 7d45c62 November 6, 2024 09:02

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[DEV] 이미지 데이터 전송 api #41

[DEV] 이미지 데이터 전송 api #41

causyj commented Oct 17, 2024

ldh019 left a comment

1lsang left a comment

1lsang Oct 17, 2024

causyj Oct 18, 2024

falconlee236 Oct 18, 2024 •

edited

Loading

causyj Oct 18, 2024

causyj Oct 18, 2024

1lsang Oct 17, 2024

causyj Oct 18, 2024

1lsang Oct 18, 2024

causyj Oct 18, 2024

1lsang Oct 17, 2024

causyj Oct 18, 2024

1lsang Oct 18, 2024

falconlee236 left a comment

falconlee236 Oct 18, 2024 •

edited

Loading

falconlee236 Oct 18, 2024

causyj Oct 18, 2024

falconlee236 Oct 18, 2024

causyj Oct 18, 2024

yymin1022 left a comment

yymin1022 commented Oct 24, 2024

falconlee236 commented Oct 24, 2024 •

edited

Loading

causyj commented Oct 24, 2024

		const { searchParams } = new URL(request.url);
		const searchCode = searchParams.get('code') \|\| '';

-  const { searchParams } = new URL(request.url);
-  const searchCode = searchParams.get('code') || '';
+const headers = request.headers;
+// fetch
+const response = await fetch(url, {
+  method: 'POST',
+  headers,
+  body
+})

[DEV] 이미지 데이터 전송 api #41

Are you sure you want to change the base?

[DEV] 이미지 데이터 전송 api #41

Conversation

causyj commented Oct 17, 2024

Summary

Description

ldh019 left a comment

Choose a reason for hiding this comment

1lsang left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

falconlee236 Oct 18, 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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

falconlee236 left a comment

Choose a reason for hiding this comment

falconlee236 Oct 18, 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

yymin1022 left a comment

Choose a reason for hiding this comment

yymin1022 commented Oct 24, 2024

falconlee236 commented Oct 24, 2024 • edited Loading

causyj commented Oct 24, 2024

falconlee236 Oct 18, 2024 •

edited

Loading

falconlee236 Oct 18, 2024 •

edited

Loading

falconlee236 commented Oct 24, 2024 •

edited

Loading