Frontend 개발자 - hyo.loui

❤️‍🔥TIL : Today I Learned Redux-Toolkit 리덕스 툴킷이란? 리덕스 툴킷은 우리가 이전에 배운 리덕스를 개량한 것으로 생각하면 된다. 리덕스를 사용하기 위해 작성했던 ducks 패턴의 요소들이 전체적인 코드의 양을 늘린다는 개발자들의 불만이 발생하기 시작했고, 리덕스 팀에서는 이것을 수용하여 코드는 더 적게, 그리고 리덕스를 더 편하게 쓰기 위한 기능들을 흡수해서 만든 것이 리덕스툴킷 이다. 줄여서 RTK 라고도 한다. 새로운 것인가? 아니다. 리덕스 툴킷은 우리가 배웠던 리덕스와 구조나 패러다임이 모두 똑같다. 즉 새로운 것이 아닙니다. 리덕스의 전체 코드의 양을 줄이기 위해 새로운 API가 추가되었고 우리가 일일히 손으로 만들어 줘야 했던 ducks 패턴의 요소들이 어느정..

❤️‍🔥TIL : Today I Learned 상태관리 도구 redux를 react에서 쉽게 사용할 수 있도록 돕는 도구(라이브러리) react-redux 다. 컴포넌트 안에 컴포넌트 안에 컴포넌트 안에 컴포넌트가 있을 때 컴포넌트들 간에 데이터를 주고 받을 때 props 로 연결해야 한다. 비유하면, props라는 전선으로 컴포넌트들을 연결한 것이라고 할 수 있다. 컴포넌트들도 블루투스나 와이파이처럼 무선으로 연결할 수 있다면 얼마나 편할까? 이를 위해서는 통신을 중계할 기지국이 필요하다. 리덕스의 스토어를 기지국으로 해서 컴포넌트들을 무선으로 연결할 수 있다면 생산성을 크게 높일 수 있다. Redux 설치, 세팅 react 프로젝트에 사용하는 패키지 npm, yarn 을 이용하여 redux, reac..

❤️‍🔥TIL : Today I Learned component에서 props 로 state 값을 전달하는 것 == 유선 연결 redux에서 관리하는 state 는 == 무선 연결 (블루투스) Prop Drilling Props Drilling은 props를 오로지 하위 컴포넌트로 전달하는 용도로만 쓰이는 컴포넌트를 거치면서 React Comoinnt트리의 한 부분에서 다른 부분으로 데이터를 전달하는 과정이다. props drilling 예시, 코드 App.jsx import React, { useState } from 'react'; import './style.css'; export default function App() { const [number, setNumber] = useState(1); ..

❤️‍🔥TIL : Today I Learned 리덕스의 정의 리덕스의 핵심요소 리덕스의 흐름 Redux 란? 프론트엔드 개발자들은 “리덕스”를 전역 상태관리 라이브러리 라고 많이 표현한다. 전역 상태, 즉 Global State를 의미하고 그것을 관리하게 도와주는 라이브러리 (패키지) 이기 때문이다. 리덕스 핵심 요소 Action: State가 변하는것. “무엇이 일어날지” Reducer: 변화를 일으키는, 즉 데이터(state)를 수정하는 함수. action을 통해 어떠한 행동을 정의했다면, 그 결과 어플리케이션의 상태가 어떻게 바뀌는지는 특정하게 되는 함수이다. Store: action과 action에 따라 상태를 수정하는 reducer를 저장하는 어플리케이션에 있는 단 하나의 객체. 스토어는 Sta..

🤢에러 내용 : Uncaught TypeError: Cannot read properties of undefined (reading 'pathname') 콘솔에 이러한 에러가 발생했다 솔루션 1 (reading 'pathname') 이 출력되어 내가 pathname 설정 했었나? 하고 프로젝트 폴더에서 검색했는데 나오지 않았다.. 솔루션 2 (reading 'pathname') 밑으로 at Router 가 출력되어 Router 컴포넌트를 찾아보기로 했다. path 를 pathname 으로 변경 해보았고 다시 Routes 와 Route 구문도 구글링하여 다시 작성했으나 효과가 없었다.. 그러던 중 export default 가 되고 있으니 import 를 따라가 보자고 생각했고 그 결과, 에러의 원인을 찾..

❤️‍🔥TIL : Today I Learned https://youtu.be/0-aYlQErLa8 작업 컴포넌트 구조 App.jsx/ pages/ Header.jsx Input.jsx TodoList.jsx App.jsx 메인이 되어 하위 컴포넌트를 모두 가지고있는 컴포넌트, 기본 state를 (데이터 테이블)갖고 있게 하여 하위 컴포넌트에 state를 props 전달하였다 (컴포넌트 폴더) pages/ Header.jsx children 활용하여 하위 컴포넌트에 text 를 내려주는 컴포넌트 Input.jsx input 박스의 변화(타이핑)를 감지하여 onChange 함수를 실행하게 하고, 감지한 값을 setState로 넣는다. 여기서 어려웠던 부분은 buttonClickSubmit 이였다. 새로고침 ..

에러 내용 VM21:1 Warning: Cannot update a component (`App`) while rendering a different component (`TodoList`). To locate the bad setState() call inside `TodoList`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render at TodoList (http://localhost:3000/static/js/bundle.js:413:5) at div at App (http://localhost:3000/static/js/bundle.js:38:76) 에러 이유 : 컴포넌트에서 호출하고 있는 setSt..

리액트 이 녀석.... 간만에 휴먼에러를 만났다 아주 간단한 코드였고, 콘솔에 에러도 안나고, 문제 없을리가 없는데 의도한 children 이 나오지를 않았다... 도대체 왜!!! 도대체 뭐가 문제일까.. 한참을 고민하던 중 수많은 에러를 겪어 많은 내공이 쌓인 '에러개발자' 분께 질문했다 역시나 겪은 에러였고ㅋㅋㅋㅋㅋㅋㅋ 자동완성으로 children 의 앞글자가 대문자 Children 으로 들어온 문제였다.... 에라잇ㅠㅠ 🎈해결 방법 : { Children } => { children } 대문자 없이 소문자로! dram26 (박다영) - velog dram26 (박다영) - velog WIL_나는 할 수 있다는 용기 투두리스트 껌이라고 생각했는데, 그거하나 제대로 못해내는 자괴감 하지만 계속해서 반복..