본문 바로가기

전체 글349

React(22) <b> <br> 등 HTML 태그 제거하기 문제상황 뉴스기사를 받아왔더니 HTML 태그가 여과없이 보인다. 어떻게 해야할까? 문제해결 - replace와 정규식을 사용하여 html태그 뿐 아니라 변환되지 못한 기호들도 전부 공백으로 치환하여 해결 ! - replace()란 ? (더보기 클릭) 더보기 str_text.replace("찾을 문자열", "변경할 문자열") 자바스크립트의 replace()함수로 바꿀 문자열을 직접 입력하거나 또는 정규표현식을 사용할 수도 있다. 2021. 2. 22.
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.
반응형

티스토리툴바