joamashi

✨ 통합 샘플 시나리오목표:서버: 글 목록 1페이지를 가져와 화면에 렌더링클라이언트: "좋아요(❤️)" 클릭 + "더 보기"로 다음 글 불러오기전체 구조Page.jsx (서버 컴포넌트)PostItem.jsx (클라이언트 컴포넌트)LoadMoreButton.jsx (클라이언트 컴포넌트)📄 Page.jsx (서버 + 클라이언트 통합)// Page.jsx// 서버: 초기 글 목록을 서버에서 가져옴 + 클라이언트 컴포넌트로 상태 관리 위임import PostBoard from "./PostBoard";import { fetchPosts } from "@/lib/api";export default async function Page() { const posts = await fetchPosts({ page: ..

1. 서버: 데이터 가져오기 + 클라이언트: 사용자 인터랙션// 서버 컴포넌트 (PostList.jsx)// DB 또는 API에서 글 목록을 가져오는 서버 컴포넌트import { fetchPosts } from "@/lib/api";import PostItem from "./PostItem";export default async function PostList() { const posts = await fetchPosts(); // 서버에서 글 목록을 받아옴 return ( {posts.map(post => ( ))} );}// 클라이언트 컴포넌트 (PostItem.jsx)// 글 하나를 표시하고 좋아요(❤️) 토글 기능을 제공하는 클라이언트 컴포넌트'..

파이썬 100제는 기초 문법부터 중급 수준까지의 파이썬 실력을 기를 수 있는 실전 문제들로 구성되어 있어요. 아래는 100문제를 주제별로 나눠 간단히 정리한 목록이며, 원하시면 각 문제에 대한 해설과 정답 코드도 제공해 드릴 수 있습니다.🟢 1. 기본 문법 & 변수 (1~10)정수 입력받기두 수의 합 구하기문자열 길이 구하기리스트 만들기변수 swap 하기print 포맷팅문자열 자르기리스트 인덱스 접근리스트 슬라이싱다중 변수 할당🟡 2. 조건문 & 반복문 (11~30)홀짝 판별최대값 구하기구구단 출력합계 구하기 (1~100)팩토리얼 구하기피보나치 수열별 찍기 (삼각형, 역삼각형)리스트 내 짝수만 출력break, continue 사용 예제2중 for문으로 구구단 만들기리스트 요소 개수 세기1차원 리스트 ..

🥊 Redux vs Zustand: 한눈에 비교항목 Redux Zustand철학명확한 액션 흐름 (Flux 패턴)간단하고 유연한 상태 공유복잡도다소 복잡 (boilerplate 많음)매우 간결함비동기 처리createAsyncThunk, middleware 필요그냥 함수 호출 (Promise, async 자유로움)전역 상태 설정 방식createSlice, configureStore 등 필수create 함수로 store 생성사용법useSelector, useDispatch 필요useStore 훅 하나로 끝모듈화reducers/actions 따로 관리store 안에서 다 처리 가능타입스크립트 지원공식 지원 좋음별도 선언 필요하지만 잘 됨러닝 커브약간 있음매우 쉬움리렌더링 최적화memo, reselect 등 ..

👣 먼저 준비하기 (공통 셋업)1. 필요한 라이브러리 설치npm install @reduxjs/toolkit react-redux redux-persist2. Redux 스토어 만들기 (src/app/store.ts)import { configureStore } from '@reduxjs/toolkit'import todoReducer from '../features/todo/todoSlice'import authReducer from '../features/auth/authSlice'import themeReducer from '../features/theme/themeSlice'import filterReducer from '../features/filter/filterSlice'// Redux 스..

✅ 1. useAppSelector, useAppDispatch (타입 안전한 Hooks)Redux를 사용할 때 타입을 명시적으로 설정하면 더 안전하게 사용할 수 있습니다.// src/app/hooks.tsimport { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'import type { RootState, AppDispatch } from './store'export const useAppDispatch: () => AppDispatch = useDispatchexport const useAppSelector: TypedUseSelectorHook = useSelector그리고 기존 useSelector, useDispatch..

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..

✅ 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)리터럴 ..

✅ 3.1 변수에 타입을 정의하는 방법자바스크립트에서는 이렇게 변수 만들죠:let name = '철수'; // 타입 없음 (자동으로 string으로 추론됨)타입스크립트에서는 이렇게 명시적으로 타입을 적어줍니다:let name: string = '철수'; // name은 문자열(string)만 저장할 수 있음let age: number = 25; // 숫자 타입let isStudent: boolean = true; // true 또는 false만 가능💡 왜 타입을 적을까?나중에 실수로 숫자에 문자열을 넣거나, 잘못된 계산을 방지하기 위해서!age = '스물다섯'; // ❌ 오류! 숫자 타입에 문자열을 넣을 수 없음✅ 3.2 기본 타입들 (꼭 외워야 함)① string – 문자열let greet..

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..

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..

핵심 주제:모달 안의 폼 처리제출 후 초기화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..

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..

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 ..

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..

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..

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..

1. useEffect 기본 사용법import React, { useEffect, useState } from 'react';function Timer() { const [seconds, setSeconds] = useState(0); useEffect(() => { const timer = setInterval(() => { setSeconds((prev) => prev + 1); }, 1000); return () => clearInterval(timer); // 컴포넌트 언마운트 시 정리 }, []); return 경과 시간: {seconds}초;}✅ useEffect는 side effect (부수 효과)를 처리하는 훅입니다.✅ 의존성 배열이 []인 경우, 컴포넌트가..

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..