seopport.log

[push, pop] = 배열의 마지막 요소 처리push(): 배열의 마지막에 요소를 추가한다. 요소를 추가한 배열의 길이를 반환한다.let array = [1, 2, 3];array.push(4);console.log(array); // 출력: [1, 2, 3, 4] pop(): 배열의 마지막 요소를 제거하고 반환한다. let array = [1, 2, 3, 4];let removedElement = array.pop();console.log(removedElement); // 출력: 4console.log(array); // 출력: [1, 2, 3] [shift, unshift] = 배열의 첫 번째 요소 처리shift(): 배열의 첫 번째 요소를 제거하고 반환한다.let array = [1, 2, 3..

replaceAll 메서드는 문자열에서 문자 또는 문자열을 지정하여 원하는 문자로 대체하는 메서드이다.replaceAll(pattern, replacement)replaceAll() 메서드는 pattern의 모든 일치 항목이 replacement로 대체된 새 문자열을반환합니다.  사용법string.replaceAll("타겟 문자", "바꿀 문자")  예시const myString = "applemango";console.log(myString.replaceAll("a","e")); //epplemengo

1. font 폴더를 생성하고 다음과 같이 작성합니다.import localFont from 'next/font/local';export const pretendard = localFont({ src: [ { path: './PretendardVariable.woff2', weight: '400' }, { path: './PretendardVariable.woff2', weight: '700' } ], variable: '--font-pretendard'}); 2. tailwind config의 extend에 다음과 같이 추가합니다. fontFamily: { pretendard: ['var(--font-pretendard)'] ..

토스 테스트 결제 api가 모바일 환경에서는 지원이 안된다고 해서 pc에서만 예약 - 결제가 가능하도록 구현해야 하는 사항이었다. 반응형으로 width를 구해서 태블릿 넓이 아래로는 결제를 막는식으로 하려고 했으나.. pc에서도 개발자도구의 반응형으로 접속해서 결제를 진행하면 모바일 버전의 결제 api로 바뀌어서 결제가 되지 않았다.그런데 아래 사진과 같이 브라우저를 크기를 직접 줄여서 결제를 진행하면 정상적으로 된다..  따라서 반응형 넓이를 판단해서 막을 수 없고 사용자가 접속한 환경이 모바일인지 pc버전인지 확인해야만 의도한대로 기능을 구현할 수 있는 상황이다. 난감한 마음에 바로 구글링을 해봤더니 navigator객체의 userAgent라는 메서드가 있다는것을 찾았다NavigatorNavigato..

반응형 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번이긴 하지만 프롭스를 사용하지 않고 자식에게 전달만 하는 컴포넌트 생겨 비효율적이라..