❗️ 문제 yarn start를 했을 때는 theme이 적용된 컴포넌트가 잘 보이는데 storybook에서는 오류가 나면서 프리뷰가 나오지 않는 문제가 있었다. ${({ theme }) => css` color: ${theme.COLOR.TEXT.WHITE}; 처음엔 theme을 잘못 설정한 줄 알고 style 쪽 코드를 계속 수정했지만 해결되지 않았다. 🔎 원인 생각해 보니 dev server에서는 잘 나오기 때문에 style 쪽 문제는 아니었다. App.tsx에서는 ThemeProvider가 사용되고 있어서 dev server에서는 문제가 없었지만, storybook에 ThemeProvider를 따로 적용해 주지 않아서 발생한 오류였다. 컴포넌트만 공유하고 번들링부터 아예 따로 동작하기 때문에 필요한..

개인 프로젝트는 CRA 없이 웹팩을 직접 설정해서 진행하기로 했습니다. 📍웹팩의 핵심 개념 Entry: 웹팩을 실행할 대상 파일. 진입점 Output: 웹팩의 결과물에 대한 정보를 입력하는 속성. 일반적으로 filename과 path를 정의 Loader: CSS, 이미지와 같은 비 자바스크립트 파일을 웹팩이 인식할 수 있게 추가한다. 로더는 오른쪽에서 왼쪽 순으로 적용 Plugin: 웹팩의 기본적인 동작에 추가적인 기능을 제공한다. 로더는 파일을 해석하고 변환하는 과정에 관여하는 반면, 플러그인은 해당 결과물의 형태를 바꾸는 역할을 한다. Resolve: 웹팩에서 모듈을 해석할 때 어떤 확장자를 사용할지를 설정한다. resolve 옵션을 설정하면, import나 require 등으로 모듈을 불러올 때 해..

❗️ 문제 로그인과 회원가입 페이지의 뷰 컴포넌트를 하나로 사용하고 있었기 때문에 폼이 submit 됐을 때 어떤 페이지에서 렌더링 된 건지에 따라서 서로 다른 API 전송 함수를 서로 다른 props로 보내서 트리거했었다. // submit 되면 실행되는 함수. const onValid = (data) => { if (signUp) { handleSignUp(data); } else { handleLogIn(data); } }; 하지만 하나의 props로 통일해도 된다고 판단했다. // submit 되면 실행되는 함수. const onValid = (data: AuthFormValues) => { handleSubmitForm(data); }; 인자에 대한 타입은 다음과 같다. export interf..

❗️ 문제 로그인, 회원가입 폼에 애니메이션을 트리거하기 위해서 만든 useRef에 타입을 줘야 했다. 본질적으로 useRef는 .current 프로퍼티에 변경 가능한 값을 담고 있는 “상자”와 같다. 처음엔 이런 형태로 타입을 부여했었다. const inputRef = useRef(null); 그런데 인풋의 ref 속성으로 부여된 useRef 값의 current에 접근할 수 없는 문제가 생겨서 그 이유를 살펴보았다. 🔎 원인 useRef 훅은 3개의 정의가 오버로딩되어 있다. 1. useRef(initialValue: T): MutableRefObject; 인자의 타입과 제네릭의 타입이 T로 일치하는 경우, MutableRefObject를 반환한다. MutableRefObject의 경우, 이름에서도 볼..

프로젝트 소개 영양제를 손쉽게 받아볼 수 있는 영양제 정기 구독 웹 서비스 프로젝트 선정 이유 평소에 자주 이용하는 제품이고 남녀노소 누구나 관심을 가질만한 분야인 영양제를 주제로 선정했다. 평범한 쇼핑몰과 차별성을 만들고 싶어서 최근 관심 있는 비즈니스 모델인 구독 기능을 도입했다. 링크 배포 링크: http://pillivery.s3-website.ap-northeast-2.amazonaws.com/ 깃허브 링크: https://github.com/codestates-seb/seb40_main_033/tree/main 개발 기간 2022.11.08 - 2022.12.07 팀 구성 Front-end 4명 Back-end 3명 기술 스택 Front-end: JavaScript, TypeScript, Re..