빼곡히 채울 프론트엔드 일기장

Reducer리액트를 사용하다 보면 컴포넌트의 상태 관리를 해야 할 때가 많습니다. 보통은 useState를 사용하지만, 상태가 복잡하거나 여러 가지 상태를 관리해야 할 경우 useReducer를 사용하는 것이 더 좋을 때가 있습니다. useReducer란 무엇인가?useReducer는 리액트의 내장 훅 중 하나로, useState의 대안으로 사용됩니다. 상태와 상태를 변경하는 로직을 한 곳에서 관리할 수 있게 도와줍니다. 주로 상태 변경 로직이 복잡할 때 사용하면 유용합니다. useReducer의 기본 구조useReducer는 세 가지 요소를 필요로 합니다 리듀서 함수, 초기 상태, 디스패치 함수입니다. 아래는 useReducer의 기본 구조입니다.const [state, dispatch] = useR..

논리 연산자자바스크립트엔 세 종류의 논리 연산자 ||(OR), &&(AND), !(NOT)이 있습니다.연산자에 '논리’라는 수식어가 붙긴 하지만 논리 연산자는 피연산자로 불린형뿐만 아니라 모든 타입의 값을 받을 수 있습니다. 연산 결과 역시 모든 타입이 될 수 있습니다.  ||(OR)  전통적인 프로그래밍에서 OR 연산자는 불린값을 조작하는 데 쓰입니다. 인수 중 하나라도 true이면 true를 반환하고, 그렇지 않으면 false를 반환하죠. const num1 = 10;const num2 = 20;let result = num1 >= 10 || num2 > 30;console.log(result); //true첫 번째 truthy를 찾는 OR 연산자 ||OR 연산자와 피연산자가 여러 개인 경우resul..

삼항 연산자 조건 (삼항) 연산자는 JavaScript에서 세 개의 피연산자를 받는 유일한 연산자입니다. 앞에서부터 조건문, 물음표(?), 조건문이 참(truthy)일 경우 실행할 표현식, 콜론(:), 조건문이 거짓(falsy)일 경우 실행할 표현식이 배치됩니다. 해당 연산자는 if...else문의 대체재로 빈번히 사용됩니다.const myMoney = 3000;const price = 5000;0, undefind, null 은 false 입니다.// const result = myMoney > price ? " 물건을 구매하시겠습니까?." : "돈이 부족합니다.";const result = myMoney ? "돈이 부족합니다." : "물건을 구매하시겠습니까?";console.log(result);re..

연산자는 수학과 같습니다. 산술연산자 곱셉 : * 덧셈 : + 뺄셈 : - 나눗셈 : / 나머지 : % 연산자와 피연산자const num1 = 10;const num2 = 10;const result = num1 + num2;console.log(result);num1, num2 피연산자 + 연산자 거듭제곱 연산자거듭제곱 연산자(exponentiation operator)를 사용한 a ** b를 평가하면 a를 b번 곱한 값이 반환됩니다.예시:alert( 2 ** 2 ); // 4 (2 * 2)alert( 2 ** 3 ); // 8 (2 * 2 * 2)alert( 2 ** 4 ); // 16 (2 * 2 * 2 * 2) 거듭제곱 연산자는 정수가 아닌 숫자에 대해서도 동작합니다. 1/2을 사용하면 제곱..

자료형 기본자료형과   참조자료형을 구분하는 방법은 변수를 할달하는 방식에 따라서 달라진다 1. 순수한 값자체2. 참조 값 기본자료형(원시타입) 1. 기본 자료형 1.1 숫자, 문자열(형), 논리, 특수, 심볼 숫자(Number) 우리가 생각하는 수의 값, 양수 음수, 정수, 소수, 지수 let n = 123;n = 12.345;문자열(형) 큰따옴표나 작은따옴표로 감싸진 값("", '') let str = "Hello";let str2 = 'Single quotes are ok too';let phrase = `can embed another ${str}`;논리형 true, false불린형은 긍정(yes)이나 부정(no)을 나타내는 값을 저장할 때 사용합니다. true는 긍정, false는 부정을 의미합..

