클론 코딩을 시작한 이유NextJS가 SSR이 가능한 React 기반의 프레임워크라는 소식을 듣고, 궁금증과 배워보고 싶은 욕구가 동시에 들었다.React 문법을 익히는 것은 물론이고 SSR도 경험해보고 싶었던 차에, 클론 코딩은 이러한 두 마리 토끼를 한 번에 잡을 수 있는 좋은 방법이라고 생각했다. 기술을 빠르게 습득하고자 했기 때문에 제대로 된 서비스를 직접 제작하고 싶었지만, 사이드 프로젝트를 진행할 시간적 여유가 없었다.그래서 부딪혀가며 빠르게 배우고자 클론 코딩을 선택하게 되었다. 여기어때를 선택한 이유웹으로 서비스하는 제품을 만들고 싶었고, 프론트/백 엔드 모두 기본적인 기능과 복잡한 로직을 함께 다루고 싶은 니즈가 있어 커머스 분야가 적절하다고 판단했다. 여기어때는 UI와 UX에 대해 많은..
리액트를 공부하고 처음으로 만든 토이 프로젝트인 투 두 리스트!디자인부터 프로젝트 세팅, 기능 구현까지 하나 쉬운 것 없었지만 그래도 해내서 뿌듯하다.기술 스택: 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'); }..
