patchnotes

1. 데이터 배열 관리: filter와 splice의 차이점JavaScript에서 배열 데이터를 조작할 때 filter와 splice는 특정 요소를 제거하는 데 사용될 수 있지만, 동작 방식과 원본 배열에 미치는 영향에서 근본적인 차이가 있다. 특히 React와 Redux 환경에서는 이 차이를 이해하는 것이 매우 중요하다.1.1 filter정의: filter 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열을 생성하여 반환한다.특징 (불변성 유지): 원본 배열을 직접 수정하지 않고(Non-destructive), 조건에 맞는 요소로만 구성된 복사본을 반환한다.프로젝트 적용 예시 (boardsSlice.ts): 게시판을 삭제하는 리듀서 로직에서 filter는 불변성을 유지하며 상태를 ..

1. 핵심 파일 및 역할App.tsx:사용자의 상호작용을 처리하는 최상위 컴포넌트이다. 삭제 버튼의 이벤트 핸들러(handleDeleteBoard)를 포함하며, Redux 상태 변화에 따라 UI를 렌더링하는 역할을 담당한다.store/slices/boardsSlice.ts:게시판과 관련된 Redux 상태 로직을 관리하는 슬라이스(Slice)이다. deleteBoard 액션과 해당 리듀서를 정의하여 실제 상태(state)에서 게시판을 제거하는 역할을 수행한다.2. 실행 흐름 (Execution Flow)게시판 삭제 기능은 다음의 순서로 실행된다.2.1. 사용자 입력 (User Input)사용자가 UI의 "게시판 삭제" 버튼을 클릭한다.이 버튼에는 onClick 이벤트에 handleDeleteBoard 함수..

1. 핵심 공통점: 전역 상태 관리Redux와 Recoil의 가장 핵심적인 공통점은 변수를 전역 상태(Global State)로 관리할 수 있다는 점이다.두 라이브러리 모두 애플리케이션의 특정 데이터를 특정 컴포넌트에 종속시키지 않고, 애플리케이션의 어느 곳에서든 해당 데이터를 공유하고 접근할 수 있게 만든다. 이를 통해 컴포넌트 계층 구조가 깊어질 때 발생하는 'Props Drilling' 문제를 해결하고, 상태 관리의 복잡성을 줄인다.전역 상태 관리: 데이터를 애플리케이션 전체에서 접근 가능한 공간에 둔다.구독(Subscription) 모델: 상태가 변경되면, 해당 상태를 구독하고 있는 컴포넌트들이 자동으로 리렌더링(re-rendering)된다.2. 주요 차이점두 라이브러리는 '어떻게' 상태를 관리하..

1. 개념 비교: 일반 Props와 Redux의 혁신적인 차이1.1. 일반 Props의 개념과 한계Props란 무엇인가?React의 기본 데이터 전달 방식으로, 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 역할을 한다.단방향(One-way) 데이터 흐름을 따르며, 데이터가 "계층 구조" 속에서 위에서 아래로 흐른다.장점심플하고 직관적이며, 작은 규모의 애플리케이션에 적합하다."상태(State)가 특정 부모와 자식 컴포넌트 안에서만 머무는 경우" 필요한 도구를 추가하지 않아도 구현이 가능하다.한계Props Drilling 문제: 계층 구조가 깊을수록, 특정 자식 컴포넌트에 데이터를 전달하기 위해 중간의 부모 컴포넌트들에도 불필요하게 데이터를 전달해야 한다. (예: A → B → C → D)데이터 수..

1. @vanilla-extract/css 라이브러리 설명 및 활용1.1. @vanilla-extract/css란 무엇인가?@vanilla-extract/css는 'Zero-runtime CSS-in-JS' 라이브러리이다. 이는 스타일을 TypeScript(또는 JavaScript) 코드로 작성하지만, 빌드 시점에 정적인 CSS 파일로 완벽하게 추출된다는 의미이다. 다른 CSS-in-JS 라이브러리(예: styled-components)가 런타임에 스타일을 생성하는 것과 달리, @vanilla-extract/css는 런타임에 스타일 관련 코드를 남기지 않아 성능상 이점을 가진다.주요 특징:타입 안전성: 모든 스타일이 TypeScript로 작성되므로, 변수나 속성 이름에서 오타가 발생하면 빌드 시점에 오류..

