dev_lee

JS 기본 공부 (1)

1. 자바스크립트의 장단점장점브라우저 호환 (대부분의 브라우저에 기본 내장), 생태계 풍부(다양한 라이브러리 존재), 비동기 처리 강력, 유연한 문법단점타입 안정성 부족, 보안 취약, 대규모 프로젝트에서 유지보수 어려움 2. 자바스크립트에서 존재하는 타입🔹 1. 원시 타입 (Primitive Types)값 자체를 담고 있는 변경 불가능한(immutable) 타입string문자열 → "hello", 'world', `template`number숫자 → 42, 3.14, -1 (정수, 부동소수 모두 포함)boolean참/거짓 → true, falseundefined값이 할당되지 않음 → let a; console.log(a)null명시적으로 없음을 표현 → let a = null;bigint아주 큰 정수 ..

1. 글은 쓰게 된 동기리액트로 개발을 하다 보면, 문득 이런 의문이 들 때가 있다.예를 들어 동물 목록을 조회하는 API를 호출한다고 할 때, 대부분의 경우 pages/animals.tsx 같은 경로에 해당 페이지 컴포넌트를 만들고 그 안에서 API를 호출하고 상태를 관리한다.하지만 이 과정에서 공통된 패턴이 반복되거나, 여러 페이지에서 같은 데이터를 필요로 하는 경우가 생길 수 있다.이럴 때 우리는 자연스럽게 "이 로직을 다른 곳에서도 재사용하고 싶다"는 생각을 하게된다.이런 상황에서 커스텀 훅(Custom Hook)이 유용하게 쓰일 수 있다. 2. 예시다음은 커스텀 훅을 사용하지 않은 예제이다.// pages/animals.tsximport { useEffect, useState } from "re..

1. 제네릭(Generics)이란?제네릭은 함수, 클래스, 인터페이스, 타입을 다양한 타입에 대해 재사용 가능하게 만드는 문법이다. ❌ 일반적인 타입만 쓸 경우function identityNumber(value: number): number { return value;}function identityString(value: string): string { return value;} ✅ 제네릭 사용function identity(value: T): T { return value;}identity(123); // T = numberidentity('hi'); // T = string2. 제네릭 기본 문법2.1 함수에 쓰는 법function getFirstElement(arr: T[]): T { ..

