전체 글

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을 사용해 프로..

상황Supabase를 활용해 이메일 회원가입 & 로그인 기능을 개발하는 중이었다.Supabase의 이메일 회원가입 플로우는 아래와 같다.1. supabase.auth.signUp API에 회원가입할 이메일, 비밀번호, 리다이렉트 주소를 넣어 API를 요청한다.2. Supabase 서버가 해당 이메일에 인증 링크가 포함된 회원가입 인증 메일을 발송한다.(이 때 인증링크는 기본적으로 http://localhost:3000으로 설정된다.)3. 사용자가 인증 메일 내 링크를 클릭하면 Supabase 서버에 해당 사용자의 인증 여부가 저장된다.4. supabase.auth.signInWithPassword API를 통해 이메일, 비밀번호를 입력해 로그인한다.5. Supabase 서버가 payload에 사용자 정보..

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..

문제 상황쉐리어 프로젝트 개발계에서 포트폴리오 업로드 기능 확인 중이었다.포트폴리오 업로드는 포트폴리오 가이드(모달)을 확인 후 확인 버튼을 클릭하면 파일을 업로드할 수 있는 인풋폼을 노출시키는 형태였다.하지만 포트폴리오 가이드(모달)을 확인 후 확인 버튼을 누르고 파일탐색기에서 포트폴리오를 업로드하니 업로드가 되지않았다.시간이 지난 후에도 업로드가 되지 않아 다시 한 번 업로드를 시도하니 이번에는 파일 업로드가 되었다.여러 반복 끝에 이 상황이 버그라고 판단했고 즉시 사수님께 보고하여 문제해결을 시도했다. 코드// 부모 컴포넌트 코드const [shown, setShown] = useState(false); // 모달 확인 여부const [showPop, setShowPop] = useState(fal..

상황팀피어 사이드프로젝트(쉐리어) 진행 중이다.유저의 구독 상태에 따른 회원탈퇴 여부를 결정하는 로직을 개발 중이다. 유저의 구독 상태는 유저 정보에 담겨있다.유저 정보는 유저 정보 요청 API를 통해 얻는다. 서비스(쉐리어)는 JWT 인증 방식을 사용하고 있다. 유저 정보 요청 API 요청 시 헤더에 JWT 토큰을 담아 요청을 보내야한다. 필자는 해당 테스트를 위해 POSTMAN(이하 포스트맨)을 사용했으며 서비스에서의 HTTP 요청을 포스트맨에서 동일하게 구현하는 것을 목표로 한다.(포스트맨 사용 이유 : 서비스 UI 가 없어도 HTTP 요청을 마구마구 보낼 수 있어서 테스트에 용이함)하지만 필자는 포스트맨에서 요청을 보낼 때 헤더에 토큰을 담아 보내는 방법을 몰랐다.이 글에서는 포스트맨에서 요청을 ..

들어가기 앞서, 클라이언트 환경변수는 모두 브라우저에 노출된다는 사실을 인지해야한다.필자는 현재 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 로 각 속성을 찾고 객체 프로퍼티 값을 아래와 같이 변경한다.