반응형 혼자 공부하는 것들/react4 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 파일구조를 어떻게 구성해야할까? 처음 react를 공부하면서 파일구조를 어떻게 구성해야할지 감이 안잡힌다. 디자인패턴을 공부하였다면 자신에 맞는 패턴으로 구성하면되지만 아직 그런 것들을 배우지 않은 입장이라면 고민이된다. 첫번째는 그냥 일단 한 파일에 넣어서 만드는 것이다. 작은 프로젝트라면 이정도면 충분하겠지만 점점 파일이 많아진다면 이때부터 고민을 해봐도된다. 첫번째로는 파일의 기능이나 라우트에 의한 분류를 할수있다. 프로젝트 구조에 대한 일반적인 방법 중하나는 css,js 그리고 테스트 파일을 기능이나 라우트로 분류된 폴더에 같이 두는방법이다. common/ Avatar.js Avatar.css APIUtils.js APIUtils.test.js feed/ index.js Feed.js Feed.css FeedStory.js Fe.. 2020. 11. 10. 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 다음 반응형
