Front-end 개발

🚦 JavaScript 비동기 함수 순서 문제 디버깅 가이드1️⃣ 비동기 함수가 순서대로 실행되지 않는 이유setTimeout, fetch, axios, DB 요청 등은 **비동기(non-blocking)**로 실행JS의 Event Loop 구조 때문에, 먼저 실행한 함수가 나중에 끝날 수 있음즉, 코드 순서 ≠ 실행 완료 순서2️⃣ 흔한 실수 & 디버깅 포인트(1) await를 안 붙였을 때async function loadData() { const data1 = fetch('/api/one'); // ❌ await 없음 const data2 = await fetch('/api/two'); console.log('data1:', data1); // Promise 객체만 출력됨 console...

📌 제목JavaScript Intersection Observer로 무한 스크롤 구현 — 성능 최적화까지📝 본문웹사이트에서 **무한 스크롤(Infinite Scroll)**은 사용자가 페이지 끝까지 스크롤하면 자동으로 다음 데이터를 불러오는 UX 패턴입니다.예전에는 scroll 이벤트로 구현했지만, 스크롤 이벤트는 성능 문제와 복잡한 계산을 유발할 수 있습니다.이를 해결하는 현대적인 방법이 Intersection Observer API입니다.이번 글에서는 기본 개념, 무한 스크롤 구현 예제, 성능 최적화 기법까지 자세히 안내합니다.1️⃣ Intersection Observer 개념특정 요소가 뷰포트에 진입/이탈하는 시점을 감지하는 API주요 장점:스크롤 이벤트를 직접 사용하지 않아 성능 최적화코드 간..

📝 개요프론트엔드 개발에서 애니메이션은 사용자 경험(UX)을 크게 향상시키는 요소입니다.단순한 페이드 효과부터 복잡한 스크롤 연동 애니메이션까지, 다양한 라이브러리가 존재합니다.이번 글에서는 대표적인 세 가지 애니메이션 라이브러리를 비교해 보겠습니다.GSAPFramer MotionAnimate.css1. 🎯 GSAP (GreenSock Animation Platform)특징고성능 JavaScript 애니메이션 엔진CSS, SVG, Canvas, WebGL 등 거의 모든 DOM 요소 애니메이션 가능Timeline 기능으로 복잡한 애니메이션 순서 제어 가능스크롤 기반 애니메이션(ScrollTrigger 플러그인) 지원예제 gsap.to(".box", { x: 200, rotation: 360, dur..

📝 개요PWA(Progressive Web App)는 웹 앱이지만 네이티브 앱처럼 설치 가능하고,오프라인 상태에서도 작동하며, 푸시 알림 같은 기능까지 지원합니다.이번 글에서는PWA 개념서비스 워커(Service Worker) 등록웹 앱 매니페스트(Web App Manifest) 설정빌드 및 배포 과정까지 실무 중심으로 정리하겠습니다.1. 🧠 PWA란?PWA는 웹 기술(HTML, CSS, JavaScript)로 제작되지만 다음 특징을 가집니다.오프라인 지원 (네트워크 연결이 없어도 동작)앱 설치 가능 (모바일/데스크톱 바탕화면에 추가)푸시 알림 지원빠른 로딩과 최적화된 성능대표적인 예: Twitter Lite, Starbucks, Pinterest2. 🛠️ 필수 구성 요소1) HTTPS 환경PWA는..

📄 본문JavaScript로 규모가 있는 프론트엔드 프로젝트를 진행해 본 개발자라면,런타임 오류나 타입 추론의 한계를 경험해보셨을 겁니다.이런 문제를 해결하기 위해 많은 프론트엔드 개발자들이 선택한 도구가 바로 TypeScript입니다.이번 글에서는 TypeScript 기본 개념, 주요 문법, 그리고 React/Vue 프로젝트에서 연동하는 방법까지 실용적으로 정리해보겠습니다.🧠 TypeScript란?TypeScript는 JavaScript에 타입 시스템을 추가한 언어입니다.Microsoft에서 만들었고, .ts 확장자를 사용합니다.정적 타입(컴파일 타임 타입 체크)인터페이스, 제네릭, 열거형 등 풍부한 문법최신 ECMAScript 기능 지원JavaScript로 트랜스파일되어 실행✏️ 1. TypeSc..

📝 본문JavaScript는 싱글 스레드 언어입니다.하지만 네트워크 요청, 타이머, 파일 처리 등 시간이 걸리는 작업들을 비동기 처리로 다룰 수 있습니다.비동기 처리를 다루는 대표적인 방식에는콜백(Callback) → Promise → async/await까지 진화해왔습니다.이번 글에서는 이 세 가지 방식의 차이점과 사용법을 비교, 예제와 함께 쉽게 설명드릴게요.📌 1. 비동기(Asynchronous)란?동기(Synchronous) 처리: 순서대로 실행 → 하나 끝나야 다음 작업비동기(Asynchronous) 처리: 시간이 오래 걸리는 작업은 뒤로 미루고 다른 작업 먼저 실행console.log('1'); setTimeout(() => { console.log('2'); }, 1000); consol..

안녕하세요, 오늘은 JavaScript에서 배열을 다룰 때 자주 사용하는 메서드인 map()과 forEach()의 차이점에 대해 정리해보겠습니다.두 함수 모두 배열의 각 요소를 반복하면서 작업을 수행할 수 있게 해주지만, 사용 목적과 결과는 분명히 다릅니다.이 글을 통해 map()과 forEach()의 차이를 명확히 이해하고, 상황에 맞는 적절한 선택을 할 수 있게 도와드릴게요!1. 기본 개념◇ forEach()배열의 각 요소에 대해 반복 작업 수행반환값이 없음(undefined)단순히 사이드 이펙트(side effect, 출력, 저장 등)를 줄 때 사용const numbers = [1, 2, 3];numbers.forEach(num => console.log(num * 2)); // 2, 4, 6 출력..

1. swiper 사용 시 필요한 파일 import 2. swpier tag 삽입하기 3. CSS 삽입 아래 코드를 꼭 넣어야 합니다. 그래야 작동중 끊김 현상 (슬라이드가 끊다고 다시 시작할때) 을 방지 할수 있습니다. .swiper-wrapper{-webkit-transition-timing-function:linear!important; transition-timing-function:linear!important; } 4. swpier 컨트롤 하기 $(function(){ var swiper = new Swiper('.swiper-container', { spaceBetween: 0, freeMode: false, enteredSlides: true, speed: 5000, autoplay: { ..

[^0-9]/g : 숫자가 아닌 모든 문자를 나타내는 정규 표현식입니다. ^ : 문자열의 시작을 의미합니다. [^0-9] : 0에서 9 사이의 숫자가 아닌 모든 문자를 의미합니다. / : 정규 표현식의 끝을 의미합니다. g : 모든 일치 항목을 바꾸는 것을 의미합니다 /* 처음 ex 010 */ /* 중간 ex 1234 */ /* 마지막 ex 5678 */ var replacePN = /[^0-9]/g; $(".inputPN").on("focusout", function() { let i = $(this).val(); if (i.length > 0) { if (i.match(replacePN)) { i = x.replace(replacePN, ""); } $(this).val(i); } }).on("ke..

1. NVM(Node Version Manager) 이란? 각 상황에 맞게 node버전 변경하고 사용할 수 있게 해주는 Node.js의 버전 관리자입니다. 2. 사용방법 https://github.com/nvm-sh/nvm GitHub - nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions - GitHub - nvm-sh/nvm: Node Version Manager - POSIX-compliant ba..