VamosDev의 개발 브이로그

아래와 같은 두 함수 선언 방식의 차이 const 함수명 = () => {}function 함수명 () {}  1. 요약 1) 함수 선언문 : function 함수명() {} - function 키워드를 사용해 선언 - 호이스팅*이 적용됨 - this가 동적임 (일반 함수에서 this는 호출된 컨텍스트를 따름)  2) 함수 표현식 : const 함수명 = () = > {} - const 키워드를 사용해 변수처럼 선언 - 호이스팅이 적용되지 않음 - 화살표 함수로, 이 함수는 this를 부모 스코프에서 유지함  2. this 바인딩 차이 - ()=>{}와 같은 화살표 함수는 this가 변하지 않기 때문에 React 이벤트 핸들러로 사용함.// 1) 함수 선언문 : 일반 함수의 this는 호출된 객체(obj..

1. require()  - Node.js 환경에서 모듈을 가져오는 CommonJS 방식 - Node.js 환경에서는 require()를 사용하여 파일이나 패키지를 가져올 수 있음const fs = require("fs"); // Node.js의 파일 시스템 모듈 불러오기const express = require("express"); // npm 패키지 가져오기const app = express();// require("express")는 node_modules에서 express 패키지를 찾아서 가져옴  2. require vs import (ES Module) 1) CommonJS (require)Node.js에서 사용되는 모듈 시스템module.exports와 함께 사용비동기 import()와 다르게..

Audio 객체 생성 후 사용 시 장점!  1. javascript로 세밀하게 조작이 가능함.const introSound = new Audio("intro.mp3");introSound.play(); // 재생introSound.pause(); // 일시 정지introSound.currentTime = 10; // 특정 시간으로 이동introSound.volume = 0.5; // 볼륨 조절  2. DOM을 직접 조작할 필요 없음 - 태그를 사용하면 HTML에서 오디오 요소를 찾고(document.querySelector) 조작해야 함.  => 코드가 더 깔끔해// audio 태그 사용// Audio 객체 생성하여 접근const introSound = new Audio("intro.mp3");intr..

const countDownRef = React.useRef>();ReturnType는 제네릭 유틸리티 타입으로, 함수 T의 반환타입을 추출하는 역할// 1.unction myFunction() { return 42;}type MyReturnType = ReturnType; // number를 가져옴// 2.const value = "Hello";type ValueType = typeof value; // string을 가져옴  * typeof - JavaScript에서 변수나 값의 타입을 가져오는 연산자인데, TypeScript에서는 타입 추론용 키워드로 사용됨. typeof를 ReturnType과 함께 사용하면, 특정 함수의 반환 타입을 안전하게 가져올 수 있음.(typescript에서는 그냥 세트..

1. Zustand 란? - 상태 관리 라이브러리, Redux보다 간단함.  2. 주요 메서드 1) create : Zustant의 기본 스토어 생성  - create(set => {...})를 사용하면 상태(store)*를 만들 수 있음. - set을 이용해 상태 업데이트 가능! - Redux의 createStore(reducer) 또는 configureStore({ reducer })와 같음import { create } from "zustand";const useStore = create((set) => ({ count: 0, increase: () => set((state) => ({ count: state.count + 1 })),}));function Counter() { const { ..

폼 양식(입력 양식)을 만들고 내용을 쿼리로 전송하는 태그 - 사용자의 입력을 받음- type 속성 : 입력 방식 종류 선택, checkbox, date, password(입력 값 비노출) 등 값 선택 가능- name 속성 : input 식별자 - input의 라벨 역할- 이런식으로 감싸면 라벨만 클릭해도 input이 선택됨.- 아니면 병렬로 표기하고 input id=email / label for=email 식으로 연결해 줄 수 있음. - type 속성: 기본값 'submit' 쿼리*로 데이터를 보냄- type을 'reset'으로 하면 초기화, 'button'으로 하면 아무 동작을 하지 않음.- form 태그 밖에 작성할 경우 아무 동작을 하지 않음!   [심화]   * form 태그의 action ..