TiL44 12. 18. 37일차 TIL Riot API활용 프로젝트 Suspense, 트러블슈팅 며칠 째 과제를 끝내기 위해 그리고 이쁘게 만들기 위해 몰두하고 있다. 개발하면서 정말 여러가지의 트러블을 경험했지만 그 중에서 제일 이해가 안되는 문제를 다뤄보려고 한다. 바로 suspense를 어떻게 써야하는지에 대한 것이다.1. Suspense란 무엇인가?먼저 Suspense란 무엇인지 알아볼 필요가 있다. Suspense란 비동기 데이터를 로딩하거나, 컴포넌트를 동적으로 로드할 때 로딩 상태를 처리하기 위한 React의 내장 기능이다. React 16.6v 에서 처음 도입되었으며, 주로 동적 컴포넌트 로드와 서버 컴포넌트의 데이터 로딩을 처리하는 데 사용된다. Suspense는 UI가 렌더링되기 전에 필요한 데이터를 로드하거나 작업이 완료되기를 기다리는 동안 특정 UI(fallback)를 표시해준.. 2024. 12. 19. 12. 13. 36일차 TIL Next.js 과제_02 오늘은 어제 작성한 fetch 로직을 이용하여 브라우저에 정보를 렌더링하는 것과 다크모드/화이트모드를 구현하였다. 하지만 로테이션과 챔피언은 제대로 작동하지 않고 있다. 이는 오후에 일어나서 확인하고 수정할 예정이다.1. 아이템 정보 렌더링// app/items/page.tsximport { fetchItemData } from "@/utils/serverApi";import Image from "next/image";import { ItemDetails } from "@/types/items";export const revalidate = 86400;export default async function Items() { const itemRes = await fetchItemData(); const.. 2024. 12. 14. 12. 12. 35일차 TIL next과제 시작 오늘은 Riot에서 api key를 발급 받은 후 가져오는 로직과 함께 데이터의 타입을 작성하였다.1. LOL 로테이션 정보 가져오기route.ts는 Next.js의 API 라우트에서 사용할 수 있도록 설계되었으며 fetchChampionRotation 함수는 Riot Games API를 통해 챔피언 로테이션 데이터를 가져오는 서버 사이드 함수이다. get 메서드를 통해 데이터를 가져왔다.import { NextResponse } from "next/server";export async function GET() { const RIOT_API_KEY = process.env.RIOT_API_KEY; const RIOT_API_URL = "https://kr.api.riotgames.com/lo.. 2024. 12. 12. 12. 11. 34일차 TIL Next.js 실습 오늘은 챌린지반에서 간단한 실습을 Next.js로 진행하였다. 막상 사용해보니 react 사용과 별 다를 것은 없었다고 생하지만 type을 설정하는 과정이 추가됐다는 것과 라우팅 설정이 다르다는 것을 느꼈고, Next로 프로젝트를 생성할 때 어떤 점을 주의해야하는지에 대해 알게 되었다.프로젝트는 api를 통해 전세계 국가의 정보를 간단하게 가져오는 것이었다.상태를 지정할 때에도 타입을 신경써주어야 했고,const [countries, setCountries] = useState([]);const [selectedCountries, setSelectedCountries] = useState([]); api를 통해 받아오는 데이터의 타입도 모두 정해주어야 했다.export interface Country {.. 2024. 12. 12. 12. 10. 33일차 TIL Next.js 시작 지난 뉴스피드 팀프로젝트 이후 욕심이 커 무리하게 되었다. 하루 평균 수면 시간이 2시간도 되지 않았던 것 같다. 그러다 저번주 수요일 문제가 생겼고 개인 컨디션 관리의 중요성을 뼈저리게 깨닫게 되었다. 그동안 많은 것들을 학습하였는데 (tailwind, zustand, 페이지네이션, 인피니티스크롤, 등) 이는 차츰 업데이트해야 할 것 같다. 오늘은 간단하게 타입스크립트와 next에서의 라우팅 구현 방식을 정리하려고 한다. React도 모르던 나는 어느새 next.js에 대해 배우고 있다. 1. 타입스크립트 (TypeScript)의 개념타입스크립트란 JS에 정적 타입을 추가한 프로그래밍 언어로 JS를 기반으로 하면서 코드의 안정성과 유지보수성을 향상시키기 위해 설계된 JS 상위 집합 언어라고 할 수 있다.. 2024. 12. 10. 11. 22. 31일차 TIL 세션, 토큰, 쿠키, JWT 오늘은 챌린지 반에서 과제를 통해 세션이란 무엇인지, 토큰, 쿠키, JWT란 무엇인지에 대해 알게 되었다.1. 쿠키쿠키는 웹 브라우저에 저장되는 작은 데이터 조각이다. 쿠키는 서버가 클라이언트에게 데이터를 저장하도록 요청하면, 브라우저는 해당 데이터를 저장하고 이후 요청에서 다시 서버로 보내는 방식으로 작동한다. 1) 주요 특징- 클라이언트(-라우저) 측에 저장됨.쿠키는 사용자의 컴퓨터에 저장된다.저장된 쿠키는 동일한 도메인에 대한 요청 시 자동으로 서버에 전달된다.- 크기 제한쿠키는 보통 4KB이하의 데이터를 저장할 수 있다.- 수명쿠키에는 만료 시간이 설정될 수 있다.만료 시간이 없는 쿠키는 브라우저를 닫으면 삭제 된다. (세션쿠키)만료 시간이 설정된 쿠키는 브라우저를 껏다 켜도 유지된다. (영구 쿠.. 2024. 11. 22. 이전 1 2 3 4 5 ··· 8 다음
