jpg의 끄적끄적

아래 사진과 같이 react-kakao-maps-dsk를 이용해 지도를 구현하고 주소에 해당하는 부분(충청북도 단양군 단양읍 고수동굴길 8)에 마커 표시를 구현할 것이다.1. 카카오 개발자 어플 등록https://developers.kakao.com/ Kakao Developers카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.developers.kakao.com위 링크로 들어가 로그인을 한 후, 내 어플리케이션으로 이동해 어플리케이션을 추가해준다.등록 후, 아래과 같이 플랫폼으로 이동해 Web에 http://localhost:3000을 추가해준다.앱 키로 이동해 JavaScript 키를 복사해준다.2. react..

프로젝트를 하는 도중 웹캠을 적용해야 해서 getUserMedia API를 사용했다.하지만 브라우저의 보안 정책으로 인해 getUserMedia API는 HTTPS 환경에서만 작동한다고 한다.따라서 현재 로컬 환경인 HTTP환경을 HTTPS로 변경해주어야 한다.1. mkcert설치https://github.com/FiloSottile/mkcert/releases Releases · FiloSottile/mkcertA simple zero-config tool to make locally trusted development certificates with any names you'd like. - FiloSottile/mkcertgithub.com위 링크로 가서 아래 사진에 표시된 mkcert를 다운 받아..

https://studybook.tistory.com/68 Spring Boot(eclipes)와 React 연결(1) 1. Spring Boot 설정에서 gradle 프로젝트 생성 File > New > Spring Starter Project 를 클릭한다. 그 다음 원하는 프로젝트로 이름만 변경(나머지 변경X)한다. 나는 backend로 하였다. Next 클릭 Web에서 Spring Web 체 studybook.tistory.com * 윗 글에 이어서 작성된 글입니다! 1. Spring boot api 서버 만들기 backend > src/main/java > com.app 우클릭을 하고 class를 클릭해 TestController를 만든다. TestController.java를 다음과 같이 작성해..

1. Spring Boot 설정에서 gradle 프로젝트 생성 File > New > Spring Starter Project 를 클릭한다. 그 다음 원하는 프로젝트로 이름만 변경(나머지 변경X)한다. 나는 backend로 하였다. Next 클릭 Web에서 Spring Web 체크를 체크하고 Finish를 클릭하면 gradle 프로젝트가 생성된 모습을 볼 수 있다. 2. react 프로젝트 생성 File > Open Folder클릭하고 위에서 만든 backend 프로젝트에서 src > main폴더를 선택한다. View > Terminal 을 클릭하여 터미널에 'npx create-react-app 생성할 파일이름' 입력한다. 나는 frontend로 이름을 만들었다. 설치가 잘 완료되었으면 Happy Ha..

https://nodejs.org/en/ Node.jsNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org위 링크로 들어가 왼쪽, 오른쪽 둘 중 아무거나 클릭하여 node.js를 먼저 설치한다.Visual Studio Code를 열어 파일 - 폴더 열기 -> 바탕화면에 react-app이라는 새로운 폴더를 만들어 열어준다.*폴더를 만들 때는 소문자 이용하기!그리고 터미널 - 새터미널을 클릭하면 명령어로 Visual Studio를 제어할 수 있게 된다.터미널에 npx create-react-app . 을 입력하여 설치해준다.뒤에 점은 현재 폴더에 개발환경을 설치해준다는 의미이다. 즉, 방금 한 것과 같이 폴더를 ..