Mong dev blog

개발 기술192

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

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

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

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

[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를 적용한..

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

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

[vscode] 컬러 변수 뷰어 만들기(2) - colorvariabletracker

1. colorvariabletracker 이번 포스팅은 “[vscode] 컬러 변수 뷰어 만들기” 시리즈의 마지막인 “extension 구현하기”이다. 구현한 extension은 colorvariabletracker 로, 현재 확장을 릴리즈한 상태이다. (링크) 컬러 변수 뷰어(colorvariabletracker)는 특정 파일에 선언된 컬러 변수를 추적하는 확장이다. 컬러 변수 뷰어에서 구현한 기능은 6가지이다. 이번 시간에는 이 6가지를 구현한 방법은 간단하게 설명하고자 한다 🙂 기능 방식 추적하고 싶은 파일을 설정할 수 있다. .vscode/settings.json에 파일 경로 지정 선언된 컬러변수를 vscode 사이드바에서 표 형식으로 볼 수 있어야 한다. webview로 구현 검색창에서 컬러 ..

[vscode] 컬러 변수 뷰어 만들기(1) - webview API 사용법

0. 들어가기 전에… 팀에 컬러 시스템이 정착되기 전, 프로젝트에서 전역 컬러 변수를 바꾸거나 추가 및 제거하는 과정이 있었다. 그 당시에는 scss 파일에서 탐색하고 수정하는 게 번거롭다고 느끼지 않았다. 그러다 어느 날 문득, “컴포넌트는 Storybook으로 관리하는데 컬러 변수는 어떻게 관리하지?”라는 생각이 들었다. 컬러 변수도 Storybook 형태로 한 눈에 파악하고 관리할 수는 없을까? 이렇게 이어지다 보니, vscode 사이드바(하단 핑크영역)에서 컬러 변수를 확인하고 검색할 수 있는 extension이 있으면 좋겠다는 생각이 들었다. 그래서 전역 컬러 변수를 보여주고, 복사는 물론 검색까지 되는 extension을 만들어보기로 했다. 이번 포스팅은 시리즈로 작성했는데, 첫 번째는 “[v..

Vue 3.4 변경점 파헤치기

1. Vue 3.4 변경점 파헤치기 23년 12월 29일에 Vue 3.4 버전이 출시되고, 여러 기능이 추가되었다. 이번 시간에는 어떤 기능이 출시되고, 어떤 점이 변경되었는지 ChangeLog.md를 토대로 살펴보았다 🙂 (1) v-bind의 키와 값이 같다면 짧게 JS에서는 키와 값 변수가 같은 경우, 축약할 수 있다. (property shorthand) const age = 12; const person = { name: 'luxxxx', age: age // 축약 전 } const person = { name: 'luxxxx', age // 축약 후 } v3.4에서는 property shorthand 형태로, 값 바인딩(v-bind)을 축약할 수 있다. (공식문서) ..

콘텐츠 접근이 가능한 아코디언을 만들어보자! (with. until-found, details)

1. 들어가며… 서비스 플랫폼의 경우 FAQ, Q&A에 주로 아코디언을 사용한다. 그리고 FAQ나 Q&A는 유저가 자주 묻는 질문이거나 유저에게 기본으로 전달하고 싶은 내용이다. 그런데 유저가 일일이 항목을 열어 내용을 보기도 하지만, 특정 키워드가 궁금해 검색하는 경우는 없을까? 혹시나 싶어 검색 기능을 사용해봤지만 대부분의 사이트에서 내부 콘텐츠 검색 기능을 제공하지 않고 있었다. ❓ 어떻게 해야 검색이 가능한 아코디언 UI를 만들 수 있을까? 방법은 총 2가지가 있는데, 이번 시간에는 2가지 방법으로 컨텐츠 검색이 가능한 아코디언을 만들어보았다! (만약 UI 라이브러리의 아코디언 구조가 궁금하다면 이 포스팅을 참고하자) 2. 콘텐츠 접근이 가능한 아코디언 만들기 1) details 태그로 구현하는 ..

feature flag로 지속적 배포하기(with. postHog, react)

0. 들어가며… 서비스의 생존을 위해선, 빠른 개발과 지속적인 배포가 필수적이다. 지속적인 배포를 통해 개발팀은 사용자로부터 실시간 피드백을 받을 수 있으며, 피드백을 기반으로 제품을 지속적으로 개선해 나갈 수 있다. 이렇게 빠른 피드백을 통한 제품 개선은 서비스의 품질 향상과 사용자 만족도 증가에 크게 기여한다. 그렇다면 어떻게해야 지속적인 배포를 할 수 있을까? 바로 feature flag 를 사용하는 것이다! 이번 시간에는 feature flag가 무엇인지, 그리고 PostHog로 react 앱에서 feature flag를 사용하는 법을 알아보았다. 1. feature flag가 뭔가요? 1) feature flag란 feature flag(feature toggle)은 개발자가 실시간으로 서비스의..

이전 1 2 3 4 5 6 ··· 22 다음

티스토리툴바