React 서비스 SEO 성능 개선하기 (feat. SSR)

저희 서비스의 SEO를 개선시키기위해 논의를 하였는데요, 이와 더불어 React-Helmet이란 라이브러리를 인지하게 되었습니다.리액트 라이브러리인 React-Helmet을 이용하여 meta태그를 주입할 수 있다는 것을 알았는데요, 이를 이용하여 SEO를 개선할 수 있는 작업에 대해서 살펴보고, 우리 서비스는 어떤 선택을 할 것인지에 대해서 이야기 해보려 합니다.SPA 서비스의 경우 index.html파일이 하나이기 때문에, 라우트 별로 meta태그를 설정하는 것이 까다롭습니다.SPA의 경우 다음과 같은 특징을 가지는데요,SPA의 특성상 중요한 컨텐츠가 자바스크립트 로딩 후에 나타난다.SPA는 URL이 동적으로 변경되기 때문에 크롤러가 URL변화를 완벽히 감지하지 못한다.구글 크롤러의 경우, 자바스크립트..

• format_list_bulleted 개발관련/React
• · 2024. 9. 22.
• textsms

Next.js 환경에서 cookie 설정하기

이번에 두 개 이상의 쿠키를 설정하는 방법을 몰라서 삽질을 했습니다. 다른 분들은 저처럼 삽질하지 마시라고 기록합니다!🤣 우선 기본적인 쿠키 설정 방법 예시입니다. ✨ 쿠키 설정 예시 import { serialize } from "cookie"; export async function POST(res: Response) { ... const ACCESS_SERIALRIZE = serialize("kakaoAccessToken", access_token, { httpOnly: true, secure: process.env.NODE_ENV === "production", sameSite: "strict", maxAge: expires_in, path: "/", }); return NextResponse.j..

• format_list_bulleted 개발관련/Next
• · 2024. 1. 9.
• textsms

[Next.js] 전역 객체, .env 타입 설정하기

😥발생한 문제? "use client"; import { useEffect } from "react"; const KakaoMap = () => { useEffect(() => { const script = document.createElement("script"); script.type = "text/javascript"; script.src = `//dapi.kakao.com/v2/maps/sdk.js?appkey=${process.env.NEXT_PUBLIC_KAKAO_MAP_API}&autoload=false`; document.body.appendChild(script); script.onload = () => { window.kakao.maps.load(() => { const containe..

• format_list_bulleted 개발관련/Next
• · 2023. 10. 9.
• textsms

[NEXT JS] 외부 JS파일 사용하기

이번에 네이버에서 제공하는 맵 API를 이용해보려 하는데, 예제가 기본적으로 HTML로 되어있고, 외부 JS파일을 script태그로 불러오는 형식으로 예문이 짜여져 있었습니다. 아래는 네이버 Dynamic Map API를 사용한 HTML 예제입니다. 위 코드의 script를 보면 다음과 같습니다. 이 코드와 같이 외부 JS파일을 불러오는 것을 알 수 있었습니다. 그렇다면 React환경인 NextJS에서는 이 파일을 어떻게 불러올 수 있을까요? 😎NextJS에서 제공하는 Script를 이용한다 import Script from 'next/script' export default function Dashboard() { return ( ) } Nextjs 제공하는 Script컴포넌트를 이용하여 위와 같이 J..

• format_list_bulleted 개발관련/Next
• · 2023. 9. 29.
• textsms