반응형 React3 react 카카오맵 API 연동하기 developers.kakao.com/ Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 이번에는 react에서 카카오맵 API를 통해 지도를 가져오는 것을 해볼 것이다. 완성된 페이지를보자 이런식으로 잘불러올수있다. 우선 카카오디벨로퍼에 가입되어있다 가정하고 진행하겠다. 코드를 하나하나 살펴보자 저기 홈페이지 가이드라인을 따라하면 안된다. 기존코드를 보자 이것이 기존 카카오에서 제공하는 코드이다. 저기 발급받은 APP KEY값은 카카오지도 API를 신청하면 본인의 고유 키값을 발급해준다. 거기서 앱키에서 JavaScript키값을 복사해서 넣으면된.. 2020. 11. 17. react 페이지 이동하기 react-router-dom사용 Django를 사용할 때는 url로 값을 넘겨서 해줬는데 뭔가 react랑 비슷한 느낌이다. 한번 따라 해 보도록 하자. 일단 react-router-dom을 package.json에 설치해주자. yarn add react-router-dom npm install react-router-dom 둘 중에 사용하고 있는 패키지 툴을 사용하면 된다. Header.js의 파일을 살펴보자. ../components/Header.js import React from 'react'; import './css/Header.css'; import Logo from '../Logo.jpeg'; import { BrowserRouter as Router, Route, Switch, Link } from 'react-rout.. 2020. 11. 13. react 개발환경세팅 (+MAC OS) 원래 필자는 dango프레임워크만 공부했었다... 근데 회사에서 react와 node.js를 사용해서 서비스를 구축한다고하여 따로 시간내서 공부를 하고있지만 참어려우면서도 재미있다. 기본적으로 vscode와 node.js가 설치되어있다고 가정하여 설명하겠다. 그냥 구글에 node.js 설치, vscode설치 치면 바로 설치할 수 있을 것이다. npx create-react-app (자신이 원하는 프로젝트명) 여기서 사용한 npx는 무엇이냐 npx는 자바스크립트 패키지 관리 모듈인 npm(Node Package Module)의 npm@5.2.0 버전부터 새로 추가된 도구다. npm은 homebrew로 설치했다. homebrew설치는 /bin/bash -c "$(curl -fsSL https://raw.gi.. 2020. 11. 9. 이전 1 다음 반응형
