Mong dev blog

분류 전체보기214

[JS] 모달 창 띄울 때 레이아웃 깨짐 없이 스크롤 막는 법

1. 들어가기 전에…모달창(modal)은 사용자가 특정 작업을 수행하도록 유도하는 팝업창이다.모달은 창 이외의 영역을 흐리게 만들어 사용자가 창을 닫거나 작업을 완료하기 전까지 다른 부분을 조작할 수 없도록 만든다. 아래 gif는 부트스트랩의 모달 예시이다.https://getbootstrap.kr/docs/5.0/components/modal/#모달-간-토글앞서 언급했듯이, 모달은 사용자가 특정 작업을 수행하도록 유도하는 역할을 한다.그런데 만약 모달이 열릴 때 창 이외 영역에서 스크롤이 가능하면 어떨까?아래 gif는 모달이 열려있을 때, 창 이외 영역에서 스크롤이 발생하는 예시이다.예시를 보면, 모달 이외의 영역으로 주의가 분산되기에 사용자 경험이 저하될 수 있다.그럼 어떻게 해야, 모달 이외의 영역..

이미지, 배경이미지의 지연 로드 구현 방법(with. Vue)

1. 들어가기 전에…이미지 지연 로드(LazyLoad)는 웹 페이지가 로드될 때 모든 이미지를 다운로드하지 않고, 사용자가 이미지를 필요로 할 때(예: 스크롤하여 이미지가 보이는 영역에 도달했을 때) 이미지를 로드하는 기술이다.이 기술을 사용하면, 초기 페이지 로딩 시간을 줄이고 네트워크 트래픽을 최적화해 사용자 경험을 개선할 수 있다.이번 시간에는 “이미지, 배경이미지의 지연 로드 구현 방법” 시리즈의 두 번째로,Vue의 커스텀 디렉티브로 지연로드를 구현하는 방법을 알아보았다.시리즈 순서(1) 이미지, 배경이미지의 지연 로드 구현 방법 (with. intersectionObserver API)👉 (2-1) 이미지, 배경이미지의 지연 로드 구현 방법 (with. Vue)(2-2) 이미지, 배경이미지의..

이미지, 배경이미지의 지연 로드 구현 방법 (with. intersectionObserver API)

1. 들어가기에 앞서각 서비스에는 랜딩 페이지가 존재하며, 랜딩 페이지들은 대개 고화질의 이미지를 사용한다.사용자가 페이지에 처음 방문했을 때, 페이지의 처음부터 끝까지 스크롤할 수 있지만, 일부는 첫 화면만 보고 다른 탭으로 이동하기도 한다. 그래서 랜딩 페이지의 모든 고화질 이미지를 한꺼번에 로드한다면, 리소스 낭비가 발생한다.그럼, 어떻게 해야 리소스 낭비를 줄일 수 있을까? 사용자가 접근하지 않은 이미지는 로드하지 않을 수 없을까? 바로 지연 로드 방식을 사용하면 된다! 지연 로드는 사용자가 이미지를 볼 때까지 이미지 로드를 미루는 기법이다. 이 기법을 사용하면 초기 로드 시간을 단축하고, 불필요한 리소스 사용을 줄일 수 있다.이번 시리즈에서는 “(1) JavaScript의 Intersection..

오픈 소스에 발꼬락만큼 기여해보았닭 🐥

잠깐! 주저리 카테고리에서는 개인작업, 활동에 대해 작성합니다. 그래서 문체가 기존 포스팅과 다를 수 있어유. 주저리라서 개발 기술 정보를 담고 있지 않아, “이 사람은 뭐하고 사나?”, “아 심심한데 뭐 읽을 거 없나” 등과 같은 상황에 휘뚜루마뚜루 읽기 좋습니다 1. 오픈소스에 기여 해보자!제 2027년 목표 중 하나는 “UI 오픈소스 개발”입니다. 그래서 올해부터 2027년 목표 달성을 위해 어떤 노력을 해야할지 생각해봤는데요. 이 중 알고리즘 재학습, 클린 코드, 테스트 코드 공부 등이 있었습니다.알고리즘과 클린 코드의 경우 업무에서 익힐 수 있고, 관련 도서로 학습이 가능했습니다.(사내 코드 리뷰도 있고 경력이 많으신 분들도 계셔서 덕분에 배울 수 있기도…ㅎㅅㅎ)테스트 코드의 ..

[TS] 입력 유효성을 체크하는 여러 정규식(feat. 한글, 전화번호, 사업자등록번호, 이메일 등)

