본문 바로가기

전체 글77

[TIL 2023.07.03] Redux란 무엇인가 💻오늘 배운 내용 Redux란 무엇인가 Redux를 주로 사용하면서 과제나 프로젝트를 진행하고 있는데 아직도 개념이 제대로 잡힌 것 같지 않아서 다시 한번 정리 하는 시간을 가져봤다. 리덕스의 구성요소 Store : 모든 전역 state들을 관리하는 단 하나의 상태 저장소 (→ 단 하나의 객체) store: { todos, auth } store 내부의 리듀서들로부터 각각 최신 상태를 제공받는다. Reducer : state 변경 함수 매개변수로 기존상태와 액션객체를 받음 상태 변경 후 최신 상태를 Store에 제공 (리턴) Action : { type, payload } 형태의 객체 리듀서 함수에게 전달되는 인자 리듀서에게 요구할 상태변경 작업에 대한 정의를 나타내는 객체 (상태 변경 요청서) type.. 2023. 7. 3.
[WIL 2023.06.25] 내배캠 6주차 📝 Situation(상황): 이번주 목표 Styled Components를 배워보고, 활용할 수 있다. 콜백, promise, async/await 차이를 설명할 수 있다. 이들을 활용해 코드를 구현할 수 있다. 리덕스를 사용한 전역 상태 관리를 자유롭게 활용할 수 있으며 전역 상태의 필요성을 설명할 수 있다. React-router-dom의 핵심 개념과 관련 hooks에 대해 이해할 수 있다. Dynamic route 기법과 useParam hook을 이용하여 동적 라우팅을 구현할 수 있다. 👀 Task(임무): situation 중 문제들 이전에 만들었던 Todo List에 1. 설정했던 state를 develop해서 Redux를 이용한 전역 데이터로 관리해보기 2. React Router Dom을.. 2023. 6. 25.
[TIL 2023.06.23] React Router Dom (hooks, Dynamic route, useParam) 💻오늘 배운 내용 React Router Dom 페이지를 구현할 수 있게 해주는 패키지 (여러 페이지를 가진 웹을 만들 수 있게 된다) 패키지 설치 yarn add react-router-dom react-router-dom 사용순서 페이지 컴포넌트 생성 Router.js 생성 및 router 설정 코드 작성 App.js에 import 및 적용 페이지 이동 테스트 // Router.js 파일 예시 import React from "react"; // 1. react-router-dom을 사용하기 위해서 아래 API들을 import. import { BrowserRouter, Route, Routes } from "react-router-dom"; // 2. Router 라는 함수를 만들고 아래와 같이 작.. 2023. 6. 23.
[TIL 2023.06.22] Redux에 대하여 2 (Action Creator, Payload, useDispatch, Ducks 패턴) 💻오늘 배운 내용 Action Creator 'todos' 라는 모듈이 하나 있다고 치자. 액션객체의 value를 변경할 일이 생긴다면? 만약에 프로젝트 규모가 굉장히 커서 수정할 곳이 100군데라면? // Action value const ADD_TODO = 'todos/ADD_TODO'; // Action Creator export const addTodo = (payload) => { return { type: ADD_TODO, payload, }; }; const initialState = { todos: [], }; const todos = (state = initialState, action) => { switch (action.type) { case ADD_TODO: return { todo.. 2023. 6. 23.
[TIL 2023.06.21] Redux에 대하여 1 (개념 및 초기셋팅~Module 만들기 및 스토어에 연결) 💻오늘 배운 내용 1] Redux 전역 상태관리 라이브러리 “중앙 state 관리소”를 사용할 수 있게 도와주는 패키지이다. useState로 생성한 State는 Local State이고, 리덕스에서 생성한 State는 Global State라고한다. useState로 상태를 관리한 경우, 어떤 State를 컴포넌트 간에 공유하고자 할때 반드시 부모에서 자식으로 한방향 정보전달만 가능했기 때문에 중간에 불필요한 과정이 발생하기도 했다.(props drilling) 따라서 리덕스는 useState를 통해 상태를 관리했을 때 발생하는 이러 불편함을 일부 해소시켜준다. 동작원리 리덕스의 동작원리는 액션, 디스패치, 리듀서로 이루어진다. Action type 필드를 가진 자바스크립트 객체다. 쉽게 생각해서, 어.. 2023. 6. 22.
[TIL 2023.06.20] React Hooks useContext / useCallback / useMemo 💻오늘 배운 내용 useContext 전역 데이터를 관리하는 api createContext : context 생성 Consumer : context 변화 감지 Provider : context 전달(to 하위 컴포넌트) 1. context 폴더 > FamilyContext.js 생성 import { createContext } from "react"; // 여기서 null은 초기값 export const FamilyContext = createContext(null); 2. props를 가장 처음 전달하던 컴포넌트에서 FamilyContext를 import해주고 자식컴포넌트를 로 감싸준다. 이때 전달할 데이터를 객체 형태로 전달한다. import React from "react"; import Fath.. 2023. 6. 21.
[TIL 2023.06.19] React Styled components / useEffect / useRef 💻오늘 배운 내용 Styled components CSS-in-JS 방식으로 컴포넌트를 꾸밀 수 있게 도와주는 패키지 vscode-styled-components extension 설치 설치 후 터미널에서 명령어 실행 yarn add styled-components 컴포넌트에 import 해서 사용한다 import styled from "styled-components"; 사용예시) const StBox = styled.div` width: 100px; height: 100px; border: 1px solid red; margin: 20px; `; const App = () => { return 박스; }; export default App; 이 또한 자바스크립트이기 때문에 스타일 코드를 JS코드 작성.. 2023. 6. 20.
[WIL 2023.06.18] 내배캠 5주차 📝 Situation(상황): 이번주 목표 ES6 문법을 습득하였고 리액트 컴포넌트 안에서 map, filter를 활용할 수 있다. 모던 웹에서 리액트가 탄생한 배경을 알고 화면 내에서 재사용 가능한 컴포넌트 단위를 나눌 수 있다. 불변성을 지켜야 하는 이유를 이해하고 있으며 props, state를 활용해 함수를 전달할 수 있다. 리액트 입문강의를 활용해 투두리스트 페이지 만들어보기. 👀 Task(임무): situation 중 문제들 완료 취소 간 상호이동 id 값의 중복 input validation 적용 컴포넌트 분리 🔍 Action(접근방법): 해결시도 todoUpdateClickBtn(item.id)} > 완료 객체의 id값을 가져와서 const todoUpdateClickBtn = (id) =.. 2023. 6. 19.
[TIL 2023.06.16] 후발대 과제 / React counter app 만들기 💻오늘 배운 내용 live share를 이용한 코드리뷰 그동안 조원끼리 코드리뷰를 하면 리뷰를 하는 사람이 화면 공유를 하고 나머지 사람들은 화면을 보고있는 상태에서 리뷰 하는 사람은 자신이 쓴 코드의 로직에 대해 쭉~읽어내려가며 설명하는 방식으로 했었다. 그런데 이렇게 하면 코드가 눈에 잘 안 들어오고 이해가 안되는 부분이 있으면 그냥 넘어가게 된다. 오늘 조원 중 한분이 새로운 방법을 알려주셨는데 VScode extension 중 하나인 live share를 이용하는 것 이렇게 하면 공유받은 코드를 같이 보면서 주석을 달거나 질문도 자유롭게 하면서 좀 더 쌍방향의 코드리뷰가 가능하다. 역시 아는만큼 보인다고.. 그동안 나는 너무나 원시인이었던 것. 이렇게 같이 코드를 보면서 서로 리뷰를 하고 부족한 .. 2023. 6. 19.
[TIL 2023.06.15] React 프로젝트 GitHub Pages 배포하기 / 컴포넌트 분리하기 💻오늘 배운 내용 React 프로젝트를 GitHub Page로 배포하기 리액트를 쓸 때 CRA(Create-React-App)을 설치해서 사용 하는데 이렇게 하면 깃허브 페이지가 호스팅 되지 않는다. 아마도 페이지 주소를 열면 Readme를 만나는 당혹스러움을 경험했을것.. github pages로 web을 deploy했을 때 가장 기본으로 나오는 메인 페이지는 자동으로 repository의 가장 상단에 있는 index.html을 기준으로 하는데 CRA에서 index.html은 public 폴더 안에 있기 때문 >> 그래서 React 프로젝트를 GitHub Pages로 배포하기 위해서는 몇가지 작업이 필요하다. 구글에 방법이 여러가지 있었지만 난 간편한게 가장 좋기 때문에.. 비교적 제일 덜 복잡하고 빨.. 2023. 6. 16.
[TIL 2023.06.14] React로 Todo list 만들어 보기 ❓발생한 이슈/고민 CRA 설치 후 나만의 투두리스트를 만들어 보았다. [1] 완료 취소 간 상호이동 working 항목의 완료 버튼을 클릭 하면 done 으로 내려오게 하고 싶다. done 항목의 취소를 누르면 다시 working쪽으로.. [2] id 값의 중복 삭제를 누르면 해당 항목이 아닌 다른 항목이 삭제되고, 또 여러개가 갑자기 중복되어 생성되거나 삭제 버튼을 눌러도 삭제가 되지 않는 이슈 발생 삭제되고 생성되면서 id값의 중복으로 인한 문제였다. [3] input validation input에 값이 없는 경우 submit이 되지 않도록 validation 적용이 필요 💡해결과정 [1] 완료 취소 간 상호이동 //투두 완료&취소 버튼 함수 const todoUpdateClickBtn = () .. 2023. 6. 15.
[TIL 2023.06.13] React 불변성/Rendering/counter 프로그램 만들어 보기 💻오늘 배운 내용 불변성 불변성이란 메모리에 있는 값을 변경할 수 없는 것 숫자, 문자열 등 원시 데이터 = 불변성이 있다 객체, 배열, 함수 = 불변성 없다 그 이유는 원시데이터: 수정을 했을 때 메모리에 저장된 값 자체는 바꿀 수 없고, 새로운 메모리 저장공간에 새로운 값을 저장 원시데이터가 아닌 데이터: 수정했을 때 기존에 저장되어 있던 메모리 저장공간의 값 자체를 바꿔버린다. 리액트에서 데이터의 불변성을 지켜주는 것이 중요한 이유 리액트에서는 화면을 리렌더링 할지 말지 결정할 때 state의 변화를 확인한다. state가 변했는지 변하지 않았는지 확인하는 방법이 state의 변화 전, 후의 메모리 주소를 비교 따라서, setState 할 때 불변성을 지켜주기 위해, 직접 수정을 가하지 않고 전개 .. 2023. 6. 14.

티스토리툴바