개발냥발

6주차는 상태관리에 배우는 시간이었다. 상태관리 라이브러리 중 리덕스가 있다. 리덕스는 애플리케이션의 상태를 중앙 집중식 스토어에서 관리할 수 있어, 다양한 컴포넌트 간에 상태를 일관되게 공유하고 관리할 수 있다. import { createStore } from 'redux'; // 리듀서 함수 정의 function counter(state = 0, action) { switch (action.type) { case 'INCREMENT': return state + 1; case 'DECREMENT': return state - 1; default: return state; } } // 스토어 생성 const store = createStore(counter); // 현재 상태 출력 console.lo..

개발 관련 책을 읽다보면 테스트 코드에 대해 매우 강조한다. 그러다보니 중요성은 알지만, Front-end에서 테스트 코드가 필요할까? 하는 의문이 생겼다. 화면에 데이터를 가져와 그려지는 것 보면서 만들다보니 잘못되면 바로 눈에 보이기 때문에 생겼다. 나는 5주차 학습을 통해 이런 의문은 가질 필요조차 없었다는 것을 깨닫는 시간이었다. 역시 사람은 배워야 한다. 5주차 내용 정리 jest, React Testing Library, MSW, Playwright 등 론트에서 사용할 수 있는 다양한 테스트 도구들이 있다. 사용할 수 있는 도구가 많으면 좋다. 도구는 사람들과 소통하기 위해 사용될 수 있다. 테스트 도구를 사용하면서 로직을 확인하고, 중복 코드를 제거하다보면 코드 만드는 연습이 되기도 한다. ..

3주차에 이어 늦은 4주차 회고록을 작성해본다. 4주차에서는 Hooks에 대해 공부하는 시간이었다. Hooks란 무엇인가? 간단히 설명하자면, 함수 컴포넌트 내에서 state와 lifecycle 기능을 hook(함수 컴포넌트에서 React의 고급 기능을 끌어다 쓸(hook into) 수 있게 해주는 도구 )할 수 있게 해준다. hooks에는 useState, useEffect, useRef 등이 있다. useState : 함수 컴포넌트에서 state를 관리할 수 있다. const [count, setCount] = useState(0); count는 state의 값을 갖고 있고, setCount는 setter 함수로 state를 변화시키기 위한 함수이다.counst의 값을 변경해주고자 한다면 setCou..