[오다은] Week19 #492

O-daeun · 2024-06-30T09:39:24Z

요구사항

기본

변경된 api를 활용해 주세요.
모달에 필요한 api 요청을 만들어 기능을 완성해 주세요.
api 요청에 TanStack React Query를 활용해 주세요.

주요 변경사항

배포링크 : https://linkbrary-oh.vercel.app/
api 주소가 수정되어서 약간의 response 수정이 있습니다.
모달 컴포넌트 분리
모달 컴포넌트 열고 닫는 기능 Context API로 구현
로그인/회원가입 제외 React Query 적용

멘토에게

모달을 하나의 컴포넌트에서 관리하다가 기능별로 나누었습니다.
React Query를 잘 작성하였는지 피드백 부탁드립니다!
감사합니다!!

O-daeun · 2024-06-30T09:53:33Z

apis/api.ts

api 주소 변경으로 인해 기존 GET 함수를 조금씩 수정하였고,
POST, PUT, DELETE 요청을 추가 구현하였습니다.

넵 ! 설명 감사드립니다. 한 번 꼼꼼히 봐볼게염

O-daeun · 2024-06-30T23:57:47Z

components/Modal/ModalLayout.tsx

모달의 공통 레이아웃입니다.
제목, 닫기 버튼이 포함되어있습니다.

O-daeun · 2024-06-30T23:59:26Z

contexts/folderIdContext.tsx

folder/[[...currentFolderId]]
경로의 currentFolderId를 곳곳에서 사용하고 있어서
Context API로 빼서 관리하였습니다.

O-daeun · 2024-07-01T12:34:08Z

components/Card/Card.tsx

+  const handleDeleteButtonClick = (e: MouseEvent) => {
    e.preventDefault();
-    setIsVisibleDeleteCardModal(true);
+    setModal({ isOpen: true, content: `DeleteLinkModal ${id}` });
  };
