Part2 정지성 week8

[Byukchong]

요구사항

기본

• 링크 공유 페이지 url path는 ‘/shared’, 폴더 페이지 url path는 ‘/folder’가 되도록 설정했나요?
• 폴더 페이지에서 상단 네비게이션 바는 스크롤 시 상단에 고정하지 않고 가려지도록 했나요?
• 상단 네비게이션 바에 프로필 영역의 데이터는 https://bootcamp-api.codeit.kr/docs 에 명세된 “/api/users/1”을 활용했나요?
• “전체” 폴더를 선택한 경우 “공유”, “이름 변경”, “삭제” 버튼들이 보이지 않지만, 다른 폴더를 선택한 경우에는 버튼들이 보이나요?
• 폴더 목록에 필요한 데이터는 “/api/users/1/folders”를 활용했나요?
• “전체” 폴더에 필요한 링크들 데이터는 “/api/users/1/links”를 활용하고, 이외의 폴더에 필요한 링크들 데이터는 “/api/users/1/links?folderId={해당 폴더 ID}”를 활용했나요?
• [] Mobile에서 “폴더 추가” 버튼은 최하단에서 101px 떨어져있는 Floating Action Button으로 만들었나요?

심화

주요 변경사항

스크린샷

멘토에게

• 카드에 마우스 hover 시에 이미지 크기가 변경되는 코드를 작성은 하였습니다.
  하지만 background-image 로 이미지 지정했던 케이스들 밖에 검색하지 못하여서 실적용은 하지 못했습니다.
  ( CSS에서 background-size 와 같은 코드를 작성한 부분)

api를 fetch해서 map으로 링크 정보를 가져온 것의 경우에는, css에서 사용하는

/예시/
selector {
background-image: url(' ')
}

와는 또 다른 방법이 있을까요?

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

[devToram]

카드에 마우스 hover 시에 이미지 크기가 변경되는 코드를 작성은 하였습니다.
하지만 background-image 로 이미지 지정했던 케이스들 밖에 검색하지 못하여서 실적용은 하지 못했습니다.
( CSS에서 background-size 와 같은 코드를 작성한 부분)
api를 fetch해서 map으로 링크 정보를 가져온 것의 경우에는, css에서 사용하는

/예시/

selector {
background-image: url(' ')
}

와는 또 다른 방법이 있을까요?

제가 이해한 바가 맞다면, backgroundImage 를 api 를 통해 가져온 값으로 설정하고, hover 하면 background-size가 조정되는 부분에 어려움을 느끼고 계시는 거 같은데요? (만약 아니라면... 멘토링 시간에 질문주셔요)

<div style={{ 
      backgroundImage: `url("https://via.placeholder.com/500")` 
    }}>

https://www.freecodecamp.org/news/react-background-image-tutorial-how-to-set-backgroundimage-with-inline-css-style/
위의 예제처럼 inline-style 을 설정하는 방법으로 api 에서 가져온 image src 값을 넣어줄 수 있습니다!
그리고 hover시에 background-size 가 조정되는 부분은 :hover 을 css 에서 설정하시면 될 거 같아요!

[devToram]

map 하시면 key 를 꼭 넣어주셔야합니다!

Suggested change

	<a href={link.url}>
	<a href={link.url} key={link.url}>

[devToram]

파스칼케이스는 컴포넌트명에만 쓰는 게 일반적인 컨벤션입니다!
훅 내부의 데이터는 카멜케이스로 가져와주세요~

Suggested change

	const CardData = useFetch(props.url);
	const cardData = useFetch(props.url);

[devToram]

중복되는 코드가 많아서 공통화해주면 좋을 거 같아요!

Suggested change

	{link.imageSource ? (
	<img
	src={link.imageSource}
	className={`${styles.card_img} ${
	isHovering ? styles.zoomIn : ""
	}`}
	onMouseOver={handleMouseOver}
	onMouseOut={handleMouseOut}
	alt={link.title}
	/>
	) : (
	<img
	src={thumbnail}
	className={`${styles.card_img} ${
	isHovering ? styles.zoomIn : ""
	}`}
	onMouseOver={handleMouseOver}
	onMouseOut={handleMouseOut}
	alt="thumbnail_img"
	/>
	)}
	<img
	src={link.imageSource || thumbnail}
	className={`${styles.card_img} ${
	isHovering ? styles.zoomIn : ""
	}`}
	onMouseOver={handleMouseOver}
	onMouseOut={handleMouseOut}
	alt={link.imageSource ? link.title : "thumbnail_img"}
	/>

[devToram]

상수값은 대문자로 네이밍해주는 게 일반적인 거 같아요!

Suggested change

	const snsLists = [
	const �SNS_LISTS = [

[devToram]

key 안넣어주면 console 창에 아마 에러나고 있을 거에요!

Suggested change

	<a href={snsList.link} target="_blank" rel="noopener noreferrer">
	<a href={snsList.link} target="_blank" rel="noopener noreferrer" key={snsList.link}>

[devToram]

styledComponent가 아니라면 class 이름에 파스칼케이스는 지양해주세요!