Mong dev blog

전체 글212

테스트 코드를 관리하는 법 1, Pre-Push 단계에서 테스트 자동화하기

1. 들어가며올해 테스트 코드를 도입하면서 유틸뿐만 아니라 화면 단위의 파일까지도 테스트를 작성하기 시작했다. 처음에는 테스트 작성에 많은 시간이 소요되었지만, 기준이 잡히고 나니 점차 작성 속도가 빨라지는 것을 느꼈다.그러나 테스트 코드를 작성한 지 1~2달이 지났을 때, 전반적인 테스트 코드를 구동시킨 결과 몇 가지 문제점이 드러났다:리팩토링 및 버그 수정으로 인해 이미 삭제된 함수나 변수를 검증하려다 발생하는 오류.새로운 기능이 추가되었지만 테스트 코드 상 오류가 없어 검증되지 못한 케이스의 증가. 물론, 테스트 코드를 잘 작성하고 목표한 테스트 커버리지에 도달하는 건 중요하다. 하지만, 장기적인 관점에서 “테스트 코드의 관리”도 중요하다는 걸 깨달았다.그렇다고 매번 테스트 코드를 수동으로 확인한다..

[JS] 내장 프로토타입에 커스텀 함수를 등록하면 안되는 이유

1. 들어가며…여러 프로젝트 레포지토리를 살펴보다 보면, 드물게 보이는 코드 중 하나는 프로토타입을 이용해 전역 커스텀 함수를 선언하는 경우이다.예를 들어, 다음과 같이 Array.prototype에 사용자 정의 메서드를 추가하는 코드를 볼 수 있다:Array.prototype.myMethod = function() { console.log('This is my custom method');};이러한 방식으로 프로토타입에 커스텀 함수를 등록하는 데에는 몇 가지 장점이 있다.첫째, 편리성인데 프로토타입에 메서드를 추가하면 모든 배열 인스턴스에서 해당 메서드를 사용할 수 있어, 개별적으로 함수를 정의할 필요가 없다.둘째, 코드의 재사용성이 향상된다. 동일한 기능을 여러 곳에서 반복하지 않고, 프로토타입을 ..

[React] 반응형 데이터 연속 연산시 주의할 점(feat. Vue, React의 차이)

1. 들어가며…얼마 전 PrimeReact의 TreeTable 컴포넌트에서 발생한 버그를 수정할 일이 있었다.(버그 설명: filter 함수를 연속 호출시 마지막 filter만 적용됨) 해당 라이브러리의 은 데이터를 필터링할 수 있도록 filter() 메서드를 제공한다.이를 이용하면, ref를 사용해 테이블 데이터를 필터링할 수 있다.예를 들어 아래와 같은 코드가 있다고 가정해보자:// template 영역Apply Filters // script 영역const treeTableEl = useRef();// treeTableEl.current.filter()를 사용해 필터링 가능const applyDoubleFilter = () => { treeTableEl.current.filter(..

[컨퍼런스 후기] 오쏘콘(Open Source Conference)

오쏘콘에 다녀왔습니다 🙂지난 주 토요일(11/16)에 인천에서 열린 오픈소스 컨퍼런스 '오쏘콘'에 다녀왔습니다.다양한 🎤 연사분들의 이야기를 들으며 오픈소스에 대해 많이 배우고 💡 영감을 얻는 시간이었어요. 이번 후기는 컨퍼런스에서 배운 점을 담아봤습니다.이번 컨퍼런스에는 총 6분의 연사분이 계셨는데요, 오후에 일정이 있어 마지막 두 세션은 듣지 못해 😢 아쉬웠지만나머지 세션에서 배운 점이 많아 좋았습니다. 각 연사분들의 주제는 매우 다양해 여러 관점에서 오픈소스를 바라볼 수 있었습니다.토스의 오픈소스 이야기 (박서진님)식탁보 프로젝트의 어제, 오늘, 그리고 내일 (남정현님)오픈소스 웹브라우저 개발자는 이렇게 일한다 (임의상님)오픈소스 매커니즘: 오픈소스 생태계 전반에 대해 (엄재웅님)오픈소스와 ..

웹사이트를 최적화시키는 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..

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

티스토리툴바