제인의 블로그

우리가 시작하는 프로젝트명DoGo 호텔 예약 사이트 및 주변 볼거리를 알려주는 사이트이다. - 페이지별 내용 정리 - 1달동안 기획할 우리의 프로젝트가 얼마나 완성이 될지 궁금하다.오늘은 하루종일 기획회의 중인데 팀프하니깐 재밌다.기대가 됩니다 (찡긋)

아니 잘되던 코드가 갑자기 안되다니... 이게 말이야 방구야?라고 생각하고 또 다시 쓴 코드들을무한으로 ctr+Z ...그래도 그래도오류를 잡지 못했는데..???????????????????????????????????????????? 내 코드들은 진짜 해만 지면 안되는건가..???? -----------------------------------------> 진짜 갑자기 안되는...데...?    TS(TypeScript)에서 폴더구조는 중요한데내 Font 폴더는 Public 안에 있었는데, App 폴더 안으로 들어가야한다고 했다...끄..ㅌ...이게..진정..끄 ㅌ 주말동안 코딩을 못했는데 저딴게 해결방안....Next의 폴더구조는 됫다가 안됫다가 하는거같다.맥북을 살까 싶기도하고? 다시 한번 꼼꼼히..

Trouble Shooting  Q. 다크 모드를 적용 했을떄, 왜 헤더에 있는 글씨가 안보이는 걸까? 백그라운드 비디오는 왜 어두워지는거지? →header와 Background에 {theme use} 사용해보기→ 수정중에 또 다른 에러 발생 Q. 맥시멈 콜? 왜 yarn dev가 안될까? 에러코드 : ⨯ RangeError: Maximum call stack size exceeded at Object.hasOwnProperty () digest: "2662428016" GET / 500 in 2033ms 여기서 잠깐 500 Error 란?보통 위와 같은 화면을 보여주면서 원하는 문서로 넘어가지 않는 현상.사이트 자체의 에러로 원인은 다음과 같다.서버 사용량의 폭주로 인해 서비스가 일시적으로 중단된 것 ..

Trouble Shooting`$ npm run dev > my-app@0.1.0 dev > next dev --no-turbo /c/Program Files/nodejs/npm: line 65:  1481 Segmentation fault      "$NODE_EXE" "$NPM_CLI_JS" "$@"``$ next dev error Command failed with exit code 3221225477. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command. Segmentation fault ` 이건 뭐길래내가 아예 프로젝트를 할 수 없게 만드는 걸까?``--------------------> 해결방법 ..

1. 프로젝트 소개이 글에서는 Next.js, React Query, Riot Games API를 활용해 리그 오브 레전드의 챔피언 로테이션 페이지를 구현하고 배포 환경에서 발생한 문제를 해결하는 과정을 공유합니다.2. 주요 기술 및 구현 목표사용된 기술Next.js 13: 최신 React 기능과 SSR/ISR 지원.React Query: 클라이언트 상태 및 API 데이터 관리.Riot Games API: 로테이션 데이터 및 챔피언 정보를 가져오기 위한 API.TypeScript: 데이터 구조를 명확히 정의하여 안정성 확보.Tailwind CSS: 빠르고 유연한 스타일링.구현 목표Riot API를 통해 챔피언 로테이션 데이터를 가져와 UI에 표시.에러 처리, 로딩 상태 관리, 다크 모드 지원.배포 환경에..

피그마 어렵당... 일단 대략적으로 `SUPABASE` 설정과 `FIGMA`완료사실 나혼자 하는 프로젝트라영웅 제인 빌런 제인 ㅋㅋㅋㅋㅋ머릿속에 있으니까가보자고! 하는 생각만 드는데내가 가장 좋아하고 애착을 가진 게임 중 하나인 RIOT사의 LEAGUE OF LEGEND이게임하면서 결혼도 하고 애기도 가지고 울기도 하고 웃기도 하고 여튼 10년째 이게임을 하는중인데저번 프로젝트는 병원에서 하던 프로젝트이다 보니 아무래도 메모리 부족으로 TAILWIND나 이모저도 여러부분에서 부족함을 느끼고 보완해보고싶다. 라는 목표로 시작하게 되었다. 나는 롤토체스도 좋아하고 롤도 좋아하는 입장으로 써한 페이지에서 왜 전적검색이 동시에 왜 안될까 라고 생각하고 검색을 해봤더니 API가 달라서 그렇다는것.그렇다면 간편하게..

1. Hydration Error이유:React의 Hydration 과정에서 서버와 클라이언트의 렌더링 결과가 일치하지 않을 때 발생.주요 원인:서버에서 생성된 HTML과 클라이언트에서 생성된 DOM이 다름.클라이언트에서 동적 데이터가 렌더링 결과를 변경.useEffect, useState와 같은 클라이언트 전용 로직이 서버와 클라이언트의 초기 결과를 다르게 만듦.해결 방안:조건부 렌더링에 주의:클라이언트 전용 코드(window, document)는 서버 렌더링에서 동작하지 않으므로 useEffect 안에서 처리.예:import { useEffect, useState } from "react";function ExampleComponent() { const [isClient, setIsClient] =..

아으으아으악 하라고 하는거 다 햇는데.... ㅠㅠㅠ 일단 1주차  import React, { useState } from 'react';import styled from 'styled-components';type Todo = {  id: string;  text: string;  completed: boolean;};const TodoApp = () => {  const [todos, setTodos] = useState([]);  const [inputValue, setInputValue] = useState('');  const addTodo = () => {    if (inputValue.trim() === '') return;    const newTodo: Todo = {      id: ..

오늘이 체크리스트 마지막날...나 진짜 아품...마이아품.. 지..진짜 아품다.....나름 열심히 하지만 남들보단 뒤쳐지는것같은게 더 많이 느껴지는 하루....ㅠ 그래도 화이팅!아 그리고 귀찮다..누워서 물먹는 내 모습 보는거같당 ㅎㅎㅎ...... 마지막 체크리스트 시작해보자구요.사실 요즘 노트정리 중이라과거내용 복기중....쓸게 없는게 이미 다 썻단말이죠..ㅎQ1. 로그인 후 받은 acessToken을 저장하고 관리하는 방법에 대해 작성해보세요.(단순히 useState가 아니고 어떤 방법들이 더 있을지 생각해보시면 좋겠습니다.) A :로그인 후 accessToken을 저장하고 관리하는 다양한 방법accessToken은 사용자 인증 및 API 요청 시 중요한 역할을 하며, 이를 안전하고 효율적으로 관리하..

자 오늘도 코드 체크리스트 분석해보기짧게 쓰는 이유는 앉질 못해서 누워서 배위에서 써야하기때문....  Q1. axios를 사용하여 회원가입과 로그인 요청을 보내는 함수를 간단히 작성해보세요. A :회원가입 요청 함수import axios from 'axios';const signUp = async (email, password) => { try { const response = await axios.post('https://example.com/api/signup', { email, password, }); console.log('회원가입 성공:', response.data); alert('회원가입이 완료되었습니다.'); } catch (error) { ..