૮( • ·̫ - )ა ♡₊˚

Troubleshooting/Issues

프로젝트 진행 중 상단 NavBar의 유저 프로필 img가 페이지 전환할 때마다 뒤늦게 Load되는 이슈를 발견했습니다. 프로필 이미지는 이미 리사이즈 되어 작은 파일로 데이터를 주고받고 있어서 로드 우선순위를 위로 올리는 방법이 적당하다고 생각했고, MDN에서는 아직은 실험적인 기술이라고 소개하지만, 괜찮은 메서드가 있어서 적용해보기로 했습니다. 적용전 프로필이미지의 Priority가 "Low"로 자동 설정된 것을 확인할 수 있었습니다. fetchpriority="high"로 img 태그에서 사용할 수 있는데, 기본값은 "auto"이고, 낮은 우선순위는 "low", 높은 우선순위는 "high"로 값을 지정할 수 있습니다. 하지만 진행중인 프로젝트는 타입스크립트를 사용하고 있고, 타입스크립트는 해당 태그..

2023. 8. 25.

Troubleshooting/Issues

팀 프로젝트에서 스크롤 이벤트를 활용하면서 겪은 어려움과 깨달음을 순차적으로 정리한 글입니다. 01 스크롤 이벤트를 적용한다면, height 100% 또는 100vh를 조심하자. 저희 프로젝트에는 이라는 body에 height 100vh가 적용되어 있는 컴포넌트가 있습니다. 아래 코드와 같이 header와 footer를 내려주며 쓰고 있었던 것이죠. export const HomePage = () => { (생략) return ( ); }; 너무나도 당연하지만 스크롤하려는 요소의 height는 매우 중요합니다. 하지만 기능을 생각하다보면 style 코드를 망각할 때가 있습니다😖 무한스크롤 구현할 때에도 Window 객체의 메서드 중 스크롤 관련 기능을 이용했는데, 작동하지 않았던 문제가 있었습니다. 이때..

2023. 8. 17.

Troubleshooting/Issues

무한스크롤 기능 첫 도전🎉 카카오 엔터프라이즈의 코드 따라해보기 : 배경지식이 0이기 때문에 카카오 엔터프라이즈의 코드를 빌렸으며 '동작의 흐름 파악'에 의의를 두었습니다. scroll 이벤트를 활용한 무한스크롤 기능을 구현하던 중, 화면상에서는 스크롤이 있음에도 불구하고, 전체 컨텐츠의 높이인 offsetHeight가 화면 높이인 innerHeight와 같은 현상이 발생했습니다. // ThumbnailWrapper.tsx import React, { useState, useEffect, useCallback } from 'react'; import { Thumbnail } from '../Thumbnail/Thumbnail'; import { StThumbnailWrapper } from './Thum..

2023. 8. 14.