전남대 FE_강호정 6주차 과제 #113

hojeong26 · 2024-08-05T04:39:50Z

새로운 주로 넘어가버렸네요...?ㅎㅎ...
일단 백엔드분께 받은 url을 이용해서 코드 수정하고 있습니다. 먼저 pr부터 보내요!!

p.s. 저는 여름감기에 걸렸답니다🤒🤒요즘 감기와 코로나가 유행이래요..멘토님도 몸조심하세요..!!!

wacilpong

@hojeong26
앗 호정님 기다리고 있었습니다 ㅎㅎ 일단 충돌 해결해주시면 오늘내로 확인해볼게요~!

wacilpong

@hojeong26
호정님~ 아직 배포가 안된 것 같은데 맞을까요?
그리고 Readme.md파일에 충돌이 있어서요. 충돌해결해주시겠어요?
지금까지 하신 코드로 우선 소소한 리뷰 달아보았습니다~!

wacilpong · 2024-08-05T13:33:18Z

README.md

+
+- 아래 endpoint로 접속해볼 수 있습니다!
+  - 52.78.81.37:8080


여기로 접속하면 에러가 뜨는데요. 프론트 배포된 것 맞을까요?

아직 에러 수정하고 있습니다..!

wacilpong · 2024-08-05T13:38:47Z

src/api/hooks/products.mock.ts