** Redux Toolkit을 사용한 상태 관리 구조**이번 프로젝트는 Redux Toolkit을 사용하여 애플리케이션의 상태를 효율적으로 관리한다2.1. ~Slice.ts 파일들 (boardsSlice, loggerSlice, modalSlice)역할: 애플리케이션의 상태를 기능 단위로 분할하여 관리하는 'Slice(슬라이스)' 를 정의한다. 각 Slice는 특정 도메인의 상태(State), 리듀서(Reducer), 액션(Action)을 하나로 묶어 관리하는 것이다.boardsSlice: 게시판(Board), 리스트(List), 태스크(Task)와 같은 핵심 데이터를 관리한다.loggerSlice: 애플리케이션 내의 사용자 활동 로그를 저장한다.modalSlice: 모달창의 상태와 모달에 표시될 데이..

1. Props의 정의Props(프롭스)는 'properties'의 줄임말로, React 컴포넌트 간에 데이터를 전달하기 위해 사용되는 메커니즘이다. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용되며, 자식 컴포넌트는 이 props를 받아 화면에 렌더링하거나 다른 로직을 처리하는 데 사용한다.2. Props의 특징Props의 가장 큰 특징은 읽기 전용(read-only)이라는 점이다. 즉, 자식 컴포넌트는 전달받은 props를 직접 수정할 수 없다. 데이터의 흐름은 항상 부모에서 자식으로 향하는 단방향(top-down)이며, props의 불변성(immutability)은 React 애플리케이션의 데이터 흐름을 예측 가능하고 안정적으로 만드는 데 기여한다.3. Props의 메모리 저장 위치와 ..

1. 클래스형 컴포넌트 (Class Component)클래스형 컴포넌트는 ES6의 class 문법을 사용하여 정의하는 컴포넌트이다. 리액트의 React.Component를 상속받아 구현하며, 과거 리액트에서 상태 관리와 생명주기(Lifecycle) 기능을 사용하기 위한 표준적인 방법이었다.특징: constructor에서 this.state를 통해 컴포넌트의 상태(State)를 초기화한다.componentDidMount, componentDidUpdate, componentWillUnmount와 같은 생명주기 메서드를 사용하여 특정 시점에 코드를 실행할 수 있다.render() 메서드에서 렌더링할 JSX를 반환한다.컴포넌트의 상태와 메서드에 접근할 때 this 키워드를 사용해야 한다.예시 코드:impor..

1. 리액트 소개리액트(React)는 페이스북(현 Meta)에서 개발한 사용자 인터페이스(UI)를 구축하기 위한 자바스크립트 라이브러리이다. 웹뿐만 아니라, 리액트 네이티브(React Native)를 통해 모바일 앱 인터페이스까지 구축할 수 있다.프레임워크가 아닌 라이브러리인 이유리액트는 종종 프레임워크로 오해받지만, 스스로를 라이브러리라고 정의한다. 그 이유는 다음과 같다.최소한의 기능만 내장: 리액트는 UI를 렌더링하고 상태를 관리하는 핵심 기능에만 집중한다. 라우팅(화면 전환), 전역 상태 관리, 데이터 통신과 같은 필수적인 기능들은 내장되어 있지 않아 React Router, Redux, Axios와 같은 서드파티(Third-party) 라이브러리에 의존해야 한다.높은 자유도와 책임: 프레임워크는..

1. 리터럴 타입 (Literal Types)리터럴 타입은 특정 값 자체를 타입으로 사용하는 것이다. 이는 변수에 할당될 수 있는 값을 정확히 지정하여, 코드의 안정성을 높이는 데 사용된다.문자열 리터럴지정된 문자열 값만 허용하는 타입이다.let userRole: 'admin' | 'user';userRole = 'admin'; // ouserRole = 'guest'; // error: 'admin' 또는 'user'만 할당 가능하다.숫자 리터럴지정된 숫자 값만 허용하는 타입이다.let httpStatusCode: 200 | 404 | 500;httpStatusCode = 404; // ohttpStatusCode = 301; // error: 200, 404, 500만 할당 가능하다.Boolean 리..