안녕하세요

문제 상황: 동적으로 width가 달라지는 상황에서 height를 고정해줄 수 없다. 로드 전 사진: image가 로드되기 전에는 height가 비어있다. 로드 후 사진: 로드 된 image 만큼 height가 채워진다. 해결방법: img를 감싸는 박스에 img 비율만큼의 높이를 미리 지정한다. 박스의 높이를 padding-top 을 이용해 만들어 주고, img를 absolute로 크기를 미리 갖도록 한다. .thumbnail-ratio { position: relative; width: 100%; padding-top: 56.25%; /* 16:9 비율의 경우 */ img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } } 이는 ..

보호되어 있는 글입니다.

기본 Nivo tooltip의 둘팁은 아래와 같이 정보를 그렇게 많이 포함하고 있지 않다. custom tooltip example을 보아도, 인터넷에 검색을 해보아도 다음과 같은 상태의 tooltip을 약간 더 이쁘게 꾸며줄 뿐이다. 하지만 내가 필요로 하는 결과는 해당 일자에 플레이한 방송 정보에 어떤 게임을 하였는지도 포함시키고 싶었다. Custop tooltip 완성 결과 tooltip에는 별도의 데이터를 전달할 수 있는 방법이나 props가 존재하지 않는데, 약간의 꼼수(?)를 써서 어떠한 데이터라도 전달할 수 있는 방법을 찾아냈다. indexValue(위 이미지의 방송시간 (h) )에 JSON.stringify를 이용하여 객체나 배열의 데이터도 싸그리 보내는 방법이다. 1. Nivo Custo..

적용 필요성: 등록된 채널이 많아짐에 따라 페이지 로드 비용이 커짐 초기에는 100~150개 가량의 채널이 등록되어 있었다. 지속적으로 활동을 하지 않거나 연관 없는 채널을 제외 했음에도 현재는 지속적으로 관련 채널이 늘어남에 따라서 350~450개 가량의 채널이 등록되어 있다. 한 번에 모든 데이터를 불러오고 렌더링 하기에는 너무 많기에 페이지네이션과 무한스크롤 중에서 고민하다가 페이지네이션을 택했다. 채널을 둘러보고 싶다면 1~2페이지의 연관성이 높은 채널과, 마지막 페이지엔 어떤 채널이 있는지를 주로 확인하기 때문이다. exports.getSortedChannelsData = async (req, res) => { try { const page = parseInt(req.query.page) || ..