St991Cup's Blog

Steelcup, St991cup, steelcup

Next.js

  • Next.js(steelcup-home)를 Vercel에 배포하고 별도 백엔드와 연결하기

    기존에 홈서버의 Docker Compose 환경에서 동일한 내부 브리지 네트워크로 연동되던 프론트엔드와 백엔드 서비스를 클라우드 환경으로 분리 이전하는 과정에서 발생한 아키텍처 변경 사항과 배포 전략을 다룬다. 1. 개요 및 배경 steelcup-home은 Next.js 기반의 웹 애플리케이션이다. 기존 환경에서는 docker-compose를 통해 백엔드 서비스(bad-goose)와 함께 단일 호스트의 도커 브리지 네트워크 내에서 구동되었다. 백엔드 서비스를 Vercel Serverless 및 Upstash Redis로… Continue reading

    , , ,

  • IntersectionObserver를 활용한 TOC(Table of Contents / 목차) 구현

    IntersectionObserver를 활용한 TOC(Table of Contents / 목차) 구현

    개요 IntersectionObserver API를 사용하면 스크롤 이벤트 없이도 효율적으로 요소의 가시성을 감지할 수 있다. 이 특성을 활용하여 문서의 목차(TOC)를 구현하고, 현재 읽고 있는 섹션을 자동으로 하이라이트하는 기능을 만들 수 있다. IntersectionObserver란? IntersectionObserver는 타겟 요소와 상위 요소 또는 뷰포트 사이의 교차 영역 변화를 비동기적으로 관찰하는 API다. 스크롤 이벤트를 직접 다루는 것보다 성능이 우수하며, 코드도 더 간결하게 작성할… Continue reading

    , , , ,

  • Next.js에서 Grid Layout과 @layer를 활용한 모던 CSS 설계

    Next.js에서 Grid Layout과 @layer를 활용한 모던 CSS 설계

    요약 grid-template-areas는 Tailwind 임의값보다 권장되는 모던 CSS 방법 @layer를 활용해 CSS 우선순위를 체계적으로 관리 Next.js App Router의 layout.js와 globals.css 조합이 최적 @layer란 무엇인가? @layer는 CSS Cascade Layers의 핵심 기능으로, 스타일의 우선순위를 명시적으로 관리할 수 있게 해줌 CSS 우선순위 순서 (낮음 → 높음) @layer base, components, utilities;/* 1. base (가장 낮음) */@layer base { /* 기본… Continue reading

    ,

  • Next.js + NestJS/SpringBoot JWT 로그인 시스템 설계 및 보안

    Next.js + NestJS/SpringBoot JWT 로그인 시스템 설계 및 보안 1. 시스템 구조 프론트엔드: Next.js (NextAuth, Passport 등 사용) 백엔드: NestJS 또는 SpringBoot 인증 방식: Google OAuth 등 소셜 로그인 → JWT 발급 → 쿠키/헤더로 백엔드에 전달 [Next.js + NextAuth/Passport] | |–(로그인)–> [JWT 발급, 쿠키 저장] | |–(API 요청, JWT 포함)–> | [Backend (NestJS/SpringBoot)] | |–(JWT… Continue reading

    , , ,

  • NextJs 13에서 GraphQL 클라이언트 사용

    내용 원본 https://www.apollographql.com/blog/apollo-client/next-js/how-to-use-apollo-client-with-next-js-13/ 패키지 설치 npm install -S @apollo/client@rc @apollo/experimental-nextjs-app-support 클라이언트 코드 구현 // lib/client.js(or client.ts)import { HttpLink } from "@apollo/client";import { NextSSRInMemoryCache, NextSSRApolloClient,} from "@apollo/experimental-nextjs-app-support/ssr";import { registerApolloClient } from "@apollo/experimental-nextjs-app-support/rsc";export const { getClient } = registerApolloClient(() => { return new NextSSRApolloClient({ cache: new NextSSRInMemoryCache(), link: new HttpLink({ uri: "https://main–time-pav6zq.apollographos.net/graphql", }), });}); Continue reading

    , ,

  • VS Code Tailwindcss + NextJs Prettier formatter 셋업 가이드

    VS Code 환경 설정 Visual Studio Code 설치 https://code.visualstudio.com/download Next, Tailwindcss 관련 플러그인 설치 참고 https://tailwindcss.com/docs/editor-setup#intelli-sense-for-vs-code VS Code Extension https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss Prettier 플러그인 설치 https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode 프로젝트 셋업 프로젝트 생성 “npx create-next-app@latest” 커맨드를 실행하면 가이드가 나온다. 아래와 같이 Typescript + Tailwind + Eslint를 사용한다. $ npx create-next-app@latest✔ What is your project named? … project-name✔ Would you like… Continue reading

    , ,
워드프레스닷컴으로 이처럼 사이트 디자인
시작하기