Development/Javascript (23) 썸네일형 리스트형 [JS] 오늘 날짜를 'YYYY-MM-DD' 형식으로 출력하는 자바스크립트 한 줄 코드 프론트엔드 개발을 하다 보면, 오늘 날짜를 '2025-07-30'처럼 포맷팅해서 써야 할 때가 자주 있습니다!특히 날짜 데이터를 서버에 보낼 때 유용합니다자바스크립트에서는 아래 한 줄로 간단하게 해결할 수 있습니다.new Date().toISOString().split('T')[0]🔍 코드 설명new Date()현재 날짜와 시간(Date 객체)을 생성합니다.toISOString()날짜를 "YYYY-MM-DDTHH:mm:ss.sssZ" 형식의 문자열로 바꿔줍니다.split('T')"T"를 기준으로 날짜와 시간을 나눕니다 → ["2025-07-30", "12:34:56.789Z"][0]배열에서 날짜만 꺼냅니다 → "2025-07-30" 결과적으로, 이 코드는 오늘 날짜를 'YYYY-MM-DD' 형식의 문자.. [JS] undefined와 null의 차이점 JavaScript를 배우면서 가장 헷갈리는 개념 중 하나가 바로 undefined와 null입니다.둘 다 "없음"을 나타내지만, 사실 명확한 차이점이 있습니다.📝 undefined란?undefined는 변수가 선언되었지만 아직 값이 할당되지 않은 상태를 의미합니다.let name;console.log(name); // undefinedlet person = { age: 25};console.log(person.name); // undefined (존재하지 않는 속성)function greet() { // return 문이 없음}console.log(greet()); // undefined undefined가 발생하는 경우들변수 선언 후 값 할당 전객체의 존재하지 않는 속성에 접근함수에서 retur.. [JS] this 키워드 JavaScript의 this는 함수가 호출되는 방식에 따라 다른 값을 가지는 키워드입니다.함수의 블록스코프 내에서 선언되어야 정상적으로 동작하며, 호출 컨텍스트에 따라 참조하는 객체가 달라집니다.📝 일반 함수의 this = window일반 함수에서 this는 전역 객체(브라우저에서는 window)를 가리킵니다.이는 함수가 전역 스코프에서 호출되거나 객체의 메서드가 아닌 독립적인 함수로 호출될 때 발생합니다.function regularFunction() { console.log(this); // window 객체 console.log(this === window); // true}regularFunction();// 객체 메서드도 변수에 할당 후 호출하면 일반 함수가 됨const obj = { .. 모던 자바스크립트 입문 - Chapter 19: API 활용 💻 웹 개발을 하다 보면 사용자와의 상호작용을 더욱 풍부하게 만들어 주는 다양한 API들을 접하게 됩니다.파일을 드래그 앤 드롭으로 업로드하거나, 대용량 데이터를 처리하거나, 무거운 작업을 백그라운드에서 실행하는 것들이 모두 이런 API들 덕분에 가능합니다.이번 포스트에서는 모던 웹 개발에서 자주 사용되는 세 가지 핵심 API를 살펴보겠습니다.📌 목차드래그 앤 드롭 APIBlobWeb Workers📝 드래그 앤 드롭 API드래그 앤 드롭 API는 사용자가 마우스로 요소를 끌어서 다른 위치에 놓을 수 있게 해주는 기능입니다.파일 업로드나 요소 재정렬에 주로 사용됩니다.기본 구현// HTML: 여기에 파일을 드롭하세요const dropArea = document.getElementById('dropArea'.. 모던 자바스크립트 입문 - Chapter 18: 생성자와 클래스 구문 💻 자바스크립트에서 객체를 체계적으로 생성하고 관리하는 방법을 배워보겠습니다. 생성자 함수부터 ES6의 클래스 문법까지, 객체 지향 프로그래밍의 핵심 개념들을 초보자도 쉽게 이해할 수 있도록 설명하겠습니다. 📌 목차생성자 함수란?생성자 상속ES6 클래스 구문생성자 vs 클래스 비교📝 생성자 함수란?생성자 함수는 비슷한 구조를 가진 객체를 여러 개 만들 때 사용하는 함수입니다.마치 붕어빵 틀처럼 같은 모양의 객체를 찍어내는 역할을 합니다.기본 생성자 함수// 생성자 함수 (관례적으로 첫 글자를 대문자로)function Person(name, age) { this.name = name; this.age = age; this.greet = function() { return `안녕.. 모던 자바스크립트 입문 - Chapter 17: MVC 모델에 기반을 둔 프로그램 설계 💻 자바스크립트로 복잡한 애플리케이션을 개발하다 보면 코드가 점점 복잡해지고 관리하기 어려워집니다.모든 기능을 한 곳에 몰아넣으면 나중에 수정하거나 기능을 추가할 때 어디서부터 손을 대야 할지 막막해지죠.이번 포스트에서는 코드를 체계적으로 구조화할 수 있는 MVC 모델 프로그램 설계 방법을 알아보겠습니다. 📌 목차MVC가 뭔가요?📝 MVC가 뭔가요?MVC는 Model-View-Controller의 줄임말로, 프로그램을 세 가지 역할로 나누어 구조화하는 설계 패턴입니다.Model (모델): 데이터와 비즈니스 로직을 담당View (뷰): 사용자에게 보여지는 화면을 담당Controller (컨트롤러): 사용자 입력을 처리하고 Model과 View를 연결왜 MVC를 사용할까요?// MVC 없이 작성한 코드 (모.. 모던 자바스크립트 입문 - Chapter 16: HTTP 제어 (Ajax) 💻 자바스크립트로 웹 개발을 하다 보면 서버와 데이터를 주고받아야 하는 상황이 반드시 생깁니다.예전에는 페이지 전체를 새로고침해야 했지만, 이제는 Ajax를 통해 페이지를 새로고침하지 않고도 서버와 통신할 수 있습니다.이번 포스트에서는 모던 자바스크립트에서 HTTP 통신을 다루는 방법들을 차근차근 알아보겠습니다.📌 목차HTTP 통신이란?Ajax의 개념과 장점XMLHttpRequest 기본 사용법서버 응답 처리하기크로스 오리진 통신 이해하기📝 HTTP 통신이란?HTTP(HyperText Transfer Protocol)는 웹 브라우저와 서버가 데이터를 주고받기 위한 규약입니다.기본 동작 원리// 전통적인 방식 - 페이지 전체 새로고침window.location.href = '/new-page';// 현대적.. 모던 자바스크립트 입문 - Chapter 15: 이벤트 처리 💻 자바스크립트로 웹 개발을 하다 보면 사용자와의 상호작용이 필수적입니다. 버튼 클릭, 마우스 움직임, 키보드 입력 등 사용자의 모든 행동은 이벤트로 처리됩니다. 이번 포스트에서는 모던 자바스크립트에서 이벤트를 효과적으로 처리하는 방법들을 체계적으로 살펴보겠습니다.📌 목차이벤트란 무엇인가?이벤트 리스너 등록하기이벤트 객체 활용하기이벤트 버블링와 캡처링이벤트 위임(Event Delegation)다양한 이벤트 타입들실무에서 자주 사용하는 패턴들📝 이벤트란 무엇인가?이벤트는 웹 페이지에서 발생하는 사용자의 행동이나 브라우저의 상태 변화를 의미합니다.클릭, 키 입력, 페이지 로드 등이 모두 이벤트에 해당합니다.// 가장 기본적인 이벤트 처리document.getElementById('myButton').oncl.. 이전 1 2 3 다음