funfunweb

렌더링과 선언적 렌더링에 대해 알아보겠습니다.렌더링(Rendering)**렌더링(Rendering)**은 간단히 말해, 개발자가 작성한 코드(데이터, 컴포넌트, 템플릿 등)를 실제 사용자 화면에 표시되는 형태로 변환하는 과정을 말합니다. 🧩 쉽게 풀면?코드 → 화면(UI) 으로 바뀌는 과정이 바로 렌더링입니다.Vue, React, HTML 등 어떤 기술을 쓰든 결국 렌더링은 "사용자에게 보여지는 것"을 만드는 핵심 과정입니다.Vue에서의 렌더링 흐름 (간단 요약)데이터 작성const message = ref('안녕하세요!') 2. 템플릿에 선언{{ message }} 3. 렌더링 -> 사용자 화면에 표시됨 → 결과: 안녕하세요! Vue는 데이터가 변경되면, 자동으로 화면(UI)을 다시..

https://git-scm.com/downloads Git - DownloadsDownloads macOS Windows Linux/Unix Older releases are available and the Git source repository is on GitHub. Latest source Release 2.50.0 Release Notes (2025-06-16) Download Source Code GUI Clients Git comes with built-in GUI tools (git-gui, gitk), but thergit-scm.com Git 설치 중 "Choosing the default editor used by Git" 단계는, Git이 커밋 메시지를 입력할 때 사용할 기본 ..

🟡 Vite란?Vite는 _차세대 프론트엔드 개발 환경_을 제공하는 빌드 도구입니다. 빠른 개발 서버, 빠른 빌드 속도, 모듈 핫 리로딩(HMR)을 지원합니다. 🔄 Vite vs Vue CLI 비교항목 Vue CLI Vite 개발 서버 시작 속도느림매우 빠름 ⚡번들링 도구Webpack 기반ESBuild (개발) + Rollup (배포)설정 파일무겁고 복잡할 수 있음가볍고 단순함Hot Module Reload (HMR)있음, 다소 느릴 수 있음빠르고 자연스러움기본 사용되는 기술WebpackESBuild / Rollup..

1. 단축키 R 박스 크기 280*390 radius 20px 사각형 그리기2. 전체 박스 선택 후 auto layout (shift + a)3. 전체 박스 선택 된 상태에서 plug in - unsplash 검색 후 이미지 넣기4. 전체 선택된 상태에서 ctrl + c, ctrl + v5. 복사된 요소들 모두 선택 후 ctrl + alt + G6. 프레임 크기 1440px , Clip content 체크해보기7. Frame2 복사 후 8. Frame3 의 Frame1 선택 후 같은 이미지가 보일 수 있도록 정렬(clip content 체크 해제후 하면 다 보여요)(복제된 요소의 첫번째 카드를 시작지점으로 이동하여 첫번째 원래 카드와 동일한 위치에 있도록 배치) 9. 두개의 Frame (Frame2, ..

See the Pen 스크롤시 텍스트 움직이기 by 정은 (@luchiaChoi) on CodePen.위 코드 설명document.addEventListener('DOMContentLoaded', () => { // 1. 요소들을 선택하고 // 2. 스크롤 이벤트가 발생할 때마다 // 3. 각 섹션의 위치를 계산해서 // 4. 특정 위치에 도달하면 클래스(show)를 추가}); 문서 로딩 완료시 실행document.addEventListener('DOMContentLoaded', () => { 이벤트 이름: DOMContentLoaded의미: HTML 문서의 모든 요소가 로딩되었을 때 실행됩니다.왜 필요한가요?: querySelector를 사용할 때, DOM 요소가 존재해야 하므로 문서가 완..

🔑 BigInt - 아주 큰 정수를 다루기 위한 타입 📌 소개BigInt는 일반 숫자(Number)가 표현할 수 있는 범위를 넘는 아주 큰 정수를 다룰 수 있게 해줍니다.일반 Number는 약 ±253 (약 9천조) 까지만 정확히 표현할 수 있어요.BigInt는 이보다 훨씬 큰 숫자를 정확하게 저장하고 연산할 수 있습니다.✅ 사용 예시const regularNumber = 9007199254740991; // Number.MAX_SAFE_INTEGERconst bigNumber = 9007199254740991n + 1n;console.log(bigNumber); // 출력: 9007199254740992nconsole.log(typeof bigNumber); // 출력: "..

숫자 반환:function getNumber() { return 42;}console.log(typeof getNumber()); // 출력: "number"객체 반환:function getUser() { return { name: "Alice" };}console.log(typeof getUser()); // 출력: "object"boolean 반환:function isActive() { return true;}console.log(typeof isActive()); // 출력: "boolean"배열(array)반환:function getArray() { return [1, 2, 3];}console.log(getArray()); // 출력: [1, 2, 3]console.log..

자바스크립트에서 undefined는 값이 정의되지 않은 상태를 나타내는 기본 제공 데이터 타입입니다. 일반적으로 변수는 선언되었지만 초기화되지 않았을 때 undefined 값을 가집니다. ✅ 1. 변수 선언만 하고 값을 할당하지 않은 경우let a;console.log(a); // 출력: undefinedlet a;console.log(a); // 출력: undefinedconsole.log(typeof a); // 출력: "undefined"변수 a는 선언만 되었고, 값이 할당되지 않았기 때문에 undefined입니다. ✅ 2. 존재하지 않는 객체 속성에 접근할 때const person = { name: "John" };console.log(person.age); // 출..

1. undefined란?**"값이 할당되지 않은 상태"**를 나타냅니다.변수가 선언만 되고 초기화되지 않은 상태일 때 기본값으로 자동 할당됩니다.함수에서 명시적으로 값을 반환하지 않으면 undefined를 반환합니다.객체에 존재하지 않는 프로퍼티를 접근할 때도 undefined가 나옵니다.예시let a;console.log(a); // undefined (값이 할당되지 않음)function foo() {}console.log(foo()); // undefined (반환값 없음)const obj = {};console.log(obj.prop); // undefined (존재하지 않는 속성) 2. null이란?"값이 없음"을 명시적으로 나타내는 특수한 값입니다.개발자가 변..