전체 글 (13) 썸네일형 리스트형 [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.. [Git] 깃허브로 무료 이미지 호스팅 하기 (임시방편) 로컬에 이미지를 저장하고 import 해서 사용하게 되면 개발 환경에서는 렌더링이 금방 되지만 Netlify 같은 무료 배포 서비스를 통해 배포하게 되면 속도가 현저하게 느려지는 경우가 발생한다. 그 이유는 서버 위치, 이미지 최적화, 네트워크 대역폭 제한 등 여러 문제가 있다.이를 해결하기 위해 CDN 또는 S3를 사용하는데 유료 서비스가 부담스럽거나 이미지가 많지 않아 오히려 사용하기 번거롭다면 GitHub에 이미지를 업로드하여 이미지의 URL을 사용하는 것이 성능 향상에 조금이나마 도움이 된다.다만 GitHub는 이미지 호스팅 서비스가 아니기 때문에 대규모 이미지 호스팅은 제한 되므로 임시방편의 목적으로 사용해야 한다. GitHub 리포지토리 생성 이미지를 업로드할 새로운 리포지토리를 생성해 주.. [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.. [정보처리산업기사 Ep.1] 정보처리 자격증 응시자격/일정/비용 많은 개발자들이 취득하는 정보처리 자격증! 그중 정보처리산업기사에 도전하게 되었습니다.우선 첫 글에서는 정보처리 자격증들의 기본적인 정보를 살펴보겠습니다. 응시자격자격증응시자격정보처리기능사제한없음정보처리산업기사- 관련학과 대학 2년제 이상 졸업(예정)자 - 기능사 + 유사 직무분야 경력 1년- 유사 직무분야 경력 2년정보처리기사- 관련학과 대학 4년제 졸업(예정)자- 3년제 졸업 + 유사 직무분야 경력 1년- 2년제 졸업 + 유사 직무분야 경력 2년- 정보처리산업기사 + 유사 직무분야 경력 1년 - 기능사 + 관련 업무 경력 3년- 유사 직무분야 경력 4년 * 관련학과: 모든 학과 자격증별 응시자격 중에 1개라도 해당 된다면 응시를 할 수 있습니다. 다만 응시자격에 따라 제출 서류들이 상이해질 수 있고.. 웹 개발할 때 유용한 사이트 모음 React - React Bootstrap : 반응형 웹 UI 제공 https://react-bootstrap.netlify.app/ React Bootstrap | React Bootstrap The most popular front-end framework, rebuilt for React react-bootstrap.netlify.app 로그인 X, 무료 사용 방법 보러 가기 👈 - React Icons : 여러 종류의 아이콘 제공 https://react-icons.github.io/react-icons/ React Icons react-icons.github.io 로그인 X, 무료 사용법은 추후 업로드 예정 이미지 - removebg : 이미지 누끼 따기 https://www.remove.bg/.. [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 키를 발급받고 플랫폼(사이트 도메인)을 등록해야 사용이 가능합니다. 위 사이트에서 카카오 계정으로 로그인 해주세요! 로그인 후 우측 상단 '내 에플리케이션' 클릭 전 이미 예전에 만들어 놓은 애플리케이션이 하나 있네요!'애플리케이션 추가하기' 를 클릭하여 새로운 애플리케이션을 생성해보겠습니다. 앱 이름, 사업자명.. 이전 1 2 다음
