콘요맘떼 개발일지

  • 홈
  • 태그
  • 방명록

isOverflowing 1

[Javascript/React] element가 오버플로우중인지 여부 판단하기

이따금씩 자바스크립트 단에서 특정 element가 오버플로우 중인지 여부를 파악해야 할 때가 있다. 아래와 같은 경우를 예로 들어보자. 유튜브에서는 영상 설명이 일정 길이 이상의 텍스트일 때는 더보기 버튼을 토글함으로써 전체 내용 확인, 간략히 확인 기능을 제공하고 있다. 그렇다고 텍스트가 매우 짧을 때에도 더보기 기능을 제공할 필요는 없다. (Lofi 코딩은 그냥 코딩할 때 자주 들어서 골랐다) 이럴 때 아래와 같이 코드를 작성하면 특정 element가 오버플로우중인지 여부를 실시간으로 감지할 수 있다. defineIsOverflowing 함수는 x축 기준, y축 기준으로 element가 오버플로우중인지 여부를 검사한다. 물론 두 축 중 하나만 검사하고 싶은 경우 검사할 축을 인자로 전달받는 식으로 조..

프론트엔드 기본개념 복습/Javascript 2022.04.14
이전
1
다음
더보기
프로필사진

콘요맘떼 개발일지

  • 분류 전체보기 (135)
    • 모바일 이야기 (8)
    • 잡다한 교훈 (17)
    • Git 공부 (1)
    • 알고리즘, 자료구조 공부 (6)
    • CS 공부 (11)
    • 프론트엔드 테크면접 준비 (3)
    • 프론트엔드 기본개념 복습 (66)
      • HTML (5)
      • CSS (14)
      • Javascript (18)
      • React (12)
      • Webpack (0)
      • Redux (1)
      • Typescript (7)
      • 테스트코드 (5)
    • 독서 (12)
      • 클린코드 (10)
      • 이펙티브 타입스크립트 (2)
    • 프로젝트 (잡다한) (3)
    • 아키텍쳐 (2)
    • 일상 (1)

Tag

실행 컨텍스트, @testing-library, proxy, jest, 멀티 스레드, 리액트 훅, 노개북, React, 자료구조, 자바스크립트, 리액트, React Hook, 함수형 프로그래밍, JavaScript, react query, http, Lazy Loading, 북클럽, 노마드코더, css,

최근글과 인기글

  • 최근글
  • 인기글

최근댓글

공지사항

페이스북 트위터 플러그인

  • Facebook
  • Twitter

Archives

Calendar

«   2025/05   »
일 월 화 수 목 금 토
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31

방문자수Total

  • Today :
  • Yesterday :

Copyright © Kakao Corp. All rights reserved.

티스토리툴바