티스토리

૮( • ·̫ - )ა ♡₊˚

검색하기

블로그 홈

૮( • ·̫ - )ა ♡₊˚

soolovepat.tistory.com/m

Soozinyy 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

이미지 fetchpriority로 빠르게 불러오기 프로젝트 진행 중 상단 NavBar의 유저 프로필 img가 페이지 전환할 때마다 뒤늦게 Load되는 이슈를 발견했습니다. 프로필 이미지는 이미 리사이즈 되어 작은 파일로 데이터를 주고받고 있어서 로드 우선순위를 위로 올리는 방법이 적당하다고 생각했고, MDN에서는 아직은 실험적인 기술이라고 소개하지만, 괜찮은 메서드가 있어서 적용해보기로 했습니다. 적용전 프로필이미지의 Priority가 "Low"로 자동 설정된 것을 확인할 수 있었습니다. fetchpriority="high"로 img 태그에서 사용할 수 있는데, 기본값은 "auto"이고, 낮은 우선순위는 "low", 높은 우선순위는 "high"로 값을 지정할 수 있습니다. 하지만 진행중인 프로젝트는 타입스크립트를 사용하고 있고, 타입스크립트는 해당 태그.. 공감수 0 댓글수 0 2023. 8. 25.
scroll event와 style 팀 프로젝트에서 스크롤 이벤트를 활용하면서 겪은 어려움과 깨달음을 순차적으로 정리한 글입니다. 01 스크롤 이벤트를 적용한다면, height 100% 또는 100vh를 조심하자. 저희 프로젝트에는 이라는 body에 height 100vh가 적용되어 있는 컴포넌트가 있습니다. 아래 코드와 같이 header와 footer를 내려주며 쓰고 있었던 것이죠. export const HomePage = () => { (생략) return ( ); }; 너무나도 당연하지만 스크롤하려는 요소의 height는 매우 중요합니다. 하지만 기능을 생각하다보면 style 코드를 망각할 때가 있습니다😖 무한스크롤 구현할 때에도 Window 객체의 메서드 중 스크롤 관련 기능을 이용했는데, 작동하지 않았던 문제가 있었습니다. 이때.. 공감수 0 댓글수 0 2023. 8. 17.
무한스크롤 구현시 offsetHeight가 innerHeight와 같은 현상 무한스크롤 기능 첫 도전🎉 카카오 엔터프라이즈의 코드 따라해보기 : 배경지식이 0이기 때문에 카카오 엔터프라이즈의 코드를 빌렸으며 '동작의 흐름 파악'에 의의를 두었습니다. scroll 이벤트를 활용한 무한스크롤 기능을 구현하던 중, 화면상에서는 스크롤이 있음에도 불구하고, 전체 컨텐츠의 높이인 offsetHeight가 화면 높이인 innerHeight와 같은 현상이 발생했습니다. // ThumbnailWrapper.tsx import React, { useState, useEffect, useCallback } from 'react'; import { Thumbnail } from '../Thumbnail/Thumbnail'; import { StThumbnailWrapper } from './Thum.. 공감수 0 댓글수 0 2023. 8. 14.
json-server: command not found #npx json-server 첫 공부시간입니다 ! json-server는 실습 및 개발용으로 사용할 수 있는 간단한 RESTful API 서버를 제공하는 패키지입니다. 이를 전역으로 설치하면 터미널에서 어디서든 "json-server" 명령어를 실행하여 간단한 JSON 데이터를 가진 가상의 API 서버를 구축할 수 있습니다. 그런데 설치 후 4000포트로 연결하려고 하니 에러가 뜨고 마는데요... package.json을 보면 설치는 분명 되었는데, 왜 이런 걸까요 ? 결론은 이 명령어로 깔끔하게 해결 ! 참고자료 npx json-server --watch db.json --port 4000 첫번째 시도: 종속성 충돌 무시하기 yarn add json-server --save --legacy-peer-deps .. 공감수 0 댓글수 0 2023. 7. 4.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.