아 그거 뭐였지

뭐지? push가 되지않는다. 어느날과 다름없이 브랜치를 만들고 커밋을 하려는데 다음과 같이 오류가 발생했다. fatal: unable to get credential storage lock: File exists fatal: feat/notice cannot be resolved to branch. 해결방법 브랜치가 없는것도아니고 중복도아닌데 저러한 문제가 발생해서 검색을 하던중 신기한것을 발견했다. 우선 해결방법은 해당 프로젝트의 최상단에 존재하는 .git폴더로 들어가서 .git/rerfs/heads 안에있는 폴더들의 대소문자를 확인해보라는 것이였다. 본인은 feat/notice로 브랜치를 만들었지만 폴더에는 Feat 대문자로 적혀있었다. push를 할때 Git은 폴더명이 대문자인 Feat/notic..

eslint 적용후 커밋을 날리던 도중 ~ was used before it was defined no-use-before-define 라는 오류가 발생하며 커밋이 되지않았다. 2:19 error 'IProduct' was used before it was defined no-use-before-define 변수를 선언하기 전 해당 변수의 사용을 막기위한 에러이다. 문제가 됐었던 코드 function ProductList() { return ( ); } // 밑쪽에 styled-component를 작성했기때문에 eslint오류가났음 const ProductWrap = styled.div` `; const ProductName = styled.div` `; const Container = styled.di..

스마트스토어 관리툴을 제작하고있는 업무를 맡던도중 상품수정에 관련한 업무를 하고있었다. 회사 스마트스토어가 4개가 있는데 각 스토어에 중복적으로 상품들이 업로드되어있다. 같은 상품들이 업로드되어있다보니 하나의 상품을 수정하면 다른 스토어에서의 해당 상품이 수정되어야하는 귀찮은 일이 발생한것이다. 처음에는 for문으로 스토어 갯수별로 반복문을 돌아서 해결했지만, 하나의 스토어 수정이 끝나기 전까지는 다른 스토어 수정이 불가했었다. 스토어 하나당 1초가 걸린다고 가정했을때 모든 스토어를 수정하기위해서는 4초가 걸리는것이다. 상품 하나 수정하는데 4초나 걸린다니 사용자 입장에서는 답답해서 다시는 사용하지 않을것이다. 비동기함수 내에 반복되는 작업들이 병렬적으로 처리되기를 바라고있었지만, 동기적으로 실행이 되고..

상품 상세 페이지에서 상품 아이디를 query param 값으로 서버에 해당 상품을 요청해야 하는 기능을 구현하였다. query param값을 가져오는건 굉장히 간단했지만, 처음 렌더링될때 query param 값이 undefind여서 API호출을 할때 오류가 났었다. param값이 있을때에만 API호출을 할수있는 방법을 고민했다. 이전 포스팅에서 버튼을 누를때만 요청을 보낼수있게 코드를 구현한것이있다. useQuery 옵션에 refetch를 사용하였는데 코드가 불필요하게 길어지는것같아서 useQuery의 enabled옵션을 건드려보기로 했다. 먼저 query param값을 useRouter를 사용해서 가져오도록 하자. useRouter 사용 useRouter를 import 해주고 사용해주면된다. rou..

상품리스트를 가져와서 리스트만큼 map을 돌린뒤 자식컴포넌트에게 상품 객체를 던져주는 로직을 작성하고싶었다. 자바스크립트로 작성하면 그냥 넘겨주기만 하면 끝이지만 타입스크립트로 작성하려고하니 넘겨주는 타입과 받는 타입 모두 작성이 필요했다. 넘겨줄때는 어렵지않았는데 받는쪽에서 객체로 받을때 어려움을겪었다. 검색을 통해 방법을 알아내서 기록으로 남긴다. 바로 코드로 알아보자 먼저 넘겨줄 객체의 타입을 인터페이스로 정의해준다. (type이나 interface나 사용자 재량껏 사용) export interface IProduct{ id: number; productName: string; tag: string[]; price: number; salePrice: number; img: string; } 부모컴포..

삽질의 과정 (결론부터 보기) if문에 useQeury 넣어버리기 단순하게 페이지에서 GET 요청을 할때는 useQuery를 사용해서 GET요청을 하는 함수를 부르기만 하면 됐었다. 이번에는 검색 버튼을 눌렀을때만 GET요청을 하고싶어서 Enter버튼이 눌렸을때만 useQuery를 사용하면 되지 않을까 싶어서 다음과 같이 코드 작성을했었다. const productName = useRef(''); const handleKeyPress = (e: React.KeyboardEvent) => { if (e.key === 'Enter' && productName.current.length>0) { //Enter버튼을 눌렀을때에만 작동 //useQuery 커스텀훅 useSearchProducts(productNa..

처음에는 React-Material-Ui-Carousel 라이브러리를 사용해서 만들었다가 수정이 불편해서 Swiper라이브러리로 바꾸었다. 갓와이퍼;; 짱짱편하다. 해당 공식문서 예제를 보면서 참고했다. https://swiperjs.com/react Swiper React Components Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com 사용하기위해 Swiper를 설치하자. npm i swiper Carousel 캐로셀? 이 정식명칭이라고 하는데 슬라이드가 입에 붙어서 슬라이드로 설명하겠다. 슬라이드를 하기위한 영역을..

styled-component로 정의해둔 input태그의 type을 password로 바꾸려하자 오류가났다. 원인은 styled-component를 정의할때 props의 타입에 input태그의 type을 적지 않았기 때문이다. 해당 PasswordInput컴포넌트는 Input컴포넌트를 styled-component로 만들어서 사용중이였다. import Input from "../../presentational/Input"; import styled from "styled-components"; const PasswordInput = styled(Input)``; Input컴포넌트를 정의한 곳에 가보면 InputProps 타입에 type이 없어서 추가해주었다. type InputProps = { width..