Minji Log

푸터의 위치를 원하는대로 배치해보자. 챔피언 목록처럼 데이터가 많아서 스크롤이 생길 경우 푸터가 자연스럽게 아래로 가게 되는데, 챔피언 상세 화면에서 스크롤이 생길 정도로 데이터가 많지 않으면 푸터가 중앙에 자리 잡고 있는 현상이 발생했다. 😮‍💨 문제점목록은 푸터가 내가 원하는 대로 알아서 아래에 잘 자리 잡고 있다. 그러나. . 챔피언 상세 페이지에서는...데이터의 양이 적기 때문에 스크롤이 생기지 않고 애매한 중앙에 위치해 있는 상태가 되었다. 내가 원하던 것은.. 스크롤이 생기면 스크롤이 끝나고 푸터가 보이고, 데이터가 별로 없어서 스크롤이 생기지 않는다면 뷰포인트 하단에 푸더가 보이도록 하는 것이다. 이를 해결해 보자. 변경 전 코드 홈 ..

키 발급riotgames developer 에 접속하여 Key 를 받아보자. 로그인 완료 후 MY ACCOUNT - DASHBOARD 에서 API KEY 를 발급한다. 환경변수루트 경로의 .env.local 에 발급받은 key 를 넣는다. NEXT_PUBLIC_RIOT_API_KEY=RG...-5.....-45......d......위와 같은 방식으로 key 를 넣어주면 완료

프로젝트 생성Next.js 프로젝트 생성npx create-next-app@latest위와 같이 명령어를 입력한 후  필요한 옵션을 선택 후 프로젝트 생성! 생성한 프로젝트를 실행하는 방법은 react 와 동일하다. yarn dev 를 입력해 주면 된다! 레이아웃 설정내가 만들 페이지는 모든 페이지에 공통으로 있는 레이아웃이 필요하고 그 레이아웃에 페이지를 이동하는 링크가 필요하다. root 의 layout.tsximport type { Metadata } from "next";import "./globals.css";import Link from "next/link";export const metadata: Metadata = { title: "Create Next App", description:..

타입스크립트를 처음 해보는데.. 처음 공부하면서 투두리스트 만들기를 해보았다. 프로젝트 생성프로젝트 생성yarn create vite ts-todo-list --template react-ts json-server 설치yarn add json-server 전체 코드todos.tsexport type Todo = { id: string; title: string; completed: boolean;};/** 조회 */export const getTodos = async (): Promise => { const res = await fetch("http://localhost:4000/todos"); const data = await res.json(); return data;};/** 등록 */e..

프로젝트를 진행하던 중 프로필 조회에서 갑자기 오류가 발생했다.  오류네트워크 탭에서 확인한 오류 원인은 토큰 만료 이슈..!  토큰 만료 시간을 확인해 보니.. 1시간인 것을 확인했다...  해결 과정...우선 빠른 테스트를 위해 토큰을 1분짜리 발급하도록 했다.export const login = async (userData) => { return await authInstance.post("/login?expiresIn=1m", userData);}; 처음 생각한 해결 방법은 응답이 status 가 401 인 경우 로그아웃 처리하고 로그인 페이지로 돌리면 되겠지 했는데, 다른 오류도 다 401을 주고 있었다.그러면 응답으로 "토큰이 만료되었습니다. 다시 로그인 해주세요." 라는 메세지를 주고 있으..

팀 프로젝트에서 야심 차게 alert 창을 이쁘게 변경하고 싶어서 sweetalert2 라이브러리를 사용하고 깃허브에 push 를 했다. 근데..? 팀원분들께서 내가 수정 사항을 풀 받으니까 import 오류가 발생한다고 하였다. 설치한 라이브러리가 package.jason 에 잘 들어가있는것을 보니 잘 설치한 것으로 판단했지만... 팀원분들께 yarn add sweetalert2 로 설치해 봐달라고 부탁했지만 여전히 오류가 발생했다.  어쩔 수 없이 일단 내 잘못 같아서 롤백했지만.. 나중에 알게 된 원인은 아래와 같다. 원인원인을 이해하려면 모듈이 설치되는 위치와 gitignore 에 대해서 이해하고 있어야 한다. 라이브러리(모듈)를 설치할 때 yarn add 혹은 npm install 명령어로 설치..