[서미영] Sprint10 #267

myong39 · 2024-07-19T13:43:15Z

요구사항

기본

게시글 등록 페이지 주소는 “/addboard” 입니다.
게시판 이미지는 최대 한개 업로드가 가능합니다.
각 input의 placeholder 값을 정확히 입력해주세요.
이미지를 제외하고 input 에 모든 값을 입력하면 ‘등록' 버튼이 활성화 됩니다.
게시글 상세 페이지 주소는 “/board/{id}” 입니다.
댓글 input 값을 입력하면 ‘등록' 버튼이 활성화 됩니다.

심화

없음

주요 변경사항

유효성 검사가 있는 등록 폼과 드롭다운을 공통화 해봤습니다.
다른 컴포넌트도 가능하면 재활용 가능하게 해봤습니다.

배포사이트

https://7-sprint-mission.vercel.app/

멘토에게

반응형은 아직 작업중입니다 ㅠㅠ
셀프 코드 리뷰를 통해 질문 이어가겠습니다~!!

dev-kjy · 2024-07-22T02:37:22Z

components/board/BoardDetailArticle.module.scss

+@mixin font-style($size, $weight, $lineHeight, $color) {
+  font-size: $size;
+  font-weight: $weight;
+  color: $color;
+  line-height: $lineHeight;
+}


자주 사용하는 속성들을 mixin으로 묶어주신 부분 좋습니다. 👍

감사합니다~!!😆

dev-kjy · 2024-07-22T02:38:19Z

components/layout/Comment.tsx/Commtent.module.scss

+@mixin font-style($size, $weight, $lineHeight, $color) {
+  font-size: $size;
+  font-weight: $weight;
+  color: $color;
+  line-height: $lineHeight;
+}


매 파일마다 선언하기 보다는 @import나 @use를 사용해서 통일성 있게 사용해 주시면 좋을 것 같아요.

넵 별도 파일로 만들어서 import 했습니다~!!🫡

dev-kjy · 2024-07-22T04:39:06Z

components/boards/AllArticleItem.tsx


 export default function AllArticleItem({
  article: { createdAt, image, likeCount, title, writer },
 }: ArticleProp) {
+  const titleImage = image ? image : noImg.src;


이미지가 true 라면 그대로 image를 할당하면 되므로 || 연산자를 활용해보시면 좋을 것 같습니다. 😁

Suggested change

const titleImage = image ? image : noImg.src;

const titleImage = image || noImg.src;

|| 연산자를 쓰면 훨씬 간단하네요. 삼항연산자만 너무 자주 애용해서😂 다른 연산자도 생각해보겠습니다~!!🫡

dev-kjy · 2024-07-22T04:46:31Z

components/boards/AllArticleList.tsx


 export default function AllArticleList({
  initialArticles,
 }: {
  initialArticles: Article[];
 }) {
  const [articles, setArticles] = useState(initialArticles);
-  const [orderBy, setOrderBy] = useState<ArticleApiData["orderBy"]>("recent");
+  const [orderBy, setOrderBy] = useState(ORDER_TYPE_ENUM.RECENT);


아래와 같이 수정하면 defaultOrderType에 대한 서비스에서 기본적인 정렬 방식을 어떻게 할지에 대한 정책이 바뀌어도 수정이 편할 것 같아요.

Suggested change

const [orderBy, setOrderBy] = useState(ORDER_TYPE_ENUM.RECENT);

const [orderBy, setOrderBy] = useState(defaultOrderType);

앗 그러네요. defaultOrderType를 만들어놓고 안쓰다니...!! defaultOrderType로 쓰면 말씀하신대로 기본 정렬 정책이 바껴도 하나하나 수정할 필요 없으니 좋네요.😆

dev-kjy · 2024-07-22T06:07:24Z

components/layout/Dropdown/Dropdown.tsx

+                    )}
+                  </>
+                ))
+              : children}


자식태그로 넣어주는 일반적인 children과 달리 dropdown에 들어가는 item가 없을 때 보여주는 내용으로 보이는데요. 그렇기에 emptyMessageChildren 처럼 조금 더 특정적인 이름을 지어주면 좋을 것 같습니다. 😁

