[백승렬] Week13 #414

SeungRyeolBaek · 2024-05-12T06:50:05Z

요구사항

기본 요구사항
React 프로젝트에서 진행했던 작업물을 Next.js 프로젝트에 맞게 변경 및 이전해 주세요.
팀내 2 ~ 3명이 짝을 지어 페어프로그래밍으로 로그인, 회원가입 페이지에 사용하는 Input 컴포넌트를 만들어 주세요.
Vercel로 Github 레포지토리를 연결해 Next.js 프로젝트를 배포해 주세요.
Github에 위클리 미션 PR을 만들어 주세요.
React, Next.js를 사용해 진행합니다.

주요 변경사항

next.js사용
아직 랜딩페이지, 로그인 페이지, 회원가입 안 만들었어요

멘토에게

셀프 코드 리뷰를 통해 질문 이어가겠습니다.

kiJu2 · 2024-05-15T09:46:40Z

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

kiJu2 · 2024-05-15T09:48:21Z

커밋 단위가 깔끔하군요 😊👍

역시 승렬님 ! 기본기가 훌륭합니다.

중간에 feat: 기본적인 코드 일단 전부 다 불러옴(refactoring 필요) cc0f79f 커밋에서 템플릿 변경사항들이 있기에 커밋 히스토리를 따라가면서 승렬님께서 작성하신 코드 위주로 코드리뷰를 진행하도록 하겠습니다 !

kiJu2 · 2024-05-15T09:50:26Z

pages/_document.tsx

