console.log(“JongHoon”)

리액트에서는 여러 react element를 반환하는 것을 금지한다  fragment 태그를 이용할 수 있다  태그를 사용해도 되지만 fragment 를 사용할 경우 dom에 노드로 추가되지 않는다 배열로 요소를 반환하는것과 비슷하게 볼 수 있다     div 태그의 장단점장점  모든 브라우저에서 지원스타일을 적용하거나 이벤트 핸들러를 추가 가능단점 불필요한 DOM 노드를 추가하여 DOM 트리가 복잡질 가능성특정 레이아웃(ex. 테이블 구조)에서 사용하면 HTML 구조를 해칠 수 있다  fragment 장단점장점 추가적인 DOM 노드를 생성하지 않아 DOM 트리를 깔끔하게 유지성능상 약간의 이점이 있을 수 있다 (불필요한 노드가 없으므로).레이아웃을 해치지 않고 여러 요소 그룹화 가능단점 오래된 브라우저..

layout.tsx 를 클라이언트 컴포넌트로 만들시 단점 1. 초기 번들 크기 증가 클라이언트 컴포넌트는 브라우저에서 실행되기 때문에 관련된 자바스크립트 코드가 클라이언트로 전송됩니다. layout.tsx를 클라이언트 컴포넌트로 만들면, 그 안에 포함된 모든 로직과 의존성이 번들에 포함되어 초기 로딩 시간이 늘어날 수 있습니다. 2. 서버 사이드 렌더링(SSR) 이점 상실 레이아웃 컴포넌트는 일반적으로 서버에서 렌더링될 때 더 빠른 초기 페이지 로딩을 제공할 수 있습니다. 클라이언트 컴포넌트로 전환하면 서버에서 즉시 렌더링되지 않고 클라이언트에서 다시 렌더링해야 하기 때문에 초기 로드 시간이 길어질 수 있습니다. 3. SEO 문제 서버 컴포넌트를 사용하면 서버 사이드에서 HTML을 완성해 SEO에 유리합..

부트캠프에서 next.js / React-ts 환경의 개발을 경험했지만구현에 급급하다보니 타입 지정이나 타입스크립트 동작 원리에 대해서는 특히 제대로 이해하고 진행하지 못하였어서최종 프로젝트 디벨롭 진행 전 ts, next 강의를 보고 진행하기로 하였다  타입스크립트 : *컴파일 과정에서 문법, 타입 체크 수행*컴파일 : 언어 변환 과정  타입 스크립트 타입 체크 과정 1. 컴파일 시작 - tsc 명령어를 사용해 ts 컴파일러 실행. tsconfig.json 파일을 참고해 어느 파일을 컴파일할지, 어떤 옵션을 사용할 지 결정 2. 파일 로드 - 모든 입력 파일, import된 파일 로드 3. 코드 분석 - 코드를 읽고, 프로그램 구조를 나타내는 AST(구문 트리) 생성 4. 심볼 테이블 생성 - 심볼 테..

최종 프로젝트 피드백 중 결제 창이 띄워진 채로 뒤로가기를 해도 창이 꺼지지 않는데, pap state 를 조절해 뒤로가기 시 모듈이 종료되도록 만드는 게 자연스럽다는 피드백을 받았다     구글링해보니 pop state 이벤트를 이용해 뒤로 가기를 막는 예제가 많이 보였다다만 뒤로가기를 막는 것 보다는 pop state 이벤트 발생 시 결제 창이 닫히는 것이 더욱 자연스러워 보여서 포트원 api의 결제 창 종료 메서드를 찾아보고, 로컬/세션 스토리지 / 쿠키 등을 제거해봤지만 결제 창 종료를 코드상으로 구현 할 방법을 찾지 못했다 => 아쉽지만 창 뒤로가기를 막아두고, 결제 창 종료 후 이용해달라는 토스트를 띄우는 방향으로 구현을 했다 //결제창이 열려있는 지 여부를 저장할 useState, const..

