개발브롞으

이번 글은 new 키워드로 Date() 생성자 함수를 실행할 때 실행 과정에 대한 설명글이다. ★ 이해가 안가는 부분 : new 키워드란? 생성자 함수는 무엇이고 Date는 어떻게 사용되는지? [ Date ]생성자 함수이고, 시간과 날짜 정보를 담을 수 있는 객체를 만들 때 사용하는 틀=> JavaScript의 내장된 객체 [ new 키워드 ]생성자 함수를 실행 → 새로운 객체를 만들어주는 역할=> 틀(ex. Date)로부터 실제 제품 하나(ex. new Date())를 만드는 것이라고 생각하면 됨 예제 1)Date 생성자 함수로부터 새로운 날짜 객체를 하나 만들어줘=> 현재 날짜와 시간 정보가 들어간 Date 객체를 새로 만듬new Date() 결과값// 현재 날짜 기준으로 출력됨 - 2025년 ..

JSX 태그로 html을 작성 시 하나로 감싸진 태그로 작성해야함// 잘못된 예시안녕하세요// 올바른 예시 안녕 하세요 * 이때 div를 만들고 싶지 않다면 fragment를 사용할 수 있다=> 자동으로 Fragment 임포트가 됨Fragment 사용 시, root 아래에 바로 p태그들이 나오게 됨import { Fragment } from 'react'; 안녕 하세요 => Fragment는 주로 아래 코드처럼 축약형으로 사용함(이때 임포트도 생략 가능함) 안녕 하세요

[ fetch ]- fetch() : 프로미스 객체를 리턴해줌=> (비동기 작업 완료 시) Promise가 결과값을 알려줌 → 이걸 하기 위해 await 문법 필요 → await fetch()의 필요성const response = fetch('[API 주소]');console.log(response);=> 위의 코드 실행 시, 바로 현재 상태가 출력됨콘솔창 : Promise { } [ await ]- await 문법 : 비동기 작업이 완료되면 알려주는 promise의 결과값을 받아오는 방법=> await 사용 시, promise가 fulfilled 상태가 될 때까지 기다렸다가 결과값을 돌려줌 => fetch() 앞에 await을 붙여줌const response = await fetch('[API ..

이번 글은 즉시 실행 함수에 대한 글이다. [ 즉시 실행 함수 ]함수 선언과 동시에 즉시 실행되는 함수=> 일반 함수처럼 파라미터 작성하고 함수 호출 시 아규먼트 전달 가능(function (x, y) { //매개변수 console.log(x + y);})(3, 5); //인자 * 주의 사항 : 함수에 이름을 지어주더라도 외부 재사용 불가능(function sayHi() { console.log('Hi!');})();sayHi(); // ReferenceError [ 즉시 실행 함수의 활용 ]초기화 기능 : 선언과 동시에 실행되기 때문에 프로그램 초기화 기능에 활용일회성 동작 : 재사용이 필요 없는 일회성 동작을 구성할 때 활용=> 함수의 리턴값을 바로 변수에 할당하고 싶을 때 활용 => 초기화..

이번 글은 기명 함수 표현식에 대한 글이다. [ 기명 함수 표현식 ]기명 함수 표현식은 함수 표현식으로 함수를 정의하면서 그 함수에 이름을 지정한 것=> name 프로퍼티 : 이름을 가져올 수 있게 해줌=> 활용 : 재귀 호출 - 자기 자신을 호출* 재귀 함수 : 자기 자신을 부르는 함수 예제 1) 이름이 없는 함수를 변수에 할당 => name 속성 : 변수 이름을 문자열로 가짐const sayHi = function () { console.log('Hi');};console.log(sayHi.name); // sayHi 예제 2) 함수이름이 있을 경우 => name 속성 : 함수의 이름을 문자열로 가짐const sayHi = function printHiInConsole() { console.l..

이번 글은 스크롤 이벤트에 대한 글이다. [ Scroll 이벤트 ]스크롤 : 브라우저의 크기보다 웹 문서가 클 때 자동으로 나타남=> 브라우저를 대변하는 window객체에 이벤트를 등록하는 경우가 많음// 사용 예시window.addEventListener('scroll', 함수명);// => 스크롤 시 함수 실행 (스크롤 이벤트 사용 시 윈도우 객체의 내장 프로퍼티 자주 사용 => ex. window.scrollY)=> window.scrollY : 스크롤된 특정 위치(y값)을 기준으로 이벤트 핸들러가 동작하게 하거나 스크롤 방향이 위인지 아래인지를 기준으로 이벤트 핸들러 동작을 제어 가능 => 활용예제일정 높이가 스크롤 다운 되었다면 top 버튼이 생성되어 버튼 클릭 시 위로 한번에 올라갈 수 있는..

이번 글은 input의 이벤트와 관련된 글이다. [ input 태그 ]입력의 역할을 하기 때문에 입력이나 마우스 동작 같은 사용자에 반응하는 태그 [ focus 이벤트 ]focusin : 요소에 포커스가 되었을 때focusout : 요소에 포커스가 빠져나갈 때// 사용 예시요소명.addEventListener('focusin', 함수명); focus : 요소에 포커스가 되었을 때 (버블링 X)blur : 요소에 포커스가 빠져나갈 때 (버블링 X)=> 버블링의 차이 : focusin ↔ focus / focusout ↔ blur [ 입력 이벤트 ]input : 사용자가 입력을 할 때change : 요소의 값이 변했을 때=> input은 글자값이 입력될 때는 실행되지만 shift나 esc 같은 기능적인..

이번 글은 키보드 이벤트에 대한 글이다. [ 키보드 이벤트 ]- KeyboardEvent.typekeydown : 키보드 버튼을 누른 순간keypress : 키보드 버튼을 누른 순간 (문자버튼 같은거에 반응 / esc나 shift같은 코드는 반응 안함)keyup : 키보드 버튼을 눌렀다 뗀 순간=> keypress는 웹표준에서 권장하지 않는 방법 (키를 누르는 순간 동작할 이벤트가 필요 → ) [ 키보드 이벤트 프로퍼티 ]- KeyboardEvent.key : 이벤트가 발생한 버튼의 값 (사용자가 어떤 값을 가진 키를 눌렀는지)- KeyboardEvent.code : 이벤트가 발생한 버튼의 키보드에서 물리적인 위치 (사용자가 어떤 위치에 있는 키보드를 눌렀는지)ex. (대문자 A 누름) key : A..