Minji Log

프로젝트 생성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:..

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

props drilling 방식으로 구현한 코드를 Context 를 사용하여 리팩토링해 보려 한다.  Context API 사용 전 구조아래 이미지는 리팩토링 전 props drilling 방식으로 구현한 컴포넌트 구조이다.  Dashboard 에서 사용하지 않는 removedPokemon 을 PokemonCard 를 위해서 props 로 전달해 주고 있다. 또한 PokemonList 에서 사용하지 않는 addPokemon 을 props 로 전달해 주고 있다. 이 프로젝트는 간단한 구조로 되어있어서 충분히 props drilling 방식으로 필요한 정보를 전달해 줘도 괜찮겠지만 만약 컴포넌트가 몇백 개 되면 props 를 전달 전달 전달.... 해야될 것이다. 이를 해소하기 위해 Context 를 사용해..

주어진 포켓몬 중에서 원하는 포켓몬을 추가할 수 있는 프로젝트를 진행하고 있다. 포켓몬은 총 6개를 선택할 수 있고 포켓몬 3개를 선택했으면 3개의 포켓몬이 보이고 선택하지 않은 3개는 기본 이미지가 보여야 한다. 선택한 3개와 선택하지 않은 기본 이미지가 한 번에 렌더링이 이루어져야 하는데, 이 렌더링 방식을 어떻게 해주어야 할지 고민한 것을 정리해 보려고 한다. 처음 접근 방식과 이슈처음 생각한 방식은 useState 초기화를 크기가 6인 배열로 만들어버리기 아래와 같이 각각의 요소를 null 로 초기화한 크기가 6인 배열을 useState 로 설정하였다. (당시엔 이게 최선이라고 생각함)하지만 이렇게 해버리니까 사소한 문제점들이 발생하기 시작했다. 😇 const [selectedPokemon, s..

내일배움캠프에서 진행한 두 번째 팀 프로젝트가 끝났다. 이번 프로젝트는 개인프로젝트로 진행했던 영화 검색 사이트를 고도화하는 것이었다. 이번 프로젝트로 배운 것이 많기에 오늘도 KTP 회고를 작성해 보려 한다. 🥳 프로젝트 결과물  배포 링크배포링크깃허브 주소 Keep지난번 팀프로젝트 에서 아쉬웠던 부분을 분석해서 이번 프로젝트에서는 보완하여 진행했다. 첫 번째, 프로젝트 환경 구성을 미리 정하고 진행한 점이 좋았다. 지난번에는 프로젝트 폴더 구조와 코딩컨벤션 등을 정해두지 않았었다. 이 부분을 이번 팀 프로젝트에서는 팀원분들과 개발 시작 전에 먼저 상의하고 구조를 잡아두고 진행했다. 확실히 이렇게 하니까 프로젝트 구조가 한눈에 보여서 파일 찾기도 쉬웠고, 각 폴더와 파일이 어떤 역할을 하는지 명확하게..

영화 검색 사이트를 개발하면서 발생했던 소소한 이슈와 해결방법들을 정리해보려한다.  리뷰 이슈새로고침 등록, 삭제, 수정을 할 때 변경 사항을 반영하기 위해서 화면을 새로고침하도록 했다.  아래는 수정 버튼 클릭스 발생하는 이벤트이다. 수정이 완료된 후 새로고침을 하여 변경된 데이터를 보이도록 했다. 그러나 너무 대놓고 깜빡이는 현상이 보기 불편해서 다른 방법이 있나 고민하던 중, DOM 을 직접 수정하여 변경 사항을 저장하는 방법이 있는 것을 알았다.saveUpdateButton.addEventListener('click', async () => { if (window.confirm('정말로 이 리뷰를 수정하시겠습니까?')) { const updatedContent = reviewItem.que..