@@ -7,15 +7,15 @@ import { getProductsPath } from './useGetProducts';
 export const productsMockHandler = [
  rest.get(
    getProductsPath({
-      categoryId: '2920',
+      category_id: '2920',


아마 서버 인터페이스로 snake_case를 채택한 것 같은데, 프론트엔드에서 코드 case를 섞어 사용하면 차후 의도를 알아보기 힘들 수도 있고, 가독성을 떨어뜨릴 수도 있습니다.

camelCase와 snake_case를 섞어 쓰기 보다는, 카멜케이스로 작성하였으니 서버에서 받는 데이터들도 모두 api interceptor를 통해 카멜케이스로 바꿔서 사용할 수도 있습니다. 그러면 서버 필드가 어떤 case이든지 fe입장에선 카멜케이스로 통일시킬 수 있습니다.

직접 구현할 수도 있고, 이러한 유틸은 라이브러리의 도움을 받을 수도 있습니다.
ex) https://www.npmjs.com/package/change-case

…o step1

wacilpong · 2024-08-07T09:18:44Z

src/components/features/Category/CategoryProductsSection/index.tsx

+  console.log('Fetched Data:', data);
+  console.log('isError:', isError);
+  console.log('isLoading:', isLoading);


이러한 콘솔로그 코드들은 배포 시 꼭 지워야합니다. 현재 프로젝트는 연습용이기는 하지만, 주석만이라도 남기면 좋을것같아요.

wacilpong

@hojeong26
안녕하세요 호정님!!
아직 배포가 안된 것이 맞을까요..?

http://52.78.81.37:8080/
이 주소에서 확인이 불가한데, 배포된 다른 링크가 있을까요?

우선은 배포가 되지 않은 것으로 보여 해당 피알 머지는 보류하겠습니다..!

hojeong26 · 2024-08-07T09:35:58Z

아 제가 github action을 사용해서 배포를 해야되는 건가요???

hojeong26 · 2024-08-07T10:55:31Z

멘토님 ci.yml파일을 설정하고 배포하는게 맞지않나요?? 혹시 제 코드에 문제가 있을까요?

wacilpong · 2024-08-07T11:08:21Z

package.json

@@ -7,7 +7,7 @@
      "^axios$": "axios/dist/node/axios.cjs"
    }
  },
-  "homepage": "https://hojeong26.github.io/react-deploy",
+  "homepage": "https://hojeong26.github/react-deploy",


gh-pages로 배포하는 것이지요? 깃헙페이지 기본 도메인은 {name}.github.io이 맞습니다. io 다시 넣어주세요~!

github.io저장소를 만들고 파일들을 github.io저장소로 가져와야 되나요?

gh-pages 배포방식은, 빌드된 프로젝트 결과물 자체를 gh-page 브랜치에 올리고 이를 깃허브가 무료로 제공하는 저장소에 배포되도록 하는 것입니다. 그리고 github actions를 통해 이 과정 자체를 자동화하는 것이고요. 이를 CI/CD라고 합니다.

즉, 두 개념은 다릅니다. gh-pages배포방식과 함께 github actions로 배포를 자동화하는 것을 함께 찾아보시고 적용해보세요.

기본적으로 Repository가 gh-pages를 바라보게 되어있는지 등도 체크해야 합니다. 아래 문서를 참고해보세요.

https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site

그리고 이후에 이 배포과정을 자동화해주는 github actions를 설정해보세요

배포 성공한 것 같은데 npm run start를 했을 땐 오류가 안났는데 배포된 웹페이지로 들어가면 에러가 납니다..

http://192.168.56.1:3000/react-deploy
멘토님 혹시 여기 들어가 지나요??

남겨주신 링크는 본인의 로컬 ip주소인 것으로 보입니다. 그 주소에 접속하려면 외부에 공개해야해서 저는 진입할 수 없습니다. 아래 깃헙페이지에 잘 배포된 것 확인했습니다. 엔트리를 react-deploy로 잡았기 때문에 이를 꼭 붙여줘야해요

https://hojeong26.github.io/react-deploy

wacilpong · 2024-08-07T11:10:02Z

@hojeong26
깃헙 페이지 배포는 아래 링크를 차근차근 따라가면 쉽게 할 수 있으므로
차근차근 해보세요~
https://docs.github.com/en/pages/quickstart

hojeong26 · 2024-08-07T11:43:48Z

혹시 사진과 같이 뜨면 배포가 된 건가요??

wacilpong · 2024-08-07T11:51:21Z

@hojeong26
맞습니다. 아래 링크 들어가보니 화면 보이네요.
https://hojeong26.github.io/react-deploy

다만, 배포가 된것인지 질문을 남기기보다는 배포가 무엇인지 이해하고 본인이 설정한 주소를 들어가서 확인하는 것이 우선이었으면 더 좋았었겠다고 생각이 드네요~

배포한다는 것이 무슨 의미인지 CICD는 어떤 개념인지 조금더 알아보시면 좋을 것 같습니다 ㅎㅎ
배포해주신 화면으로 동작 테스트 해볼게요~!

wacilpong · 2024-08-07T11:58:31Z

@hojeong26
첫 홈에서 Error loading categories. 에러가 나네요ㅠ 확인 부탁드리고

회원가입 밸리데이션을 통과했는데도 진행이 안되는데 혹시 별도 쿠키설정이 필요한 걸까요? 로그인할 수 있는 동선을 알려주세요.

hojeong26 · 2024-08-07T12:08:05Z

회원가입 성공을 하면 세션저장소에 authToken이 저장이 되고 자동으로 로그인이 됩니다

wacilpong · 2024-08-07T12:14:32Z

"회원가입 중 오류가 발생했습니다"라고 뜨면서 가입되지 않습니다. 확인 부탁드립니다

hojeong26 · 2024-08-07T12:51:30Z

오류 해결
지금 https에서 http로 요청을 해서 에러가 발생하는것 같아 해당 사이트를 참고하여 index.html파일에 추가해주었습니다.

그래도 안된다면 다른 방법이 있을까요?

wacilpong · 2024-08-07T14:25:37Z

@hojeong26
해당 문제는 https로 배포된 깃헙페이지 환경에서 http 프로토콜을 가진 api를 호출해 접근하려 하기 때문에 브라우저 정책상 막고 있는 것입니다. 사실 근본적으로는 백엔드측에서 해결하는 것이 좀더 옳은 방법이라고 생각하기 때문에 이부분은 일단 넘어가도 될 것 같습니다. 하지만 이 에러가 발생하는 원인, 목적, 해결방법 등을 자세히 찾아보시면 좋겠습니다.

그래서 로컬로 일단 확인해보았는데요. 회원가입은 진행되나, my-account쪽 api들도 모두 401에러를 뱉고 있네요. 서버쪽과 로그인 인증에 대해 협의를 해야할 것 같아요. 서버에서 미리 인증된 정보를 만들어두고 FE에서 그것을 바라보게 해서 테스트할 수도 있고... 이부분을 서버와 협의하지 않은 것 같은데 맞을까요?

혹시 호정님은 지금까지 어떻게(어떤 인증정보로) 로그인하고 테스트하고 계셨나요?

hojeong26 · 2024-08-07T14:55:40Z

혹시 로그인이 안되는 건가요?? 제가 npm run start로 했을 땐 에러가 발생하는 부분이 없었습니다

wacilpong · 2024-08-07T15:06:38Z

@hojeong26
회원가입 후 로그인은 정상동작하나,
제가 언급했듯이 my-account쪽 api들이 401에러를 던지고 있습니다.

그래서 어떤 인증정보로 테스트하고 계셨는지 여쭤본 것이에요~
서버와 협의된 게 있나 해서요

hojeong26 · 2024-08-07T15:13:21Z

음..인증정보를 협의한건 없는 것 같아요...!

wacilpong

@hojeong26
인증과 관련해서 401이 뜨고 있어 확인할 수 있는 기능이 별로 없어, 해당 피알에 대한 동작테스트는 중단하겠습니다. (너무 시간이 오래 지나기도 했고요~)

로그인 후 my쪽 api들에서 왜 401이 뜨는지 저는 알수가 없으므로... 호정님께서 서버개발자와 함께 논의해보아야 하는 부분이라고 생각하는데요. 재현이 안된다고 하셨는데, 크롬 시크릿 브라우저에서도 한번 시도해보시고 재현이 되지 않는지도 한번 확인해보시면 좋을 듯합니다~! (재현이 되었다면, 그때부터는 이제 원인을 파악해야겟죠? ㅎㅎ)

그리고 mixed content에러도 반드시 담당 서버개발자분께 https로 줄 수는 없는지 한번 협의해봐도 좋겠습니다. 실습 강사님께도 한번 여쭤봐도 좋고요. 배포에 대해서도.. 이번엔 깃헙페이지로 빠르게 배포해주셨는데, 그 배포과정을 다시한번 복기해보고 개념을 숙지하시면 좋겠습니다. aws s3 + cloudfront처럼 다른 배포방식으로 배포해봐도 좋겠습니다. 이를 통해 배포가 어떻게 이루어지는 지를 확실히 숙지해보세요~

추가로, 동작관련해서만 계속 질의응답하다보니 말씀을 못드린 코멘트가 있는데, 에러와 관련해서 사실 현업에서는 FE-BE끼리 에러코드를 정해두고 케이스에 맞는 에러메시지를 노출시킵니다. 밸리대이션 통과가 안된 것인지, 주문정보가 변경된 것인지, (상품이라면)이미 품절된 상품을 구매하려고 한다든지... 그리고 사용자 입장에서는 에러를 받고 아무 동작도 일어나지 않으면 단순 버그로 생각하기 쉽습니다. 그래서 특별하게 뭔가를 해야하는 에러가 아니라면 공통적으로 새로고침 or 특정url로의 라우팅을 통해 후처리를 해주면 좋습니다.

그럼 그간 6주간 정말 고생많으셨고 다음에 기회가 된다면 또 만나요 !!
다시한번 정말 수고 많으셨습니다~

hojeong26 added 5 commits August 3, 2024 22:38

docs: step4 질문에 대한 답변 작성

0cbcc15

docs: 질문에 대한 답 보충

c58c782

feat: baseURL 수정

5ac9330

refactor: 카멜케이스 전부 스네이크 케이스로 변경

95a609f

docs: README.md파일 수정

a177a32

wacilpong reviewed Aug 5, 2024

View reviewed changes

feat: api명세에 따라 data구조 수정

918c544

wacilpong reviewed Aug 5, 2024

View reviewed changes

hojeong26 and others added 8 commits August 5, 2024 22:49

Merge branch 'hojeong26' into step1

5300672

fix: 카테고리 페이지로 안넘어가는 오류 해결

03d65f0

fix: 카테고리 페이지로 넘어가지 않는 오류 해결

febfaef

Merge branch 'step1' of https://github.com/hojeong26/react-deploy int…

5600465

…o step1

fix: 카테고리별 상품 목록 나오게 설정

6491ec4

fix: 상품 상세페이지로 넘어가도록 수정

690e92e

fix: 결제 페이지로 넘어가지 않는 오류 수정

57ed942

fix: 위시 리스트 관련 api수정

0fc19b3

wacilpong reviewed Aug 7, 2024

View reviewed changes

hojeong26 added 7 commits August 7, 2024 18:40

CI 추가

13252cf

ci수정

413aba1

deploy추가

e1954aa

들여쓰기 수정

49820ef

feat: gh-pages설치

9a1274a

ci.yml파일 수정

7296417

ci.yml파일 수정

102106f

fix: error수정

a7d59bb

wacilpong reviewed Aug 7, 2024

View reviewed changes

github.io로 수정

d2d4b81

hojeong26 added 2 commits August 7, 2024 21:40

https에서 http로 요청 에러 해결

ba289a1

https에서 http로 요청 에러 해결

c99bdec

wacilpong reviewed Aug 7, 2024

View reviewed changes

wacilpong merged commit ebe3838 into kakao-tech-campus-2nd-step2:hojeong26 Aug 7, 2024
1 check failed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

전남대 FE_강호정 6주차 과제 #113

전남대 FE_강호정 6주차 과제 #113

hojeong26 commented Aug 5, 2024

wacilpong left a comment

wacilpong left a comment

wacilpong Aug 5, 2024

hojeong26 Aug 5, 2024

wacilpong Aug 5, 2024

wacilpong Aug 7, 2024

wacilpong left a comment •

edited

Loading

hojeong26 commented Aug 7, 2024

hojeong26 commented Aug 7, 2024

wacilpong Aug 7, 2024

hojeong26 Aug 7, 2024

wacilpong Aug 7, 2024

wacilpong Aug 7, 2024

hojeong26 Aug 7, 2024

hojeong26 Aug 7, 2024

wacilpong Aug 7, 2024

wacilpong commented Aug 7, 2024

hojeong26 commented Aug 7, 2024

wacilpong commented Aug 7, 2024 •

edited

Loading

wacilpong commented Aug 7, 2024

hojeong26 commented Aug 7, 2024

wacilpong commented Aug 7, 2024

hojeong26 commented Aug 7, 2024

wacilpong commented Aug 7, 2024

hojeong26 commented Aug 7, 2024

wacilpong commented Aug 7, 2024 •

edited

Loading

hojeong26 commented Aug 7, 2024

wacilpong left a comment •

edited

Loading


		- 아래 endpoint로 접속해볼 수 있습니다!
		- 52.78.81.37:8080

전남대 FE_강호정 6주차 과제 #113

전남대 FE_강호정 6주차 과제 #113

Conversation

hojeong26 commented Aug 5, 2024

wacilpong left a comment

Choose a reason for hiding this comment

wacilpong 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

wacilpong left a comment • edited Loading

Choose a reason for hiding this comment

hojeong26 commented Aug 7, 2024

hojeong26 commented Aug 7, 2024

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

wacilpong commented Aug 7, 2024

hojeong26 commented Aug 7, 2024

wacilpong commented Aug 7, 2024 • edited Loading

wacilpong commented Aug 7, 2024

hojeong26 commented Aug 7, 2024

wacilpong commented Aug 7, 2024

hojeong26 commented Aug 7, 2024

wacilpong commented Aug 7, 2024

hojeong26 commented Aug 7, 2024

wacilpong commented Aug 7, 2024 • edited Loading

hojeong26 commented Aug 7, 2024

wacilpong left a comment • edited Loading

Choose a reason for hiding this comment

wacilpong left a comment •

edited

Loading

wacilpong commented Aug 7, 2024 •

edited

Loading

wacilpong commented Aug 7, 2024 •

edited

Loading

wacilpong left a comment •

edited

Loading