container: 전체 SweetAlert 모달을 감싸는 최외곽 컨테이너입니다. popup: 실제 모달 창 자체를 나타냅니다. header: 모달의 상단 부분으로, 주로 title과 closeButton을 포함합니다. title: 모달의 제목 텍스트에 적용됩니다. closeButton: 모달을 닫는 'X' 버튼에 적용됩니다. icon: 모달에 표시되는 아이콘(성공, 에러 등)에 적용됩니다. image: 모달에 이미지가 포함될 때 해당 이미지에 적용됩니다. htmlContainer: 주 내용(text 속성의 내용)이 표시되는 영역입니다. input: 입력 필드가 있는 경우, 해당 입력 요소에 적용됩니다. inputLabel: 입력 필드에 라벨이 있는 경우, 해당 라벨에 적용됩니다. validationMe..

프로젝트에서 결제 로직중에, 결제 이후 즉시 환불 처리하는 로직이 있었는데 주문내역에서 리뷰 작성 기능을 만들자는 이야기가 나와서 즉시 환불 로직을 제거하게되었다 주문 취소 상태인 주문 내역에서 리뷰 작성이 가능한 건 아무래도 부자연스럽게 느껴져서인데 문제는, 가결제이다보니 23:00-00:00쯤 일괄 자동 환불이 되는데이 자동환불을 캐치해서 환불상태로 supabase db를 업데이트해야하는데, 자동환불을 캐치할 방법이 없었다   처음 생각한 것 : 주문 내역 페이지에 들어갈때마다 결제 상태인 모든 내역을 내역조회 후 변했다면 업데이트하기=> 말도 안 됨.  그래서 웹훅을 사용하기로 했는데, 어떤식으로 트리거되고 어떤 식으로 알림이 오며, 어떻게 받아서 처리해야하는지 전혀 감이 잡히지 않았다 결국 어떻게..

참여중인 캠프에서 기술 면접을 준비하는 시간이 있어, 클로저에 대한 이해가 부족한 상태라는 것을 인지했고조금 찾아보기로했다 기존에 내가 생각했던 것은클로저는 함수 내부에서 외부 변수나 함수를 호출해서 사용하는 것.즉, 아래 예시의 b()는 클로저 함수인 것이다 라고 생각하고있었다const a = 1;function b() { console.log(1 + a);}b();  서치를 좀 해보니, 위 예시의 함수 b는  "전역 변수 a에 접근할 뿐이며,클로저 사용 예시로 보기는 어렵지만 기술적으로 클로저의 특성을 가지고는 있다. " 정도로 성립이 될 것 같다.  클로저는 다음 3가지 조건을 충족해야한다 1. 함수가 다른 함수 내부에서 정의된다.2. 내부 함수는 외부 함수의 변수에 접근한다.3. 외부 함수가 실..

결제 기능 제작중, 결제 버튼을 연타했을때에문제는 발생하지 않지만 네트워크 창에서 호출이 여러 번 가는 것이 발견되어 쓰로틀링을 적용해보았다  결제 버튼에 쓰로틀링 사용 이유1. 디바운싱은 호출 후 일정 시간이 지나야 실행되므로 연속 클릭 시 언제 실제로 결제가 처리될 지 예측하기 어려울 수 있다2. 디바운싱은 연속된 호출 후 한번의 요청만 보내지만 여러 사용자가 동시에 이런 행동을 할 경우 서버에 부하가 걸릴 가능성 3. 쓰로틀링 사용시 "n초 후 다시 시도해주세요" 같은 명확한 피드백 제공 가능4. 중복 트랜잭션 방지, 예를들어 30초 내에 한번만 결제 가능 과 같은 규칙을 쉽게 적용 가능5. 특정 초 당 한번 요청을 제한하는 방식이 짧은 시간의 빠른 요청을 방지하는데에 더 효과적일 수 있..

+미환불건 환불용 관리자 페이지 만들기 const AdminPage = ({ params }: { params: { secret: string } }) => { if (params.secret !== process.env.SECRET_ADMIN_PATH) { redirect('/'); } admin 폴더에 동적 라우팅 할 폴더 생성 후 .env.local에 secret pathname 추가 secret pathname과 일치하지 않는 값이면 홈으로 리다이렉트

shadcn toast 커스터마이징 const ToastViewport = React.forwardRef, React.ComponentPropsWithoutRef>(({ className, ...props }, ref) => ( ));ToastViewport.displayName = ToastPrimitives.Viewport.displayName;  use-toast.ts에서 토스트 지속시간이 제대로 적용 안 되고 있어서  //지속시간이 적용되지 않아 setTimeout 추가 setTimeout(dismiss, TOAST_REMOVE_DELAY) 직접 추가 ....