rexondex's blog

이번 게시물은 스프링부트로 카카오 지도 API를 사용하여 웹페이지에 지도를 띄우는 프로젝트입니다. 이전 게시물 : 카카오 로그인 버튼 구현하기 (스프링부트)https://rexondex.tistory.com/27   https://apis.map.kakao.com/web/guide/↑ ↑ ↑(참고) 카카오 지도 Web API 가이드 링크  1) kakao-map.html (임의) 를 작성합니다.  2) 자바스크립트 키 발급 / 사이트 도메인 설정 3) 스프링 컨트롤러 매핑@Controllerpublic class HomeController { @GetMapping("/index") public String index() { return "index"; } @GetMapp..

https://rakaso598.github.io/memory-match-game/[ 여기서 게임을 플레이해 보세요!/PC 모바일 모두 지원 ] Memory Match Game축하합니다! 모든 카드를 맞췄습니다. 게임 시간: 초 다시 시작rakaso598.github.io   게임 룰: 게임 시작 버튼을 누르면 2초간 전체 카드를 보여줍니다.같은 알파벳이 적힌 카드를 순서대로 클릭하면 뒤집어놓을 수 있습니다.모든 카드를 뒤집으면 게임 승리입니다. 클리어하는데 걸린 시간을 확인할 수 있습니다. 리셋 버튼을 누르면 초기 설정으로 돌아갑니다. 다시 게임 시작 버튼을 눌러 새로 게임을 시작합니다.   깃허브 리포지토리를 GitHub Pages 기능을 이용하여,깃허브 도메인을 가진 정적 웹페이지로 빠르게 배포할 ..

