[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 된 것들을 ..
IntelliJ(WebStorm)를 어떻게 가볍게 사용할까? 이번에 처음 사용하게 된 IntelliJ(WebStorm)를 어떻게 하면 가볍게 사용 가능한지 알아보고 있었는데 IntelliJ(WebStorm)와 관련된 것들에 대해 깊게 찾아보고 있다. 그 중 IntelliJ(WebStorm)와 VSCode의 차이점은 무엇인가? 라는 의문을 가지게 되었다. 간단하게 내린 결론은 IntelliJ(WebStorm)는 Java JVM에서 통해 동작하고 VSCode는 V8기반의 Electron에서 동작하고 있다는 점 이다. 그래서 IntelliJ(WebStorm)을 어떻게 가볍게 사용하기 위한 옵션 끄기, 메모리 관리등에 대한 설명에 앞서 JVM, V8기반 Electron에 대해 간단하게 설명하고자 합니다. (JV..
어떻게 하면 메뉴를 쉽게 짤 수 있을까? (데이터 구조 관련) 이번에 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로 컴파일합니다. 앱..
Layout을 짜는 이유? 서비스 팀이 사용가능한 간단한 도수 변환 프로그램을 개발한 후 이에 관해서 발표를 진행 할때 Layout란? Layout을 왜 짜는 것인가? 라는 질문을 받게 되었습니다. 단순히 구조를 잘 파악하기 위해서 짜는 줄 알고 명확한 답을 내릴 수 없었습니다. 그래서 다시 찾아보게 되었습니다. Layout? 정의를 살펴보면 Layout is the process of calculating the position of objects in space subject to various constrains. 레이아웃은 다양한 제약 조건에 따라 공간에서 객체의 위치를 계산하는 프로세스입니다. 라고 Wiki에 정의되어 있습니다. 여러 의미를 본 결과 Layout은 여러 요소(덩어리들)를 배열하는..
Storybook 시작하기
Storybook 시작하기!!! React에서 UI를 관리하기 위해 StoryBook을 사용하게 되었습니다. 간단하게 예시를 통해서 제작을 해보도록 하겠습니다. :) 해당 사이트를 보고 잘 파악을 하면 됩니다. Web: https://storybook.js.org/ GitHub: https://github.com/storybookjs/storybook/ 🐣 기본 환경 Mac VSCode React(create-react-app) 🐣 1. Storybook 설치 create-react-app을 설치한 곳에서 > npx storybook init 🐣 2. Component 제작 사각형을 만드는 Component제작 const Squares = ({width = 100, height = 100, backgro..
Vue 프로젝트 구성(w. webpack) - 2
webpack(Vue~) 🐱 4. webpack Vue setting 🐯 1. vue파일을 가져오는 vue-loader vue파일을 가져와서 읽을 준비까지만 한다. > 설치 'npm info vue-loader`을 이용하여 버전 확인 후 설치한다. > npm i -D vue-loader@next > webpack.config.js 설정 test: 정규표현식 : 정규표현식과 같은 파일 찾아준다. (정규표현식.test(문자)이렇게 사용하면 문자 내부에 정규표현식과 일치하는 내용 확인하는 것) use: 'vue-loader': test를 잘 할 수 있게 vue-loader의 도움을 받는다. // const path = require('path'); const { VueLoaderPlugin } = requir..
Vue 프로젝트 구성(w. webpack) - 1
webpack 해당 부분을 읽어보면 좋아서 우선적으로 적어 놓았고 이것 또한 파일을 모아서 처리하는 방식입니다. 차근차근 진행을 해보겠습니다. 🐱 1. npm 기본 설정 > npm init -y > npm i vue@next npm init -y: 프로젝트를 시작하기 위한 기본 설정 => package.json 생성 npm i vue@버전: vue의 버전 설치(@next) => node_modules, package-lock.json 생성 🐱 2. 폴더 및 파일 관리 다음과 같이 기본적으로 폴더, 파일을 제작해서 관리를 해보겠습니다. 📦src ┣ 📜App.vue ┣ 📜index.html ┗ 📜main.js > main.js //별 사용 이유: vue의 모든 정보 가져오기 => CommonJS로 이루어졌기..