📍Action 상태를 변화시킬 때 발생하는 객체 - 필수로 type 필드를 갖고 있어야 함 - 다른 프로퍼티 추가 가능 { type: "ADD_TODO", data: { id: 0, text: "리덕스 배우기" } } action을 반환하는 action creator 함수 형태로 만들어서 사용하면 export를 앞에 붙여 재사용할 수 있음 📍Reducer 변화를 일으키는 함수로, 2가지 매개변수롤 가짐 - state - action 전달받은 현재 state와 action으로 새로운 state 생성 const initialState = { count: 1 }; function reducer(state = initialState, action) { switch (action.type) { case "INCR..

1️⃣미들웨어 미들웨어를 사용하면 Action 객체가 Reducer에서 처리되기 전에 다양한 작업을 수행할 수 있다 - 특정 조건에 따라 액션이 무시되게 만들기 - 액션을 콘솔에 출력, 서버에 로깅 등 ⭐비동기 작업을 처리하는데 유용 2️⃣유용한 함수와 Hooks - connect 함수 : Redux의 상태 또는 Action 생성 함수롤 컴포넌트 props로 받아올 수 있음 - useSelector, useDispatch, useStore : React-redux에서 지원하는 유용한 Hooks 상태를 손쉽게 조회, Action을 쉽게 디스패치 등 - connect와 useSelector 함수는 자체적으로 memoization 동작 - 반면, Context API를 사용하면 context의 상태가 바뀌면 ..

원티드 프론트엔드 프리온보딩 (22.12.19 월 ~ 23.01.20 금) 📍의존성 특정 모듈이 동작하기 위해 다른 모듈을 필요로 하는 것 📍의존성 역전 원칙 - 유연성이 극대화된 시스템을 만들기 위한 원칙- 즉, 소스코드의 의존성이 추상에 의존하며, 구체에 의존하지 않는 것을 의미 📍추상과 구체 추상- 구체적인 구현 방법이 포함되어 있지 않은 형태- 구현해야 할 일, 이루어져야 하는 결과를 정의하는 것 구체- 해당 동작을 실질적으로 수행하기 위해 해야 하는 일련의 동작과 흐름 어플리케이션이 구체에 의존하게 되면, 구체가 변할 때마다 어플리케이션이 변화해야 하는 상황이 되어버림- 구체는 변화가 잦으므로, 가급적 구체에 의존하는 것을 최소화해야함 📍구체에 의존하는 예시 fetch("todos", { hea..

원티드 프론트엔드 프리온보딩 (22.12.19 월 ~ 23.01.20 금) 📍횡단 관심사란? - Cross-cutting concerns - 어플리케이션 내 여러 핵심 비즈니스 로직들에 걸쳐서 실행되어야 하는 동작들 예시 - 인증 & 인가 - 로깅 (로그 남기기) - 트랜잭션 처리 - 에러 처리 📍HTTP 통신에서 횡단 관심사 처리하기 - 프론트엔드에서 가장 흔하게 생각할 수 있는 횡단관심사는 인증 & 인가 - 백엔드 서버와 통신할 때 HTTP 프로토콜을 이용 - HTTP 프로토콜의 가장 큰 특징 : stateless 즉, 매번 별개의 요청으로 취급하며, 매번 header나 body에 값을 채워서 보내줘야 함 - 인증 예시 - httpClient.js class HttpClient { // 1. base..

원티드 프론트엔드 프리온보딩 (22.12.19 월 ~ 23.01.20 금) 1. 클린 코드 📍프로그램 복잡도와 개발 생산성은 반비례 - 프로그램 복잡도가 올라갈 수록 코드 작성 및 수정에 걸리는 시간이 증가 - 개발 초기 단계부터 좋은 코드를 사용하지 않으면 Snowball로 인해 개발 생산성 악화에 Drive - 그럼 좋은 코드란? 2. 관심사의 분리(Seperation of Concerns), SoC 📍관심사란? 하나의 모듈이 수행하고자 하는 목적 (모듈 : 함수, 클래스 등의 단위) - 관심사의 분리란, 각 모듈들이 하나의 관심사만 처리하도록 모듈을 분리하는 것 📍관심사를 분리하는 이유? - 소프트웨어의 특정 부분이 변경되는 이유를 한가지로 제한하기 위해 - 소프트웨어는 유지보수(기존의 기능을 수정..

원티드 프론트엔드 프리온보딩 (22.12.19 월 ~ 23.01.20 금) 1. useEffect useEffect에서 의존성 배열 자세히 살펴보기 📍의존성 배열이란? 의존성이란? - A라는 요소가 온전히 동작하기 위해서 B, C 등의 다른 요소들을 필요로 한다면 - A는 B, C 등에 의존하고 있다고 표현 ⭐B, C 등이 A의 의존성이 된다 useEffect 의 의존성 배열 - effect 함수가 사용(의존하고 있는) 외부 값들의 모음 📍의존성 관점에서 useEffect 제대로 사용하기 ⭐가능한 의존성 적게 만들기 ⭐setState 함수도 의존성 배열에 넣어야 - bad // 많은 의존성 사용 function App() { const [count, setCount] = useState(0); useEf..