1. 유틸리티 타입이란?타입스크립트에서 제공하는 유틸리티 타입은 기존 타입을 변형하거나 조합하여 새로운 타입을 생성할 때 사용하는 도구이다. 이들은 타입스크립트의 강력한 타입 시스템을 활용해 재사용 가능한 타입을 간결하게 정의하는데 유용하다.2. 주요 유틸리티 타입Partial: 모든 속성을 선택적으로 만듦.Required: 모든 속성을 필수로 만듦.Readonly: 모든 속성을 읽기 전용으로 만듦.Pick: 특정 속성만 선택.Omit: 특정 속성을 제외.Record: 특정 키에 대해 값을 정의.ReturnType: 함수의 반환 타입을 추출.Parameters: 함수의 매개변수 타입을 추출.3. OmitOmit는 특정 타입 T에서 속성 K를 제거한 타입을 생성한다.interface User { id..

1. React Hook 규칙Hooks는 컴포넌트의 최상단에서만 호출해야 한다.조건문, 반복문, 중첩 함수 안에서 Hook을 호출하면 안 된다.Hooks는 React 함수형 컴포넌트나 커스텀 Hook 안에서만 호출해야 한다. 2. 주요 이유React의 렌더링 흐름과 상태 관리React는 컴포넌트가 렌더링될 때 Hook 호출 순서를 기준으로 상태(useState)와 부수효과(useEffect)를 추적한다. 최상단에서 호출하지 않으면 Hook 호출 순서가 달라질 가능성이 생겨 React가 상태와 효과를 잘못 연결할 수 있다.렌더링 순서와 일관성 보장 Hook은 호출 순서에 따라 상태와 부수효과를 추적한다. 최상단에서 호출하면 조건문, 반복문 등에 따라 호출 순서가 달라지는 일이 없으므로 React는 컴포넌트..

1. React.memo역할: 컴포넌트 자체의 리렌더링을 방지하기 위해 사용한다.용도: 컴포넌트를 메모이제이션하여, 부모 컴포넌트가 리렌더링되어도 props가 변경되지 않으면 해당 컴포넌트는 리렌더링되지 않음.작동 방식: React는 이전의 props와 새로 전달된 props를 얕은 비교(shallow compare)하여 변경된 부분이 없으면 컴포넌트를 다시 렌더링하지 않는다.import {useState} from "react";const MyComponent = React.memo(({ count }) => { console.log("Rendering MyComponent"); return {count};});function App() { const [count, setCount] = useSt..

1. React-QueryReact 애플리케이션에서 서버 상태를 쉽게 관리하고 비동기 데이터를 처리하기 위한 라이브러리, 서버로부터 데이터를 가져오고, 캐싱, 동기화, 리페칭 등의 복잡한 작업을 자동화하여 데이터 fetching을 간소화React Query는 기본적으로 API 요청을 효율적으로 처리하고, 서버 상태를 클라이언트에서 쉽게 관리할 수 있게 한다.# npmnpm install @tanstack/react-query# yarnyarn add @tanstack/react-query  2. 설치 후 기본 설정import React from 'react';import ReactDOM from 'react-dom/client';import { QueryClient, QueryClientProvider ..

1. JotaiJotai 는 "React State Management Library" 중 하나이고 상태 관리에 필요한 편의 기능을 제공하는 라이브러리이다.불필요한 리렌더링을 방지하고 작은 패키지 사이드를 가지고 있다. Jotai는 상태를 관리하는 API가 매우 간단하고 직관적이다. atom을 만들고, 컴포넌트에서 상태를 사용하기 위해 useAtom 하나만으로 읽기와 쓰기를 처리할 수 있어 코드가 단순해지고, 상태 흐름이 명확해진다.# npmnpm i jotai# yarnyarn add jotai# pnpmpnpm install jotai  2. 기본 사용법1. atomconst countAtom = atom(1);atom 을 생성하고 괄호 안에 초기값을 넣을 수 있다. 2. useAtomconst [c..

1. 이벤트 버블링이란? 이벤트 버블링(event bubbling)이란 웹 개발에서 이벤트가 발생했을 때, 그 이벤트가 가장 구체적인 요소(예: 버튼)에서 시작해 상위 요소들로 점차 전파되는 현상이다. 예를 들어, HTML 문서에서 특정 버튼을 클릭하면 그 버튼에 속한 상위 요소들(예: , )로 이벤트가 전달된다.  const onClickDiv = () => { console.log("div"); }; const onClickBtn = () => { console.log("btn"); }; return ( 이벤트 버블링 ); 위 이미지와 같이 버튼을 클릭하면 버튼의 상위 이벤트인 div 태그의 onClick 함수도 실행됨을 알 수 있다. 2. event.sto..

1. SEO란?- Search Engine Optimization의 약자로 검색 엔진 최적화를 의미- 웹사이트나 웹페이지를 검색 엔진에서 더 잘 보이도록 최적화하는 과정 -> 구글, 네이버, 다음과 같은 검색 엔진에서 특정 키워드로 검색할 때, 해당 웹사이트나 페이지가 상위에 노출되도록 하는 것이 목표(1) 온페이지 SEO (On-Page SEO) - 웹사이트 내부에서 할 수 있는 최적화 작업을 의미. 이는 웹페이지의 콘텐츠, 메타 태그, 이미지, URL 구조 등을 최적화하여 검색 엔진이 해당 페이지를 더 잘 이해하고 인덱싱할 수 있도록 하는 작업이다(2) 오프페이지 SEO (On-Page SEO) - 웹사이트 외부에서 할 수 있는 최적화 작업을 의미. 이는 주로 다른 웹사이트에서 자신의 웹사이트로 향하..