React (5) 썸네일형 리스트형 홍삼 : Uncaught runtime errors 에러 해결 과정 사이드로 진행하는 홍삼프로젝트 트러블 슈팅 기록 에러 문구Uncaught runtime errors:ERRORCannot read properties of undefined (reading 'map')TypeError: Cannot read properties of undefined (reading 'map') at GameRules 에러 상황import React from 'react';import styled from 'styled-components'export const GameRules = (props) => { const { game } = props; return ( 인트로 {game.game_intro} .. 리액트 웹사이트 아이콘 파비콘 만들기 리액트로 만든 웹사이트의 파비콘은 기본적으로 리액트 아이콘으로 되어있는데, 이 부분을 변경해보았습니다. 사진 속, '우리나라 독립달력' 왼쪽 모양을 변경할거예요! 가장 먼저 해야할 일은, 파비콘을 제작하는 것입니다. 파비콘 만들기 기존에 만들어둔 이미지가 있는 경우, 해당이미지를 사용해 쉽게 파비콘을 제작할 수 있어요. 1. 파비콘 제작 사이트 접속 https://www.favicon-generator.org/ Favicon & App Icon Generator Upload an image (PNG to ICO, JPG to ICO, GIF to ICO) and convert it to a Windows favicon (.ico) and App Icons. Learn more about favicons... React 웹 페이지 이름 변경, 브라우저 탭 표시 이름 변경하기 리액트 프로젝트 배포 후, 브라우저 탭에 표시되는 이름이 React App 인 것을 확인하고 변경해봤습니다. 1. public > index.html 파일 열기 웹 페이지 이름이 어디에 표시되어 있는지를 찾아내기 위해 public 폴더 하위에 위치한 index.html 파일을 열어줍니다. 2. title 태그 내부 문구 수정 title 태그 내부를 원하는 제목으로 수정해줍니다. 3. 로컬 환경에서 확인 로컬 환경에서 서버를 켜고 변경된 것을 확인할 수 있습니다. 배포를 했다면, 해당 사항을 담아 다시 배포한 뒤 제대로 적용된 것을 확인할 수 있어요. React 폴더명 변경 후 이미지 출력이 안될 때 프로젝트 진행 도중, 다른 페이지를 추가하며 기존 페이지의 이름을 수정하게 될 때가 있습니다. Info 페이지를 About 이라는 이름으로 수정하며, Info 페이지 이미지가 들어있던 폴더명을 수정했는데 이미지들이 출력되지 않습니다. 아니 그냥 이름만 바꿨는데!! 라고 생각하며 커밋을 확인해봐도 아무 문제가 없어보이고 경로에 오타를 냈는지 여러번 살펴봐도 문제가 없었습니다. 서버도 껐다가 켜고, 새로고침도 해보고 하다가 지피티에게 물어본 결과, 원인은 웹 캐시에 있다고 생각했습니다. < 끝까지 들어보세요! 맥에서 크롬 캐시 삭제 방법은 아래와 같습니다. 1. 단축키 shift + command + backspace 로 인터넷 사용기록 삭제 창 진입 혹은 1-1. 크롬 우상단 점 세개 클릭 1-2. 인터넷.. VS Code에서 React 프로젝트 생성 안될 때 해결 방법 나를 위해 기록하는 React 리액트 프로젝트를 생성하려는 과정에서 아래와 같은 화면이 나오며 프로젝트가 생성되지 않아 해결방법을 기록합니다. npx create-react-app blog React 프로젝트 생성 안될 때 해결 방법 node.js 설치 npm install 1. Node.js 설치 https://nodejs.org/ko Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 위 사이트에서 Node.js를 다운로드 합니다. 저는 안정성을 위해 최신버전 말고 왼쪽에 있는 LTS 버전을 다운로드했어요. 에러 발생을 줄이기 위해 다운로드 한 버전을 확인하고 다시 다운로드를 진행합니다. .. 이전 1 다음