@@ -2,7 +2,7 @@ import { Html, Head, Main, NextScript } from 'next/document'

 export default function Document() {
  return (
-    <Html lang="en">
+    <Html lang="ko">


굳굳. html도 잊지 않고 잘 설정해주셨군요 👍

kiJu2 · 2024-05-15T09:51:59Z

styles/variables.scss

global.css를 포함하여 변수 css도 함께 작성하셨군요. 👍

또한 이번에는 sass를 사용하실건가 보군요 🤔

kiJu2 · 2024-05-15T10:21:52Z

pages/_document.tsx

@@ -2,7 +2,7 @@ import { Html, Head, Main, NextScript } from 'next/document'

 export default function Document() {
  return (
-    <Html lang="ko">
+    <Html lang="en">


다시 en으로 바뀌었군요 ! 한 번 확인해주세요 😊

kiJu2 · 2024-05-15T10:41:34Z

src/data-access/useGetFolder.ts

+import { useAsync, instance, mapFolderData } from "@/src/util";
+import { SampleFolderRawData } from "@/src/type";
+
+export const useGetFolder = () => {


크으 각 API 별로 커스텀 훅을 만드셨군요 👍👍

이렇게 되면 API 별 분기 로직 처리에 용이할거예요. 추 후 리액트 쿼리로 마이그레이션할 때에도 편리하겠네요 👍

kiJu2 · 2024-05-15T10:42:04Z

src/data-access/useGetFolder.ts

+
+export const useGetFolder = () => {
+  const getFolder = () =>
+    instance.get<{ folder: SampleFolderRawData }>("sample/folder");


제네릭을 통하여 Response 타입을 적절하게 작성하셨군요 👍👍👍👍

여윽시 승렬쌤 👍

kiJu2 · 2024-05-15T10:42:58Z

src/data-access/useGetFolders.ts

+export const useGetFolders = () => {
+  const getFolders = () =>
+    instance.get<{ data: FolderRawData[] }>("users/1/folders");


다음과 같이 매개변수를 일단 지정하고 기본값으로 정해두면 추 후 기능 수정할 때 용이할 것 같아요 😊:

Suggested change

export const useGetFolders = () => {

const getFolders = () =>

instance.get<{ data: FolderRawData[] }>("users/1/folders");

export const useGetFolders = (userId: string = '1') => {

const getFolders = () =>

instance.get<{ data: FolderRawData[] }>(`users/${userId}/folders`);

kiJu2 · 2024-05-15T10:44:14Z

src/data-access/useGetFolders.ts

+  const { loading, error, data } = useAsync(getFolders);
+
+  const folders = mapFoldersData(data?.data);
+  const sortedFolders = folders.sort((a, b) => a?.id - b?.id);


sort는 비용이 높을 수 있으므로 메모이제이션을 통하여 최적화를 시켜볼 수 있습니다 😊:

Suggested change

const sortedFolders = folders.sort((a, b) => a?.id - b?.id);

const sortedFolders = useMemo(folders.sort((a, b) => a?.id - b?.id), [folders]);

kiJu2 · 2024-05-15T10:48:35Z

src/ui/layout/parts/footer/Footer.tsx

+const snsLinks = [
+  {
+    href: "https://www.facebook.com/",
+    src: "images/facebook.svg",
+    alt: "facebook 홈페이지로 연결된 facebook 로고",
+  },
+  {
+    href: "https://twitter.com/",
+    src: "images/twitter.svg",
+    alt: "twitter 홈페이지로 연결된 twitter 로고",
+  },
+  {
+    href: "https://www.youtube.com/",
+    src: "images/youtube.svg",
+    alt: "youtube 홈페이지로 연결된 youtube 로고",
+  },
+  {
+    href: "https://www.instagram.com/",
+    src: "images/instagram.svg",
+    alt: "instagram 홈페이지로 연결된 instagram 로고",
+  },
+];


굳굳. 컴포넌트 매핑을 사용하셨군요 👍

반복된 데이터를 효율적으로 처리할 수 있는 패턴이죠 😊👍

kiJu2 · 2024-05-15T10:52:08Z

src/ui/link-form/LinkForm.tsx

+/**
+ * @component
+ * @param {Object} props - 컴포넌트의 props입니다.
+ * @param {string} props.value - 텍스트 입력의 현재 값입니다.
+ * @param {Function} props.onChange - 입력 값 변경을 처리하는 콜백 함수입니다.
+ * @param {Function} props.onSubmit - 폼 제출을 처리하는 콜백 함수입니다.
+ * @param {React.Ref<HTMLFormElement>} ref - 폼 요소에 전달할 ref입니다.
+ * @returns {JSX.Element} 사용자가 링크 추가하기 위해 해당 입력 칸에 url작성하는 그러한 컴포넌트
+ */


깔끔한 jsdoc입니다 👍👍

다만, typescript를 사용하실 경우 jsdoc의 타입 지정은 불필요합니다 !:

Suggested change

/**

* @component

* @param {Object} props - 컴포넌트의 props입니다.

* @param {string} props.value - 텍스트 입력의 현재 값입니다.

* @param {Function} props.onChange - 입력 값 변경을 처리하는 콜백 함수입니다.

* @param {Function} props.onSubmit - 폼 제출을 처리하는 콜백 함수입니다.

* @param {React.Ref<HTMLFormElement>} ref - 폼 요소에 전달할 ref입니다.

* @returns {JSX.Element} 사용자가 링크 추가하기 위해 해당 입력 칸에 url작성하는 그러한 컴포넌트

*/

/**

* @component

* @param props - 컴포넌트의 props입니다.

* @param props.value - 텍스트 입력의 현재 값입니다.

* @param props.onChange - 입력 값 변경을 처리하는 콜백 함수입니다.

* @param props.onSubmit - 폼 제출을 처리하는 콜백 함수입니다.

* @param ref - 폼 요소에 전달할 ref입니다.

* @returns 사용자가 링크 추가하기 위해 해당 입력 칸에 url작성하는 그러한 컴포넌트

*/

kiJu2 · 2024-05-15T10:53:57Z

src/ui/modal/share-modal/ShareModal.tsx

 import { KeyboardEventHandler, MouseEventHandler } from "react";
+import { KakaoIcon, FacebookIcon, LinkIcon } from "./constant";


해당 파일들은 상수(constant)로 보기 어려울 것 같아요 !:

icons와 같은 파일을 따로 만드시는게 어떨까요?

kiJu2 · 2024-05-15T10:54:18Z

src/ui/no-link/NoLink.tsx

+/**
+ * 
+ * @returns 폴더에 저장된 링크가 없을 시 디폴트로 띄우는 화면
+ */


jsdoc활용 👍👍👍

kiJu2 · 2024-05-15T10:59:24Z

안녕하세요 승렬님 ! 오랜만에 보는 승렬님 코드군요 ㅎㅎㅎ
이번 코드리뷰에서는 템플릿 코드로 추정되는 commit인feat: 기본적인 코드 일단 전부 다 불러옴(refactoring 필요)를 제외한 코드들을 위주로 리뷰를 작성하였습니다 !

혹시 궁금하신 점이나 더욱 살펴봤음 하는 부분 있다면 사전 질의를 통해 남겨주세요 ! 😊

SeungRyeolBaek added 17 commits May 10, 2024 14:02

feat: folder페이지와 shared페이지에 필요한 이미지 추가

2f4368d

feat: global style 추가: mixin, variable, color

709f601

feat: 기본적인 코드 일단 전부 다 불러옴(refactoring 필요)

cc0f79f

feat: 필요한 패키지 설치

21c8147

feat: folder, link 접근용 toolbox 생성

af01d65

fix: 모듈 임포트 경로 정리

3fcaadf

컴포넌트 ui 폴더 생성

3499622

feat: ui-component Week13 요구사항에 필요한 내용 완성

d3d3131

feat: layout 추가

b1218fb

fix: 모듈 임포트 경로 수정

acebb1b

refactor: 경로 정리

a63e0fc

feat: readme.md 수정

259f2a0

fix: ESLint오류 빌드 중에 무시하도록 설정 변경

5c7f8d1

date-fns import 최신 버전에 맞춰 변경

60dda2a

fix: Linkform -> UILinkform in link/ui

ef59e31

fix: 이름 충돌 해결

44e88fa

refactor: 폴더 구조 정리

a436890

SeungRyeolBaek requested a review from kiJu2 May 12, 2024 06:50

SeungRyeolBaek self-assigned this May 12, 2024

SeungRyeolBaek added the 순한맛🐑 마음이 많이 여립니다.. label May 12, 2024

SeungRyeolBaek changed the title ~~[Week13] 백승렬~~ [백승렬] Week13 May 12, 2024

SeungRyeolBaek added 2 commits May 14, 2024 12:15

feat: 일부 컴포넌트 설명 추가(JS Doc)

4c1da95

refactor: naming 변경

f254bbc

kiJu2 approved these changes May 15, 2024

View reviewed changes

kiJu2 merged commit 6e0fb52 into codeit-bootcamp-frontend:part3-백승렬 May 15, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[백승렬] Week13 #414

[백승렬] Week13 #414

SeungRyeolBaek commented May 12, 2024

kiJu2 commented May 15, 2024

kiJu2 commented May 15, 2024

kiJu2 May 15, 2024

kiJu2 May 15, 2024

kiJu2 May 15, 2024

kiJu2 May 15, 2024

kiJu2 May 15, 2024

kiJu2 May 15, 2024

kiJu2 May 15, 2024

kiJu2 May 15, 2024

kiJu2 May 15, 2024

kiJu2 May 15, 2024

kiJu2 May 15, 2024

kiJu2 commented May 15, 2024

	const sortedFolders = folders.sort((a, b) => a?.id - b?.id);
	const sortedFolders = useMemo(folders.sort((a, b) => a?.id - b?.id), [folders]);

		import { KeyboardEventHandler, MouseEventHandler } from "react";
		import { KakaoIcon, FacebookIcon, LinkIcon } from "./constant";

[백승렬] Week13 #414

[백승렬] Week13 #414

Conversation

SeungRyeolBaek commented May 12, 2024

요구사항

주요 변경사항

멘토에게

kiJu2 commented May 15, 2024

kiJu2 commented May 15, 2024

커밋 단위가 깔끔하군요 😊👍

Choose a reason for hiding this comment

굳굳. html도 잊지 않고 잘 설정해주셨군요 👍

Choose a reason for hiding this comment

global.css를 포함하여 변수 css도 함께 작성하셨군요. 👍

Choose a reason for hiding this comment

다시 en으로 바뀌었군요 ! 한 번 확인해주세요 😊

Choose a reason for hiding this comment

크으 각 API 별로 커스텀 훅을 만드셨군요 👍👍

Choose a reason for hiding this comment

제네릭을 통하여 Response 타입을 적절하게 작성하셨군요 👍👍👍👍

Choose a reason for hiding this comment

다음과 같이 매개변수를 일단 지정하고 기본값으로 정해두면 추 후 기능 수정할 때 용이할 것 같아요 😊:

Choose a reason for hiding this comment

sort는 비용이 높을 수 있으므로 메모이제이션을 통하여 최적화를 시켜볼 수 있습니다 😊:

Choose a reason for hiding this comment

굳굳. 컴포넌트 매핑을 사용하셨군요 👍

Choose a reason for hiding this comment

깔끔한 jsdoc입니다 👍👍

Choose a reason for hiding this comment

해당 파일들은 상수(constant)로 보기 어려울 것 같아요 !:

Choose a reason for hiding this comment

jsdoc활용 👍👍👍

kiJu2 commented May 15, 2024

굳굳. `html`도 잊지 않고 잘 설정해주셨군요 👍

`global.css`를 포함하여 변수 `css`도 함께 작성하셨군요. 👍

다시 `en`으로 바뀌었군요 ! 한 번 확인해주세요 😊

제네릭을 통하여 `Response` 타입을 적절하게 작성하셨군요 👍👍👍👍

`sort`는 비용이 높을 수 있으므로 메모이제이션을 통하여 최적화를 시켜볼 수 있습니다 😊:

깔끔한 `jsdoc`입니다 👍👍

해당 파일들은 상수(`constant`)로 보기 어려울 것 같아요 !:

`jsdoc`활용 👍👍👍