자바스크립트란?자바스크립트는 ‘웹페이지에 생동감을 불어넣기 위해’ 만들어진 프로그래밍 언어입니다.자바스크립트로 작성한 프로그램을 스크립트(script) 라고 부릅니다. 스크립트는 웹페이지의 HTML 안에 작성할 수 있는데, 웹페이지를 불러올 때 스크립트가 자동으로 실행됩니다.스크립트는 특별한 준비나 컴파일 없이 보통의 문자 형태로 작성할 수 있고, 실행도 할 수 있습니다.이런 관점에서 보면 자바스크립트는 자바(Java)와는 매우 다른 언어라고 할 수 있습니다. 자바스크립트만의 강점자바스크립트엔 다양한 장점이 있지만 여기선 세 가지만 언급해 보도록 하겠습니다.HTML/CSS와 완전히 통합할 수 있음간단한 일은 간단하게 처리할 수 있게 해줌모든 주요 브라우저에서 지원하고, 기본 언어로 사용됨이 세 가지 모두..

🥇 this 🥈 일반 함수와 화살표 함수에서의 this this : 나를 호출한 대상을 불러와야하는 경우에 사용한다. (함수 종류에 따라 this를 찾는 방법이 달라진다.) ➡️ 일반함수(선언문, 표현식)인지 화살표함수인지에 따라 this가 달라진다. 일반 함수 화살표 함수 this 찾는 방법 나를 호출한 대상을 this 로 바인딩 this를 바인딩하지 않는다. 찾아야한다면 부모의 this를 가져온다. 상위 부모에 this가 없다면 window를 가져온다. 사용하는 경우 객체에서 메서드를 정의할 때 메서드 안에서 함수를 호출할 때 ☔ 객체의 메서드를 정의할때는 화살표 함수보다 일반 함수가 더 좋은거 아닌가요? ⭕ 메서드 안에서 함수를 호출할때는 화살표 함수가 더 좋나? ⭕ ☔ +기타) 노드리스트는 배열이..

🐱 함수 표현식 이론 🐶 함수 표현식 // 함수 선언문 function sayHi() // 함수 표현식 let sayHi = function() { alert( "Hello" ); }; 함수 표현식은 함수를 생성하고 생성한 함수를 변수에 할당하는 형태이다. → 함수는 “값”이라서 변수에 할당할 수 있다. sayHi() → 함수를 실행한 값을 반환한다. sayHi → 함수를 실행하지 않고 함수 본문이 출력된다. const a = sayHi() ⇒ a에 sayHi()의 반환값 ‘hello’가 담긴다. const b = sayHi ⇒ b는 sayHi 함수(function) 본문이 담긴다. a는 저장된 값을 가져올 수 있지만 b는 함수 본문이 들어가 있어서 sayHi()처럼 b를 함수처럼 실행할 수 있다. b(..

[nodeType] () DOM API에서 노드의 유형을 표현합니다. → node는 구조화된 데이터나 정보의 개별 요소를 의미합니다. → API(애플리케이션 프로그래밍 인터페이스)는 서로 다른 소프트웨어 간에 데이터를 교환하여 기능을 통합할 수 있게 해주는 규약입니다. Node: nodeType property - Web APIs | MDN The read-only nodeType property of a Node interface is an integer that identifies what the node is. It distinguishes different kind of nodes from each other, such as elements, text and comments. developer.m..

if 와 '?'를 사용한 조건 처리 ☀️ 'else if ' 로 복수 조건 처리하기 조건문(Info) let year = prompt('ECMAScript-2015 명세는 몇 년도에 출판되었을까요?', ''); if (year 2015) { alert( '숫자를 좀 더 내려보세요.' ); } else { alert( '정답입니다!' ); } 조건 year 2015를 확인합니다. 이 조건 또한 거짓이라면 else 절 내의 alert를 실행합니다. → else if 블록을 더 많이 붙이는 것도 가능하다. 마지막에 붙는 else는 필수가..