🤹‍♀️유데미, 스나이퍼팩토리, 프로젝트 캠프, Next.js 2기 6

[유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 2기 - Reducer, Context API

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

[유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 2기 - 논리 연산자

논리 연산자자바스크립트엔 세 종류의 논리 연산자 ||(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..

[유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 2기 - 삼항 연산자

삼항 연산자 조건 (삼항) 연산자는 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..

[유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 2기 - 연산자

연산자는 수학과 같습니다. 산술연산자 곱셉 : * 덧셈 : + 뺄셈 : - 나눗셈 : / 나머지 : % 연산자와 피연산자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을 사용하면 제곱..

[유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 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는 부정을 의미합..

유데미, 스나이퍼팩토리, 프로젝트 캠프, Next.js 2기 - 변수

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