ES2023있으니 어서 배웁시다. 원문: https://javascript.plainenglish.io/es2023-is-here-hurry-up-to-learn-2de85c61f0ae 서문 ES6는 2015년도에 제안되었으며, 이 논리에 따르면 ES2023은 ES14로 불려야 되지만 혼동을 피하기 위해 이름에 연도를 사용합니다. ES 표준에 집중했던 때를 돌이켜보면, 여전히 ES6에 머물러 있습니까? ES 표준이 되풀이 되는 것을 위해 최근에 어떤 새로운 특징이 추가되었는지 보겠습니다. ES2023 2023년도에 완료될 제안들 Array가 수정되면 수정본을 반환 Array, TypedArray에는 다음과 같이 Array 자체를 변경하는 다양한 방법들(sort/splice, etc)이 있습니다.: con..
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은 여러 요소(덩어리들)를 배열하는..
day.jsgithub정의: 주로 Moment.js와 호환되는 API를 사용하여 최신 브라우저의 날짜와 시간을 구문 분석, 유효성 검사, 조작 및 표시하는 최소한의 javaScript 라이브러리무게: 2kb특징:Immutable(불변): Day.js 개체를 변경하는 모든 API 작업은 새 인스턴스를 대신 반환합니다.=> 이것은 긴 디버깅과 버그를 방지합니다.I18n 지원: 국제화를 지원하지만 사용하지 않으면 어느 것도 빌드에 포함되지 않습니다.설치npm install dayjs --savedayjs() .startOf('month') .add(1, 'day') .set('year', 2018) .format('YYYY-MM-DD HH:mm:ss'); See the Pen Untitled by..
JavaScript 반복JavaScript에서 객체나 배열등을 반복할 때 for문을 사용하게 됩니다. 또한, JavaScript에서 for ... in, for ... of, .forEach 등을 만들어서 보다 편리하게 Object, Array등을 반복할 수 있게 됩니다.for ... in- 객체의 열거가능한 key(속성)들을 반복하는데 사용한다. (Nonenumerable(비열거형)인 value에는 접근할 수 없습니다.)- Object의 key or index를 반복 - 반복할 때마다 인스턴스 or 프로토타입 체인을 검색하므로 느린 속도를 가집니다.- index에 할당되는 값들은 String 타입으로 변환됩니다.let obj = { a: 1, b: 2};for (let key in obj) ..
객체 배열 JavaScript는 객체와 배열로 이루어져있는데 정확히 그들의 관계와 의미에 대해 이해가 부족하여 작성하게 되었습니다. 우선, 비교에 앞서 배열과 객체의 기본적인 내용부터 설명하도록 하겠습니다. 객체 다양한 키 컬렉션과 복잡한 엔터티를 저장하는 데 사용되는 것 (첨부: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object) 배열 리스트와 비슷한 객체로서 순회와 변형 작업을 수행하는 메서드를 갖는 것 (첨부: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array) 배열은 객체인가 ? 정답부터 말하..