전체 글

버킷 생성1) Storage > New bucket 클릭2) 버킷 이름 입력 후 공개 버킷 설정(주의 : 공개 버킷 설정 시 익명의 사용자가 아무런 승인 없이 버킷 내 객체(이미지 파일)을 읽을 수 있으므로 보안 수준이 낮아지는 것을 유의해야합니다.) 버킷 정책 설정1) Policies > 생성된 버킷명 우측 New policy 클릭2) For full customization 클릭3) Policy name 입력, Allowed operation 설정 후  Review 클릭4) 생성될 정책을 미리본 후 Save policy 클릭 실습import React, { useState } from 'react';const FileInputForm = () => { const [file, setFile] = us..

카카오톡 디벨로퍼 세팅1. 로그인 및 어플리케이션 생성1) 카카오 디벨로퍼 로그인 2) '내 애플리케이션' 클릭3) '애플리케이션 추가하기' 클릭4) 애플리케이션 정보 입력 후 '저장' 클릭 2. 카카오 로그인 설정 & 비즈 앱 전환1) 생성한 애플리케이션 클릭2) '대시보드 > 설정 > 카카오 로그인 > 설정하기' 클릭3) 카카오 로그인 활성화4) '대시보드 > 설정 > 동의항목 > 설정하기' 클릭5) '카카오 로그인 > 동의항목 > 개인정보 동의항목 심사 신청' 클릭6) '앱 권한 신청 > 비즈 앱 전환' 클릭7) '비즈니스 > 개인 개발자 비즈 앱 전환' 클릭8) 비즈 앱 전환 목적 선택 후 전환 클릭  3. 앱 권한 신청(선택)  4. 동의 항목 설정1) '대시보드 > 설정 > 동의항목 > 설정하..

"use client";import { Swiper, SwiperSlide } from "swiper/react";import "swiper/css";import { Autoplay } from "swiper/modules";import { useRef, useState } from "react";import { Swiper as SwiperType } from "swiper/types";const Product = () => { const swiperRef = useRef(null); // 스와이퍼 참조 ref const [, setSlideChangeCount] = useState(0); // 슬라이드 자동 재생 횟수 const MAX_AUTOPLAY_COUNT = 2; // 최대 자동 재생 횟..

삽입하고 싶은  Next.js에서 삽입 예시import Script from "next/script";export default function RootLayout({ children,}: Readonly) { return ( {children} );}

https://nextjs.org/docs/app/building-your-application/optimizing/metadata Optimizing: Metadata | Next.jsUse the Metadata API to define metadata in any layout or page.nextjs.orghttps://nextjs.org/docs/app/api-reference/functions/generate-metadata#basic-fields Functions: generateMetadata | Next.jsLearn how to add Metadata to your Next.js application for improved search engine optimization (SEO) an..

이 글은 아래 게시물을 선행하여야합니다. [Next.js] Next.js 네이버 웹마스터 검색 엔진 최적화(SEO) 가이드해당 게시물은 Next.js와 Vercel을 통해 웹사이트를 배포한 상황을 가정하여 진행됩니다. 1. 사이트 등록 및 소유확인1) 배포한 웹사이트 URL 복사 https://searchadvisor.naver.com/console/board 네이버네이sooncoding.tistory.com https://search.google.com/search-console?resource_id=https://callo-mu.vercel.app/ Google Search ConsoleSearch Console 도구와 보고서를 사용하면 사이트의 검색 트래픽 및 실적을 측정하고, 문제를 해결하며, G..

해당 게시물은 Next.js와 Vercel을 통해 웹사이트를 배포한 상황을 가정하여 진행됩니다. 1. 사이트 등록 및 소유확인1) 배포한 웹사이트 URL 복사 https://searchadvisor.naver.com/console/board 네이버네이버에 로그인 하고 나를 위한 다양한 서비스를 이용해 보세요nid.naver.com2) 네이버 웹마스터 도구 접속 3) 입력칸에 배포 URL 붙여넣기 4) 소유확인 진행 클릭 5) 'HTML 확인 파일'을 클릭해 파일 다운로드 [ public / naverOOOO.html ]6) 다운로드한 파일을 public 폴더로 이동7) 커밋 -> 푸쉬 -> 배포 8) https://...URL... 링크 클릭 9) 사이트 인증 확인 10) 소유 확인 클릭 11) 소유 확..

설치npm install @next/third-parties@latest 코드 (전역 경로 GA)app / layout.tsx import { GoogleAnalytics } from '@next/third-parties/google' export default function RootLayout({ children,}: { children: React.ReactNode}) { return ( {children} )} 코드 (단일 경로 GA)app / page.tsximport { GoogleAnalytics } from '@next/third-parties/google' export default function Page() { return }