joamashi

Redux + typescript : 카운터 증가/감소를 구현

Redux의 핵심 개념을 Typescript와 함께 사용하는 기본 예제를 만들어 볼게요. 이 예제는 카운터 증가/감소를 구현합니다.🧠 기본 구성 개요redux: 상태 관리 라이브러리@reduxjs/toolkit: Redux를 더 편리하게 쓰도록 도와주는 툴킷react-redux: React와 Redux 연결typescript: 정적 타입 시스템📁 폴더 구조 예시src/├── app/│ └── store.ts // Redux store 설정├── features/│ └── counter/│ ├── counterSlice.ts // 상태 + 리듀서 정의│ └── Counter.tsx // 컴포넌트├── App.tsx└── main.tsx (or in..

React에서 타입스크립트 사용

✅ 1. Props와 State 타입 지정 (10가지)// 1. 기본 Propsinterface HelloProps { name: string; age: number;}const Hello = ({ name, age }: HelloProps) => {name} is {age};// 2. Optional Propsinterface OptionalProps { nickname?: string;}const Optional = ({ nickname }: OptionalProps) => {nickname ?? 'None'};// 3. Props + State 함께interface CounterProps { initialCount: number;}const Counter = ({ initialCount }:..

[타입스크립트] 배우기 목록

타입스크립트를 처음 배우려는 분들을 위한 체계적인 학습 목록을 아래와 같이 정리해 드릴게요. 기초 개념부터 실전까지 순차적으로 익힐 수 있도록 구성했어요.📘 타입스크립트 배우기 목록1. 기초 문법 이해타입스크립트란? 왜 쓰는가?타입스크립트 설치 및 설정 (tsc, tsconfig.json)기본 타입들 (string, number, boolean, null, undefined, any, unknown 등)타입 추론과 명시적 타입 지정2. 함수와 객체 다루기함수의 매개변수와 반환값 타입 지정선택적 매개변수와 기본값객체 타입 정의 (type, interface)구조 분해 할당과 타입 지정3. 고급 타입 사용유니온 타입 / 인터섹션 타입 (|, &)타입 가드 (typeof, in, instanceof)리터럴 ..

React + TypeScript에서 이벤트(Event)

onClick – 클릭 이벤트타입: React.MouseEvent 또는 React.MouseEvent// 1. 버튼 클릭const handleClick = (e: React.MouseEvent) => { console.log('Button clicked!', e.currentTarget);};// 2. div 클릭const handleDivClick = (e: React.MouseEvent) => { alert('Div clicked!');};// 3. 이미지 클릭const handleImgClick = (e: React.MouseEvent) => { console.log('Image src:', e.currentTarget.src);};// 4. 리스트 항목 클릭const handleListCli..

리액트 + 타입스크립트 기초 10단계 : 폼 성능 최적화 – Controller, 컴포넌트 분리, useMemo

