본문 바로가기

분류 전체보기346

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.
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.
Git(15) STS에서 깃헙(GitHub)에 프로젝트 올리기 STS (Spring Tool Suite)에 GitHub을 연동해보자 그리고 프로젝트를 GitHub에 업데이트까지해보자 STS - GitHub 연동 1. STS를 켜서 빨간박스를 눌러 눌러 창을 연다. 2. Git을 선택 3. 화면 좌측의 Git Repositories 탭에서 아래 버튼을 누른다. 4. (잠깐 STS는 홀드하고) GitHub 웹사이트에 들어가 연동할 Repo페이지로 들어가서 url을 복사 ! 5. 다시 STS로 복귀한뒤 복사한 URL 붙여넣고 깃헙 아이디와 비번을 입력 6. 그다음은 쭉쭉 진행 7. 다시 Git Repositories 보면 잘 들어와 있다. 무사히 연동됨 GitHub에 프로젝트 업로드 1. 올릴 프로젝트 폴더 우클릭 [Team]- [Share Project] 2. 빨간박스.. 2021. 1. 28.
반응형

티스토리툴바