[Week15] 우지석 #485

jisurk · 2024-05-29T10:24:30Z

요구사항

기본

링크 공유 페이지의 url path를 ‘/shared’에서 ‘/shared/{folderId}’로 변경해 주세요.
폴더의 정보는 ‘/api/folders/{folderId}’, 폴더 소유자의 정보는 ‘/api/users/{userId}’를 활용해 주세요.
링크 공유 페이지에서 폴더의 링크 데이터는 ‘/api/users/{userId}/links?folderId={folderId}’를 사용해 주세요.
폴더 페이지에서 유저가 access token이 없는 경우 ‘/signin’페이지로 이동하게 해주세요.
테스트 유저는 id: “[email protected]”, pw: “sprint101” 를 활용해 보세요.
폴더 페이지의 url path가 ‘/folder’일 경우 폴더 목록에서 “전체” 가 선택되어 있고, ‘/folder/{folderId}’일 경우 폴더 목록에서 {folderId} 에 해당하는 폴더가 선택되어 있고 폴더에 있는 링크들을 볼 수 있게 해주세요.
폴더 페이지에서 현재 유저의 폴더 목록 데이터를 받아올 때 ‘/api/folders’를 활용해 주세요.
폴더 페이지에서 전체 링크 데이터를 받아올 때 ‘/api/links’, 특정 폴더의 링크를 받아올 때 ‘/api/links?folderId={folderId}’를 활용해 주세요.
유효한 access token이 있는 경우 ‘/api/users’로 현재 로그인한 유저 정보를 받아 상단 네비게이션 유저 프로필을 보이게 해주세요.

심화

리퀘스트 헤더에 인증 토큰을 첨부할 때 axios interceptors 또는 이와 유사한 기능을 활용해 주세요.

주요 변경사항

스크린샷

멘토에게

링크 : http://5-weekly-mission-rust.vercel.app/

folder페이지까지는 구현을 다했는데 shared페이지는 아직 다 구현을 못했습니다..
코드가 좀 뒤죽박죽인 부분이 있는데 정리가 안돼서 계속 수정해보겠습니다!
셀프 코드 리뷰를 통해 질문 이어가겠습니다.

choinashil

지석님 늦게나마 제출하시느라고 고생하셨고, 밀린 요구사항들도 같이 작업하시느라고 수고많으셨습니다!
커리큘럼대로 새로운 개념들 계속 익히면서 정해진 미션도 제시간에 하려면 아무래도 벅차실텐데요
그런만큼 시간을 더 많이 쓰면서 부족한 부분 채우셨으면 좋겠습니다!
지금 잘 이해되지 않더라도 묵묵히 해내다보면 어느새 이해되는 지점이 올테니까요,
계속해서 화이팅입니다!

choinashil · 2024-05-29T13:08:51Z

components/Folder/Button.tsx

