[정지성] week12

[Byukchong]

요구사항

기본

• TypeScript를 활용해 프로젝트의 필요한 곳에 타입을 명시해 주세요.
• [] ‘/shared’, ‘/folder’ 페이지에 현재 폴더에서 검색어가 포함된 링크를 찾을 수 있는 링크 검색 기능을 만들어 주세요.

심화

• [] 폴더 페이지에 상단에 있는 링크 추가하기 input이 화면에서 가려질 때 최하단에 고정해 주세요.

주요 변경사항

• TSX 로 변환

스크린샷

멘토에게

• ts 를 제대로 이해하지 못하여서 중구난방으로 검색해보고 실제로 바꿔본 것이라 난잡한 것 같습니다.
• 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

[devToram]

커밋을 Style: Convert into tsx 로 주셨는데, js 를 ts 로 바꾸는 것은 Refactor 에 가까울 거 같아요!

[devToram]

그동안 감사했습니다 :)
수고하셨어요!! 👍

[devToram]

프로젝트 전반에 걸쳐 사용되는 타입들은 묶어서 types 폴더에 넣어주셔도 좋을 거 같아요!
실제 사용하실 때는 �import 로 가져와서 바로 쓰심 됩니다!

Suggested change

	interface Link {
	id: string;
	url: string;
	imageSource?: string;
	title: string;
	createdAt: Date;
	description: string;
	}
	export interface Link {
	id: string;
	url: string;
	imageSource?: string;
	title: string;
	createdAt: Date;
	description: string;
	}

[devToram]

Suggested change

	currentFolderId={currentFolderId || undefined}
	currentFolderId={currentFolderId}

|| undefined 를 주시는 것은 안주시는 것과 동일해요! (Id 가 0 일 때 undefined를 할당하고 싶으신 게 아니라면)

[devToram]

UserProfile 인데 받아오는 값들은 UserProfile 목록인 거 같아요!

{
    email: string;
    image_source: string;
  }

자체를 UserProfile 로 설정하고,
데이터 fetching 해서 오는 모든 데이터들에 대한 타입을 정의해주시면, 좋을 거 같아요! (https://www.typescriptlang.org/docs/handbook/2/generics.html 참고해보시면 좋을 거 같아요!)

type UserProfiles = FetchData<UserProfile[]> 요런 식이 될 거 같아요!

[devToram]

Suggested change

	const [searchTerm, setSearchTerm] = useState('');
	const [searchTerm, setSearchTerm] = useState<string>('');

'' 은 다양한 타입이 될 수 있어서 되도록 붙여주시는 게 좋아요!

[devToram]

이런 util 류는 input, output 예시를 위에 주석으로 적어주시면 가독성이 매우 좋아져요!

Suggested change

	// 날짜 형식을 변경하는 함수
	// 날짜 형식을 변경하는 함수 new Date -> 2024.05.07

[devToram]

이렇게 앞이 길고 뒤가 짧은 경우에는 그냥 짧은 부분부터 쳐내주시는 게 가독성이 좋아요!

Suggested change

	return isModalOpen ? (
	return !isModalOpen ? null :