전체보기 (16) 썸네일형 리스트형 [React] npx create-react-app으로 프로젝트 생성 시 발생하는 @testing-library/react 호환 문제 (Feat. React 19) 오랜만에 npx create-react-app으로 react 프로젝트를 생성하였는데 아래와 같은 에러 코드를 뱉어냈다. 에러 코드Installing template dependencies using npm...npm ERR! code ERESOLVEnpm ERR! ERESOLVE unable to resolve dependency treenpm ERR!npm ERR! While resolving: culand@0.1.0npm ERR! Found: react@19.0.0npm ERR! node_modules/reactnpm ERR! react@"^19.0.0" from the root projectnpm ERR!npm ERR! Could not resolve dependency:npm ERR! peer.. [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개라도 해당 된다면 응시를 할 수 있습니다. 다만 응시자격에 따라 제출 서류들이 상이해질 수 있고.. 웹 개발할 때 유용한 사이트 모음 웹 개발 - w3schools : 웹 개발 관련 기술 학습https://www.w3schools.com/ W3Schools.comW3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.www.w3schools.com로그인 X, 무료 React - React Bootstrap : 반응형 웹 UI 제공https://react-bootstrap.netlify.app/ React Bootstrap | React B.. [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 파일에 저장하여 필요할 때 환경 변수로 불러오는 것입니다. 아래 .. 이전 1 2 다음