1. 들어가기 전에입력창 유효성 검사는 기본이지만, 매번 작업할 때마다 찾게 된다.그래서 이번시간에는 자주 사용되는 입력 정규식, 유효성 검사 코드를 모아보았다!이 포스팅에서는 아래 내용을 담고 있다1) 필터링 함수 (1) 한글만 남기기 (2) 영어만 남기기 (3) 숫자만 남기기 (4) 글자(한글 + 영어)만 남기기 (5) 숫자 + 영어만 남기기2) 포매팅 함수 (1) 전화번호 형식으로 변경하기 (2) 사업자등록번호 형식으로 변경하기3) 유효성 함수 (1) 한글만 있는지 판별하기 (2) 영어만 있는지 판별하기 (3) 숫자만 있는지 판별하기 (4) 이메일 형식인지 판별하기1) 필터링 함수특정 문자만 남기는 필터링 함수를 알아보자(1) 한글만 남기기filterKorea..

[Unit Test] 단위 테스트의 여러 검증법(React Testing Library, Vitest)

1. 단위 테스트의 여러 검증법이번 시간에는 React, Vitest, React Testing Library를 사용해, 단위 테스트의 여러 검증방법을 알아보았다. 포스팅의 목차는 아래와 같다.1) 모킹으로 외부 모듈 검증하기2) 커스텀 훅 검증하기(ex. custom Hook)3) 비동기 검증하기(ex. timer)만약 단위테스트의 정의, 작성법에 대한 사전 지식이 없다면, 이 포스팅을 먼저 보는 걸 추천한다.1) 모킹으로 외부 모듈 검증하기(1) 모킹이 필요한 경우는?프로젝트는 여러 외부 라이브러리를 사용한다.그렇다면 테스트하고 싶은 대상 컴포넌트에서 외부 라이브러리를 사용하고 있다면 어떻게 검증해야할까?외부 라이브러리에 대한 검증도 해야할까? 검증이 필요할 수도 있지만, 대체로 생략 가능하다!❓ 그..

[CSS] 확장자 제외하고, 파일명만 말줄임하는 방법(with. input file)

확장자 빼고, 파일명만 말줄임하는 방법1) 미리보기(1) 파일명 말줄임한 예시 See the Pen only-file-name-abbreviation by KumJungMin (@kumjungmin) on CodePen.(2) 커스텀 파일 입력창 + 파일명 말줄임 예시 See the Pen file-input-name-abbreviation by KumJungMin (@kumjungmin) on CodePen.2) 전체 코드보기만약 파일 입력창에 파일명을 표기할 때, 확장자를 제외하고 파일명만 말줄임 하고 싶다면?아래 3가지를 적용하면 된다 🙂(1) 부모요소에 파일명, 확장자 요소를 각각 선언한다. (ex. .name , .extension)(2) 부모의 display에 flex를 적용한..

[Unit Test] 단위 테스트 개념과 작성시 주의할 점

0. 들어가기 전에 현대의 개발 생태계는 빠르게 변화하는 기술 요구사항과 지속적인 서비스 업데이트를 경험하고 있다. 그래서 개발 팀은 코드의 품질을 지키면서 신속한 배포를 동시에 충족해야한다. 이러한 환경에서 프론트엔드도 테스트의 중요성이 커지고 있다. 단위 테스트는 코드의 각 부분이 예상대로 작동하는지 확인함으로써, 전체 시스템의 안정성과 신뢰성을 보장할 수 있다. 이번 포스팅에서는 단위 테스트는 무엇이며 테스트 작성시 주의할 점은 무엇인지 한 번 알아보았다. 1. 단위 테스트 개념과 작성시 주의할 점 1) 단위 테스트란? (Unit Test) 단위 테스트는 개발 과정에서 개별 모듈이나 함수가 예상대로 작동하는지 검증하는 절차이다. 테스트는 소스 코드의 가장 작은 실행 단위에 대해 수행되며, 각 단위가..

[React] 아이콘 컴포넌트를 선언하는 3가지 방법

1. 들어가며… 많은 서비스에서 아이콘을 사용하고 있다. 그래서 아이콘 관리는 선택이 아닌 필수가 되었다. 아이콘을 선언하는 방식은 여러가지가 있는데, png, jpg로 관리하거나 혹은 hover, active용 아이콘을 따로 관리하는 경우가 있다. 하지만 이 방식은 아이콘이 재사용되는 경우 확장성에 불리하다. 그렇다면 아이콘을 어떻게 선언해야, 확장성을 지키면서 여러가지 상황을 대응할 수 있을까? 이번 시간에는 여러 아이콘 라이브러리를 참고하여, 아이콘을 선언하는 3가지 방법에 대해 알아보았다. 단, 실제 코드를 그대로 보여주기 보다는 간략한 버전으로 보여줄 예정이며, 실제 라이브러리 코드는 링크로 제시할 예정이다. 2. 아이콘을 선언하는 3가지 방법 1) 각각의 컴포넌트를 선언하는 방법 (1) 라이브..

이전 1 2 3 4 5 6 7 ··· 24 다음

티스토리툴바