아 그거 뭐였지

프로젝트도중 alert로 사용자에게 알림을 줬었는데 너무 예쁘지도 않고 확인버튼을 눌러야만 하는 것이 번거롭다고 생각했었다. 기왕 만드는 거 예쁜 알림창 하나 있었으면 좋겠다 싶어서 라이브러리를 찾아보았다. 라이브러리를 찾는 기준은 다음과 같았다. 1. 커스텀훅으로 뺄 수 있을 것 2. styled-component와 같이 사용해도 충돌이 일어나지 않을 것 여러 라이브러리들이 있었고 아래 라이브러리를 사용했다가 ChakraUI가 styled-component의 컨테이너명과 겹치는 바람에 사용할 수 없게 되어 https://chakra-ui.com/ Chakra UI - A simple, modular and accessible component library that gives you the buildi..

Q. 로그인된 유저는 로그인 페이지에 못오게 해주세요. 사이드 프로젝트 진행도중 로그인페이지에 로그인 되어있는 유저가 접근할때 메인페이지로 리다이렉트 시키는 기능이 필요하였다. 처음에는 useEffect로 기능을 구현해보았는데 그렇게되면 로그인페이지에 접근한 뒤에 리다이렉트가 되어버렸다. 로그인된 사용자가 로그인 페이지를 볼수있는 점에서 페이지 렌더링이 되기전에 리다이렉트를 시킬수 있는 방법을 찾아보았다. A. getServerSideProps로 리다이렉트 NextJS에서는 getServerSideProps를 사용하면 해당 페이지가 렌더링되기전에 리다이렉트를 시켜줄수있었다. 공식문서에 적혀있는걸 간략하게 보고가자. getServerSideProps는 서버 측에서만 실행되며 브라우저에서는 실행되지 않습니다..

뭐지? 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초나 걸린다니 사용자 입장에서는 답답해서 다시는 사용하지 않을것이다. 비동기함수 내에 반복되는 작업들이 병렬적으로 처리되기를 바라고있었지만, 동기적으로 실행이 되고..

서론 자바스크립트를 끄적인지 어언 2년정도 흐른것같다. 기능을 구현하는데 처음 마주했을때처럼 막연한 두려움은 많이사라졌고 대부분의 기능들을 구현하고 페이지를 제작할수있게되었다. 기능구현에 시간을 쫓기고나니 내가 정말 자바스크립트를 제대로 이해하고있는게 맞나? 라는 생각이 문득문득들었다. 그래서 자바스크립트 기본기를 다지고자 회사에서 동료와함께 자바스크립트 인강을 보며 학습하기로했다. 그중의 첫걸음인 순수함수에 대해서 알아보고자한다. 순수함수란? 들어온 인자가 같을때 항상 동일한 결과를 리턴하는 함수이다. 함수가 받은 인자외에 다른 외부에 상태에 영향을 끼치지않고 리턴값 외에는 외부와 소통하지 않는 함수이다. 어느 시점에 평가하던 동일한 결과를 리턴하는 함수이다. 말로만 들으면 감이 잘 안잡히니 순수함수와..

상품 상세 페이지에서 상품 아이디를 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; } 부모컴포..