Enjoy Programming

nextjs를 사용하면서 img 태그를 사용하면 waning이 뜬다 next/image를 사용해달라고 nextjs는 기본적으로 이미지 최적화의 기능을 제공한다. 그 중 기본적으로 들어가는 lazy loading 기능이 있는데 참 유용하다 예를 들어 페이지를 로드하면 해당 페이지의 이미지를 전부 로딩 하는것이 아닌 viewport상에 나타는 이미지만 로드한다 그리고 로드하기전 alt를 제공해서 blur처리된 blob 이미지를 먼저 보여줌으로써 느려보이지 않게 해주고 사이트 최적화를 진행해준다. 간단히보면 next js showcase 페이지를 보자 먼저 로드된 이미지들이 있고 network를 비워줬다. 그리고 slow 3g로 변경 후 스크롤을 내려보면 그다음 보여줄 이미지를 다운로드 하기 시작하고 로드되기..

또 오랜만이다 ㅠㅠ 관세포털 개발로 시간이 안났다.. 일정 이상 끝냈기에 다시 공부를 시작하며 Database seeding 이란 것을 알게 되엇는데 잘 모르지만 다시 보기 위해 작성한다. 코드의 테스트를 위해 일정량 이상의 데이터가 필요한 경우 dummy로 데이터를 생성하는데 이를 db에 씨앗을 뿌린다는 의미로 database seeding이라고 한다. prisma 를 이용해서 seed 생성시 nextjs에서 seed.ts파일을 하나 생성 후 해당 코드를 작성해 주어서 seed를 생성해주었다. main()ㅇ함수를 실행 후 에러 제어하고 db연결 종료 실행 방법은 package.json에서 스크립트 하나 추가한다. 중요한것은 ts-node가 설치 되어 있어야한다.

-- 기록용 --- tailwind css를 사용하며 input number에 화살표를 없애고 사용하는 것을 default로 설정하고 싶어졌다. 알아보던 중 tailwind Css에서 사용자 정의 Css 규칙을 추가하는 경우 가장 쉬운 방법은 존역 css에 style을 추가하는 것이다. @layer라는 지시문을 이용해서 tailwind의 base, components, utilities 계층에 스타일을 추가할 수 있다. 이런식으로

이번에 회사에서 새롭게 들어가는 커스터피아 웹페이지 프로젝트에서는 기존에 사용했던 css in js인 styled component 를 최대한 배제 하고 utility first인 tailwind css frame work을 사용하기로 결정 되었다. (새로 사용할 stack은 nextjs & reacQuery & tailwindcss & recoil 등등이다) 뭐 순전 내가 제안한 스택들이지만 tailwindf를 사용한 계기는 이렇다. 기존 styled-component는 아주 좋았다. 솔직히 그냥 써도 무방하다. 근데 한가지 단점을 느낀게 간단한 태그 하나 추가해서 box를 잠깐 조정 해줘야 한다거나 할때 마다 css 컴포넌트를 만들어줘야 하는 단점이 있었다. 뭐 그냥 css in html로 tag하나..

project 진행중 인증 유효시간을 구현중 문제가 생겼다... 시간 state를 로컬스토리지에서 사용하려고 window.localStorage를 사용하려고 했는데 이게 왠걸 useEffect안에서는 사용이 되는데 state안에서는 사용이 안되는 것이다;;; 검색을 해보니 nextjs에서는 먼저 server side가 랜더링되고 그 이후 client side가 랜더링 된다. 당연히 server side에는 window객체가 없다. 그래서 window 나 document 객체는 componentDidMount 내에서 실행해 줘야 하는 것이었다. 그래서 useEffect에서는 발동을 하지만 먼저 선언해버리면 안되는 것이었다. 자 해결을 해보자... 여러가지 시도를 하던중.. 아직 nextjs는 제대로 문서를..

음 이번 포스팅은 react로 할지 graphql로 넣을지 고민하다가... 어짜피 apollo client의 useLazyQuery를 사용하게된게 포스팅의 주 목적이니 graphql로 섹션을 잡았다. 자 보통 버튼 클릭이 일어났을 때 api로 부터 data를 fetching 한다면 당연히 이벤트 callback에서 fetch해서 가져오면 된다 callback 밖에 있다면 버튼 클릭시가 아니라 그냥 input의 데이터가 변화되면서 재 랜더링 될때마다 계속 fetching을 하기에 불필요하다 매우! 그런데 여기서 한가지 문제가 발생했다. 지금 사용하는 useQuery의 경우 공식문서에 따르면 useQuery hook은 component가 mount && render될 때 이미 Apollo Provider가 ..