카카오 API 문서에 따라 로그인버튼을 구현해보겠습니다. 1) index.html 을 작성합니다.index.html 카카오 로그인  2)  로그인 이후 리다이렉트 될 home.html 을 작성합니다.home.html로그인 성공.  3) KakaoController 를 작성합니다.@Controllerpublic class KakaoController { // 어플리케이션 프로퍼티스에서 값을 가져옴 @Value("${KAKAO_CLIENT_ID}") private String KAKAO_CLIENT_ID; // 어플리케이션 프로퍼티스에서 값을 가져옴 @Value("${KAKAO_SERVER_REDIRECT_URI}") private String KAKAO_SERVER_REDIREC..

https://rakaso598.github.io/whack-a-mole/[여기서 플레이해보세요!] 두더지 게임 rakaso598.github.io   PC와 모바일 모두 지원하는 두더지게임을 깃허브 페이지를 통해 배포해보았습니다. 게임 방법은 갈색 점이 생긴 원을 클릭하면 점수가 오릅니다. 모바일에서 스크롤이 되지 않게 전체 화면 크기를 제한하고body { overflow: hidden; } 을 적용해 화면을 벗어나는 요소는 화면에서 가려 스크롤이 되지 않게 했습니다. https://github.com/rakaso598/whack-a-mole GitHub - rakaso598/whack-a-mole: whack-a-mole game on GitHub pageswhack-a-mole game on Git..

https://rakaso598.github.io/input-data-visualizer/ Data VisualizationEnglish 한글 User Data Visualization This tool allows you to visualize data by entering comma-separated values. You can choose to display the data as a bar chart, line chart, pie chart, radar chart, doughnut chart, or scatter chart. You can reset the inprakaso598.github.io 이 정적 웹페이지는 언어 토글 기능을 제공합니다 [ English / 한글 ]사용자는 입력칸에 숫자를 ..

GitHub Pages는 어떤 기능인가요? GitHub Pages는 GitHub 리포지토리의 내용을 웹사이트 형태로 호스팅할 수 있는 기능으로, HTML, CSS, JavaScript 파일을 웹에서 쉽게 게시하고 공유할 수 있습니다.  깃헙 리포지토리의 내용을 간단하게 웹사이트 형태로 호스팅할 수 있는 기능입니다. [리포지토리에 HTML 커밋] -> [리포지토리 Settings > Pages > 소스 및 브랜치 선택] 이렇게 업로드하는 것만으로 바로 깃허브 도메인을 가진 정적 HTML을 배포 가능합니다. 만약 리포지토리명을 "static-utility" 로 정했다면상단에 이렇게 표시됩니다.  이 페이지에 접근하려면  https://rakaso598.github.io/static-utility/( 사용자명..

깃허브 페이지에서 외부 API를 호출하여 데이터를 실시간으로 렌더링하고자 했습니다.깃허브 페이지는 정적 리소스를 무료로 간편하게 배포할 수 있어 활용성이 높은데, 통신 및 API 활용이 가능할지에 대한 의문이 생겼습니다.의문을 해소하기 위해 서버사이드 함수를 AWS Lambda로 실행하고자 했습니다. (서버리스 아키텍처)# 테스트 결과:외부 API를 사용해 데이터를 응답받아 렌더링하는 것은 충분히 가능했습니다.하지만 외부 API를 사용하려면 API Key를 사용해야 하는데, API Key와 API Gateway 주소를 숨기는 것이 불가능하다는 문제가 있었습니다.깃허브 페이지는 웹에 배포되는 형태이기 때문에 API Key, 보안 키 등을 깃허브 리포지토리에 업로드하면 안 됩니다.리포지토리에 있는 키는 누구..

정적 html을 깃허브 도메인으로 제공하는 깃허브 페이지에서API를 사용해서 외부 데이터를 요청할 수 있다는 점에 흥미를 가져아마존 AWS Lambda와 API Gateway 기능으로API를 요청해 서버사이드 개별함수를 실행시키고자 했습니다. 작동순서는 이렇습니다. [깃허브 페이지] -> 요청 -> [API Gateway] -> [Lambda 함수 실행] 깃허브 페이지에서 자바스크립트 모듈로 API Gateway에 요청을 보내고API Gateway는 연결된 Lambda함수에 파라미터를 전달하여 함수를 실행시킵니다. 그러면 깃허브 페이지 화면에서 실시간으로 응답을 받아 렌더링할수 있습니다. 준비물 :1. 사용할 외부 오픈 API2. AWS Lambda3. AWS API Gateway4. 본인이 API를 요..

[ 인게임 화면 ] 핵심 기능 요약 :웹소켓 공간으로 여러 유저가 동시 접속 가능나의 움직임 및 상대방의 위치 확인채팅박스 통해 접속자간 자유로운 채팅 기능Phaser.js 를 통해 비교적 유연한 게임공간 확장 및 변경OAuth2 적용으로 접속자 인증 기능게임 접속 전 다양한 정보를 확인할 수 있는 프리뷰 페이지 제공[ 메인화면 ] [ Oauth2 구글 로그인 화면 ] [ 구현 방법 ] 스프링부트 생성 (스프링 시큐리티 및 웹소켓 등 필요 의존성 임포트)게임 화면을 구성할 game.html 작성 (Phaser.js)로그인 전 메인화면을 구성할 index.html 작성에셋 이미지, SSH 인증을 위한 keystore.pfx 제외는 제외했습니다.https://github.com/rakaso598/CMA..

준비물 :1.GitHub Pages 리포지토리2.AWS Lambda (Serverless 구현)3.Paypal 결제 API 깃허브 페이지 도메인으로 접속하면 깃허브 리포지토리의 렌더링된 정적 리소스들을 확인할 수 있습니다.여기서 궁금한 점이 생겼습니다. 1. 정적 리소스는 서버 및 DB로직 없이 렌더링될 수 있다.2. (HTML + CSS + JS) 웹 표준 기술을 사용해 정적 리소스에서도 통신이 가능할까? 첫번째로 서버의 처리 없이 바닐라 HTML 만으로 깃허브 페이지에서 통신이 가능한지 의문이 생겼습니다. 그리고 두번째 의문도 생겼습니다. 3. 정적 리소스여도 서버 및 DB 로직 없이 사용자의 간단한 데이터를 저장할 수 있지 않을까?4. 그렇다면 정적 리소스에서 외부 API를 호출하여 데이터를 불러와..