+}
+
+function Button({ folderData, selectedFolderId, onFolderClick }: ButtonProps) {
+  const [activeButton, setActiveButton] = useState<number | null>(null);


변수명이 activeButton 이어서 어떤 값이 할당되는건지 한번에 잘 안와닿았던 것 같아요!!
button 이다보니 요소가 할당되는건가 싶기도 했고요
아래보니 buttonId 가 저장되는 것 같은데 그렇다면 상태명도 activeButtonId 라고 보다 구체적으로 작성해주시면 좋을 것 같습니다!!
변수네이밍은 기본적이지만 꾸준히 신경써야 하는 부분인 것 같아요!

choinashil · 2024-05-29T13:10:17Z

components/Folder/CardList.tsx

+          let url = `${BASE_URL}/links`;
+          if (selectedFolderId !== null) {
+            url += `?folderId=${selectedFolderId}`;
+            console.log("Id :", selectedFolderId);


PR 올리기 전 꼭 남겨야하는 콘솔이 아니라면 삭제 부탁드려요! (전체적으로 확인)

choinashil · 2024-05-29T13:13:09Z

components/Footer.tsx

+const FooterContent = styled.div`
+  display: flex;
+  justify-content: space-between;
+  white-space: nowrap;
+`;
+const FooterYear = styled.div`
+  color: rgba(103, 103, 103, 1);
+`;
+
+const StyledLink = styled(Link)`


어떤 부분은 선언부 사이에 개행이 들어가있고 (19라인) 어떤 부분은 없는데 (15~16라인)
개행을 처리하는 방식도 컨벤션을 정해 프로젝트 전체적으로 통일해주시면 좋겠습니다!

choinashil · 2024-05-29T13:14:57Z

components/PasswordInput.tsx

@@ -61,7 +61,7 @@ export function PasswordInput({
      />
      <div
        id="password-errorText"
-        className={cx("errortext", { error: !isError })}
+        className={cx("error-text", { error: !isError })}


isError 가 아닌 상황인데 error 클래스가 적용되는게 의미상 맞지 않는 것 같아요! (반대가 되어야 할 것 같은)

choinashil · 2024-05-29T13:16:16Z

components/Shared/Card.tsx

+  useEffect(() => {
+    const fetchLinkData = async () => {
+      try {
+        const accessToken = localStorage.getItem("accessToken");
+        if (accessToken) {
+          const response = await axios.get(
+            `${BASE_URL}/users/${userId}/links?folderId=${folderId}`,
+            {
+              headers: {
+                Authorization: `Bearer ${accessToken}`,
+              },
+            }
+          );
+          setLinkData(response.data.data);
+        }
+      } catch (error) {
+        console.error("링크 데이터 가져오기 에러:", error);
+      }
+    };
+
+    fetchLinkData();
+  }, [folderId, userId]);


요런 부분이 여러번 반복되고 있는데요, 시간이 된다면 공통화할 방법을 고민해보시면 좋을 것 같아요!

choinashil · 2024-05-29T13:25:11Z

components/Shared/Header-Content.tsx

+    fetchFolderData();
+    if (folderData) {
+      fetchFolderOwner();
+    }
+  }, [folderId, folderData]);


처음에는 folderData 가 null 이니까 fetchFolderData 만 실행

fetchFolderData 가 성공적으로 실행되면 setFolderData 를 통해 상태 업데이트 (folderData 에 데이터가 들어감)

리렌더링되면서 useEffect 실행됨 (folderData 가 dependencies 에 포함되어서 folderData 가 달라진 것 감지)

다시 91 라인에서 fetchFolderData 실행되고

folderData 있으므로 fetchFolderOwner 도 실행 (92~93라인)

제가 판단하기엔 위와 같이 코드가 실행되어서 4번처럼 불필요하게 fetchFolderData 가 두번 실행되지 않을까 싶은데요

useEffect 를 두개로 나누어서
folderId 만을 dependency 로 하는 useEffect 에 fetchFolderData 를 넣고
folderData 를 dependency로 하는 useEffect 에 fetchFolderOwner 를 넣는 식으로 분리해보면 어떨까 싶네요!

choinashil · 2024-05-29T13:25:39Z

components/Shared/Header-Content.tsx

+
+  return (
+    <StyledFolderInfoContent>
+      {folderData && folderOwner && (


둘 다 없다면 빈 화면이 보여질테니 적절히 비어있는 케이스 처리도 해주면 좋겠군요!

choinashil · 2024-05-29T13:27:44Z

components/SignUpForm.tsx

+    const validateEmail = isEmailValid(email);
+    const validatePassword = isPasswordValid(password);


함수명이랑 boolean 타입 변수명의 이름이 반대로 된 것 같아요 😂

보통 함수명 작성 시 동사로 시작하게 짓고 (validateXX)
boolean 형은 isXX 과 같은 형태로 짓습니다

choinashil · 2024-05-29T13:28:49Z

pages/folder/[[...folderId]].tsx

+  useEffect(() => {
+    const accessToken = localStorage.getItem("accessToken");
+    if (!accessToken) {
+      router.push("/signin");
+    }
+  }, []);


로그인하지 않고 접근할 수 없는 페이지들에서 이 로직을 공통으로 사용할 수 있겠네요!

choinashil · 2024-05-29T13:30:06Z

utils/useFetch.ts

@@ -0,0 +1,25 @@
+import { useCallback, useEffect, useState } from "react";
+
+export function useFetch<T>(url: string): T | null {


잘 정의는 해주셨는데 아직 쓰는 곳이 없는거였군요?!
제네릭까지 넣어주셨는데 다음 미션때 여유되면 한군데라도 적용해보면 좋겠네요!

우지석 added 7 commits May 24, 2024 13:54

14주차 코드리뷰 수정!

262da2f

upload

c1d7671

folder페이지 마이그레이션

63eae53

shared페이지 마이그레이션

e46ad61

accessToken오류 해결, folder페이지 요구사항 구현

97aa678

folder page 요구사항 완성

a87b04a

Shared페이지 데이터 불러오는 로직 수정중!..

13f9547

jisurk requested a review from choinashil May 29, 2024 10:24

jisurk added 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. 미완성🫠 죄송합니다.. labels May 29, 2024

jisurk self-assigned this May 29, 2024

choinashil changed the base branch from main to part3-우지석 May 29, 2024 13:04

choinashil approved these changes May 29, 2024

View reviewed changes

choinashil merged commit f9bfea6 into codeit-bootcamp-frontend:part3-우지석 May 29, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Week15] 우지석 #485

[Week15] 우지석 #485

jisurk commented May 29, 2024 •

edited

Loading

choinashil left a comment

choinashil May 29, 2024

choinashil May 29, 2024

choinashil May 29, 2024

choinashil May 29, 2024

choinashil May 29, 2024

choinashil May 29, 2024

choinashil May 29, 2024

choinashil May 29, 2024

choinashil May 29, 2024

choinashil May 29, 2024

		const validateEmail = isEmailValid(email);
		const validatePassword = isPasswordValid(password);

		@@ -0,0 +1,25 @@
		import { useCallback, useEffect, useState } from "react";

		export function useFetch<T>(url: string): T \| null {

[Week15] 우지석 #485

[Week15] 우지석 #485

Conversation

jisurk commented May 29, 2024 • edited Loading

요구사항

기본

심화

주요 변경사항

스크린샷

멘토에게

choinashil 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

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

jisurk commented May 29, 2024 •

edited

Loading