[임주민] week8, 11

[imkrmin]

요구사항

기본

• TypeScript를 활용해 프로젝트에 타입 명시가 필요한 곳을 찾아 타입을 명시했나요?
• 링크 검색바에 검색어를 입력하면 현재 폴더에 있는 링크들 중 “url”, “title”, “description” 중 하나에 검색어가 포함된 링크들만 필터된 상태로 볼 수 있나요?
• 링크 검색바에 입력 값이 있는 경우 x 버튼이 보이나요?

심화

• 상단에 있던 링크 추가하기 영역이 가려져 보이지 않을 때 최하단에 링크 추가하기 영역을 고정하도록 만들었나요?
• 푸터가 시작되는 지점에서는 최하단에 고정된 링크 추가하기 영역이 보이지 않도록 했나요?

주요 변경사항

• TypeScript로 마이그레이션 진행

멘토에게

• 타입 지정이 안된 부분이 있습니다 ㅠㅠ ... Cardlist 컴포넌트에서 cardlinks와 allLinks에 타입을 어떻게 지정해야될지 모르겠습니다 .... 챗GPT의 도움을 빌려 (거의 복붙) 코드를 짰는데 타입스크립트를 완전히 이해한 상태가 아니라 코드를 제대로 짠건지 모르겠습니다 🥲
• 검색어를 입력하고 다른 폴더를 클릭 시 이전 폴더 링크들이 보이는 이슈가 발생합니다. 어떻게 해결하면 좋을까요.........? 다른 폴더를 클릭 시 해당 폴더에 있는 링크에서 입력한 검색어가 보이게 기능을 수정하고싶은데 어렵네요 ㅠㅠ
• 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

[201steve]

뭔가 비슷한 파일이 많다 싶었는데
각각 폴더별로 주차가 나뉘어있었군여...

다음 브랜치에서는 프로젝트 폴더를 하나만 운용하시도록 정리하는게 좋을것같아요
그래야 버전 관리 라는걸 할 수 있습니다

지금은 약간

20241010_과제제출_최종.ppt
20241011_과제제출_최최종.ppt
20241012_과제제출_진짜_최최종.ppt
20241013_과제제출_찐찐막.ppt

이런 느낌이어서 다음 브랜치부터는 최신 폴더 하나만 들고 다니는걸 해보시는게 좋을 것같아요! :-)

[201steve]

이 함수의 반환값은 객체이고,
links라는 프로퍼티 안에 map 메서드로 배열이 생성돼요. 그리고 배열안에는 id,createdAt,url,title,description,imageSource 로 구성된 객체가 담깁니다.
코드로 보면

{
links:[
  {
    id: 숫자값이 들어옵니다,
    createdAt: 숫자값이 들어옵니다,
    url: 문자열값이 들어옵니다,
    title: 문자열값이 들어옵니다,
    description: 문자열값이 들어옵니다,
    imageSource: 문자열 또는 null 값이들어옵니다,
    },
  ];
}

이런 값 혹은 빈 배열이 반환됩니다.

[201steve]

transCardLinkData 함수로 전달하는 값은 CardList 컴포넌트가 전달받은 props cardlinks 이고, transCardLinkData가 반환한
배열이 transformedData에 담겨요.

[201steve]

그러면 transformedData가 반환한 값은

{
links:[
  {
    id: 숫자값이 들어옵니다,
    createdAt: 숫자값이 들어옵니다,
    url: 문자열값이 들어옵니다,
    title: 문자열값이 들어옵니다,
    description: 문자열값이 들어옵니다,
    imageSource: 문자열 또는 null 값이들어옵니다,
    },
  ];
}

이렇게 생겼어요.
transformedData.links 값이 null 혹은 undefined가 아니면 transformedData.links 값을 allLinks에 할당하고
transformedData.links 값이 null 혹은 undefined라면 [] 빈배열을 allLinks에 할당한다는 의미 입니다.

그래서 allLinks는 Link[] 로 적으면 맞습니다.
여기서 한가지 생각해볼점은, 만약 빈배열을 반환할 수도 있는데 왜 Links[] | [] 가 아니냐 를 생각해볼 수 있습니다.

타입스크립트에서 배열 타입을 선언할 때 Link[]는 "0개 이상의 Link 타입 요소를 포함하는 배열"을 의미합니다.
따라서 빈 배열 []도 Link[] 타입에 속합니다. 타입스크립트에서 배열의 길이에 제한을 두지 않기 때문입니다.

