myinfo7091 님의 블로그

[React 심화 주차] 팀 프로젝트_개발 멘토링 플랫폼

회원가입회원가입 입력 폼입력정보에 대한 유효성 검사정규식을 포함한 유효성 검사입력 받았으면 supabase 회원가입 로직 작성UI 꾸미기로그인 로그인 입력 폼 입력정보에 대한 유효성 검사멘토 등록자기소개 입력 필드멘토취소커리큘럼 선택프로필 사진 업로드(supabase storage 연동)회원용, 멘토용 사 진 따로 두되 멘토 사진 등록 폼에서 회원용 사진도 불러올 수 있게 버튼 추가?분야 해시태그최대 3-5개 등록카테고리 역할일단 글자수 제한 ( 10 글자 )PDF 파일 업로드 (이력서) (도전)경력 폼 어떻게 구성할지?경력 입력을 위한 양식이 존재사용자가 추가하기? 버튼을 누르면 추가 경력을 입력하기 위한 양식 노출회사 이름, 직책, 근무기간 (날짜 인풋), 맡은 업무홈페이지헤더 푸터 공용 컴포넌트로 ..

[Next.js/Typescript] LOL_Dex: NextJS에서 환경변수 사용하기

구현 목표환경변수를 설정해서 API key를 사용한다.  문제점: Next.js 환경변수 설정 오류Next.js 환경변수를 설정했지만 undefined로 표시되거나 제대로 읽히지 않았다. 클라이언트 측 코드에서 환경변수를 접근하려 할 때 값이 설정되지 않는 문제라도 있는 것일까?  NextJS에서 환경변수 .env 사용하는 방법NextJS는 기본적으로 환경 변수를 지원하고 있으며, 사용하기가 매우 쉽습니다. 환경 변수가 필요한 이유 환경 변수가 필요한 이유는 우리가 웹 애플리케이션을 만들 때 개발 모드(development mode)와cpro95.tistory.com  원인 파악: 환경변수 접두사클라이언트에서 접근하려면 환경변수 이름에 NEXT_PUBLIC_ 접두사가 꼭 필요하다고 한다. 슬랙 공지를 통..

[Next.js/Typescript] LOL_Dex: 컴포넌트에서 버전 정보 전달하기

구현 목표리그 오브 레전드 아이템 정보 페이지에 사용될 아이템 카드 컴포넌트를 만들고 알맞은 이미지를 가져와서 사용한다.  문제점: 컴포넌트에서 버전 정보 전달 오류각종 이미지와 기본 URL 사용을 위해 constants.ts에 필요한 URL과 생성 함수를 정리했는데, ItemCards 컴포넌트에서 각 아이템에 해당하는 이미지가 로드되지 않았다. 확인한 내용은 아이템 이미지를 가져오기 위해 URL을 생성하는 getItemImgUrl 함수가 버전 정보를 필요로 한다는 것이다.// constants.ts 예시// Data Dragon API 기본 URLexport const API_URL = "https://ddragon.leagueoflegends.com";// 챔피언 스퀘어 이미지 URLexport co..

import ChampionCards from "@/components/ChampionCards";import { Champion } from "@/types/Champion";import { fetchChampionList, fetchVersion } from "@/utils/serverApi";export default async function ChampionsPage() { const version = await fetchVersion(); const championList: Champion[] = await fetchChampionList(); return ( 챔피언 목록 {championList.map((champion) =..

import { ChampionRotation } from "@/types/ChampionRotation";import { NextResponse } from "next/server";export async function GET() { const apiKey = process.env.NEXT_PUBLIC_RIOT_API_KEY as string; if (!apiKey) { return NextResponse.json( { error: "API KEY를 찾을 수 없습니다." }, { status: 500, } ); } try { const response = await fetch( "https://kr.api.riotgames.com..

3. 메인페이지, 레이아웃 구성 및 네비게이션 추가페이지 설정 및 메인 페이지 구현경로: /기능: 앱의 홈 페이지로, 주요 링크와 간단한 소개를 제공합니다.렌더링 방식: Static Site Generation (SSG)빌드 시점에 페이지를 정적으로 생성합니다.요구사항:글로벌 레이아웃을 설정하고 네비게이션 메뉴를 추가하여 페이지 간 이동이 가능하도록 합니다.챔피언 목록, 아이템 목록, 로테이션 정보 페이지로 이동할 수 있는 링크를 제공합니다.힌트:Next.js의 App Router를 사용하여 레이아웃과 페이지를 구성합니다.layout.tsx 파일에서 글로벌 네비게이션을 설정하고, 공통 레이아웃을 정의합니다.Tailwind CSS를 활용하여 스타일링을 적용합니다.정적 콘텐츠이므로 SSG를 사용하여 빠른 로..

/* eslint-disable @next/next/no-img-element */// SSG// 서버 컴포넌트에서는 fetch API를 통해 데이터를 직접 불러올 수 있다.// build 시점에 데이터를 불러오기 때문에 터미널에 console.log로 데이터를 출력해볼 수 있다.export default async function HomePage() { const response = await fetch("http://localhost:4000/products"); const data: Product[] = await response.json(); console.log(data); return ( Hello! Next.js HomePage ..

Route HandlersNext.js 13부터는 app 디렉토리에서 API 엔드포인트를 직접 정의할 수 있는 Route Handlers 기능이 추가되었다. 별도의 api 폴더를 사용하지 않고도 서버 측의 기능을 구현할 수 있다. Route Handlers는 웹 개발에서 동적인 사용자 경험을 제공하기 위한 서버 측 로직이 요구될 때 쓰일 수 있다. 사용자가 입력한 내용을 검증, 처리하는 API, 데이터 조회와 수정 등 서버 측에서 작업을 수행할 때 장점을 갖는다.컴포넌트와 API 라우트를 같은 위치에 배치하여 유지 보수성을 높일 수 있다.Next.js의 서버 사이드 기능을 쉽게 구현할 수 있다.   Route Handlers의 위치  Route handler 파일은 app 디렉토리 아래, 라우트 이름에 ..

타입스크립트를 사용하는 이유 웹 사이트를 운영하는 데 있어 높은 코드 품질로 버그 없이 사용자에게 안정감 있는 경험을 제공하는 것이 중요해졌다. TypeScript는 동적 타입 언어인 JavaScript를 보완해 주면서 활용도가 늘어나고 있다. TypeScript는 JavaScript의 상위 확장자로, 원하는 변수 타입을 정의하고 JS로 변환하여 브라우저에서 실행할 수 있다. 타입스크립트를 사용하는 가장 큰 이유는 버그를 예방할 수 잇는 타입 시스템이다. 타입(자료형)은 어떠한 변수가 문자열인지, 숫자인지, boolean인지 등 값의 형태에 따라 자료의 유형을 지정해주는 것이다. 만약 컴파일 과정에서 지정한 타입에 맞지 않는 값이 들어가면 에러가 발생하는데, 이를 통해 디버깅을 좀 더 편하게 할 수 있다..

프로젝트 개요Next.js와 TypeScript를 사용하여 리그 오브 레전드 캐릭터&아이템 정보 도감 만들기 주요 기능챔피언 정보 조회아이템 정보 조회금주의 챔피언 로테이션 정보 조회 프로젝트 셋업npx create-next-app@14 // 14버전 설치하기What is your project named? my-appWould you like to use TypeScript? YesWould you like to use ESLint? NoWould you like to use Tailwind CSS? YesWould you like to use `src/` directory? YesWould you like to use App Router? (recommended) YesWould you like to..