scrollBehavior

홈페이지에서 페이지 이동 간에 스크롤을 특정 위치에 놓고 싶을 경우, 사용할 수 있는 방법이 있습니다.그것은 바로 scrollBehavior인데요. 이것이 무엇이고, 어떻게 사용하는 지 알아봅시다! 1. scrollBehaivorscrollBehaivor은 페이지 간 스크롤 위치를 제어하는 데 사용되는 옵션입니다. 이를 통해 사용자가 페이지를 이동할 때, 스크롤 동작을 커스터마이즈 할 수 있어요. 2. 기본 사용법사용 방법은 다음과 같아요. (저는 Vue를 사용했습니다.)import Vue from 'vue';import Router from 'vue-router';import Home from './components/Home.vue';import About from './components/About..

• format_list_bulleted Vue.js
• · 2024. 10. 22.
• textsms

구조 분해 할당(Destructuring assignment)

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

• format_list_bulleted JavaScript
• · 2024. 10. 18.
• textsms

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 Vue.js
• · 2024. 10. 16.
• textsms

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

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

• format_list_bulleted JavaScript
• · 2024. 10. 7.
• textsms

즉시 실행 함수(IIFE)

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

• format_list_bulleted JavaScript
• · 2024. 9. 19.
• textsms

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 JavaScript
• · 2024. 8. 14.
• textsms