본문 바로가기

TIL

 (95)
TIL - React와 Redux를 사용한 메모 앱 구현 오늘은 Mac 기본 메모 앱을 참고하여 React와 Redux를 사용한 메모 앱을 구현했습니다. 주요 기능은 다음과 같습니다메모의 CRUD 기능: 메모 추가(Create), 삭제(Delete), 수정(Update), 선택(Read) 기능메모 항목 시간 순 정렬: 메모 리스트를 Date()객체를 활용해서 최신 순으로 정렬메모 리스트 제목과 메모 내용 연동: 메모를 수정하면 사이드바에 메모 리스트의 메모 제목이 같이 수정주요 구현 내용 Redux를 사용한 상태 관리memo.reducer.js에서 메모와 관련된 상태를 관리하는 리듀서를 작성했습니다.메모의 추가, 삭제, 수정, 선택 기능을 위한 액션과 액션 크리에이터를 정의했습니다.로컬 스토리지를 사용하여 메모 데이터를 저장하고 불러왔습니다.Router 설정:..
TIL - 리액트로 가계부 만들기 - 3 목표alert창, confirm창 모달창으로 변경메인 페이지 그래프 컴포넌트 추가 가계부 항목 정렬순으로 표시주요 학습 내용모달창 상태 Redux 활용해서 저장소에서 관리styled-components 활용해서 총 지출 그래프 구현useState와 switch 문 활용해서 항목 정렬1. 모달창 상태 Redux 활용해서 저장소에서 관리src└── assets └── components └── Modal ├── AlertModal.jsx ├── ConfirmModal.jsx └── Modal.styled.js Alert 창과 Confirm 창을 모달 창으로 구현하고, styled-components를 사용하여 스타일링했습니다. //..
Redux - 비동기 처리 createAsyncThunk createAsyncThunk | Redux Toolkit redux-toolkit.js.org   개요Redux Toolkit의 createAsyncThunk는 Redux 액션 타입 문자열과 프로미스를 반환하는 콜백 함수를 받아들이는 함수입니다. 제공된 액션 타입 접두사를 기준으로 프로미스 생명주기 액션 타입을 생성하며, 프로미스 콜백을 실행하고 반환된 프로미스에 따라 생명주기 액션을 디스패치하는 thunk 액션 생성기를 반환합니다. 이는 비동기 요청 생명주기를 처리하는 표준 권장 접근 방식을 추상화합니다. createAsyncThunk는 어떤 데이터를 가져오고 있는지, 로딩 상태를 어떻게 추적할지, 반환된 데이터를 어떻게 처리할지 알 수 없으므로 리듀서 함수를 생성하지 않습니다. 이러한 액션을 처리하..
TIL - 리액트로 가계부 만들기 - 2 오늘은 리액트를 활용하여 가계부 프로젝트를 계속 진행했습니다. CRUD 기능을 완성하고, 상태 관리를 리팩토링하면서 주요 학습 내용과 작업 과정을 정리했습니다. 목표CRUD 기능 완성상태 관리 props drilling에서 useContext로 리팩토링Redux를 활용해서 상태 관리 리팩토링주요 학습 내용Update와 Delete 기능 구현useContext로 상태 관리 리팩토링Redux를 사용한 상태 관리 리팩토링1. Update와 Delete 기능 구현// expense 항목 Update 기능const updateExpense = (targetExpense, modifiedExpense) => { const updatedData = fetchedData.map((expense) => expen..
TIL - 리액트로 가계부 만들기 - 1 오늘은 리액트를 활용하여 가계부 만들기 프로젝트를 진행했습니다.목표CRUD가 가능한 가계부 만들기처음에는 props drilling를 경험두 번째는 useContext로 리팩토링마지막은 Redux를 활용하여 리팩토링해서 완성여기서 props drilling이란, 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달할 때, 여러 중첩된 컴포넌트를 통해 props를 계속 전달해야 하는 상황을 말합니다.props drilling의 단점가독성 저하: 데이터가 여러 컴포넌트를 통해 전달되므로, 코드가 복잡해지고 가독성이 떨어집니다.유지보수 어려움: 컴포넌트 계층 구조가 변경될 때마다, 모든 중간 컴포넌트의 props를 업데이트해야 하므로 유지보수가 어렵습니다.불필요한 렌더링: 모든 중간 컴포넌트가 다시 렌더링될 수 있어..
TIL - [React] 리렌더링 동작을 제어하는 역할 useEffect, useRef 오늘은 useEffect와 useRef는 리렌더링 동작을 제어하는 역할을 하는 훅인데 어떤 상황에서 써야 하는지 자세히 알아봤습니다.  useEffectuseEffect 훅은 함수 컴포넌트에서 사이드 이펙트를 수행하기 위해 사용됩니다. 사용 하는 경우데이터 페칭: 컴포넌트가 마운트 될 때 서버로부터 데이터를 가져오는 경우구독/해제: 웹 소켓이나 이벤트 리스너를 설정하고 정리하는 경우DOM 업데이트: 특정 DOM 요소의 속성을 직접 변경하는 경우타이머 설정: setTimeout, setInterval과 같이 타이머를 설정하는 경우useEffect는 컴포넌트가 마운트 될 때와 의존성 배열에 있는 값이 변경될 때 마다 실행되고 클린업 함수가 포함되어 있는 경우 컴포넌트가 언마운트 되거나 의존성이 변경되기 전에..
TIL - 리액트 컴포넌트 파일 구조 및 상태 업데이트 방식 개선 오늘은 개인 과제로 제출한 투두 리스트를 보완해서 재제출해야 했습니다. 튜터님의 해설 영상을 보고 제가 작성한 코드와의 차이점을 발견했으며, 컴포넌트 파일의 모듈화 및 캡슐화, 그리고 상태 업데이트 방식에 차이가 있는 것을 알게 되었습니다.컴포넌트 파일 구조 개선기존의 파일은 src 안에 TodoForm.jsx, TodoItem.jsx, TodoSection.jsx 등 파일들이 하나의 src 레포지토리에 있었습니다. 튜터님들은 components 폴더를 만들어서 관리하는 것을 보고 다음과 같이 개선했습니다:src/components/TodoFormindex.jsTodoForm.jsxTodoForm.csssrc/components/TodoItemindex.jsTodoItem.jsxTodoItem.csssr..
TIL - 이벤트 핸들러 연습 React 수업 과제에서 개인 과제로 "피카츄 놀이터 만들기"를 받았는데 이 과제는 이벤트 핸들러를 연습하는 과제였습니다.배경이 있고 피카츄가 그 배경에 키다운으로 위치를 이동하는 것이고 맵 크기는 10*10, 점프 기능 구현을 해야 해서 그리드로 배경이미지를 입혀서 컴포넌트 맵을 만드는 방법으로 생각했습니다.// App.jsximport "./App.css";import Map from "./components/Map";function App() { const MAP_WIDTH = 10; const MAP_HEIGHT = 10; const TILE_SIZE = 50; return ( );}export default App;// Map.jsxim..

티스토리툴바