전체 글 65

Excel 파일을 제작하고 다운로드하는 웹페이지 만들기 [GitHub Pages]

https://rakaso598.github.io/xlsx-generator/  자바스크립트 탐색 중 CSV라는 데이터 포맷에 대해 알게 되었고, 이를 활용하여 파일을 제작하고 다운로드하는 기능을 만들 수 있을 것이라는 아이디어를 떠올렸습니다. CSV 포맷은 데이터를 콤마(,)로 구분하는 간단하고 직관적인 방식으로, 이를 자바스크립트에서 처리하는 것은 비교적 용이한 작업이라고 예상했습니다. 자바스크립트는 이미 JSON 파싱 및 직렬화 기능을 갖추고 있어, 문자열을 다루는 함수 구현에 있어 충분한 기반을 제공하고 있었기 때문입니다. 이러한 배경을 바탕으로, 사용자로부터 입력 받은 데이터를 CSV 파일로 변환하는 프로토타입을 제작한 뒤, 이를 발전시켜 브라우저에서 다운로드할 수 있는 .xlsx 엑셀 파일로 ..

GitHub 2024.12.27

Node 마이크로서비스를 Docker 컨테이너화 해보자 [REST]

노드 마이크로서비스를 도커 컨테이너화하여 실행 성공하는것이 이번 게시글의 목표입니다. # 준비물 :Node.js 설치 [ https://nodejs.org/en/download/package-manager ]Docker 설치 [ https://www.docker.com/products/docker-desktop/ ]VScode 등의 텍스트 에디터 [ https://code.visualstudio.com/download ] Windows PowerShell 등 터미널 환경  0. Node 프로젝트를 초기화하고 express와 axios 설치합니다.# Node 프로젝트 초기화 (package.json 파일 생성)npm init -y# express와 axios 설치npm install express axio..

Docker 2024.11.14

Node.js 서버로 카카오 로그인을 구현해보자 [MongoDB/JWT]

Node.js의 Express 웹 애플리케이션 프레임워크를 사용하면 RESTful API, 웹사이트, 단순한 웹 서버를 빠르게 구축할 수 있습니다. 카카오 REST API를 사용하여 카카오 API를 활용하는 웹 서버를 빠르게 구축하기 위해 Node 서버를 선택하였습니다. JWT 토큰은 API와 Node.js 서버 간의 인증 및 권한 부여 과정에서 중요한 역할을 하며, 사용자 정보를 안전하게 전달하고 서버의 부하를 줄이는 데 기여합니다.JWT (JSON Web Token) 의 역할은 무엇인가요? 헤더는 토큰의 유형과 서명 알고리즘 정보를 포함합니다.페이로드는 사용자 정보 및 기타 클레임을 포함합니다.헤더와 페이로드를 조합한 후, 비밀 키를 사용하여 서명을 생성합니다. 이 서명은 JWT의 무결성을 검증하는 ..

API 2024.10.30

스프링부트에서 페이팔 결제 API를 사용해보자 [PayPal/후기]

스프링부트에서 10달러를 결제하는 페이팔 결제 버튼을 만들어 보겠습니다. 준비물페이팔 회원가입, 계좌가 인증된 상태여야 합니다 (2~3일 소요)페이팔 API (샌드박스 ON)스프링부트 서버 로직웹 프론트엔드 리소스 (HTML/CSS/JS)  Sandbox모드는 API 테스트와 개발을 할 수 있도록 제공되는 테스트 환경입니다.샌드박스 모드에서 실제 결제는 이루어지 않으며 가상의 계좌를 설정할 수 있다고 합니다.[ 결과물 스크린샷 ]    :: 로직 설명 및 후기 ::결제를 시작하려면 아래 버튼을 클릭하세요. Pay with PayPal 이것은 페이팔 결제 api를 호출하는 index.html의 버튼입니다.누르면 "/api/paypal/pay" 주소를 POST 메서드로 호출합니다...

API 2024.10.28

Node.js로 경량 API서버 구현해보기 [Express]

Node.js와 npm이 컴퓨터에 올바르게 설치되어 있어야 합니다. 프로젝트를 설치할 폴더로 이동 후, 다음 코드를 작성합니다.  /* 터미널에서 입력*/// 프로젝트 초기화mkdir rest-api-servercd rest-api-servernpm init -y// Express 설치npm install express/* server.js를 루트 경로에 생성하고, 아래 코드 작성*/const express = require('express');const app = express();const port = 3000;// JSON 요청을 파싱하기 위한 미들웨어app.use(express.json());// 간단한 라우트 예제app.get('/', (req, res) => { res.send('Hello..

JavaScript 2024.10.28

온디맨드 CSS 애니메이션으로 웹페이지 꾸미기 [CSS/JS]

https://animista.net/play/text/tracking-in/tracking-in-expand Animista - On-Demand CSS Animations LibraryAnimista is a CSS animation library and a place where you can play with a collection of ready-made CSS animations and download only those you will use.animista.net ↑ ↑ ↑Animista 에서는 미리 정의된 CSS 애니메이션을 쉽고 빠르게 사용할 수 있도록 도와줍니다.FreeBSD 라이선스를 가지고 있으므로 자유롭게 사용할 수 있지만, 원 저작자의 저작권을 꼭 명시하여야 합니다.   CSS/..

GitHub 2024.10.28

총알 피하기 게임 만들고 플레이 및 배포해보자 [GitHub Pages]

https://rakaso598.github.io/dodge-the-bullets/[ 여기서 플레이 해보세요! ]  총알 피하기 게임리셋 방향키로 이동하여 총알을 피하세요! 점수: 0 ◀ ▼ ▶rakaso598.github.io    자바스크립트의 오픈소스 라이브러리인 Phaser.js를 활용했습니다. 2D 이미지를 활용한 간단한 게임을 만들때 편리하고 유용한 것 같습니다. Phaser.js에서는 간편하게 설정할 수 있는 중력과 백그라운드 화면 개념, 그리고 스프라이트 이미지도 사용할 수 있습니다. 백그라운드 화면 기능은 Phaser.js에는 특정 함수가 작동할때 미리 정의된 맵으로 현재 맵을 덮는 기능입니다. 예를 들면, 캐릭터가 이동하여 포탈에 닿으면 미리 정의된 맵이 넘어오는(현재 맵을 덮어쓰는) ..

GitHub 2024.10.24

카카오 지도 Web API 사용해보기 [스프링부트/후기]

이번 게시물은 스프링부트로 카카오 지도 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..

API 2024.10.22

카드 맞추기 게임 만들고 배포, 플레이까지 해보자 [GitHub Pages]

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

GitHub 2024.10.22

스프링부트 카카오 로그인 버튼 구현하기 [REST API/후기]

카카오 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..

API 2024.10.21