핸드메이드 감성 플라워 소품샵, IT 개발자

JavaScript == 와 === 차이점 정리 (동등 연산자 vs 일치 연산자)JavaScript에서 값을 비교할 때 사용하는== 와 === 연산자는겉보기에는 비슷하지만 동작 방식과 의미는 완전히 다릅니다.이 차이를 정확히 이해하지 못하면의도하지 않은 비교 결과로 버그가 발생할 수 있습니다. == 연산자 (동등 연산자, Equal Operator)== 연산자는 값이 같은지만 비교합니다.비교 과정에서 타입이 다르면 자동으로 형 변환(type coercion)을 수행합니다.예제 0 == '0' // true0 == 0 // truefalse == 0 // true 위 예제에서 문자열 '0'은 숫자 0으로 변환된 뒤 비교됩니다.이처럼 == 연산자는 암묵적인 형 변..

Arrow Function은 ES6 문법으로 항상 익명 함수이다. 기본 구조 (문법) var func1 = function() { console.log('test1'); } => var func2 = () => console.log('test2'); 매개 변수 없는 경우, var func = () => console.log('test'); func(); // test 매개 변수 하나인 경우, var func1 = x => x; var func2 = (x) => x; func1('test'); // test func2('test'); // test 매개 변수 여러개인 경우, var func1 = (x, y) => x + y; var func2 = (x, y) => { return x + y; } func1..

CSS link와 import 차이 작성 위치- link와 import 모두 head 섹션에 있지만,link 태그는 상단에 작성되고,import는 head 섹션 내부의 style 태그 안에 작성된다. DOCTYPE html>html> head> title>Page Titletitle> link rel="stylesheet" type="text/css" href="main.css" /> head> body> body>html>DOCTYPE html>html> head> title>Page Titletitle> style> @import url("main.css"); /..

ECMASCRIPT 란 자바스크립트 언어의 표준 규격을 뜻한다. ES6는 자바스크립트 표준 규격 버전6 라는 의미를 가진다고 생각하면 된다. ES6 이전에는 변수를 선언할 수 있는 키워드가 var 였으나, let, const 가 추가되어 이를 사용하여 변수를 선언할 수 있다. 간단한 특징 var - 변수 재선언 가능하기 때문에, 필요할 때마다 변수를 편리하게 사용할 수 있다는 장점이 있지만, 코드량이 많은 경우, 같은 이름의 변수명을 남용하게 된다면, 파악하기도 힘들고, 문제가 생길 수 있다. let - 변수 재선언 불가능 - 변수 재할당 가능 let name = '변수 선언'; console.log(name); name = '변수 재할당'; console.log(name); let name = '변수 ..

JavaScript에서 현재 날짜·시간 구하기 (복사해서 바로 쓰는 예제)이 글은JavaScript에서 현재 날짜, 시간, 년/월/일을 바로 구해서 쓰기 위한 코드 모음이다.설명은 최소화하고운영 중 바로 복사해서 사용할 수 있는 예제만 정리한다.1. 현재 날짜 객체 생성const now = new Date();console.log(now); // Tue Sep 09 2026 14:32:10 GMT+0900 (Korean Standard Time)2. 년 / 월 / 일 구하기const year = now.getFullYear(); // 년const month = now.getMonth() + 1; // 월 (0~11 이므로 +1)const date = now.getDate(); ..

jQuery data()와 attr() 차이점 jQuery에서 값을 저장/조회할 때data()와 attr()을 많이 사용합니다.둘은 비슷해 보이지만저장되는 위치, 자료형, 동작 방식(캐싱)이 완전히 다릅니다.1) data()란?data()는 HTML 속성(attribute)을 직접 바꾸는 게 아니라,jQuery가 관리하는 내부 데이터 저장소(메모리)에 값을 저장합니다.✅ 값 저장 $('#btn').data('count', 10); $('#btn').data('info', { id: 1, name: 'kim' }); ✅ 값 조회 $('#btn').data('count'); // 10 $('#btn').data(); // 저장된 데이터 전체(Object 형태) ✅ 값 삭제 $('#btn').removeDat..

* $(document).ready 는 DOM (Document Object Model) 객체만로드(이미지 로드 전) 되자마자 처리합니다. 문법$(document).ready(function() { // DOM 이 모두 로드된 후 실행할 코드를 입력하세요.}); 위와 같이 사용하며, 아래와 같이 축약 문법으로도 사용이 가능합니다. $(function() { // DOM 이 모두 로드된 후 실행할 코드를 입력하세요.}); * $(window).load 는 해당 페이지의 모든 외부 리소스, 이미지 등이 로드 된 후에 처리합니다. 문법$(window).load(function() {// 모든 외부 리소스, 이미지 등이 로드된 후 실행할 코드를 입력하세요.});

1. 객체란 - 객체는 기능(Method) 또는 속성(Property)을 가지고 있다. 객체.메서드();객체.속성;객체.속성 = 값; 2. 객체의 종류 - 자바스크립트의 객체는 크게 내장 객체, 브라우저 객체 모델 (BOM), 문서 객체 모들 (DOM) 내장 객체- 자바스크립트 엔진에 내장- 필요한 경우 생성해서 사용할 수 있음- 문자(String), 날짜(Date), 배열(Array), 수학(Math) 객체 등 브라우저 객체 모델 (BOM)- 브라우저에 계층적으로 내장되어 있는 객체들을 브라우저 객체 모델이라 함.- window, screen, location, history, navigator 객체 등- 브라우저(window)는 document와 location 객체의 상위 객체임 문서 객체 모델 (..

자바에서의 this - 인스턴스 자신을 가르키는 참조 변수즉, this가 객체 자신에 대한 참조 값을 가지고 있다.주로 매개변수와 객체 자신이 가지고 있는 멤버 변수명이 같을 경우, 이를 구분하기 위해 사용한다. 자바의 경우 this에 바인딩되는 객체가 하나지만,자바스크립트에서의 this는 해당 함수 호출 방식에 따라 this에 바인딩 되는 객체가 달라지기 때문에 전혀 다른 의미를 갖는다. 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다. 1. 함수 호출 - 기본적으로 this는 전역 객체에 바인딩 된다.전역함수, 내부함수, 콜백함수 관계 없이 this는 전역 객체에 바인딩된다. 2. 메서드 호출 - 함수가 객체의 프로퍼티 값이면 메서드로서 호출된다.메서드..

React - 자바스크립트 라이브러리로 유저 인터페이스를 만드는 데 사용. 지속적으로 데이터가 변화하는 대규모 애플리케이션에 사용. 오직 V(View)만 담당 => 뷰에만 신경쓰는 라이브러리 이므로 기타 기능은 직접 구현해야 하지만 라우팅에는 리액트 라우터, Ajax 처리에는 axios / fetch, 상태 관리에는 redux / MobX를 사용. 초기 렌더링 - render() {} 함수 컴포넌트가 어떻게 생겼는지 정의하는 역할 html 형식의 문자열을 반환하지 않고, 뷰가 어떻게 생겼고 어떻게 작동하는지 정보를 지닌 객체를 반환 렌더링 작업이 끝나면 지니고 있는 정보들을 사용하여 HTML 마크업을 만들고, 우리가 정하는 실제 페이지의 DOM 요소 안에 주입. Virtual DOM - 실제 DOM에 접..