그냥 children으로 하면 의미가 부족하니 더 특징적인 이름이 좋네요~!!😆
그런데 이름을 바꿔주면 드롭다운의 children의 기능으로는 노드를 받지 못하니까 제 의도와는 조금 달라질 거 같습니다~!!

dev-kjy · 2024-07-22T06:11:27Z

components/layout/Dropdown/Dropdown.tsx

+      <ul className={`${styles.menu} ${menuClassName}`}>
+        {isOpen && (
+          <>
+            {items


items가 비어 있을 때를 대비해 삼항 연산자로 대비를 해둔 부분 좋습니다. 👍

조금 덧붙이자면, items의 타입은 string[]이고 기본값도 []로 설정되어 있습니다. 따라서, 조건을 item.length로 하는 것이 삼항연산자로 분기처리를 한 의도를 더 잘 살릴 수 있을 것 같아요!

앗 그러네요. items=null로 초깃값을 넣은 것도 아니고 [] 빈배열을 넣어버렸으니 true값이 되서 제대로 작동이 안되는 코드네요 ㅠㅠㅠㅠㅠ
item.length로 길이 검사하는 방식으로 바꿨습니다!!🫡

dev-kjy · 2024-07-22T06:22:23Z

components/layout/FileInput/FileInput.tsx

+import { useEffect, useRef, useState } from "react";
+import logoImg from "@/public/images/icons/ic_plus.svg";
+import xIcon from "@/public/images/icons/ic_x.svg";
+import { FileInputType } from "../../../types/commonTypes";


대부분 절대 경로를 잘 사용해주셨는데 이 부분은 아마 자동완성 된 부분일까요? 🤔
절대경로는 파일의 위치가 변경되는 큰 리팩토링 시 경로를 일일이 바꿔주지 않아도 된다는 이점이 있는데요.
자동완성 시에도 절대경로로 추천받고 싶다면 아래 아티클을 참고해서 typescript.preferences.importModuleSpecifier 값을 수정해보시면 좋을 것 같습니다.
TS 모듈 import 경로에 별칭 사용하기

제가 확인해보니 현재 프로젝트에서는 자동완성으로는 절대 경로가 설정되는 게 맞습니다. 제가 저건 따로 수정을 안했네요.🤣 바꿨습니다~!!🫡
자동완성 시에도 상대경로로 추천되면 절대경로로 설정하는 방법이 따로 있군요!! 좋은 방법 감사합니다ㅎㅎ

dev-kjy · 2024-07-22T06:26:48Z

components/layout/Header/Header.tsx

            <Link href="/login">
-              <Button>로그인</Button>
+              <Button href="">로그인</Button>
            </Link>


부모 요소 Link 태그를 지우고 href 속성에 '/login'을 전달하는 것이 더 좋을 것 같습니다. 😆

앗 Button 컴포넌트에 Link 기능이 포함이라 부모요소에 Link가 필요없는데 안지웠네요😂
와 섬세하게 잘 찾아주셔서 감사합니다~!!

dev-kjy · 2024-07-22T06:46:56Z

lib/articleApi.ts

  page = 1,
  pageSize = 10,
-  orderBy = "recent",
+  orderBy = ORDER_TYPE_ENUM.RECENT,


이 부분도 전체 프로젝트에서 동일한 값을 공유할 수 있도록 orderConstants.ts 파일에서 정의한 defaultOrderType 값을 가져와 적용해 주시면 더 좋을 것 같습니다. 😄

넵 바꿨습니다~!! 확실히 지금은 쓴 곳이 적어서 그나마 빠르게 수정하는데 나중에 엄청난 분량일 때 일일이 수정할 거 생각하면 무섭네요..😂

dev-kjy · 2024-07-22T07:14:43Z

components/layout/RegisterForm/registerConfig.ts

+  IMAGE = "이미지",
+}
+
+export const fields: { [id: string]: FieldInfo } = {


fields 객체는 key는 FIELDTYPE, value는 FieldInfo 타입입니다.
value의 경우에는 타이핑을 잘 해주셨는데, key의 경우에는 인덱스드 시그니처로 처리하여 문자열 타입으로 처리된 부분이 조금 아쉽습니다.

TypeScript의 Record 유틸리티 타입은 특정 키 타입과 값 타입을 가지는 객체 타입을 정의할 때 사용됩니다. 이를 통해 객체의 키와 값의 타입을 명확히 할 수 있습니다.

Record<K, T>는 다음과 같이 정의됩니다:

K: 객체의 키 타입을 정의합니다.

T: 객체의 값 타입을 정의합니다.

type MyRecord = Record<string, number>; const example: MyRecord = { key1: 1, key2: 2, key3: 3, };

따라서, 이 경우에도 Record를 활용해 보시면 더 좋을 것 같습니다

Suggested change

export const fields: { [id: string]: FieldInfo } = {

export const fields: Record<FIELDTYPE, FieldInfo> = {

제네릭을 여태 많이 안써봤는데 동적으로 할당하는 곳에는 인덱스드 시그니처 대신 제네릭을 쓰는 게 좋네요~ Record 유틸리티 타입도 새로 알게 되었습니다~!!🫡

dev-kjy · 2024-07-22T07:26:10Z

미영님, 이번주도 과제 진행하느라 수고 많으셨습니다. 💪💪💪
이번주 내용에는 지난번 멘토링 때 체계적으로 타입을 관리하는 방법이나 공통화에 대한 코드를 작성해 주셨는데요. 어려운 내용임에도 불구하고 적극적으로 사용해주셔서 놀랐습니다. 😊
중급 프로젝트 시작 전 지금처럼 다양한 시도를 해보시면서 학습하시면 좋을 것 같네요. 수고 많으셨어요~~!! 🔥

myong39 added 2 commits July 16, 2024 22:18

refactor: review feedback incorporated

8e28af1

feat: generalize Dropdown component

453b1d6

myong39 requested a review from dev-kjy July 19, 2024 13:43

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

myong39 added 6 commits July 20, 2024 00:34

fix: add type assertion for orderTypeUS indexing

d9871c4

feat: Update dropdown CSS

cb6f334

feat: add registerForm

1c0118d

feat: add comment

0329892

feat: add input validation to BoardDetail

57f2e9f

feat: add BoardDetailArticle

deb85c1

myong39 removed the 미완성🫠 죄송합니다.. label Jul 21, 2024

style: update CSS for comment section

ceda62f

dev-kjy approved these changes Jul 22, 2024

View reviewed changes

dev-kjy merged commit ff9959e into codeit-bootcamp-frontend:Next-서미영 Jul 22, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[서미영] Sprint10 #267

[서미영] Sprint10 #267

myong39 commented Jul 19, 2024 •

edited

Loading

dev-kjy Jul 22, 2024

myong39 Jul 23, 2024

dev-kjy Jul 22, 2024

myong39 Jul 23, 2024

dev-kjy Jul 22, 2024

myong39 Jul 23, 2024

dev-kjy Jul 22, 2024

myong39 Jul 23, 2024

dev-kjy Jul 22, 2024

myong39 Jul 23, 2024 •

edited

Loading

dev-kjy Jul 22, 2024

dev-kjy Jul 22, 2024

myong39 Jul 23, 2024

dev-kjy Jul 22, 2024

myong39 Jul 23, 2024

dev-kjy Jul 22, 2024

myong39 Jul 23, 2024

dev-kjy Jul 22, 2024

myong39 Jul 23, 2024 •

edited

Loading

dev-kjy Jul 22, 2024

myong39 Jul 23, 2024

dev-kjy commented Jul 22, 2024

	const titleImage = image ? image : noImg.src;
	const titleImage = image \|\| noImg.src;

	const [orderBy, setOrderBy] = useState(ORDER_TYPE_ENUM.RECENT);
	const [orderBy, setOrderBy] = useState(defaultOrderType);

	export const fields: { [id: string]: FieldInfo } = {
	export const fields: Record<FIELDTYPE, FieldInfo> = {

[서미영] Sprint10 #267

[서미영] Sprint10 #267

Conversation

myong39 commented Jul 19, 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

myong39 Jul 23, 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

myong39 Jul 23, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dev-kjy commented Jul 22, 2024

myong39 commented Jul 19, 2024 •

edited

Loading

myong39 Jul 23, 2024 •

edited

Loading

myong39 Jul 23, 2024 •

edited

Loading