스터디 (37) 썸네일형 리스트형 #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",.. #6. 데이터 타입 1. 숫자 타입 C나 자바와 다르게 자바스크립트는 하나의 숫자 타입만 존재한다. 모든 수를 실수로 처리하며, 정수만 표현하기 위한 데이터 타입이 별도로 존재하지 않는다. 정수, 실수, 2진수, 8진수, 16진수 리터럴은 모두 메모리에 배정밀도 64비트 부동소수점 형식의 2진수로 저장된다. 이들 값을 참조하면 모두 10진수로 해석된다. 모든 수를 실수로 처리하므로 정수로 표시되는 수끼리 나누더라도 실수가 나올 수 있다. //숫자 타입은 모두 실수로 처리된다. console.log ( 1 === 1.0 ) //true console.log( 4 / 2 ); // 2 console.log( 3 / 2 ); // 1.5 숫자 타입이 표현할 수 있는 세 가지 특별한 값 Infinity 양의 무한대 -Infinit.. #5. 표현식과 문 1. 값 값 : 식이 평가되어 생성된 결과를 말한다. 평가 : 식을 해석해서 값을 생성하거나 참조하는 것을 의미 모든 값은 데이터 타입을 가지며 메모리에 2진수, 즉 비트의 나열로 저장된다. var sum = 10 + 20; sum 변수에 할당 되는 것은 10+20이 아니라 평가된 결과인 숫자 30이므로 10+20은 할당 이전에 평가되어 값을 생성해야 한다. 2. 리터럴 리터럴 : 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법을 말한다. 리터럴은 평가되어 값을 생성한다. 리터럴은 사람이 이해할 수 있는 문자 (아라비아 숫자, 알파벳, 한글 등) 또는 미리 약속된 기호 (' ', " ", [ ], { }, // 등)로 표기한 코드다. 자바스크립트 엔진은 런타임에 리터럴을 평가.. 이전 1 2 3 4 5 다음
