리액트를 공부하고 처음으로 만든 토이 프로젝트인 투 두 리스트!디자인부터 프로젝트 세팅, 기능 구현까지 하나 쉬운 것 없었지만 그래도 해내서 뿌듯하다.기술 스택: React 18, Typescript, Styled-components, MSW 주소: https://semin-97.github.io/react-to-do-list/Github: https://github.com/SEMIN-97/react-to-do-list 기능✅ 아이템 추가✅ 아이템 업데이트 ✅ 아이템 삭제✅ 다크/라이트 모드 지원Rest APIAPI통신은 MSW(Mock Service Worker)를 통해 구현하였다.아이템이 업데이트될 때 마다 List를 다시 불러오기 위해 API 호출 로직을 상위 컴포넌트에 정의하고, 메소드를 pro..
API 통신을 어떻게 구현할지 고민하던 중, 우아콘에서 봤던 MSW가 생각이 났다. MSW는 백엔드 API가 구현되기 전, 프론트에서 사용할 Mockup 용으로 주로 이용된다. MSW로 API와 통신하는 척을 할 수 있고, 요청 응답을 자유롭게 커스텀할 수 있어 이번 프로젝트에 채택하게 되었다. MSW 공식 도큐먼트와 함께 사용법을 따라가보자. 1. 설치 npm install msw --save-dev 2. 초기화 npx msw init public/ --save 브라우저에서 MSW를 사용할 수 있도록 서비스 워커를 등록하는 커맨드 `npx msw init ` public 폴더의 주소를 적어주고, `mockServiceWorker.js`를 저장하기 위해 `--save`옵션을 추가한다. 2. 핸들러 등록 ..
개요 styled-components로 정의한 font-face에서 폰트 파일을 인식하지 못하는 문제가 발생하였다. 문제가 됐던 방법과 해결 방법을 기록해 보았다. 1. font-face url에 주소 지정 import { createGlobalStyle } from 'styled-components'; export default createGlobalStyle` @font-face { font-family: 'Noto Sans KR'; font-weight: normal; font-style: normal; src: local('Noto Sans Regular'), local('NotoSans-Regular'), url('./NotoSansKR-Regular.woff') format('woff'); }..
