Frontend 개발자 - hyo.loui

❤️‍🔥TIL : Today I Learned Redux / Recoil Redux 와 Recoil을 비교하여 설명합니다. Redux 상태 관리 개념 구조 flux패턴을 사용하여, action이 발생하면 dispatcher에 의해 store에 변경된 사항이 저장되고, 그 상태에 의해 view가 변경되는, 데이터가 한 방향으로 흐르는 구조를 갖는다. + ESLint Store: 애플리케이션의 상태를 보유하는 객체입니다. 모든 상태는 하나의 스토어에 저장됩니다. Action: 상태를 변경하기 위해 발생시키는 이벤트입니다. 액션은 객체 형태로 정의되며, 액션에는 타입과 데이터가 포함됩니다. Reducer: 액션을 처리하고 새로운 상태를 반환하는 순수 함수입니다. 액션의 타입에 따라 reducer가 처리되고, ..

❤️‍🔥TIL : Today I Learned 🤢 문제 내용 : 문제 참 많았다... 정리해 보자면 나는 게시글을 클릭 했을 때, router 가 변하며 해당 라우터에서 상세 내용(제목,내용,시간 등..)을 보여주는 페이지의 crud 기능 구현을 맡게 되었다. 문제는 이렇게 흘러갔다 해당 컴포넌트 렌더링 될 때 useLocation 사용하여 axios.get 요청 문제점 - 다른 액션 발생할 때(delete,update) 추후 데이터 수정의 어려움을 깨닫게 됨 thunk를 사용하여 detailSlice.js 생성하여 부모컴포넌트에서 onClick이 이루어 질 때 dispatch(__getDetail) 문제점 - 상세페이지에서 새로고침 하면 state 값이 리셋되어 결국 새로고침을 하면 상세페이지 내용 없..

❤️‍🔥TIL : Today I Learned 🤢 문제 내용 : 선발대 과제로 redux 만을 사용하여 흔히 아는 '투두리스트' 앱을 만들고 있던 와중에 생긴 문제였다. 스스로 하드코딩을 연습 겸 해서 코드 작성중 state로 넣은 데이터를 module에 있는 initialState로 업데이트 시켜주려고 했으나, 전달하는 데이터가 한박자 느리고 에러가 발생했다.. (28 line) setTodoForm 으로 업데이트 한 state를 (36 line) 에서 payload 로 넘겼으나 Uncaught TypeError: Cannot read properties of null (reding 'id') 아직 state가 null 이라고 한다... 에러 메세지가 해석이 가능해서 스스로 여러 시도를 해봤지만 대표적..

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

❤️‍🔥WIL: Weekly I Learned 이번 주 한 일 티스토리 포스팅 = 매일 TIL 일지 react 숙련 강의 완강 = styled component / react-redux / router react-redux 과제 - expert todo = 과제 제출 완료 Weekly review 사실 이번 한주는 만족스럽지 못했다 왜인지 모르게 집중력이 떨어지고 의욕이 충만하지 않았다 에너지가 부족해 겸 매일 저녁에 운동을 계속 했다 호기심이 왕성한 상태에서 뭔가 다른 프로젝트가 아닌 todo-list 만 몇 번을 반복하는데도 백지상태에서 내가 시작하려고하면 막상 머릿속에서 끄집어내는 데에 시간이 걸렸다.. 게다가 계속 새로운 Library를 배우는데 성격상 하나를 배울 때, 깊게 이해하려고 하다보니 ..

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

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