벌써 7주차라니 믿기지 않는다. 시간이 너무 잘 간다. 이번 주에는 React Router에 대해 배우는 시간이었다. 처음엔 Vue에서 사용하는 Router와 많이 다를 것 같단 생각을 했는데 아니었다. 기본 개념과 동작방식이 매우 유사했다. 그래서인지 이해하는데 어려움이 없었다. 다만 Vue는 Vue 인스턴스에 라우터를 옵션으로 전달, React는 라우터 컴포넌트를 애플리케이션의 루트에 넣어서 사용하는 차이점이 있었다. router를 설치할 때는 개발용으로만 쓰이는 것이 아니므로 아래와 같이 입력하여 설치하면 된다. npm i react-router-dom 사용 예제 아래 참고 // React Router 예제 import React from 'react'; import { BrowserRouter a..
메가테라 프론트엔드 생존코스 6주차 회고
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..
메가테라 프론트엔드 생존코스 5주차 회고
개발 관련 책을 읽다보면 테스트 코드에 대해 매우 강조한다. 그러다보니 중요성은 알지만, Front-end에서 테스트 코드가 필요할까? 하는 의문이 생겼다. 화면에 데이터를 가져와 그려지는 것 보면서 만들다보니 잘못되면 바로 눈에 보이기 때문에 생겼다. 나는 5주차 학습을 통해 이런 의문은 가질 필요조차 없었다는 것을 깨닫는 시간이었다. 역시 사람은 배워야 한다. 5주차 내용 정리 jest, React Testing Library, MSW, Playwright 등 론트에서 사용할 수 있는 다양한 테스트 도구들이 있다. 사용할 수 있는 도구가 많으면 좋다. 도구는 사람들과 소통하기 위해 사용될 수 있다. 테스트 도구를 사용하면서 로직을 확인하고, 중복 코드를 제거하다보면 코드 만드는 연습이 되기도 한다. ..