KDT5_김준희_2차과제 (Re-open) #64
Conversation
|
준희님 첫 번째 리액트 프로젝트 하시느라 정말 고생 많으셨습니다! 데이터를 prop로 전달하는 법 |
| .profile { | ||
| width: 100%; | ||
| text-align: center; | ||
| font-family: 'Ycomputer-Regular'; | ||
| margin: 30px 0 30px 0; | ||
| } | ||
| .profile img { | ||
| width: 230px; | ||
| height: 230px; | ||
| overflow: hidden; | ||
| border-radius: 50%; | ||
| opacity: 70%; | ||
| transition: .4s; | ||
| } | ||
| .profile img:hover { | ||
| opacity: 100%; | ||
| } |
There was a problem hiding this comment.
scss로 스타일링 잘 해주시고 계신데요!
다만 하나 알려드리고 싶은건 scss의 유연성이에요
scss의 셀렉터안에 셀렉터를 중첩시켜서 가독성을 좋게 해주는 게 장점이라고 생각하는데요
profile {
img {
&:hover {
}
}
이런식으로 가독성좋게 해줄 수 있을거같습니다 지금은 이렇게 하셔도 별 차이는 나지 않지만 코드가 1000줄 씩되면 확연한 차이를 보일 수 있습니다!
There was a problem hiding this comment.
멘토님 좋은 지적 감사합니다!
SCSS 첫 시도를 해보았는데 중첩이 가능하는 점을 알았어도 세부적인 부분까지 100% 활용하지 못한 것 같아요.
사전공부 없이 일단 시도해본 것이라 많이 부족하지만 모자른 부분은 공부해가며 추후 더 활용성 있게 사용해보도록 하겠습니다!
| export default function TheAccount() { | ||
| return ( | ||
| <> | ||
| <TheHeader /> |
There was a problem hiding this comment.
리액트는 자유도가 높은 만큼 코드를 작성하는데 있어서 다양하게 구현할수 있는데요
라우터를 작성할때는 router-dom 최신 버전을 쓰면 browserRouter와 Routes, Route 컴포넌트를 통해
좀더 직관적으로 라우터를 조작할 수 있습니다. 최신 라우터 문법을 사용하면 좋아요!
리액트 라우터 돔 v6 참고자료 : https://www.youtube.com/watch?v=oDJMHEcKiL0
예를들면
Header나 Footer 같은 router page와 별개로 고정되어 재사용되는 컴포넌트는
최상위 폴더, 라우터 위 아래로 위치시키면 다시 코드를 import 할 일이 사라지면서 수고를 덜해줍니다!
익숙해지면 더 편해질거에요 지금도 충분히 잘하셨습니다!
There was a problem hiding this comment.
아하! 멘토님 말씀대로 별도 고정시킨다면 라우터 이동 시 페이지 렌더링면에서도 조금 더 효과적인 걸까요..!?
컴포넌트를 만들고 배치하는 쪽으로만 신경 썼었는데 재사용성, 효율성을 더 깊게 생각해보겠습니다!
There was a problem hiding this comment.
아무래도 페이지 이동시 렌더링이 되는데 header와 footer도 import된 곳에서 불러오면 중복 될 가능성도 크고 또한
header같은 경우엔 UI적으로 동적인 기능을 추가할 일이 있을텐데 그것을 다룰 떄도 하나의 컴포넌트를 다루는 것이 좀더 편리하기 때문에
재사용성과 효율성 측면에서 header나 footer같은 건 route 바깥쪽으로 빼서 (최상단)에 선언하고 시작하는게 약간 리액트의 국룰같은 느낌입니다 ㅎㅎ 확실히 편하더라고요 지금도 잘 하셨어요!
| <Modal | ||
| style={modalStyle} | ||
| isOpen={modalIsOpen} | ||
| onRequestClose={() => setModalIsOpen(false)} | ||
| ariaHideApp={false}> | ||
| <img | ||
| src={movie.Poster} | ||
| alt={movie.Title} | ||
| /> | ||
| <br /> | ||
| <button onClick={() => setModalIsOpen(false)}>X</button> | ||
| </Modal> |
There was a problem hiding this comment.
modal을 통해 상세페이지 UI를 구현하기 위해서
modal을 map 함수안에 li 내부 자식요소로 두는 것이 아니라
map 함수밖에 하나의 컴포넌트만 놓고 그 컴포넌트에 props로 데이터를 넘겨주는 식으로 했다면 (모달 컴포넌트내에선 데이터를 find로 처리 하는 방법도 있음) 아마 원하시는 방향대로 작동했을거 같습니다!
아마 프론트엔드라면 모달창을 자주, 필수적으로 다루실텐데 분명 익숙해지고 쉽게 사용하실 수 있을 겁니다.
라이브러리가 좋은 점은 이미 구현된 것을 갖다 쓸 수 있다는 점도 있지만 또한, API 명세서에 따라 쓰지 않으면
오히려 작동하지 않는 경우도 있어서 다음 번에는 직접 모달 컴포넌트를 리액트 내의 훅으로 작성해보시는 것도 연습이 될거 같습니다!
There was a problem hiding this comment.
쉽고 간편하게 모달을 띄워보겠다는 마음으로 라이브러리를 사용했는데 생각보다 쉽지 않았습니다.
멘토님 말씀주신 것 처럼 추후 리팩토링 시에는 별도 모달 컴포넌트를 사용하여 구현해볼 예정입니다.
이번 과제를 진행할 때 state, props 에 대한 정확한 이해 없이 진행했었는데 코드에도 그대로 드러난다는 점이 신기하고 부끄럽기도 하네요..!!
이후 과제에는 좀 더 정확한 이해 내용을 바탕으로 시도해보겠습니다 🙌
There was a problem hiding this comment.
맞습니다 저도 라이브러리를 많이 알고 자주 쓰는 편이지만 종종 라이브러리 없이 쓸 때가 편할 때가 있더라고요 ㅋㅋㅋ
아마 금방 잘 적용해서 하실 수 있을거 같습니다 저도 리액트 처음 할때 state, props 개념 잘 숙지 못하고 했어서
다음 과제에선 좀더 편하게 구현 하실 수 있을거 같습니다 항상 열심히 하시고 잘하시고 계셔서 응원합니다!
| ) | ||
| const json = await res.json() | ||
| console.log(json.Search) | ||
| return json.Search || [] |
There was a problem hiding this comment.
api 호출에 실패했을시 빈배열을 리턴해주는 디테일은 에러핸들링에 있어서 좋은 코드인거 같네요!
🎬 OMDb API 영화 검색
OMDb API를 활용하여 영화 검색 페이지를 구현하였습니다.
프로젝트 소개
화면 구성
사용기술 및 개발환경
구현 내용 (과제 요구사항)
❗ 필수
❔ 선택
아쉬운 점