데브코스 최종 프로젝트 - 10~11일차

 

 

10~11일차 : 코스 상세페이지 구현

 

코스, 장소 목록페이지를 구현하고

코스 상세페이지에서 사용할 Comment, CourseOverviw, CourseDetail 컴포넌트 등을 구현했다.

 

아무래도 아직 API가 완성되지 않았기 때문에 데이터를 직접 다루지 않아서 컴포넌트 구현은 어렵지 않았지만

변수명 짓는게 참 어려웠다...ㅠ_ㅠ

 

 

https://www.curioustore.com/

Curioustore

이 사이트를 조금 이용했지만 그래도 어렵다..!! 

 

 

슬라이드(캐러셀) 구현

직접 구현을 할 까 했지만 라이브러리도 잘 사용해보는것이 좋을 것 같기도 하고

빠르게 구현을 하기 위해 React Slick 라이브러리를 사용해보기로 했다.

 

빨리 완성할 수 있겠지..?? 하고 사용했는데,, 사용은 간편하나 커스텀하기가 생각보다 까다로웠다.

흠 아마도 내가 아직 익숙치 않아서 이렇게 느끼는 것 같긴 했다.

물론 내부적으로 지정된 css를 활용하여 디자인은 맞춰서 수정할 수는 있었지만

기본적으로 세팅되어 있는 마크업 순서나 구조들을 아예 커스텀 할수는 없었기 때문에 약간의 아쉬움이 있었다.

 

position sticky

코스 상세페이지에 나오는 sidebar를 구현하기위해 sticky를 사용해보려고 했다.

보통 간단하게 구현했던 것 같은데 왠걸,,, 적용이 안되는 문제가 발생했다

 

😱 문제 발생

absolute된 부모 안에서 사용하니 적용이 안되어서 검색해보니

부모에 height넣기 oveflow확인하기 등등 해결방법을 제안해주었는데 적용이 제대로 되지 않았다.

 

✅ 해결

absolute된 부모요소에 bottom 0을 주니 해결되었다.

top과 bottom 0을 줌으로써 부모 요소의 영역이 브라우저 내부 전체로 잡히면서

자식이 sticky를 통해 움직일 수 있는 공간이 생긴 것이다.

처음에 내가 이해를 잘못하고 사용을 하려고 했던 것 같다. 반성하자!