많은 데이터로 인한 문제 (무한 스크롤 성능 개선)
많은 데이터로 인한 문제 (무한 스크롤성능 개선) 영업사원을 위한 페이 관련 웹/앱을 개발하고 출시하고 난 뒤에 문제가 발생하였습니다. 매장의 정보가 10,000건 정도로 많은 경우 웹/앱에서 매장 정보를 그려주는 데 시간이 꽤 오래 걸려 불편함이 있다는 피드백을 받게 되어 수정해야 했습니다. 좀 더 자세히 설명을 해보겠습니다. 해당 페이지에서 전체 매장의 개수가 약 10000건 정도 있을 때 담당 매장에서 전체 매장 버튼을 눌러 전체 매장의 리스트를 웹/앱에서 그려줄 때 시간이 꽤 오래 걸렸습니다. 코드 (Svelte) 작성 코드는 보기 좋게 간략화를 많이 진행한 코드입니다. 기존 개발(w. 코드) 코드를 보면 전체 매장 버튼을 눌렀을 때 전체 데이터를 상태변화하는 변수에 할당하여 전체 매장을 한 번에..
Touch Slider (Image)Touch Slider Image 기능을 구현하면서 Image 특정 부분에 넣어 Image Touch Slider 구현하기 등 여러 문제를 겪어 다음에는 같은 실수를 반복하지 않고 다른 분들도 효율적인 구현을 할 수 있도록 작성한 글입니다. ( Svelte를 기반으로 제작된 글입니다. ) TechSvelteJavaScript / Html / CSS 과정Touch slider은 Image를 쭉 나열해 두고 overflow: hidden으로 이미지를 숨기고 mouse event와 transform: translateX()를 이용하여 image 위치 고정(image index * -보여지는 너비(width)) 및 dragging 하는 모습을 보여줍니다.1. Image 고정 ..
[Error] uncaught (in promise) typeerror: cannot read properties of undefined (reading 'style') Error Message Use Tech Svelte ag_grid (Data table library) Solve Svelte의 {#if} 문법을 사용하니 갑자기 다음과 같은 에러가 발생하였습니다. Error Message를 읽어보니 다음과 같이 해석을 할 수 있습니다. uncaught (in promise) typeerror: 정의되지 않은 속성을 읽을 수 없습니다.('style' 읽기) 우선 결론부터 이야기를 해보겠습니다. 생성되지 않은 ag-grid 테이블(DOM)에 접근해서 발생한 문제입니다. 보통 undefined 된 것들을 ..
어떻게 하면 메뉴를 쉽게 짤 수 있을까? (데이터 구조 관련) 이번에 Style Guide Menu를 수정하는 부분을 맡았습니다. 처음에는 CSS 만 수정하면 되는 줄 알았으나 값들의 데이터 구조를 잘 조합하여 데이터가 많아질 경우를 대처하고 한 눈에 보이고 간략한 코드를 짜는 것이 주된 목적입니다. 사용 기술 HTML, CSS, JavaScript, Svelte 변경 전 Data 형태 간단하게 말하면 [{}]와 같은 형태로 되어 있습니다. let url = [ { MENU_NAME: "1", MENU_URL: "/dev" }, { MENU_NAME: "2", MENU_URL: "/dev" }, ]; 그래서 Svelte에서 다음과 같이 뿌려주면 됩니다. {#each url as menu} //routin..
Svelte 란?
Svelte 란? 이번에 Hebees라는 회사에 합류를 하게 되어 Svelte를 사용하게 되었습니다. 바로 업무에 들어가기 전에 Svelte에 대해 정리를 하는 것이 좋다고 판단하였습니다. Svelte 정의 우선, Svelte는 사용자 인터페이스 구축에 대한 근본적이고 새로운 접근 방식이며 대부분의 작업을 앱을 빌드할 때 발생하는 컴파일 단계로 이동하여 사용한다고 되어있습니다. 또한, 공식 문서를 보면 Svelte를 대표적으로 3가지를 정의 하고 있습니다. Write less code 이미 알고 있는 언어(HTML, CSS, JavaScript)를 사용하여 상용구가 없는 구성 요소를 구축합니다. No virtual DOM 코드를 작고 프레임워크가 없는 vanilla JavaScript로 컴파일합니다. 앱..