본문 바로가기

분류 전체보기361

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.
React - snippets 단축키사용 'rafce' snippet이란 작은 조각이란 뜻인데 코딩할 때, 단축어처럼 특정키를 입력하면 자동완성해주는 기능을 말합니다. - 비주얼스튜디오의 extensions메뉴에서 스니펫을 다운받으면 일어나는 일 - 함수형 component 을 만들 때, rafce 단축키를 치면 리액트 기본코드가 제공이 된다. 2021. 1. 22.
블로그에 구글서치콘솔 등록(Google Search Console) 구글 서치 콘솔을 등록하면 구글에서도 내 블로그가 검색되어진다. 1. 관리자메뉴에서 [플러그인]을 눌러 [구글서치콘솔] 을 찾아 클릭한다. 2. 창이 뜨면 [계정연결하기] 버튼 클릭! 3. 구글연동로그인창이 뜬다. 사용할 계정클릭! 4. 순서대로 허용을 요구하는 창이 뜬다. [allow(확인)] 눌러 동의해준다. 5. 아까 permission창에서 allow한 내용을 한번더 컨펌! 후 [Allow(확인)] 눌러 마무리 6. 노란줄 친 메시지가 우리를 반긴다. [적용] 누르면 완료! 7. 구글서치콘솔을 보면 사용중이라고 뜬다. 2021. 1. 21.
Git(14) ReadMe와 Wiki에 이미지 넣기 1. 깃허브 저장소 내의 Issues 탭의 입력창 안에 이미지 드래그 하면 코드가 생긴다. 복사하자 2. 위키나 리드미 입력창에 붙여넣기 한다. 문서에서는 이미지가 제대로 뜬다. 만약 이미지 사이즈를 조정하고 싶다면 이런식으로 주기 2021. 1. 20.
반응형

티스토리툴바