-  const handleAddFolderButtonClick = (e: React.MouseEvent) => {
+  const handleAddLinkButtonClick = (e: MouseEvent) => {
    e.preventDefault();
-    setIsVisibleAddInFolderModal(true);
+    setModal({ isOpen: true, content: `AddLinkModal ${id}` });


카드 내부에서 모달을 띄우니 보여지는 모든 카드의 모달이 중복으로 띄워지는 오류가 있어서 우선 구분할 수 있게 ${id}라는 조건을 추가해 두었습니다.
임시방편으로 해결하여서 추후에 포탈이나 다른 방식으로 모달을 띄우고 싶네욥!
기주님은 모달 띄우실 때 어떤 방법을 사용하시는 편인가요???

아하 조건을 추가해서 문제를 해결하셨군요 😊
저 또한 다은님께서 해결하신 방법으로 컨텍스트로 만드는 편입니다 !
또한, 라우팅도 함께 필요한 모달의 경우 NextJs 앱라우터의 패러랠과 인터섹션 라우터로 만들고 있습니다 😊

kiJu2 · 2024-07-01T18:00:59Z

수고 하셨습니다 ! 스프리트 미션 하시느라 정말 수고 많으셨어요.
학습에 도움 되실 수 있게 꼼꼼히 리뷰 하도록 해보겠습니다.

kiJu2 · 2024-07-01T18:01:43Z

모달을 하나의 컴포넌트에서 관리하다가 기능별로 나누었습니다.

오호 굳굳 ! 한 번 보도록 할게욤 😊

React Query를 잘 작성하였는지 피드백 부탁드립니다!

넵넵 ! 물론입니다 💪

감사합니다!!

🙇‍♂️🙇‍♂️

kiJu2 · 2024-07-01T18:02:24Z

apis/api.ts

넵 ! 설명 감사드립니다. 한 번 꼼꼼히 봐볼게염

kiJu2 · 2024-07-01T18:02:40Z

apis/api.ts

 import axios from 'axios';

-const BASIC_URL = 'https://bootcamp-api.codeit.kr/api';
+const BASIC_URL = 'https://bootcamp-api.codeit.kr/api/linkbrary/v1';


base URL은 환경 변수에 저장하시는게 좋습니다!

환경 변수(Environment Variable): process.env에 내장되며 앱이 실행될 때 적용할 수 있는 값입니다!

다음과 같이 적용할 수 있습니다:

// .env.development REACT_APP_BASE_URL="http://localhost:3000" // .env.production REACT_APP_BASE_URL="http://myapi.com" // 사용시 <a href={`${process.env.REACT_APP_BASE_URL}/myroute`}>URL</a>

왜 환경 변수에 저장해야 하나요?

개발(dev), 테스트(test), 실제 사용(prod) 등 다양한 환경에서 앱을 운영하게 되는 경우, 각 환경에 따라 다른 base URL을 사용해야 할 수 있습니다. 만약 코드 내에 하드코딩되어 있다면, 각 환경에 맞춰 앱을 배포할 때마다 코드를 변경해야 하며, 이는 매우 번거로운 작업이 됩니다. 하지만, 환경 변수를 .env.production, .env.development, .env.test와 같이 설정해두었다면, 코드에서는 단지 다음과 같이 적용하기만 하면 됩니다.

const apiUrl = `${process.env.REACT_APP_BASE_URL}/api`;

이러한 방식으로 환경 변수를 사용하면, 배포 환경에 따라 쉽게 URL을 변경할 수 있으며, 코드의 가독성과 유지보수성도 개선됩니다.

실제 코드 응용과 관련해서는 다음 한글 아티클을 참고해보세요! => 보러가기

kiJu2 · 2024-07-01T18:04:51Z

apis/api.ts

@@ -1,6 +1,7 @@
+import { AddLink, EditFolderName } from '@/interfaces/api';
 import axios from 'axios';


axios instance를 만들어서 사용해보는게 어떨까요 ?

instance를 만들어서 export를 하고 사용해보는 것 정도로 시도해보면 좋을 것 같아요. axios-instance 파일을 만들어서 instance를 생성하고 export한 후 사용해보는건 어떨까요?
다음과 같이 만들어볼 수 있어요:

const baseURL = process.env.NEXT_PUBLIC_LINKBRARY_BaseURL; const instance = axios.create({ baseURL: baseURL, headers: { 'Content-Type': 'application/json', }, }); export default instance

axios instance

kiJu2 · 2024-07-01T18:08:38Z

apis/api.ts

-    `${BASIC_URL}${userIdParam}/folders${queryParam}`
-  );
-  const result = response.data.data;
+  const response = await axios.get(`${BASIC_URL}/folders${queryParam}`, {


반환 타입을 제네릭을 통하여 다루면 어떨까요?

Suggested change

const response = await axios.get(`${BASIC_URL}/folders${queryParam}`, {

const response = await axios.get<GetFoldersResponse>(`${BASIC_URL}/folders${queryParam}`, {

이렇게 하면 getFolders의 반환 타입도 추론될 수 있습니다 😊

kiJu2 · 2024-07-01T18:09:43Z

apis/api.ts

+export async function putFolderName({
+  folderId,
+  newFolderName,
+}: EditFolderName) {
+  const response = await axios.put(
+    `${BASIC_URL}/folders/${folderId}`,
+    {
+      name: newFolderName,
+    },
+    {
+      headers: {
+        Authorization: localStorage.accessToken,
+      },
+    }
+  );
+}


만약 instance를 만드셨다면 accessToken은 인터셉터로 관리하실 수 있습니다 !

아래는 axios의 메써드인 interceptors를 통하여 미들웨어로 인가를 처리하는 예제예요 ! 한 번 확인해보시고 적용하시는 것도 고려해보세요 😊😊😊

instance.interceptors.request.use( (config) => { const accessToken = localStorage.getItem('accessToken')?.replace(/"/gi, ''); if (!accessToken) return config; config.headers.Authorization = accessToken; return config; }, (error) => { return Promise.reject(error); } ); instance.interceptors.response.use( (response) => { return response; }, (error) => { alert(`ERROR: ${error.response.data.message} `); return Promise.reject(error); } );

kiJu2 · 2024-07-01T18:26:35Z

components/LinkInput/LinkInput.tsx

+  const modal = useModal();
+  const setModal = useSetModal();


만약 useSetModal과 useModal이 합쳐진다면 다음과 같이 작성되겠네요 !:

Suggested change

const modal = useModal();

const setModal = useSetModal();

const { modal, setModal } = useModal();

kiJu2 · 2024-07-01T18:27:10Z

components/Modal/Contents/AddFolderModal.tsx

+  const addFolderMutation = useMutation({
+    mutationFn: (newFolderName: string) => addFolder(newFolderName),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['folders'] });
+    },
+  });


굳굳 ~! 적절한 뮤테이션과 성공 이벤트네요 !:

invalidateQueries까지 처리해주셨군요 😊

다만, queryKey의 경우 한 곳에서 관리할 수도 있습니다:

export const folderKeys = { getFolders: ['folder'], getFolderById: (id: string) => ['folder', id] };

kiJu2 · 2024-07-01T18:29:20Z

components/Modal/Contents/AddFolderModal.tsx

+          value={text}
+          onChange={handleTextChange}
+        />
+        <S.StyledButton text='추가하기' type='submit' />


타입까지 작성하셨네요. 꼼꼼하군요 ! 😊

kiJu2 · 2024-07-01T18:30:27Z

components/Modal/Contents/EditFolderNameModal.tsx

+  const putFolderNameMutation = useMutation({
+    mutationFn: ({ folderId, newFolderName }: EditFolderName) =>
+      putFolderName({ folderId, newFolderName }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['folders'] });
+      queryClient.invalidateQueries({
+        queryKey: ['folder', String(currentFolder.id)],
+      });
+    },
+  });


크으 ~! 깔끔한 mutation !! 👍👍

kiJu2 · 2024-07-01T18:30:56Z

components/Modal/Contents/ShareFolderModal.tsx

+  const SHARES = [
+    {
+      name: '카카오톡',
+      imageSrc: KakaotalkIcon,
+      onClick: (e: MouseEvent) => {
+        shareKakao(e, currentFolder.name, currentFolder.id);
+      },
+    },
+    {
+      name: '페이스북',
+      imageSrc: facebookIcon,
+      onClick: () => {},
+    },
+    {
+      name: '링크 복사',
+      imageSrc: linkIcon,
+      onClick: () => {
+        navigator.clipboard
+          .writeText(`${window.location.hostname}/shared/${currentFolder.id}`)
+          .then(() => {
+            alert('링크가 복사되었습니다.');
+          })
+          .catch((error) => {
+            console.error('복사 실패:', error);
+          });
+      },
+    },
+  ];


훌륭한 컴포넌트 매핑입니다 ! 👍👍👍

kiJu2 · 2024-07-01T18:35:42Z

굳굳 !! 훌륭합니다. 다은님 😊
코드 정말 흥미롭게 리뷰했어요. 벌써 리액트 쿼리를 능숙하게 다루시는 것 같은데요? 👍👍👍

O-daeun added 23 commits June 26, 2024 10:34

feat: 모달 버튼 클릭 시 함수 실행되도록 prop 추가

ee5719b

chore: React Query, devtools 설치

dad1a40

feat: Query 세팅

82c04c6

refactor: 모달을 하나의 컴포넌트에서 다루던 부분을 모달 공통 레이아웃을 가지는 컴포넌트로 수정

eaa7b83

feat: addFolder 함수 추가 및 폴더추가 로직 구현

66e0388

feat: 폴더 추가 기능 구현

0eba22c

fix: api 호출 리턴값에 맞게 코드 수정

a08abf9

fix: 폴더 이동 시 링크 새로 받아오게 수정

8fb4227

style: eslint-disable-next-line react-hooks/exhaustive-deps 작성

a14edb6

feat: 폴더에 추가하기 모달에 연결

b0f0413

feat: 링크를 폴더에 추가하는 기능 구현

b757528

feat: FolderId param Context API로 구현

32238d7

feat: 링크 삭제 모달 기능 구현

75e4cb1

feat: 폴더 삭제 모달 기능 구현

f36b180

feat: 폴더 이름 변경 구현

8b22898

feat: 폴더 공유 모달 기능 구현

1fee61b

feat: getFolders에 useQuery 적용

f0a65e4

feat: folder 페이지 getLinks, getFolder 및 전체 useQuery 구현 완료

79e7909

refactor: shared페이지일 때 props folders 전달 안 하도록 선택사항으로 수정

ba6af43

feat: shared 페이지 api 요청 부분 react Query로 구현

aeeaa26

feat: 모달에서 api 요청 시 query.invalidateQueries 구현

8ef9805

test: test코드 삭제

9d85f08

fix: type 에러 수정

1748b66

O-daeun added the 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. label Jun 30, 2024

O-daeun requested a review from kiJu2 June 30, 2024 09:44

O-daeun commented Jul 1, 2024

View reviewed changes

O-daeun added 4 commits July 1, 2024 11:17

feat: ModalContext 구현

01a57ac

refactor: folder페이지 모달 context로 적용 구현

1f6607a

refactor: 모든 모달에 context API 적용

d14d83e

fix: card kebab 버튼의 삭제/폴더에추가 클릭 시 여러 개 모달 띄워지는 오류 해결

24f48c8

O-daeun commented Jul 1, 2024

View reviewed changes

kiJu2 approved these changes Jul 1, 2024

View reviewed changes

kiJu2 merged commit a033961 into codeit-bootcamp-frontend:part3-오다은 Jul 1, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[오다은] Week19 #492

[오다은] Week19 #492

O-daeun commented Jun 30, 2024 •

edited

Loading

O-daeun Jun 30, 2024

kiJu2 Jul 1, 2024

O-daeun Jun 30, 2024

O-daeun Jun 30, 2024

O-daeun Jul 1, 2024

kiJu2 Jul 1, 2024

kiJu2 commented Jul 1, 2024

kiJu2 commented Jul 1, 2024

kiJu2 Jul 1, 2024

kiJu2 Jul 1, 2024

kiJu2 Jul 1, 2024

kiJu2 Jul 1, 2024

kiJu2 Jul 1, 2024

kiJu2 Jul 1, 2024

kiJu2 Jul 1, 2024

kiJu2 Jul 1, 2024

kiJu2 Jul 1, 2024

kiJu2 Jul 1, 2024

kiJu2 Jul 1, 2024

kiJu2 commented Jul 1, 2024

		@@ -1,6 +1,7 @@
		import { AddLink, EditFolderName } from '@/interfaces/api';
		import axios from 'axios';

	const response = await axios.get(`${BASIC_URL}/folders${queryParam}`, {
	const response = await axios.get<GetFoldersResponse>(`${BASIC_URL}/folders${queryParam}`, {

	const modal = useModal();
	const setModal = useSetModal();
	const { modal, setModal } = useModal();

[오다은] Week19 #492

[오다은] Week19 #492

Conversation

O-daeun commented Jun 30, 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

kiJu2 commented Jul 1, 2024

kiJu2 commented Jul 1, 2024

모달을 하나의 컴포넌트에서 관리하다가 기능별로 나누었습니다.

React Query를 잘 작성하였는지 피드백 부탁드립니다!

감사합니다!!

Choose a reason for hiding this comment

Choose a reason for hiding this comment

base URL은 환경 변수에 저장하시는게 좋습니다!

왜 환경 변수에 저장해야 하나요?

Choose a reason for hiding this comment

axios instance를 만들어서 사용해보는게 어떨까요 ?

Choose a reason for hiding this comment

반환 타입을 제네릭을 통하여 다루면 어떨까요?

Choose a reason for hiding this comment

만약 instance를 만드셨다면 accessToken은 인터셉터로 관리하실 수 있습니다 !

Choose a reason for hiding this comment

만약 useSetModal과 useModal이 합쳐진다면 다음과 같이 작성되겠네요 !:

Choose a reason for hiding this comment

굳굳 ~! 적절한 뮤테이션과 성공 이벤트네요 !:

Choose a reason for hiding this comment

다만, queryKey의 경우 한 곳에서 관리할 수도 있습니다:

Choose a reason for hiding this comment

타입까지 작성하셨네요. 꼼꼼하군요 ! 😊

Choose a reason for hiding this comment

크으 ~! 깔끔한 mutation !! 👍👍

Choose a reason for hiding this comment

훌륭한 컴포넌트 매핑입니다 ! 👍👍👍

kiJu2 commented Jul 1, 2024

O-daeun commented Jun 30, 2024 •

edited

Loading

`axios` `instance`를 만들어서 사용해보는게 어떨까요 ?

만약 `instance`를 만드셨다면 `accessToken`은 인터셉터로 관리하실 수 있습니다 !

만약 `useSetModal`과 `useModal`이 합쳐진다면 다음과 같이 작성되겠네요 !:

다만, `queryKey`의 경우 한 곳에서 관리할 수도 있습니다:

크으 ~! 깔끔한 `mutation` !! 👍👍