구조 분해 할당(Destructuring assignment)

구조 분해 할당(Destructuring assignment)

오픈 소스 코드를 분석하던 도중, 신기한 코드를 발견했습니다.const { id, name, password, age, address } = state.info 보통 변수 = 값으로 변수를 선언하는 데, 이 코드는 변수명이 여러 개가 존재하고, 값은 하나로 되어 있더군요.이러한 문법을 구조 분해 할당이라고 합니다. 이 문법이 무엇인지 알아보아요! 1. 구조 분해 할당 (Destructuring assignment)구조 분해 할당이란? 배열 or 객체의 속성을 쉽게 수출하여 변수에 할당하는 JavaScript 문법입니다.이를 통해 코드를 간결하고 직관적으로 작성할 수 있어요. 2. 배열에서의 구조 분해 할당배열에서 구조 분해 할당을 사용하면 배열의 요소들을 각각 변수로 쉽게 할당할 수 있어요. exampl..

  • format_list_bulleted Front-End Study/JavaScript
  • · 2024. 10. 18.
  • textsms
Vue.js의 생명주기(Lifecycle)

Vue.js의 생명주기(Lifecycle)

Vue.js의 생명주기에 대해 자세히 알아봅시다!  1. Vue.js의 생명주기(Lifecycle)Vue.js의 생명주기는 컴포넌트가 생성되고 소멸될 때까지 발생하는 일련의 단계를 의미해요.Vue 컴포넌트는 각 단계마다 특정한 생명주기 훅(Lifecycle hook)을 호출할 수 있으며, 이를 통해 특정 단계에서 로직을 실행하거나 상태를 관리할 수 있어요.  2. Vue.js 생명주기 단계생명주기 단계는 다음 그림과 같이 순서대로 나뉘어 있습니다. 그러면 한 단계씩 알아봅시다. 2-1. beforeCreate (생성 전)beforeCreate는 Vue 인스턴스가 초기화되기 전 상태입니다.아직 데이터 or 메서드 등이 정의되지 않았기 때문에, 이 단계에서 Vue 인스턴스에 접근할 수 없어요.즉, 컴포넌트의..

  • format_list_bulleted Front-End Study/Vue.js
  • · 2024. 10. 16.
  • textsms
엑셀 다운로드 기능 구현하기

엑셀 다운로드 기능 구현하기

화면에 나와있는 테이블을 엑셀로 다운로드 받아서 사용하고 싶은 경험이 있으셨을텐데요.JavaScript로 엑셀 다운로드 기능을 구현해봅시다! 1. SheetJS 라이브러리 사용가장 먼저 코드를 작성하기 전에 SheetJS를 설치해 줍시다.(저는 npm을 사용해서 설치해 주었어요.)SheetJS : JavaScript에서 엑셀 파일을 생성하고 다운로드할 수 있는 라이브러리 npm install xlsx ※ 만약, 스크립트로 라이브러리를 추가하고 싶다면, 다음과 같이 입력해 줍니다. 2. 코드 작성하기그러면 이제 html에서 코드를 작성해 봅시다! body 부분에 다운로드 버튼을 만들어 주세요.엑셀 다운로드 그 다음, 엑셀 파일이 다운로드되고 데이터도 정상적으로 나타나는 것을 확인할 수 있어요. 전체 코드e..

  • format_list_bulleted Front-End Study/JavaScript
  • · 2024. 10. 7.
  • textsms
즉시 실행 함수(IIFE)

즉시 실행 함수(IIFE)

오픈소스를 분석하던 도중, 신기하게 생긴 코드를 발견했습니다!this.utils = await (() => import('@/utils')() 이런 코드는 처음 보기에 이 코드가 무엇인지 알아보았습니다. 1. 즉시 실행 함수(IIFE, Immediately Invoked Function Expression)즉시실행함수(IIFE)는 정의되자마자 바로 실행되는 함수입니다.코드의 범위를 제한하거나 변수를 보호하기 위해 사용됩니다.이는 내부 변수를 외부에서 접근할 수 없게 하여, 전역 변수를 오염시키지 않으며, 코드의 특정 부분을 독립적으로 실행할 수 있어 모듈화에 유리합니다. 2. 사용방법즉시실행함수의 기본 구조는 다음과 같습니다.(function() { // 실행문})();// or(() => { /..

  • format_list_bulleted Front-End Study/JavaScript
  • · 2024. 9. 19.
  • textsms
D3

D3

회사에서 개발하고 있는 토폴로지에 대해 탐구하던 도중, D3를 알게 되었습니다.매우 흥미로운 라이브러리이기에 이에 대해 알아보려고 합니다. 1. D3D3란 무엇일까요? (D3 공식 홈페이지 바로가기)D3.js는 데이터를 시각적으로 표현하기 위한 JavaScript 라이브러리입니다.D3는 Data-Driven Documents의 약자입니다. 이는 웹 브라우저에서 데이터를 기반으로 동적이고 인터랙티브한 시각화 및 애니메이션을 생성하는 데 사용됩니다.HTML, SVG, CSS와 같은 웹 표준 기술을 사용하여 데이터 시각화를 구축해요. 2. 특징D3의 특징은 다음과 같습니다.1) 데이터 바인딩D3는 데이터를 DOM(Document Object Model) 요소에 바인딩할 수 있어요.이로 인해 데이터에 기반한 그..

  • format_list_bulleted Front-End Study/JavaScript
  • · 2024. 8. 14.
  • textsms
AG Grid의 Grid Option

AG Grid의 Grid Option

AG Grid의 Grid Option은 AG Grid를 설정하고 동작을 제어하는 데, 사용됩니다.저는 ag-gird-vue라는 태그 안에 Grid Option을 사용했어요.Grid Option에는 무엇이 있고 어떤 역할을 하는지 알아봅시다! 1. Grid OptionGrid Option은 다음과 같습니다. (Grid Options 공식 홈페이지 바로가기)옵션설명groupRemoveSingleChildren그룹화된 데이터에서 자식이 하나만 있는 경우, 그룹을 축소화할 지 결정합니다.localeText 텍스트의 언어를 설정합니다. style 그리드의 스타일을 설정합니다. class 그리드의 클래스를 설정합니다. rowData 배열 형태의 데이터를 그리드에 로드합니다. getRowNodeId 주어진 ID를 가..

  • format_list_bulleted Front-End Study/Vue.js
  • · 2024. 8. 7.
  • textsms