Mong dev blog

전체 글199

웹사이트를 최적화시키는 3가지 기법: 코드 압축, 경량화, 난독화

1. 들어가며…개발자로서 매일 사용하는 개발자 도구는 성능탭, 메모리탭 등 여러 유용한 도구를 제공해준다. 이 중 네트워크 탭은 단순히 보면 API 통신을 보는 용도로 보이지만...그 내부를 자세히 들여다보면 gzip 압축이 적용된 파일이나, 하나로 합쳐진 CSS 혹은 난독화된 JavaScript 파일을 확인할 수 있다.이러한 현상은 코드 압축, 코드 경량화, 코드 난독화와 같은 최적화 기법의 결과물이다.코드 압축은 서버에서 전송되는 파일의 크기를 줄여 로딩 속도를 향상시키고, 코드 경량화는 불필요한 공백과 주석을 제거하여 파일 크기를 최소화한다. 또한, 코드 난독화는 소스 코드를 복잡하게 만들어 보안을 강화한다. 이 세 가지 기법은 웹사이트의 성능과 보안을 동시에 개선하는 방법이다.그렇다면 이러한 기법..

[vue] v-show 선언 위치에 따라 렌더링 버그가 발생한다고?

1. 들어가며…PrimeVue(vue UI 라이브러리)에는 textarea의 높이를 자동으로 조정하는 autoResize옵션이 있다.이 옵션을 사용하면, 텍스트 길이에 따라 textarea의 높이를 조절 할 수 있다. 그런데 만약 v-show를 사용해 textarea를 렌더링할 경우, autoResize가 작동하지 않는 현상이 발생한다. 아래는 primevue 코드를 참고해, autoResize만을 구현한 코드이다. TextArea 코드 자세히 보기 우선 코드를 간단히 설명하자면, resize()는 textArea의 높이를 조정하는 함수이다.이 함수는 onMounted, onUpdated훅에서 실행된다.const resize = () => { if (!textarea.valu..

모바일에서 연속 입력시 값이 무시되는 이유(feat. click, touch, pointer event)

1. 들어가며현재 우리 서비스는 모바일 환경에서 가상 키패드를 제공하며, 가상 키패드는 click 이벤트로 입력을 처리하고 있다.그러나 특정 상황에서 키패드 입력이 누락되는 문제가 발생하고 있었다.이 문제는 사용자가 입력 버튼을 빠르게 번갈아가며 클릭할 때 발생했는데, 웹 환경에서는 문제가 없었지만, 모바일 환경에서만 이 문제가 나타났다.아래 gif는 문제를 재현한 모습이다. gif상 버튼이 가끔씩 눌리는 것처럼 보이지만, 실제로는 빠르게 번갈아가면서 누르고 있었다ㅎㅎ 도대체 왜 모바일 환경에서만 입력 누락 문제가 발생하는 걸까?이번 시간에는 모바일 환경에서 연속 입력이 무시되는 이유와 click 이벤트와의 연관성을 살펴보겠다.이 글은 아래 목차 순서대로 진행된다.1. 들어가며2. 모바일 환경에서 연속 ..

iOS 모바일의 보안과 이벤트 유실(feat. 사용자 활성화, 이벤트 루프)

0. 들어가며얼마 전, 모바일 환경에서 카메라를 구동시키는 코드를 수정하고 있었다. 그런데 Vue 파일에서는 파일 업로드와 카메라 구동 코드, 팝업창 등 여러 기능이 혼재되어 있어 하나의 컴포넌트가 여러 책임을 지고 있었다.이를 해결하기 위해 팝업창과 파일 업로드 창을 각각의 컴포넌트로 분리했는데…컴포넌트를 리팩토링한 후, 왜인지 iOS 모바일에서 카메라 구동 코드가 작동하지 않았다… ;; 문제는 생각보다 간단했는데…promise await 후에 카메라 구동 코드를 실행했기 때문이었다.아래 예시는 유사한 현상이 발생했던 코드이다.See the Pen ios await 후 이벤트 유실 by KumJungMin (@kumjungmin) on CodePen. 의도상, [즉시 실행 클릭]이나 [2초 wai..

[CSS/JS] ellipsis 말줄임에서 발생할 수 있는 2가지 인터렉션 문제

1. 들어가며…웹사이트를 탐색하다 보면, 일정 길이를 초과한 텍스트에 말줄임(…) 처리가 된 것을 볼 수 있다. 특히, 뉴스 피드나 검색 결과 페이지처럼 많은 정보가 한눈에 들어와야 하는 상황에서, 말줄임 기법은 중요한 역할을 한다. 이 방법은 글을 일정 부분에서 잘라내고 "…"을 추가하여 화면 공간을 보다 효율적으로 사용하게 해준다. 아래 이미지는 말줄임 기법이 적용된 예시로, 텍스트가 일정 길이를 넘을 경우 어떻게 처리되는지 보여준다.그렇다면, 이러한 말줄임은 어떻게 구현할 수 있을까?JavaScript를 사용해 글자를 특정 길이로 자른 후 '…'를 추가할 수 있으며,또는 CSS의 text-overflow 속성을 활용할 수도 있다. 아래는 CSS를 이용한 말줄임 처리 예시이다. See the Pen..

[JS] event.target vs event.currentTarget의 차이 (with. vue slot)

1. 들어가며…얼마 전, 특정 라이브러리의 버그를 수정하던 중 특이한 현상을 발견했다. 이 현상은 Vue의 slot을 핸들링하는 과정에서 발생했는데, 우선, 의도된 동작은 다음과 같다:부모 요소()에 클릭 이벤트가 등록된 상태일 때, 부모 영역 클릭 시, 부모 요소의 속성 값(data-selectable-row-id)을 emit으로 전송해야한다. 안녕! 난 요소가 없는 단순 글자야! +의도대로 동작한 경우 - 요소 클릭시 rowId를 출력함하지만, 부모 요소에 slot으로 자식 요소를 주입했을 때 의도와 다른 현상이 발생했다.바로 사용자가 slot으로 주입된 요소를 클릭할 시 부모의 속성 값(data-selectable-row-id)이 null로 반환되는 것이었다. 나..

[CSS] clip-path로 별점(Rating) UI 구현하는 법 (with. vue 컴포넌트 예시 포함)

1. 들어가며…이번 시간에는 별점을 매기는 Rating 기능을 구현하는 법을 알아보았다.Rating을 구현할 때 키 포인트는 (1) 빈 별 & 색이 차있는 별를 겹쳐야 하며, (2) clip-path로 색이 차 있는 별 일부를 보여줘야 한다.해당 포스팅을 다 읽고 나면, css의 clip-path 사용법과 Rating 기능 구현을 할 수 있게 된다.1) clip-path는 무엇일까?clip-path는 CSS 속성 중 하나로, 요소의 일부분을 잘라내거나 요소의 특정 영역만 표시할 때 쓴다..element { clip-path: ;}: 요소를 자르는 도형의 형태(ex. clircle, ploygon, inset 등): 도형의 위치와 크기를 결정하는 좌표 값 (1) 속성 살펴보기circle()은 원형으..

아이콘 컴포넌트 렌더링 방식, 정말 좋을까? (with. 빌드 시간, FID, TBT 등 비교)

1. 들어가며…프론트엔드에서 Vue나 React와 같은 Virtual DOM 프레임워크의 사용이 활발하다.그리고 이러한 프레임워크들은 페이지마다 반복 작성했던 코드를 재사용 컴포넌트로 분리할 수 있다.그래서, 아토믹 단위로 요소를 관리하기 쉬워졌다.재사용 가능한 요소인 헤더, 네비게이션, 아코디언, 그리고 비즈니스 로직에서 반복되는 UI 등을 컴포넌트로 분리할 수 있다.물론, SVG 아이콘도 별도의 컴포넌트로 관리할 수 있다. ❓ 그런데, 과연 SVG 아이콘 파일을 컴포넌트로 만들어야 할 필요가 있을까?소규모 프로젝트에서는 그 필요성을 느끼지 못할 수도 있다. 하지만 실제 서비스되는 대규모 프로젝트에서는 아이콘을 컴포넌트화할 필요가 있다.그 이유는 크게 두 가지인데…첫째, 색상만 다른 아이콘 파일이 여러..

[w3c] 웹 접근성을 위한 4가지 법칙 - Perceivable 법칙(콘텐츠 방식 ~ region 역할)

1. 웹 콘텐츠 접근성 지침?이번 시간에는 웹 콘텐츠 접근성 지침, 즉 WCAG(Web Content Accessibility Guidelines)에 대해 알아보고자 한다. WCAG는 모든 사용자, 특히 신체적 제약이 있는 사용자들이 웹 콘텐츠에 쉽게 접근할 수 있도록 설계된 권장 사항이다. 웹 콘텐츠 접근성은 단순히 법적 요구사항을 충족하는 것을 넘어, 모든 사람이 디지털 정보에 평등하게 접근할 수 있는 권리를 보장하는 매우 중요한 요소이다.예를 들어, 시각 장애를 가진 사용자가 웹사이트를 이용할 때 화면 읽기 프로그램(screen reader)을 사용해 콘텐츠를 음성으로 들을 수 있다. 하지만, 웹사이트가 WCAG 지침을 따르지 않는다면 이 프로그램이 제대로 작동하지 않는다. 또한 텍스트가 아닌 이미..

이전 1 2 3 4 ··· 23 다음

티스토리툴바