본문 바로가기

전체보기335

22.07.06_TIL 📌 Redux 상태 관리 라이브러리를 실습하는 날이다. 어제는 prop를 남발하여 prop drilling이 생겼다는 것을 알 수 있었다. 하지만 React-Redux를 사용하게 될 경우 store(상태 저장소)에서 상태를 관리(갱신, 수정, 삭제 등)를 하고 있기때문에 위의 문제점을 해결할 수 있다는 것을 알았고, Redux를 실제로 사용해보며 손에 익힐 수 있는 시간이 되었다!! 📗 오늘 학습한 내용 Redux 상태 관리 라이브러리 (React 없이도 사용 가능) 컴포넌트와 상태를 분리하는 패턴 상태 변경 로직을 컴포넌트로부터 분리하여 단순한 함수 컴포넌트를 만들 수 있게 해준다. Redux를 사용하는 이유 모든 컴포넌트에서 prop 없이 state를 직접 꺼낼 수 있다. 상위 컴포넌트에서 하위 컴포.. 2022. 7. 6.
22.07.05_TIL 📌 오늘도 어제와 같이 너무 너무 더운날이다!! 하지만 에어컨과 함께라면 공부하는데 전혀 지장이 없다 😀 😀 오늘은 Redux를 배우기전에 상태관리를 왜 하는지 학습하고 Redux를 미리 학습해볼 예정이다.(이미 학습 해본건 안비밀) 📗 오늘 학습한 내용 프론트엔드 개발 상태관리 상태: UI에 동적으로 표현될 데이터(변하는 데이터) Side Effect: 함수(컴포넌트)의 입력 외에도 함수의 결과에 영향을 미치는 요인 대표적인 예: 네트워크 요청 (백엔드 API 요청) 로컬: 특정 컴포넌트 안에서만 관리되는 상태 다른 컴포넌트와 데이터를 공유하지 않는 폼 데이터 (input box, select box 등) 전역: 프로덕트 전체 혹은 여러 컴포넌트에서 관리되는 상태 다른 컴포넌트와 상태를 공유하고 영향을.. 2022. 7. 5.
22.07.04_TIL 📌 React에서 사용하는 styled component를 더욱 잘 사용할 수 있게 되었고, UI 패턴 구현을 할 수 있고 어떤 형식으로 이루어지는지 잘 알 수 있는 시간이었습니다. 📗 오늘 학습한 내용 Styled Component를 사용한 UI 패턴 구현 Autocomplete Component (자동완성 구현) ClickToEdit Component (input focus 구현) stopPropagation 이벤트 버블링을 해결 할 수 있다. 인벤트 버블링: 자식 태그를 감싸고 있는 부모 태그를 클릭 시 자식 태그도 이벤트에 반응하게 되는 현상. 📘 추가로 공부할 내용 [udemy] React 완벽 가이드 강의 보기 (매일 조금씩 이라도 꾸준히 듣기) 📝 중요한 내용 useRef Styled Com.. 2022. 7. 4.
[Redux] Redux? Redux? Redux는 전역 상태 관리 라이브러리이다. Redux와 같은 라이브러리로는 Mobx, Recoil, Ovemind.js가 있다. 가장 많이 사용되는 것은 Redux이며, 다음으로 Mobx가 있었는데 Recoil이 등장하면서 점점 사용율이 밀리는 추세이다. Redux를 사용하는 이유 1. 모든 컴포넌트가 props 없이 state를 직접 꺼낼 수 있다. 상위 컴포넌트에서 하위 컴포넌트로 state를 넘겨야 하는 데 하위 컴포넌트가 너무 많을 경우 사용 state를 보관하는 파일을 하나 만들어서 state를 다 보관하여 모든 컴포넌트들이 props 없이 꺼내서 쓸 수 있다. 2. 상태(state) 관리하기 용이하다. 모든 컴포넌트에서 state를 변경하기 시작할 경우 버그가 생기면 모든 컴포넌.. 2022. 7. 1.
22.07.01_TIL 📌 오늘은 스터디원과 페어가 되었다!!! 조금은 편안하게 페어활동을 할 수 있을 것 같다!! 내가 잘 하지 못하는 css의 영역이기 때문에 이전날 css를 최대한 공부해서 다행이다...😀 📗 오늘 학습한 내용 Styled Component를 사용한 UI 패턴 구현 Modal 구현 Toggle 구현 Tab 구현 Tag 구현 [udemy] React 완벽 가이드 강의 className도 prop으로 넘겨줄 수 있다. 📘 추가로 공부할 내용 [udemy] React 완벽 가이드 강의 보기 (매일 조금씩 이라도 꾸준히 듣기) 📝 중요한 내용 Styled Component 사용 ``(백틱)으로 감싼다. 2022. 7. 1.
22.06.30_TIL 📌 CDD에 대해서 학습하는 날이다.. 요즘 비가와서 그런지 기분이 한층 다운된 상태로 유지하고 있다... 조금 더 힘내서 기운을 되찾아서 열심히 해보자!!! 📗 오늘 학습한 내용 CDD (Component Driven Development) 기획자가 이전에 요청 받았던 기능을 똑같이 사용하도록 요청했다. 이때, 팀에서 같은 UI 컴포넌트를 공유한다면 고민하지 않고 컴포넌트를 재새용 할 수 있는 방법론이 CDD이다. 부품 단위로 UI 컴포넌트를 만들어 나가는 개발을 하는 것. CSS in JS 프로젝트의 규모나 복잡도가 점점 커지고 함께 작업할 팀원 수도 많아지면서 CSS를 작성하는 일관된 패턴이 없어서 효율적으로 작업하기 위해 구조화된 CSS가 필요해졌다. 위의 문제점을 해결하기 위해 나온것이 CSS .. 2022. 6. 30.

티스토리툴바