📙 개요개발환경next: v14.2.15 NextJS에서는 병렬 라우팅(Parallel Routes)와 인터셉팅 라우팅(Intercepting Routes)를 사용하여 모달을 만들 수 있다.현재 프로젝트에서 모달에 대한 폴더 구조는 아래와 같이 구성되어 있다. app/├── @modal/│ ├── default.tsx // 모달이 활성화되지 않았을 때 null 반환│ └── (.)login/page.tsx // 모달 컴포넌트 렌더링├── _component/LoginModal.tsx // 모달 컴포넌트 └── signup/page.tsx // 회원가입 페이지 로그인 모달 컴포넌트에는 를 사용한 페이지 이동이 두 개가 존재한다.export de..
📙 개요 개발환경next: v14.2.15next-auth: v5.0.0-beta.25 Next-Auth v5를 사용하여 Header에 유저 정보를 표시하던 중에 페이지를 새로 고침할 때 session과 관련된 조건부 렌더링 부분에서 깜빡임 현상이 발생했다.관련 코드는 다음과 같다."use client";import { useSession } from "next-auth/react";export default function Header() { const { data: session } = useSession(); return ( // ... {session ? ( {session.user?.image && ( ..
📙 개요[url] localhost:3000/profile/플루현재 URL에 있는 유저 이름을 화면에 렌더링하는 과정에서, 기대했던 '플루' 대신 '%ED%94%8C%EB%A3%A8''라는 문자열이 나타났다.이 현상이 발생한 원인을 파악하기 위해 작성된 코드를 살펴보자. 📙 문제 분석import ProfileInfo from "./_component/ProfileInfo";interface Props { params: { username: string };}export default function ProfilePage({ params }: Props) { return ( );}interface Props { username: string;}e..
개발환경next: v14.2.15@toast-ui/react-editor: v:3.2.3 📙 TUI Editor 설치npm i @toast-ui/react-editor 설치를 하자마자 에러가 발생해 머리를 잡고 싶었지만 ,,이는 이슈에도 나와있듯이 react 18을 지원하고 있지 않아서 버전 오류가 발생하는 것이다.이때 --force 옵션을 사용하여 설치하면 설치가 완료된 모습을 볼 수 있다. npm i @toast-ui/react-editor --force --force 옵션을 사용하여 설치하는 것은 무슨 의미일까?터미널에서도 볼 수 있듯이 의존성 충돌이나 경고를 무시하고 설치를 강제로 진행한다.최후의 수단으로 사용하는 옵션이기 때문에 이를 염두해 두고 사용하여야 한다.추가사항React 환경에서 @t..
개발 환경next: v14.2.15@tanstack/react-query: v5.60.6@tanstack/react-query-devtools: v5.60.6 오늘은 개인 프로젝트에 Tanstack Query(React Query)를 적용하는 과정 중에 여러 코드에서 볼 수 있던 QueryClient에 useState를 적용하는 이유에 대해서 작성해보고자 한다. 📙 설치npm i @tanstack/react-queryyarn add @tanstack/react-query 📙 적용🟡 Provider 설정NextJS에서는 use client 로 Provider를 클라이언트 컴포넌트로 변경해주어야 에러가 발생하지 않는다.// RQProvider.tsx"use client";import { QueryCli..
📙 개요Tailwind를 사용하여 모달을 만드는 도중, 모달 닫기 버튼의 위치가 제대로 적용되지 않았다.분명 아까까지는 잘 적용됐는데 갑자기 아래로 가있는 닫기 버튼을 보자 당황할 수 밖에 없었다😭 📙 문제 파악 - 현재 컴포넌트 코드 살펴보기"use client";import { useRouter } from "next/navigation";import Icon from "./Icon";interface Props { size: number; right: number; top: number;}export default function CloseButton({ size, right, top }: Props) { const router = useRouter(); const handleClic..
📙 로컬 파일로 Nextjs 폰트 적용하는 기본적인 방법로컬파일(.ttf, .woff, …)을 Nextjs 폰트로 적용하기 위해서는 기본적으로 아래의 방법을 사용한다. 🟡 app/layout.tsx에 next/font 를 사용하여 변수를 선언하고, className에 전달// app/layout.tsximport localFont from "next/font/local";const suit = localFont({ src: "../../public/fonts/SUIT-Regular.ttf", display: "swap", variable: "--font-suit",});const suitBold = localFont({ src: "../../public/fonts/SUIT-Bold.ttf", ..
포트폴리오 사이트를 개발할 때 포트폴리오에 들어가는 내용을 마크다운 파일로 가져와 사이트에서 보여주고 싶었다. 기존에는 express 서버로 파일 시스템(fs) 모듈을 가져와서 사용했지만, 이는 로컬에서만 동작하고 있었고 배포를 위해서는 AWS EC2를 사용하는 방법이 존재했다. 하지만 나에게는 마크다운 파일을 가져오는 HTTP GET 메서드만 필요했고 EC2 배포는 부담스러운 선택지였다. 이 때 찾아낸 것이 AWS Lambda와 S3를 연동하여 사용하는 방법이다. 오늘은 프론트엔드 입장에서 처음 AWS를 맞이했을 때 당황하며 해결해낸 과정을 작성해보려 한다. 💡 AWS Lambda란? AWS Lambda란 AWS에서 제공하는 서버리스 컴퓨팅 플랫폼이다. (서버리스 학습 TIL) 별도의 서버 구성 없이 ..
평상시 노션에 공부한 내용을 정리하며 티스토리에 옮기는 편인데 기존에 노션을 사용하면서 글자 지워짐 현상, 티스토리에 마크다운으로 옮기기 어려운 문제 등이 지속되면서 이전에 Github Star를 눌러두었던 유림님의 TIL이 생각났다. 처음에는 얼핏 봤을 때 GitBook으로 만들어졌구나! 하고 넘어갔었는데 오늘날에서야 코드를 보니 VuePress로 만들어진 것을 확인할 수 있었다. 💡 VuePress? Vue 기반 정적 사이트 생성기 Vue를 기반으로 GitBook과 같이 문서화, 블로그 등에 많이 쓰이는 라이브러리였다. GitBook으로 알고 있던 사이트들이 VuePress 였었다는 것에 정말 관심을 가지지 않았구나 싶었다..😅 npmtrends에서 확인해보니 GitBook 보다는 VuePress가 ..
🔍 기능 미리 보기 ✨ 구현할 기능 +/- 버튼으로 수량 조절하기 1개 보다 작거나, 재고 보다 큰 수량을 입력할 수 없게 예외처리 하기 에 값을 입력하여 수량 조절하기 1️⃣ 버튼으로 수량 조절 자식 컴포넌트의 구성 요소인 버튼으로 수량을 조절하여 부모 컴포넌트가 가지고 있는 수량과 가격에 대한 상태 값을 변경하고 싶다면, 해당 상태들을 변경할 수 있는 함수를 자식 요소인 QuantityInput의 props로 전달하여 QuantityInput에 있는 button의 이벤트 핸들러로 추가해주면 된다. // ProductInfo.jsx export default function ProductInfo({ product }) { const [quantity, setQuantity] = useState(1); ..