072DATA

오늘은 팀 프로젝트를 시작하기에 앞서 ERDCloud를 활용하여 데이터베이스 세팅을더 쉽고 효율적으로 할 수 있도록 학습해 보았습니다..! 사실 예전에 해봤는데 다 까먹음  ERDCloud 링크https://www.erdcloud.com/ ERDCloudDraw ERD with your team members. All states are shared in real time. And it's FREE. Database modeling tool.www.erdcloud.com 팀 프로젝트 생성 팀으로 시작하기 위해서 사진에 표시된 버튼을 누르고 팀 이름과 팀에 초대할 유저의 아이디를 저장하고 프로젝트를 생성합니다.   만약 팀 프로젝트를 생성한 뒤에 다른 유저를 초대하려면팀 프로젝트에서 사진에 나와있는 수정 ..

프로젝트를 진행하면서 간단하게 모달창을 구현해 보았다 라이브러리를 설치하여 모달 창을 만드는 방법도 있었지만 직접 만들어 보고 싶었다! 모달 컴포넌트import { ModalTypeC } from "@/types/modal";import React from "react";import styled from "styled-components";const Modal: React.FC = ({ isModalOpen, closeModal, children }) => { if (!isModalOpen) return null; return ( e.stopPropagation()}> {children} );};export default Modal; 먼저 Modal ..

Metadata 설정 Metadata는 Next.js에서 페이지의 메타데이터를 설정하는 객체이며사용자 경험을 개선하는 데 중요하고  SEO와 각 페이지의 고유한 정보를 설정할 수 있음// 전체 layout.tsxexport const metadata: Metadata = { title: "LoL", description: "롤 정보 페이지", icons: { icon: "/images/fav2.png", },};title: 브라우저 탭에 표시되는 페이지 제목 description: 페이지 설명으로, 주로 검색 엔진에서 사용됨icons: 브라우저의 탭에 표시될 아이콘의 경로 설정 근데 이제 icons의 경우 public/images 폴더 안에 이미지를 넣어서 사용했는데 public/images..

롤 관련 정보를 보여주는 사이트를 next.js와 타입 스크립트로 프로젝트를 진행하던 도중  Vercel로 배포하는 과정에서 나서 403 에러코드가 나왔다..  일단 API Key가 제대로 입력되지 않은 건 아닐까 하는 마음에 API Key를 재등록 해보았다  하지만 그럼에도 해당  오류는 계속 유지되고 있는데 엔드포인트를 읽지 못하는 건지 ..    혹시 몰라서 try catch문을 제거하고 다시 빌드해보기로 했다 그러다.. 갑자기 라이엇에서 제공하는 API Key에는 유효기간이 있었다는 사실을 정말 깜빡 있고 있었다.. 혹시 몰라서 찾아보니 빨간 글씨고 유효 기간이 만료되었다는 것을 목격했다    새로운 API로 재발급 받고 썬더 클라이언트를 사용해 API를 호출해보니 데이터가 나오는 것이다!!yar..

4가지 렌더링  CSR(Client Side Rendering) 특징브라우저에서 JavaScript를 이용해 동적으로 페이지를 렌더링렌더링의 주체가 클라이언트임장점최초 로드를 완료한 뒤 상호작용이 빠르고 부드러움서버에게 추가적인 요청을 보낼 필요가 없기 때문에, 사용자 경험이 좋음.서버 부하가 적음단점첫 페이지 로딩 시간(Time To View)이 길 수 있음JavaScript가 로딩 되고 실행될 때까지 페이지가 비어있어 검색 엔진 최적화(SEO)에 불리함 "use client" // useEffect, useState와 같은 훅을 사용시 꼭 작성해줘야 함import ProductList from '@/components/ProductList';import { Product } from '@/types'..