본문 바로가기

React128

React(21) <img> 태그 추가하기 리액트에서는 import로 선언하여 이미지태그를 넣을 수 있다. Html처럼 이미지태그로 경로만 주구장창 입력하다가 시간날림 1. import 사용할 이름 from '이미지 파일 경로'; 넣어주기 2. 넣어주면 끝! 결과 화면 - 코로나 로고가 잘 뜬다 ! 2021. 2. 16.
React 실행오류 Array.map is not a function 에러발생 " TypeError: articles.map is not a function " 문제를 잘 마치고 실행해보니 이번에는 다른 타입에러가 떳다. 도대체... 왜... ㅠㅠ 왜 나에게 이런일이? 해답은 스택오버플로우에서 찾을 수 있었다. Objects, {} in JavaScript does not have the method .map(). It's only for Arrays, []. → 오브젝트는 map()함수를 가지고있지 않아 사용할 수가 없다. 배열만 가능하다. So in order for your code to work change data.map() to data.products.map() since products is an array which you can iterate upon. .. 2021. 2. 12.
React 실행오류 Cannot read property 'map' of undefined Updated 2022/10/07 React hook 을 사용하여 네이버 뉴스 검색 API 를 데이터를 화면에 뿌려주려 하다가 이런 에러메시지가 나왔다. 문제상황) TypeError: Cannot read property 'map' of undefined 왜 나에게 이런일이... ?? 먼저 코드를 살펴보자 const [articles, setArticles ] 로 = useState() 의 뉴스 기사(데이터) 를 관리할 상태를 선언해준다. useEffect() 내부에서 fetchEvents() 를 선언하여 비동기 작업(통신)을 한다. (네이버 서버에서 코로나 관련 뉴스만 긁어오는 역할) setArticles( 안에 fetchEvents()에서 반환된 data를 ) 매개변수로 넣어 articles 의 데이.. 2021. 2. 12.
React - 네이버 API {"errorMessage":"Not Exist Client ID : Authentication failed. (인증에 실패했습니다.)","errorCode":"024"} [component] - [Article.js] 에서 React Hook (리액트 훅) 을 사용해 네이버 뉴스검색 API 를 가져오려 하는중이다. 문제상황 에러 메시지 1 Access to XMLHttpRequest at 'api주소' from origin 'http://localhost:3000' has been blocked by CORS 에러 메시지 2 policy{"errorMessage":"Not Exist Client ID : Authentication failed. (인증에 실패했습니다.)","errorCode":"024"} 크롬에서 콘솔창을 보니 이런 에러 메시지가 떠있다. 저 링크를 클릭해봤더니.. 두둥! 웹브라우저에 XML 또는 JSON 포맷으로 제공된 에러 메시지가 떳다. 2연타 도대.. 2021. 2. 4.
React - 네이버에 비로그인 오픈 API 신청하기 네이버에서 코로나 관련 검색어 뉴스기사를 긁어모아 뿌려주려고 한다. 그러기위해 먼저 open API가 필요하다. 네이버 오픈 API 신청하러 가보자 ** 내가 느낀 openAPI 더보기 내 피셜 open API는 웹사이트 링크같은 모양새인데 그걸 누르면 제공해주는 쪽의 서버에서 받아온 데이터들 리스트들이 후두룩 빽빽하다. 그걸 내 프로젝트에 받아와 그 안에서 데이터를 자유롭게 사용할 수 있다. 1. 네이버 개발자 사이트로 들어간다. developers.naver.com/main/ [메뉴 탭] - [서비스 API] - [검색] 2. 오픈 API이용 신청 버튼을 클릭 ! 3. 애플리케이션 등록을 해준다. **비로그인 오픈 API 서비스 환경에서 (실서버 환경이 아니라) localhost 이용 시, '네이버 .. 2021. 1. 31.
React 실행오류 Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? 문제상황 컴포넌트 js파일에서 렌더함수의 return을 시켰더니 터미널에서 “Adjacent JSX elements must be wrapped in an enclosing tag” 오류가 발생했다. 뭐가 문제지.. 문제해결 return의 내용을 다음과 같이 하나의 태그로 묶어서 해결했다. 2021. 1. 29.
React(20) 화살표 함수(Arrow Function) 란? Updated 2021/06/09 쉽게 말해 함수의 ( ) 안에는 기존 함수에서 사용하던 파라미터를 넣고, => 을 붙인 다음 { } 안에는 return하고 싶은 내용을 적으면 된다. 일반함수 거의 function 선언부생략 차이 this.languages.forEach(function (language){ console.log(language); }); 화살표함수 this.languages.forEach(language => { console.log(language); }); 2021. 1. 29.
React - snippets 단축키사용 'rafce' snippet이란 작은 조각이란 뜻인데 코딩할 때, 단축어처럼 특정키를 입력하면 자동완성해주는 기능을 말합니다. - 비주얼스튜디오의 extensions메뉴에서 스니펫을 다운받으면 일어나는 일 - 함수형 component 을 만들 때, rafce 단축키를 치면 리액트 기본코드가 제공이 된다. 2021. 1. 22.
React(19) Delete 구현 대망의 React 마지막 포스팅!!! (동영상강의 : 생활코딩 opentutorials.org/module/4058) 최종목표 delete의 구현은 CRUD중 가장 쉽다. CRU했던 부분에 숫가락 얹기(?) 하지만 데이터가 삭제되는 것인만큼 삭제전 사용자의 confirm을 꼭 받는게 아주 중요하다. Control.js 사용자가 delete를 누르면 태그 안에 onChangeMode()라는 Props를 호출함. 이때 인자로 delete를 받음. App.js로 넘어가자 **전체코드보기(복사용 첨부 / 더보기클릭) 더보기 import React, { Component } from 'react'; class Control extends Component { render() { return( create upda.. 2021. 1. 12.
반응형

티스토리툴바