Go Gradually - Repository

1. 요구사항 & UX 리서치서비스 목표·주요 유저 시나리오 정의어떤 기능/화면이 필요한지 플로우 정리 (로그인, 대시보드, 설정 등)경쟁 서비스 벤치마킹 (UX 패턴 참고 → MUI 컴포넌트 맵핑 가능)2. 정보 구조 & 와이어프레임페이지 플로우 / IA: 어떤 페이지들이 있고, 어떤 경로로 이동하는지 결정와이어프레임: 흑백 박스 수준에서 구조만 정의예: 상단바(Header), 좌측 네비게이션, 메인 콘텐츠, 버튼 위치이때부터 MUI 기본 컴포넌트(Button, AppBar, Grid 등)로 대응할 수 있음3. 디자인 토큰 확정 (MUI Theme Mapping)브랜드 컬러 → theme.palette.primary / secondary폰트/글자 크기 → theme.typography간격/라운드 값 →..

0) 킥오프 · 요구사항 정리화면 목록/유스케이스/권한/네비게이션 플로우 확정API 스펙 합의(가능하면 OpenAPI/Swagger 문서로 고정)디자인 산출물(Figma) 수령 및 컴포넌트 카탈로그 확정1) 디자인 → 디자인 토큰화 (MUI 테마 맵핑)브랜드 컬러/중립 컬러 → theme.palette타이포 시스템(폰트/크기/행간) → theme.typography라운드/간격 → theme.shape.borderRadius, spacing 스케일브레이크포인트 → theme.breakpoints→ 산출물: “디자인-토큰 치환표(맵핑표)” 1장토큰이란, 색상, 글꼴, 크기, 간격, 그림자 같은 디자인 속성들을 재사용 가능한 변수로 추상화한 것을 의미한다. const theme = createTheme({ ..

useReducer 훅은 컴포넌트 내부에 새로운 State를 생성하는 조금 특별한 리액트 훅이다.상태 변화 함수 대신 “상태 변화 요청 함수” 를 사용한다.useState와 달리 “상태 관리 코드”(이벤트 핸들러로 쓰거나 했던 setState 함수를 사용하는 함수들)를 컴포넌트 외부로 분리할 수 있다.모든 useState는 useReducer 로 대체 가능하다.컴포넌트는 렌더링하기 위한 함수인데, 컴포넌트가 내부적으로 "도메인 로직"을 갖게 되면 책임 분리가 잘 안되게 된다.즉, State를 관리하는 코드가 컴포넌트 안에 길어지는 상황을 막기 위해 사용한다.즉, useReducer는 다음과 같은 경우에 사용한다.컴포넌트 내부에 보관해야 하는 상태가 도메인 로직과 밀접한 상태일 때컴포넌트 내부에 보관해야 ..

상태 전이는 그 상태 전이의 발생을 알리는 방식의 설계로 무궁무진한 응용 가능성을 갖고 있다.그렇기 위에 꼭 알아둬야 하는 리액트 컴포넌트의 생명주기와, 이를 활용할 useEffect에 대해 알아보자.리액트의 컴포넌트의 생명주기Mount컴포넌트가 탄생하는 순간.화면에 처음으로 렌더링되는 순간.Update컴포넌트가 리렌더링 되는 순간.UnMount컴포넌트가 화면에서 사라지는 순간.컴포넌트가 렌더링에서 제외되는 순간.useEffect리액트에선 각 생명주기 별로 명령을 지정해둘 수 있다.이를 라이프사이클 제어 라고 하며, useEffect() 훅을 통해 구현할 수 있다.리액트 컴포넌트의 사이드 이펙트를 제어하는 리액트 훅.사이드 이팩트컴포넌트의 동작에 따라 파생되는 여러 효과 (생명주기 제어 등)useEffe..

리액트에서의 State모든 컴포넌트들은 State를 가질 수 있다.현재 State에 따라 렌더링 결과를 다르게 할 수 있다.State의 변화에 따라 렌더링을 다시 하는것을 Re-Rendering이라고 한다.리액트는 변수의 값의 변화로는 리렌더링 되지 않고(버퍼에 담김), State가 변화해야만 즉각적으로 리렌더링을 수행한다.“react” 에서 useState를 import 하는것으로 State를 갖게 할 수 있다.이때, “react”에는 useState만 있는것이 아니므로 다음과 같이 코드를 작성해야 한다import { useState } from "react";state의 구성요소state는 배열, useState() 함수를 통해 얻을 수 있다.state가 처음 생성됐을 땐 [ undefined, f ..

개인 학습용 정리로, 리액트 첫 학습을 목적으로 찾아보고 계신다면 공식 문서를 강력히 권장드립니다. 자습서: React 시작하기 – ReactA JavaScript library for building user interfacesko.legacy.reactjs.org 컴포넌트란?js에서 html 코드를 반환하는 함수.컴포넌트들은 트리 구조로 관리되며, root 컴포넌트를 루트 노드로 삼는다.특정 컴포넌트의 리턴값 안에 들어있는 컴포넌트를 특정 컴포넌트의 “자식 컴포넌트” 라고 한다.리액트는 클래스 기반 컴포넌트와 함수 기반 컴포넌트가 있지만, 리액트에서는 주로 함수 기반 컴포넌트를 사용한다.함수 기반 컴포넌트는 반드시 첫글자가 “대문자”여야 한다.jsx에서 소문자로 시작하는 이름은 html 요소로 보고j..

리액트의 특징 (추구하는 것)컴포넌트를 기반으로 UI를 표현한다.이는 재사용성이 높은 UI의 구현을 위해 적용되었다.화면 업데이트 구현이 쉽다.선언형 프로그래밍 방식(추상화된 기능) 으로 동작하기 때문에, 구현이 간편하다.선언형 프로그래밍 ↔ 명령형 프로그래밍(하나부터 열까지 전부 지시)으로 이해하면 좋다.화면 업데이트가 빠르게 처리된다. (SPA)리액트의 SPA는 Virtual DOM(버퍼 객체) 을 구성함으로써, JS로 인한 DOM의 수정 사항을 모아서 객체로 처리하다가, 마지막에 DOM을 한번만 수정하고, 그러므로 수정 시간을 단축시킨다.브라우저의 렌더링 과정HTML 을 DOM(Document Object Model)으로 변환하고, CSS를 CSSOM(CSS Object Model)로 변환한다.DO..