전체 글

제어 컴포넌트(Controlled Component)는 리액트 상태(state)를 이용해 입력값을 제어하는 컴포넌트를 말합니다.입력 요소의 값(value)를 리액트의 상태와 동기화하고, 사용자가 입력을 변경하면 onChange 이벤트 핸들러를 통해 이벤트를 감지해 setter 함수로 state를 업데이트합니다. (useState Hooks)제어 컴포넌트의 장점은 입력값과 UI가 항상 일치하도록 유지하여 데이터 관리를 용이하게 하고, 입력 값을 유효성을 검사하고, 복잡한 폼을 효과적으로 관리할 수 있습니다.import React, { useState } from 'react';function ControlledInput() { const [value, setValue] = useState(''); co..

React는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 건네는 단방향 데이터 흐름을 가집니다.Props는 부모 컴포넌트가 자식 컴포넌트에 전달하는 데이터입니다. props는 읽기 전용으로, 자식 컴포넌트는 props를 수정할 수 없습니다.props가 불변이기 때문에 데이터 흐름을 예측 가능하게 만들고, 컴포넌트의 재사용성을 높입니다.import React, { useState } from 'react';function ParentComponent() { const [name, setName] = useState('Original Name'); const handleClick = () => { setName('New Name'); }; return ( ..

연산자연산자는 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연산 등을 수행해 하나의 값을 만든다.이 때 연산의 대상을 피연산자(operand)라고 한다. 피연산자는 하나의 값으로 평가될 수 있는 표현식이어야 한다.피연산자와 연산자의 조합으로 이뤄진 연산자 표현식 또한 값으로 평가될 수 있는 표현식이어야 한다.// 산술 연산자5 * 4 // 20// 문자열 연결 연산자'My name is ' + 'Lee' // 'My name is Lee'// 할당 연산자color = 'red' // 'red'// 비교 연산자3 > 5 // false// 논리 연산자true && false // false// 타입 연산자typeof 'HI' // string 산술 연산자산술 연산자 피연산자를 대..

데이터 타입데이터 타입은 값의 종류를 말한다. 자바스크립트(ES6)의 모든 값은 데이터 타입을 가지며, 7개의 데이터 타입을 제공한다. 7개의 데이터 타입은 원시 타입(primitive)과 객체 타입(object/reference)으로 분류한다. 숫자 타입C나 자바와 같은 경우 정수, 실수를 구분해서 int, long, float, double 등과 같은 다양한 숫자 타입을 제공하지만, 자바스크립트는 하나의 숫자 타입만 존재한다.숫자 타입의 모든 수를 실수로 처리하며, 정수만 표현하기 위한 데이터 타입이 별도로 존재하지 않는다.(배정밀도 64비트 부동소수점 형식)// 모두 숫자 타입var integer = 10; // 정수var double = 10.12; // 실수var negative = -20; /..

디바운스(Debounce)와 쓰로틀(Throttle)은 Javascript에서 특정 함수의 실행 빈도를 조절하는 기법으로 최적화 기법으로 사용해 본 경험이 있다. 디바운스(Debounce)이벤트를 그룹화하여 특정시간이 지난 후 하나의 이벤트만 발생하도록 하는 기술이다.즉, 순차적 호출을 하나의 그룹으로 '그룹화'할 수 있다.연이어 호출되는 함수들 중 마지막 함수만 호출하도록 하는 것이다.검색창에 '개발하는데 다 이유가 있지'를 검색하려고 한다. enter 없이 input 이벤트로 API 검색 요청이 된다고 가정한다.그러면 'ㄱ', '개', '갭', '바', '발',  ... 이런식으로 불필요한 API 요청이 많이 발생하게 된다. 글자가 어느정도 입력이 됐을 때 요청이 가도록 일정 시간동안 입력이 없을 때..

문제 상황작업을 하던 중 `localStorage is not defined`에러가 출력됐다.말 그래도 localStorage가 정의되지 않았다는 것이다.localStorage(로컬 저장소)브라우저 환경에서만 사용할 수 있는 웹 스토리지 API 중 하나이다. 클라이언트 측에서 데이터를 영구적으로 저장하는데 사용된다.`window` 객체의 하위 객체로 존재하며, `window`객체가 존재하는 환경(브라우저)에서만 사용할 수 있다.Next.js와 같은 SSR 환경에서 서버측 렌더링 시에는 브라우저 환경이 아닌 서버 환경에서 코드가 실행되기 때문에 `localStorage`를 사용할 수 없었던 것이다.Next.js에서 에러가 발생하는 이유1. SSR의 특징 : Next.js는 기본적으로 SSR을 지원하여 초기..

자바스크립트의 Promise 객체는 비동기 작업의 최종 완료 또는 실패를 나타내는 배열이나 객체처럼 독자적인 객체이다. 비동기 작업이 끝날 때까지 결과를 기다리는 것이 아니라, 결과를 제공하겠다는 '약속'을 반환한다는 의미에서 Promise라고 이름이 지어졌다. 사용 방법Promise 객체 생성Promise 객체를 생성하려면 new 키워드와 Promise 생성자 함수를 사용하면 된다. Promise 생성자 함수 안에 두 개의 매개변수를 가진 콜백 함수를 넣게 되는데, 첫번째 인자는 작업이 성공했을 때 성공(resolve)을 알리는 객체, 두번째 인자는 작업이 실패(reject)했을 때 실패를 알려주는 오류 객체이다.// Promise 생성자 안에 들어가는 콜백 함수를 executor라고 함const my..