내일배움캠프 수료는 끝났지만 연휴 기간 동안의 외가댁과 아르바이트를 진행하면서 바쁜 일상을 보냈다.아마 이번 주까지가 나에게 주는 마지막 휴가일 것 같다. https://github.com/PomegranateBlue/dont_worry GitHub - PomegranateBlue/dont_worryContribute to PomegranateBlue/dont_worry development by creating an account on GitHub.github.com 튜터님들의 피드백을 토대로 이걸 리팩토링을 할 생각을 하니 막막했다.처음부터 뜯어고치는 편이 나을 정도인데, 이걸 고치려면 대체 무엇을 해야할지 감도 안 오고, 기술적인 고민을 했다는 것도 참 어렵다.피드백 받은 내용을 요약하자면 다음과 ..

https://redpome.tistory.com/47 롤 챔피언 정보 프로젝트 - (2)https://redpome.tistory.com/45 롤 챔피언 정보 프로젝트 - (1)Next.js로 롤 정보 페이지를 만드는 프로젝트를 시작했다. 롤에서 API를 가져와 챔피언 목록을 부르던 중에 API 호출 방식에서 다음과 같이 작redpome.tistory.com오늘은 처음부터 모든 페이지를 다시 만들었다.오늘 아침에 프로젝트를 실행시켰을때의 문제점은 다음과 같았다. 챔피언 디테일 페이지에서 404 에러 발생아이템 목록 페이지 접근 시 item.name 중복 사용으로 인한 페이지 로딩 느려짐로테이션 페이지 500번 에러 => 200번으로 정상적으로 동작하나 화면 렌더링 실패다행히 모든 것은 해결되었다. 먼저..

유연한 페이지 렌더링을 위해 Parallel Routes(병렬 라우트) 와 Intercepting Routes(인터셉트 라우트) 라는 고급 라우팅 기술을 제공한다.이 기술을 활용하면 여러 개의 페이지를 병렬로 렌더링하거나, 기존의 URL 구조를 변경하지 않고 특정 페이지를 가로채서 원하는 방식으로 렌더링할 수 있다. 1. Parallel Routes (병렬 라우트)Parallel Routes는 여러 개의 페이지(컴포넌트)를 동시에 렌더링할 수 있도록 지원하는 라우팅 방식이다.일반적으로 Next.js에서는 특정 페이지를 렌더링할 때 단일 페이지 구조를 따르지만, Parallel Routes를 사용하면 한 페이지에서 여러 개의 레이아웃을 동적으로 구성할 수 있다.이 기능은 대시보드, 관리 페이지, 챗봇 UI..

https://redpome.tistory.com/45 롤 챔피언 정보 프로젝트 - (1)Next.js로 롤 정보 페이지를 만드는 프로젝트를 시작했다. 롤에서 API를 가져와 챔피언 목록을 부르던 중에 API 호출 방식에서 다음과 같이 작성했다. export async function getChampions() { const response = awaitredpome.tistory.com 오늘 크게 바뀐 사항은 2가지이다. 데이터 페칭을 위한 별도의 함수 생성아이템 목록 생성우선 바뀐 사항에 대해서 정리를 해보자. import { ChampionList, ChampionDataInterface, ItemDataInterface,} from "@/types/apiType";import { Champi..

https://school.programmers.co.kr/learn/courses/30/lessons/42840 프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr function solution(answers) { let eachPassed=[0,0,0]; const studentAnswers=[ [1,2,3,4,5], [2,1,2,3,2,4,2,5], [3,3,1,1,2,2,4,4,5,5] ] answers.forEach((sol,index)=>{ studentAnswers.forEach((answer,i)=>{ ..

Next.js로 롤 정보 페이지를 만드는 프로젝트를 시작했다. 롤에서 API를 가져와 챔피언 목록을 부르던 중에 API 호출 방식에서 다음과 같이 작성했다. export async function getChampions() { const response = await fetch( "https://ddragon.leagueoflegends.com/cdn/15.5.1/data/ko_KR/champion.json" ); const data = await response.json(); return data.data;} 다른 컴포넌트에서 콘솔로그를 찍으면 vscode의 터미널에서는 잘 찍힌다. 그러나 Next.js에서는 다음의 코드에서 문제가 발생한다고 나온다. import { getChampions..

https://school.programmers.co.kr/learn/courses/30/lessons/42862 프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 문제에서 제시하는 매개변수는 다음과 같았다. n =>현재 전체 학생 수lost =>체육복 없는 학생의 번호reserve => 여벌의 체육복 번호reserve는 숫자가 담긴 배열인데, 1만큼 더하고,뺀 번호가 lost에 있으면 그 학생에게 체육복을 빌려줄 수 있다.처음에는 별도의 배열을 담아서 reserve에 존재하는 숫자를 1만큼 더하고 뺀 값을 만들었지만, 해당 배열은 빌려준 체육복을 빼기가 힘들다는 점이 있었다. function soluti..

렌더링 방식을 2가지로 나누자면 CSR(Client Side Rendering), SSR(Server Side Rendering) 방식이 존재한다. SSR 렌더링 방식export async function getServerSideProps() { const res = await fetch("https://api.example.com/data"); const data = await res.json(); return { props: { data } };}export default function Page({ data }) { return {data.message};} SEO에 최적화 된 방식초기 렌더링 속도 빠름서버 부담이 커질 수 있다위의 3가지 특징이 주요 특징이다. SSR은 사용자의 요청에 따라..

Next.jsNext.js는 React 기반의 프레임워크로, 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 지원하는 등 다양한 기능을 제공한다.주요 특징  서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG) 지원 파일 기반 라우팅 (React Router 필요 없음)SEO 최적화 (검색 엔진이 페이지를 쉽게 인덱싱 가능) API 라우트 제공 (백엔드 없이 간단한 서버 로직 구현 가능) 이미지 최적화, 코드 스플리팅, 빠른 성능 제공React로 프로젝트를 만들면 일반적으로 클라이언트 사이드 렌더링(CSR) 방식이 사용한다. 하지만 CSR 방식은 SEO가 약하고, 초기 로딩 속도가 느리다는 단점이 있다.Next.js는 이런 문제를 해결하기 위해 SSR(Server Side Rendering..

https://redpome.tistory.com/39 { return ( );};export default App; 처음 만들 때 생성되는 App 컴포넌트에서 위와 " data-og-host="redpome.tistory.com" data-og-source-url="https://redpome.tistory.com/39" data-og-url="https://redpome.tistory.com/39" data-og-image="https://blog.kakaocdn.net/dna/sGRML/hyYnai5kPn/AAAAAAAAAAAAAAAAAAAAAIoLst3c9Q0f2anSkfA2WBuAupaDSg6x2bDQJq9ED6du/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1761922799&allow_ip=&allow_referer=&signature=jk2pSsMGueA1rRdWOnV7pnIr3%2FM%3D