Frontend15 [Vue3] 객체 기본값 설정시 factory 함수 사용 (feat. undefined) Vue를 쓰다 보면, props나 data에서 기본값(default)을 설정해야 할 때가 자주 있다. 객체나 배열처럼 참조형 데이터의 기본값을 설정할 때는 반드시 factory 함수를 써야 한다. 왜 factory 함수를 꼭 써야 하는지, 어떤 문제가 발생할 수 있는지 다루어보려한다. 1. 기본값을 직접 할당하면 발생하는 문제props: { options: { type: Object, default: {} }} default: {}는 프로그램이 시작될 때 단 한 번만 평가되어, 하나의 {} 객체가 메모리에 만들어지게 된다.이후 컴포넌트를 여러 번 만들어도, Vue는 이 {} 객체를 계속 재사용하게 된다. 2. 실제로 생기는 문제 예를 들어, 를 두 번 썼다고 생각해 보자.두 개의 컴포넌트 .. 2025. 6. 10. Vue2 vs Nuxt2: element 변동시 Scroll 동작 비교 (feat. anchor) 이슈 및 원인컴포넌트 리스트가 있는 페이지에서 중간 요소를 삭제할 때, Vue2와 Nuxt2 프로젝트 간 스크롤 동작의 차이가 발생했다.Vue2에서는 삭제된 요소 아래의 컴포넌트가 위로 올라오며 시야가 바뀌는 현상이 발생Nuxt2에서는 현재 보고 있던 시야가 유지되고, 삭제된 위치에 위쪽 요소가 내려오거나 아래 요소가 자연스럽게 채워지는 형태로 동작해당 차이는 overflow-anchor의 작동 방식이 DOM 구조에 따라 다르게 체감되는 데에서 기인하는 것으로 판단한다.Vue2와 Nuxt2 모두 기본적으로 overflow-anchor: auto 상태이지만, 실제 스크롤 시 컴포넌트 삭제 등의 레이아웃 변화에 따라 체감되는 스크롤 보정 동작은 완전히 다르게 나타난다. 비교항목Vue2Nuxt2overflow.. 2025. 4. 11. 함수형 자바스크립트 기본기 본 문서는 유동균의 함수형 프로그래밍 강의를 수강하고 공부한 자료이다. 1. 평가 : 코드가 계산되어 값을 만드는 것 2. 일급- 값으로 다룰 수 있다.- 변수에 담을 수 있다.- 함수의 인자로 사용할 수 있다.- 함수의 결과로 사용될 수 있다. 3. 함수 역시 일급이다.- 함수를 값으로 다룰 수 있다. = 변수에 함수를 담을 수 있다.- 함수는 평가를 통해 값을 다른 함수에게 전달할 수 있다.- 함수의 결과값으로 함수를 가질 수 있다.- 함수형 프로그래밍에서 조합성과 추상화의 도구로 사용이 가능하다. 4. 고차함수 : 함수를 값으로 다루는 함수 1. 함수를 인자로 받아 실행하는 함수 - 함수를 인자로 받아서 내부에서 실행하여 특정인자 적용하는 프로그래밍 : applicative programmi.. 2025. 2. 14. [Vscode] html 파일의 script 실행하기 1. 브라우저에서 실행HTML 파일을 실행하는 가장 간단한 방법은 브라우저에서 여는 것이다.필자도 해당 방법을 사용중이다.방법:HTML 파일을 우클릭하고 **"Open with Live Server"**를 선택한다.Live Server는 VSCode 확장 프로그램으로, 실시간 미리보기를 제공한다.Live Server가 설치되지 않았다면, Extensions Marketplace에서 설치 가능하다.장점:빠르고 간단하며, 브라우저에서 실행되는 실제 결과를 확인할 수 있다.2. 내장된 Node.js를 사용VSCode에서 Node.js를 사용하여 JavaScript 코드를 실행할 수 있다.다만, Node.js는 브라우저 환경이 아니라서 DOM 관련 코드 (document, window 등)는 실행되지 않는다.방.. 2025. 2. 14. 이전 1 2 3 4 다음
