프론트엔드

이 글에서는 Next.js 15버전 환경에서 MUI 테마를 적용하는 방법에 대해 스텝 바이 스텝 형식으로 설명한다. 문제 상황Next.js 15 버전에서 MUI를 활용한 UI 개발 중 반복되는 UI 스타일링과 상속 중첩에 따른 가독성 저해 문제가 발생했다.(쉽게 말하자면 일일히 UI 스타일링 하는 것과 다른 UI를 상속 받아 스타일링을 추가했을 때 부모 요소 스타일링을 추적하는 것이 지겨웠다.)필자는 MUI 전역 스타일링(테마)을 활용하여 위 문제들을 해결하려 했지만 Next.js 환경 특성(서버 컴포넌트, 클라이언트 컴포넌트의 분리 등)에 따라 테마 적용에 어려움을 겪었다. 해결 방법종속성 설치npm install @mui/material-nextjs @emotion/cache  app/layout.t..

Q1. 서버 컴포넌트 하위의 use client 로 선언된 컴포넌트는 CSR 방식으로 동작되는 거야? 네, use client로 선언된 컴포넌트는 CSR 방식으로 동작합니다.즉, 브라우저에서만 실행되며, React의 클라이언트 전용 기능(useState, useEffect, DOM 조작 등`)을 사용할 수 있습니다.하지만 Next.js의 App Router 환경에서 클라이언트 컴포넌트를 서버 컴포넌트와 조합해서 사용하는 방식은 기존 CSR 방식과는 약간의 차이가 있습니다. use client가 선언된 컴포넌트의 동작 원리CSR 방식으로 동작:use client가 선언된 컴포넌트는 브라우저에서 렌더링되며, React의 클라이언트 라이프사이클(useState, useEffect 등)을 사용할 수 있습니다.서..

문제 상황React에서는 SVG를 임포트해서 바로 컴포넌트처럼 사용할 수 있었다.하지만 Next.js에서는 해당 기능을 지원하지 않았다.Next.js에서는 태그의 src 속성에 SVG 경로를 넣어 사용했고 이에 따라 SVG 스타일 커스터마이징이 용이하지 않았다.이 글에서는 Next.js에서 SVG 파일을 컴포넌트로 사용하는 방법을 설명한다. 문제 원인위 문제 상황의 원인은 Next.js의 Webpack 기본 설정 때문이다. 1. Create React App(CRA)는 기본적으로 SVGR을 포함하여 .svg 파일을 React 컴포넌트로 처리할 수 있었다.2. Next.js는 성능 최적화와 커스터마이징에 초점을 맞췄기 때문에 SVGR이 포함되어 있지 않다.3. Next.js는 Webpack을 사용해 프로..

1. Next.js + styled-components 세팅1) next.config.ts 파일 수정{projectName} / next.config.tsimport type { NextConfig } from "next";const nextConfig: NextConfig = { compiler: { styledComponents: true, },};export default nextConfig; 2) registry.tsx 파일 생성src / utils / registry.tsx'use client' import React, { useState } from 'react'import { useServerInsertedHTML } from 'next/navigation'import { Serve..

들어가기 앞서, 클라이언트 환경변수는 모두 브라우저에 노출된다는 사실을 인지해야한다.필자는 현재 Next.js + Supabse를 활용해 풀스택(?) 프로젝트를 개발하는 상황이다.이 때, 프로젝트에서는 클라이언트 환경변수(NEXT_PUBLIC)에 Supabase API 요청을 위한 보안 키인 anon 키 값을 저장한다.이에, 클라이언트측에서 직접 API 요청을 보내고 비즈니스 로직 또한 브라우저에 노출된다.그러던 중, 클라이언트 환경변수에 anon키를 저장하면 브라우저에 노출될텐데 이런 경우네는 어떤 보안 위협성이 있는 지 생각했다.결론부터 말하면 anon키가 클라이언트에게 노출됨으로써 데이터접근 권한 및 DOS 공격과 관련된 보안 위협은 증가하지 않는다. 다양한 예시 상황으로 보안 위협을 가정해보았다...

https://jy-beak.tistory.com/185 [Prettier] Next.js13 + Prettier 관련 에러 해결Next.js13 프로젝트에 prettier, prettier 관련 플러그인 적용시 관련 에러를 해결한 과정을 작성한 글입니다. 이슈 1 - .prettierrc 파일 적용 안되는 경우 vscode 하단에는 prettier가 적용되고 있다는 표시가jy-beak.tistory.com1. Ctrl + Shift + P → "Preferences: Open User Settings (JSON)" 선택2. 아래 이미지를 참고하여 Ctrl + F 로 각 속성을 찾고 객체 프로퍼티 값을 아래와 같이 변경한다.

문제 : React에서 배열 렌더링 도중 key 속성을 부여했음에도 불구하고 오류가 발생하였다.//오류 코드 { responseData?.map((el, idx)=>{ return( ) }) }원인 : React에서는 리스트를 렌더링할 때, key 속성은 각 요소의 최상위 부모에 부여해야합니다.결론 : fragment element()를 삭제하여 을 최상위로 올려야한다.//해결 코드 { ..

Vercel은 정적 사이트를 배포하는 데 최적화된 플랫폼으로, HTML, CSS, JavaScript로 구성된 프로젝트를 매우 쉽게 배포할 수 있습니다. 아래에 Vercel을 이용해 프로젝트를 빌드하고 배포하는 방법을 단계별로 정리했습니다.1. Vercel 계정 생성 및 CLI 설치계정 생성Vercel 공식 웹사이트에 접속해 회원가입을 완료하세요.GitHub, GitLab, Bitbucket 계정으로 로그인하면 코드 저장소와의 연동이 편리합니다.Vercel CLI 설치터미널에서 아래 명령어를 사용해 Vercel CLI를 설치합니다.npm install -g vercel설치가 완료되면 CLI를 통해 Vercel과 연동할 수 있습니다.2. 프로젝트 준비프로젝트 디렉토리 구성HTML, CSS, JS 파일을 포..