1. 왜 최적화가 필요할까?여러 입력 필드가 있을 때, 한 필드가 변경될 때마다 모든 컴포넌트가 불필요하게 리렌더링 되면 성능이 떨어짐특히 useFormContext 사용 시, 상태 공유 범위가 넓어져 리렌더링 범위도 커짐2. Controller로 커스텀 컴포넌트 제어react-hook-form의 register는 HTML 요소에만 직접 사용 가능 →커스텀 UI 라이브러리 (예: MUI, Chakra 등)와 쓰려면 Controller 필요!import { useForm, Controller } from 'react-hook-form';type FormValues = { age: number;};function SliderForm() { const { control, handleSubmit } = us..

리액트 + 타입스크립트 기초 9단계 : 실제 사용자 경험을 위한 폼 통합 시나리오

핵심 주제:모달 안의 폼 처리제출 후 초기화API 연동 통합 처리제출 성공/실패 메시지 관리1. 모달 안에서 폼 처리하기 (with React Hook Form)import { useForm } from 'react-hook-form';interface ModalFormProps { onClose: () => void;}type FormValues = { email: string;};function ModalForm({ onClose }: ModalFormProps) { const { register, handleSubmit, reset, formState: { isSubmitSuccessful }, } = useForm(); const onSubmit = (data: Fo..

리액트 + 타입스크립트 기초 8단계 : useFieldArray, 조건부 필드, 동적 입력 처리

1. useFieldArray로 동적 입력 필드 만들기npm install react-hook-formimport { useForm, useFieldArray } from 'react-hook-form';type Friend = { name: string;};type FormValues = { friends: Friend[];};function FriendsForm() { const { register, control, handleSubmit } = useForm({ defaultValues: { friends: [{ name: '' }], }, }); const { fields, append, remove } = useFieldArray({ control, nam..

리액트 + 타입스크립트 기초 7단계 : React Hook Form + Zod 연동으로 타입 세이프한 폼 만들기

1. React Hook Form + TypeScript 기본 세팅npm install react-hook-form// SignUpForm.tsximport { useForm } from 'react-hook-form';type FormValues = { name: string; email: string;};function SignUpForm() { const { register, handleSubmit, formState: { errors }, } = useForm(); const onSubmit = (data: FormValues) => { console.log('전송된 데이터:', data); }; return ( {errors.name ..

리액트 + 타입스크립트 기초 6단계 : useRef, forwardRef, 커스텀 폼 유효성 검사

1. useRef 기본 사용법import { useRef } from 'react';function FocusInput() { const inputRef = useRef(null); const focusInput = () => { inputRef.current?.focus(); // null 체크 필요 }; return ( 포커스 주기 );}✅ useRef(null)처럼 초기값을 null로 주고 타입 명시✅ .current?.focus() → 옵셔널 체이닝으로 안전하게 접근2. forwardRef로 컴포넌트에 ref 전달import React, { forwardRef } from 'react';interface InputProps { label: stri..

리액트 + 타입스크립트 기초 5단계 : useReducer, Context, API 에러 처리 + 타입

1. useReducer로 복잡한 상태 관리하기useState는 간단한 상태엔 좋지만, 복잡해지면 useReducer가 더 깔끔해요.import React, { useReducer } from 'react';type CounterState = { count: number };type CounterAction = { type: 'increment' } | { type: 'decrement' };function reducer(state: CounterState, action: CounterAction): CounterState { switch (action.type) { case 'increment': return { count: state.count + 1 }; case 'decrem..

리액트 + 타입스크립트 기초 4단계 : 컴포넌트 재사용, props 타입 확장, 커스텀 훅

1. 재사용 가능한 버튼 컴포넌트 만들기// components/Button.tsximport React from 'react';interface ButtonProps { label: string; onClick: () => void; disabled?: boolean;}const Button: React.FC = ({ label, onClick, disabled }) => { return ( {label} );};export default Button;// App.tsximport Button from './components/Button';function App() { return ( alert('클릭됨')} /> );}✅ 컴포넌트에 pro..

리액트 + 타입스크립트 기초 2단계: useState & 이벤트 처리

1. 상태 관리 (useState) 기본import React, { useState } from 'react';function Counter() { const [count, setCount] = useState(0); return ( 현재 카운트: {count} setCount(count + 1)}>증가 );}export default Counter;✅ useState(0) 처럼 제네릭으로 타입을 명시해주는 것이 중요합니다.2. 문자열 입력 상태 관리function NameInput() { const [name, setName] = useState(''); const handleChange = (e: React.ChangeEvent) => { setName..

리액트 + 타입스크립트 기초 1단계: 환경 설정 & 컴포넌트 기본

1. 리액트 + 타입스크립트 프로젝트 생성npx create-react-app my-app --template typescriptcd my-appnpm startcreate-react-app은 리액트 앱을 빠르게 만들 수 있는 CLI 툴입니다.--template typescript는 타입스크립트 설정이 포함된 템플릿을 사용한다는 뜻이에요.2. 타입스크립트 파일 확장자.tsx: JSX를 사용하는 컴포넌트 파일.ts: 일반 타입스크립트 파일 (예: 유틸 함수, 타입 정의 등)3. 첫 번째 컴포넌트 만들기// src/components/Greeting.tsximport React from 'react';interface GreetingProps { name: string;}const Greeting: Rea..

[자바스크립트] JSDoc 가이드

좋아요! 아래는 JSDoc의 기본 가이드와 다양한 예시를 함께 정리한 내용입니다.JSDoc은 JavaScript 코드에 타입과 설명을 추가하여 문서화 및 코드 자동 완성을 도와주는 주석 기반 도구입니다. TypeScript를 쓰지 않아도 정적 분석과 IDE 지원을 받을 수 있습니다.🧾 JSDoc 기본 문법JSDoc은 /** ... */ 블록 주석 안에 @태그 형식으로 작성합니다./** * 설명 부분 * @tag 설명 */📌 주요 JSDoc 태그와 예시1. @param: 함수의 매개변수 설명/** * 두 수를 더합니다. * @param {number} a - 첫 번째 숫자 * @param {number} b - 두 번째 숫자 * @returns {number} 합계 */function add(a, b)..

🔍 차이점 분석1. 1 in [] == False이 표현은 우선순위 때문에 아래처럼 해석됩니다:1 in [] == False# => 1 in [] and [] == False (X 아님!)# => 1 in ([] == False)❗ 정답은:(1 in []) and ([] == False)이유는 in 연산자와 == 연산자 모두 왼쪽에서 오른쪽으로 평가되며, == 는 in 보다 우선순위가 낮습니다.따라서 Python은 이것을 연쇄 비교(Chain Comparison) 으로 처리합니다.즉,1 in [] == False는 다음과 같이 해석됩니다:(1 in []) and ([] == False)✅ 1 in [] → False✅ [] == False → False⛔ 전체 결과: False and False → ..

🎯 시나리오 1: 부드러운 애니메이션 처리 (requestAnimationFrame)✅ 목적사용자의 스크롤이나 애니메이션 효과를 FPS(초당 프레임 수)에 맞춰 부드럽게 실행📎 예시:let x = 0;function animateBox() { x += 5; box.style.transform = `translateX(${x}px)`; if (x 🧠 해설requestAnimationFrame()은 브라우저의 다음 렌더링 직전에 콜백을 호출setTimeout(fn, 16)보다 더 정밀하고 CPU 자원 낭비가 적음애니메이션 프레임에 맞춰 최적화된 동작을 보장🎯 시나리오 2: 대용량 배열 처리 시 UI 멈춤 방지 (chunking with setTimeout)✅ 목적수만 개 요소를 반복 처리할 때,..

자바스크립트는 단일 스레드 기반의 비동기 처리 모델을 갖는 언어이며, 이 특성을 이해하기 위해선 Event Loop, Task Queue, Microtask Queue, Agent 등의 개념을 명확히 알아야 합니다.📌 1. Event Loop란 무엇인가?자바스크립트는 싱글 스레드(Single Thread) 언어로, 하나의 실행 컨텍스트만을 동시에 처리할 수 있습니다. 하지만 비동기 처리를 위해 이벤트 루프(Event Loop) 라는 메커니즘을 활용합니다.Event Loop는 호출 스택(Call Stack)과 태스크 큐(Task Queue)를 모니터링하며, 호출 스택이 비어 있을 때 태스크 큐에서 대기 중인 콜백을 스택으로 이동시켜 실행합니다.📎 예시:console.log("A");setTimeout(..

✅ 1. this란 무엇인가?this는 현재 실행 중인 코드가 속한 문맥(Context) 을 가리킵니다. 즉, 누가 이 코드를 호출했는지에 따라 그 참조 대상이 달라지게 됩니다.📌 핵심 키워드: 실행 문맥, 호출 주체, 동적 바인딩console.log(this); // 브라우저에서는 window 객체 출력this는 선언 시점이 아닌 실행 시점에 결정됩니다.정적 스코프(Scope)와 달리 this는 동적(Dynamic) 으로 바인딩됨✅ 2. 스코프(Scope) vs this의 차이구분 설명스코프(Scope)변수나 함수가 접근 가능한 코드의 유효 범위this실행 중인 문맥(컨텍스트)의 객체 참조📌 스코프 예시function outer() { let x = 10; function inner() { ..

React Query: **서버 상태(Server State)**를 관리하는 도구Zustand: **클라이언트 상태(Client State)**를 관리하는 전역 상태 관리 도구핵심 차이 요약주 용도서버 데이터 캐싱 및 비동기 처리전역 상태(클라이언트 로컬 상태) 관리상태 저장 위치React Query 내부 캐시 (비휘발성)메모리 내 저장 (휘발성)주요 기능데이터 페칭, 캐싱, 리페치, 오류 처리글로벌 스토어, 상태 간단 공유비동기 처리내장 지원 (useQuery, useMutation 등)직접 fetch나 axios 사용 필요상태 공유 방식내부 Hook (useQuery 등)create로 만든 스토어 Hook 사용사용 시나리오 예시1. React Query 예시: 서버에서 유저 목록을 가져오는 경우// ..

React Query를 사용하는 이유는 간단히 말해 비동기 상태 관리를 더 쉽고 강력하게 하기 위해서 입니다.기존에는 useState, useEffect, axios 등을 수동으로 조합해야 했던 것을 React Query가 자동화 + 최적화해줍니다.🔥 기존 방식의 문제점복잡한 상태 관리useState, useEffect로 로딩/에러 처리코드 중복, 재사용 어려움중복 요청 발생같은 데이터를 여러 컴포넌트에서 요청동일한 API 여러 번 호출refetch 타이밍 관리 어려움데이터 변경 후 목록 다시 불러와야 함수동으로 refetch() 또는 재랜더링캐싱 없음매번 API 호출느림 + 비용 증가무한스크롤, 필터링 구현 번거로움페이지 번호 상태 직접 관리복잡한 로직 필요SSR 대응 어려움Next.js에서 API ..