그래서 Link[] 로 타입 선언을 하는게 맞습니다.

[201steve]

조건식의 중첩이 많아지면 보기 어려워지는데, 코드가 구체적으로 적혀있어서 코드 한줄한줄 어떤 의미인지 생각해 가면서 읽어야 하겠네여.
이럴때는 구체적인 코드를 변수에 담아서 특정 이름으로 쉽게 구분할 수 있게 코드단위로 의미 부여 해주는 리팩토링을 해주면 좋습니다.

Suggested change

	const handleSearch = (searchTerm: string) => {
	const filtered = allLinks.filter(
	link =>
	(link.folder === selectedFolderName &&
	link.url.toLowerCase().includes(searchTerm.toLowerCase())) ||
	(link.title &&
	link.title.toLowerCase().includes(searchTerm.toLowerCase())) ||
	(link.description &&
	link.description.toLowerCase().includes(searchTerm.toLowerCase()))
	);
	console.log(filtered);
	setFilteredLinks(filtered);
	};
	const handleSearch = (searchTerm: string) => {
	const searchTermLower = searchTerm.toLowerCase();
	const isMatch = (link: Link) => {
	const titleMatch = link.title?.toLowerCase().includes(searchTermLower);
	const descriptionMatch = link.description?.toLowerCase().includes(searchTermLower);
	const urlMatch = link.url.toLowerCase().includes(searchTermLower);
	const isInSelectedFolder = link.folder === selectedFolderName;
	return (isInSelectedFolder && urlMatch) || titleMatch || descriptionMatch;
	};
	const filteredLinks = allLinks.filter(isMatch);
	console.log(filteredLinks);
	setFilteredLinks(filteredLinks);
	};

그리고 filter메서드가 받는 콜백 함수를 기명 함수로 만들어서 전달하면 콜백함수가 어떤 역할을 하는지도 의미가 명확해집니다.

[201steve]

조건식을 판별하는 함수로 구분해서 반환되는 값에 따라 JSX를 렌더 하는방식으로도 수정할 수 있어요.

Suggested change

	{isModalOpen && modalType === "share" && (
	<Modal isOpen={isModalOpen}>
	<ShareFolderModal name={name} onClose={handleCloseModal} />
	</Modal>
	)}
	{isModalOpen && modalType === "rename" && (
	<Modal isOpen={isModalOpen}>
	<RenameFolderModal name={name} onClose={handleCloseModal} />
	</Modal>
	)}
	{isModalOpen && modalType === "delete" && (
	<Modal isOpen={isModalOpen}>
	<DeleteFolderModal name={name} onClose={handleCloseModal} />
	</Modal>
	)}
	const renderModalContent = () => {
	switch (modalType) {
	case "share":
	return <ShareFolderModal name={name} onClose={handleCloseModal} />;
	case "rename":
	return <RenameFolderModal name={name} onClose={handleCloseModal} />;
	case "delete":
	return <DeleteFolderModal name={name} onClose={handleCloseModal} />;
	default:
	return null;
	}
	};
	return (
	...생략
	삭제
	</button>
	</>
	)}
	</div>
	{isModalOpen && (
	<Modal isOpen={isModalOpen}>
	{renderModalContent()}
	</Modal>
	)}
	);

이렇게 하면 JSX부분은 좀더 이해하기 쉬워지고 나중에 조건이 추가되면 switch Case문에서 case만 추가하거나, 수정하기 쉬워지기도 합니다.

[201steve]

Suggested change

	links: data.folder.links.map(item => ({
	id: item.id,
	createdAt: item.createdAt,
	url: item.url,
	title: item.title,
	description: item.description,
	imageSource: item.imageSource || null,
	})),
	links: data.folder.links.map(({id,createdAt,url,title,description,imageSource}) => ({
	id,
	createdAt,
	url,
	title,
	description,
	imageSource: imageSource || null,
	})),

구조분해할당을 활용하면 반복되는 item이라는 프로퍼티에서 한depth 더 들어가지 않고 바로 원하는 프로퍼티에 접근할 수 있습니다.
그리고 프로퍼티의 key, value가 같다면 단축 속성명 이라는 문법으로도 한번 더 줄일 수 있어요

이렇게 해야해요! 가 아닌, 이런 방법도 있다~ 알고계시면 좋다~ 입니다 :-)