구조 분해 할당(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
엑셀 다운로드 기능 구현하기

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

화면에 나와있는 테이블을 엑셀로 다운로드 받아서 사용하고 싶은 경험이 있으셨을텐데요.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
웹팩(Webpack)이란?

웹팩(Webpack)이란?

vue를 공부하던 도중, 컴포넌트 기반 개발을 하고 있었습니다.컴포넌트가 늘어날수록 script도 같이 늘어나면서 코드가 너무 길어지는 문제가 발생했습니다.이를 해결하기 위해, 어떤 방법이 있을지 찾아보던 도중, 웹팩(Webpack)에 대해 알게 되었어요! 1. 웹팩(Webpack)웹팩(Webpack)은 JavaScript 애플리케이션을 위한 모듈 번들러(Module Bundler)입니다.많은 수의 JavaScript 파일을 관리하고, 최종적으로 배포 가능한 형태로 묶어주는 도구입니다.이를 사용하면, 여러 모듈과 자원을 하나 or 여러 파일로 번들링 할 수 있어요.※ 번들링(Bundling) : 여러 개의 파일 or 모듈을 하나의 파일로 묶는 과정 2. 설치그럼 일단, 설치를 해봅시다!설치를 하기 전에,..

  • format_list_bulleted Front-End Study/JavaScript
  • · 2024. 6. 29.
  • textsms
데이터 포맷

데이터 포맷

데이터 포맷 1. 데이터 포맷 이번엔 데이터 포맷에 대해 알아보겠습니다. 데이터 모팻이란? 데이터를 어떻게 표현하고 구조화하는지에 대한 것입니다. 다양한 종류의 데이터를 처리하고 다룰 때, 사용됩니다. 2. 데이터 포맷 종류 JavaScript에서 자주 사용되는 몇가지 데이터 포맷에 대해 알아봅시다. 1) JSON JSON(JavaScript Object Notation)은 JavaScript에서 데이터를 표현하기 위한 경량의 데이터 형식입니다. 키-값 쌍의 집합으로 구성되어 있으며, 배열과 객체의 형태를 가집니다. JSON의 기본적인 형태는 다음과 같습니다. { "students": [ { "name": "Kim", "age": 20, "sex": "female", "grade": 3 } ] }​ JS..

  • format_list_bulleted Front-End Study/JavaScript
  • · 2024. 3. 25.
  • textsms