React (8) 썸네일형 리스트형 [React] TypeError: Cannot read properties of undefined (reading 'body') - 공공데이터포털 API 요청 공공데이터포털에서 제공하는 산 정보를 이용한 토이 프로젝트를 개발 중이었는데 갑자기 산 정보들이 나오지 않더니 아래와 같은 에러가 발생했다. 개발하다 보면 자주 볼 수 있는 TypeError: Cannot read properties of undefined (reading ~) 에러인데 말 그대로 속성값을 읽지 못한다는 것이다. 위 에러에서는 body라는 속성을 가진 배열이나 객체가 undefined 일 것이다. 코드를 살펴보면 axios로 API를 요청하고 응답 받은 데이터를 response 변수에 담은 뒤 response.data.response.body.items.item으로 접근한 데이터를 다시 newMoutains 라는 변수에 담는 코드이다. 근데 여기서 화살표로 표시한 response.bod.. [React] amCharts로 세계지도 생성하기 (Feat. 한국지도) amCharts는 데이터를 차트화 시키는 데이터 시각화를 위한 라이브러리입니다. 또한 차트뿐만 아니라 지도 기능도 제공을 하는데요 이 기능을 이용하여 세계지도를 생성해 보겠습니다! 패키지 설치npm install @amcharts/amcharts4 @amcharts/amcharts4-geodata 코드 작성import React, { useEffect } from 'react';import * as am4core from "@amcharts/amcharts4/core";import * as am4maps from "@amcharts/amcharts4/maps";import am4geodata_worldLow from "@amcharts/amcharts4-geodata/worldLow";function.. [React] Promise 객체 [[PromiseResult]] 값 사용하기 map() 함수를 이용하여 여러번 Ajax(비동기) 요청하였는데, 그 값으로 Promise 객체가 배열에 저장되었다.이렇게 Promise 객체로 저장된 이유는 map() 함수는 각 요소에 대해 비동기 작업을 수행하고 해당 작업이 완료될 때까지 기다리지 않기 때문에 Promise 객체를 반환한다. 내가 사용해야 할 값은 [[PromiseResult]] 안에 data 값인데 이를 사용하려면 Promise가 완료될 때까지 기다려야 주는 코드를 추가해줘야 한다. API를 요청 하는 기존 코드 useEffect(() => { const getDataApi = async () => { try { const members = useSelector(selectMembers); .. [React] .env 파일로 환경 변수 관리 하기 (Feat. API Key) 환경 변수란 컴퓨터 시스템에서 프로그램이 실행될 때 동작을 제어하거나 설정하기 위해 사용되는 값들의 모임입니다. 개발 환경에서의 환경 변수로는 API Key, 비밀키, 서버 URL, DB URL, DB Password 등이 있겠네요 그럼 이러한 값들을 .env 파일로 관리하지 않게되면 어떻게 될까요? // API Key const myApiKey = 'abcdefg12345'; 우리가 작성한 코드는 깃허브의 공개된 리포지토리에 올리게 되면 별다른 조치를 하지 않는 이상 그대로 올라가게 됩니다. 위에 있는 내 API Key를 아무나 볼 수 있고 또, 무분별하게 사용될 수도 있습니다. 그렇기 때문에 공개되어서는 안되는 민감한 정보들을 .env 파일에 저장하여 필요할 때 환경 변수로 불러오는 것입니다. 아래 .. [React] KaKao 지도 API / 카카오맵 사용하기 KaKao 지도 API를 사용하여 내 웹 사이트에 카카오맵을 적용해보겠습니다. Kakao 지도 Javascript API 키 발급 및 웹 플랫폼 추가하기 Kakao Developers카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.developers.kakao.com카카오맵은 Javascript 키를 발급받고 플랫폼(사이트 도메인)을 등록해야 사용이 가능합니다. 위 사이트에서 카카오 계정으로 로그인 해주세요! 로그인 후 우측 상단 '내 에플리케이션' 클릭 전 이미 예전에 만들어 놓은 애플리케이션이 하나 있네요!'애플리케이션 추가하기' 를 클릭하여 새로운 애플리케이션을 생성해보겠습니다. 앱 이름, 사업자명.. [React] 파비콘(Favicon) 설정하기 (With. 티스토리) 파비콘이란 웹 사이트나 웹 페이지의 브라우저 탭에 표시되는 작은 아이콘입니다. 웹 사이트를 대표하는 아이콘이므로 통상적으로 로고를 많이 사용합니다. 리액트 프로젝트를 처음 생성하면 \public\favicon.ico 파일과 함께 사진에 보이는 파비콘이 기본으로 설정됩니다. 이 파비콘을 내가 원하는 이미지로 바꿔보겠습니다! 이미지 확장자 변환 무료 Favicon 생성기, 이미지 변환-Wizlogo 무료로 몇 초 안에 귀하의 웹 사이트에 대한 즐겨 찾기 아이콘을 생성하십시오. 이미지 파일 (GIF, JPG 및 PNG)을 업로드하고 즐겨 찾기 아이콘 (ICO) 또는 앱 아이콘으로 변환하십시오. wizlogo.com 리액트에서 파비콘(이미지)의 확장자로 jpg, png 파일도 사용 가능하지만 ico 파일이 기본.. [React] React Bootstrap 사용 방법 Bootstrap은 레이아웃, 폼, 버튼, 모달 등을 제공하여 웹 사이트 개발을 보다 쉽게 할 수 있도록 도와주는 CSS, JS 프레임워크이다. 해당 포스터에서는 리액트 용 react-bootstrap을 사용 해보자! 아래 사이트에서 로그인 없이 무료로 사용이 가능하며, 단순히 코드를 복사 붙여넣기 하여 편하게 사용할 수 있다! React Bootstrap | React Bootstrap The most popular front-end framework, rebuilt for React react-bootstrap.netlify.app 사용해 보기 제공되는 기능도 많고 결과 화면도 미리 보여줘서 골라 사용하기 편하다! 홈페이지 상단 'Components' 탭을 클릭하면 여러 컴포넌트를 볼 수 있다. 예제.. [React] a태그와 Link, useNavigate()의 차이 페이지를 이동하는 HTML a태그와 react-router-dom에서 제공되는 Link 컴포넌트, useNavigate() 훅의 차이점에 대해 알아보자! 차이점 a태그 : 새로고침이 일어난다. Link, useNavigate() : 새로고침이 일어나지 않는다. 새로고침이 무슨 상관 있을까? DB에 실시간으로 값을 저장하지 않는 이상 state값이 초기화 되기 때문 사용법 npm install react-router-dom import { Link, useNavigate } from 'react-router-dom'; const navigate = useNavigate(); {/* a태그 */} Cart {/* Link */} Cart {/* useNavigate() */} navigate('/cart').. 이전 1 다음
