본문 바로가기

분류 전체보기

 (107)
#10. 객체 리터럴 1. 객체란?자바스크립트를 구성하는 거의 "모든 것" 이 객체다. 원시 값을 제외한 나머지 값 (함수, 배열, 정규 표현식 등)은 모두 객체다． 객체 타입은 다양한 타입의 값(원시 값 또는 다른 객체)을 하나의 단위로 구성한 복합적인 자료구조다. 원시 값은 변경 불가능한 값이지만 객체 타입의 값, 즉 객체는 변경 가능한 값이다. 객체는 0개 이상의 프로퍼티와 메서드로 구성된 집합이며, 프로퍼티는 키와 값으로 구성된다. 자바스크립트에서 사용할 수 있는 모든 값은 프로퍼티 값이 될 수 있다. 함수도 프로퍼티 값으로 사용할 수 있다. ( 일반 함수와 구분하기 위해 메서드라 부른다 ) · 프로퍼티： 객체의 상태를 나타내는 값 (data) · 메서드 : 프로퍼티(상태 데이터)를 참조하고 조작할 수 있는 동직(be..
#9. 타입 변환과 단축 평가 1. 타입 변환이란? 자바스크립트의 모든 값은 타입이 있고, 값의 타입은 개발자의 의도에 따라 다른 타입으로 변환할 수 있다. 명시적 타입 변화 / 타입 캐스팅 : 개발자가 의도적으로 값의 타입을 변환하는 것 var x = 10; var str = x.toString(); console.log(typeof str,str); // string 10 암묵적 타입 변환 / 타입 강제 변환 : 개발자의 의도와는 상관없이 표현식을 평가하는 도중에 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환 되는 것 var x = 10; var str = x + “"; console.log(typeof str, str); // string 10 암묵적 타입 변환은 기존 변수 값을 재할당하여 변경하는 것이 아님! 자바스크립..
#7. useFadeIn & useNetwork useFadeIn Element 하나를 자동으로 서서히 나타나도록 하는 기능 animation 기능을 hook에 넣어 사용한다. import React, { useEffect, useState, useRef } from "react"; const useFadeIn = (duration = 1, delay = 0) => { if (typeof duration !== "number" || typeof delay !== "number") { return; } const element = useRef(); useEffect(() => { if (element.current) { const { current } = element; current.style.transition = `opacity ${duration..
#8. 제어문 1. 블록문 블록문은 0개 이상의 문을 중괄호로 묶은 것으로, 코드 블록 또는 블록이라고 부른다. 자바스크립트는 블록문을 하나의 실행단위로 취급한다. 제어문이나 함수를 정의할 때 사용하기도 하고, 단독으로 사용하기도 한다. 블록문은 자체 종결성을 갖기 때문에 끝에 세미콜론을 붙이지 않는다. 2. 조건문 조건식의 평가 결과에 따라 블록문의 실행을 결정한다. 자바스크립트는 if...else 문과 switch문 두 가지 조건문을 제공한다. if else문은 논리적 참, 거짓으로 실행할 코드 블록을 결정한다. switch문은 논리적 참, 거짓보다는 다양한 상황에 따라 실행할 코드 블록을 결정할 때 사용한다. fall through : case문으로 실행 흐름이 이동하여 문을 실행했지만, 문을 실행한 후 swit..
#7. 연산자 피연산자는 연산의 대상이 되어야 하므로 값으로 평가할 수 있어야 하고 연산자는 값으로 평가된 피연산자를 연산해 새로운 값을 만든다. 1. 산술 연산자 피연산자를 대상으로 수학적 계산을 수행해 새로운 숫자 값을 만든다. 산술 연산이 불가능 한 경우, NaN을 반환한다. 이항 산술 연산자 2개의 피연산자를 산술 연산하여 숫자 값을 만든다. 이항 산술 연산자는 부수효과가 없다. 여기서 부수 효과란 피연산자의 값 자체를 변경하는 것을 의미한다. 단항 산술 연산자 1개의 피연산자를 산술 연산하여 숫자 값을 만든다. ++ / -- 단항 산술 연산자는 피연산자의 값을 변경하는 부수 효과가 있다. 숫자 타입이 아닌 피연산자에 + 단항 연산자를 사용하면 피연산자를 숫자 타입으로 변환한 값을 반환한다. 값을 생성해서 반환..
#6. useBeforeLeave hook useBeforeLeave 기본적으로 탭을 닫을 때 실행되는 function ex) 마우스가 페이지를 벗어날 때 function을 실행한다. import React, { useEffect, useState, useRef } from "react"; const useBeforeLeave = (onBefore) => { if (typeof onBefore !== "function") { return; } const handle = (event) => { const { clientY } = event; if (clientY { document.addEventListener("mouseleave", handle); return () => document.removeEventListener("mouseleave"..
#5. useConfirm & usePreventLeave hook useConfirm 사용자가 무언가를 하기 전에 확인시켜 주는 기능 ex) 사용자가 버튼 클릭 작업을 하면 이벤트를 실행하기 전에 확인하는 메시지를 보여주는 기능 const useConfirm = (message, callback) => {} import React, { useEffect, useState, useRef } from "react"; const useConfirm = (message = '', onConfirm, onCancel) => { if (!onConfirm || typeof onConfirm !== 'function') { return; } if (onCancel && typeof onCancel !== 'function') { return; } const confirmAction..
#4. useClick hook useClick useRef를 통해 특정 element를 클릭하면 특정 동작을 수행하도록 하는 기능 import React, { useEffect, useState, useRef } from "react"; const useClick = (onClick) => { if (typeof onClick !== "function") { return; } const element = useRef(); useEffect(() => { if (element.current) { element.current.addEventListener("click", onClick); } return () => { if (element.current) { element.current.removeEventListener("click",..

티스토리툴바