seopport.log

반응형 css를 구현하는 도중 스타일이 안먹히는 문제가 있었다.@media (max-width: 500px) { .embla__dot { background-color: transparent; cursor: pointer; position: relative; padding: 0; outline: 0; border: 0; width: 20px; height: 20px; margin-right: 7.5px; margin-left: 7.5px; display: flex; align-items: center; }}max-width로 500이하 일때 w, h를 20px로 설정해놨는데,아무리 화면을 줄여도 미디어 쿼리가 안먹고 w, h가 40px로..

문제 상황 개발 과정에서 특정 클래스 정보와 관련된 다양한 필터링을 중첩해서 사용자가 원하는 클래스를 찾을 수 있도록 해야했다. 다른 필터링 조건은 class 테이블에서 바로 걸러서 가져올 수 있었다. 그래서 query문에 메서드를 추가하는 식으로 중첩 필터링을 할 수 있었다. 하지만 이번에 구현하려하는 평일 / 주말 필터링은 date 테이블과 조인을 해야하고, date 테이블에는 요일 정보가 있는 것이 아니라 2024-03-27 이런식으로 날짜 정보만 있었기 때문에 sql 문으로 따로 요일 정보를 추출해서 비교해야했다. 이것을 rpc로 처리하자니 아예 필터링 로직 자체를 sql에서 하도록 갈아 엎어야 했는데 시간이 촉박한지라 그렇게는 안될 거같았다 그래서 방법을 찾아보았는데 DB의 View기능을 사용하..

원래의 기획은 클래스를 한달마다 해당 월에만 등록될 수 있도록 했다. ++ 이전 글 참고 https://seopport-u.tistory.com/75 그런데 문제가 발생했다. 이 클래스는 4월 26일과 5월 2일에 예약이 가능한데, 내가 짰던 로직은 1부터 31일까지의 배열을 만들고, DB의 활성화 날짜의 day만 가져와서 그 day를 뺀 배열을 daypicker의 disable 속성에 배열로 전달해주었기 때문에 5월 2일이 아니라 4월 2일에 예약이 가능하다고 나오게되는 문제가 있었다. 그래서 이걸 어떻게해야할지 생각해봤지만 애초에 클래스를 등록할 때 다른 달의 날짜도 자유롭게 등록할 수 있는 것이 맞는것 같아서 기획을 수정하게 되었다. 따라서 달마다 비활성화 날짜 배열을 만들어서 할당해주어야 했다. ..

시간 배열의 개수에 따라 grid cols 수를 동적으로 스타일링 하고 싶었다. 그런데 이런식으로 계산한 값을 템플릿 리터럴로 넣었더니 문제가 발생했다. const gridColNum = dateInfo.times.length 4 && dateInfo.times.length

className에 스타일을 적용할 때 테일윈드의 문법을 자동완성 시켜주고 툴팁으로 어떤 속성인지 설명까지 적어준다 ... 이런게 있었다니 홈페이지 하나하나 찾아가면서 한 과거의 내가 안타깝군

페이지 컴포넌트에서 HTML태그와 컴포넌트를 분리해서 깔끔하게 만들고 싶었다. export default async function ReservePage({ searchParams }: { searchParams: { classId: string } }) { const classId = searchParams.classId; const classInfo = await fetchReserveClassInfo(classId); return ( {classInfo ? ( 수강일 선택하기 ) : ( 클래스 정보를 불러오지 못했어요. 🥲 )} ); } 그래서 일단 컴포넌트들을 분리하고, 프롭 드릴링으로 내려주는데 드릴링이 최대 2번이긴 하지만 프롭스를 사용하지 않고 자식에게 전달만 하는 컴포넌트 생겨 비효율적이라..

process.env.로 환경변수를 불러올 때 undefined가 뜨는 문제 기본적으로 Next의 환경변수는 node 환경의 서버사이드에서만 불러올 수 있다고 한다. 해결법으로는 환경변수 이름 앞에 NEXT_PUBLIC_을 붙여주면 브라우저 환경에서도 환경변수를 읽을 수 있다 env.local과 env.production build 명령어를 사용하면 env.production 파일이 우선적으로 적용된다. 따라서 env.local에는 NEXT_PUBLIC_BASE_URL에 로컬호스트 주소를 넣어주고, env.production에는 배포 주소를 넣어주면 빌드, 배포시 env.production의 NEXT_PUBLIC_BASE_URL을 읽어 배포주소를 베이스 주소로 사용하게 된다.

라우트 핸들러를 활용한 서버 사이드에서의 결제 승인 처리🤔 문제 상황<ul style="list-style-type: disc; background-color: #ffffff; color: #0d0d0d; text-align: start;" data-ke-list-type="disc"..