post 썸네일형 리스트형 [Spring] 물고기 판매 이 게임의 최종 목적은물고기를 팔아서 돈을 벌고,상점에서 낚시대를 사서 데미지를 강화 후물고기를 쉽게 잡는 것입니다.그래서 잡은 물고기를 파는 기능이 필요한데오늘은 그 기능 구현 과정을 리뷰해보려고 합니다. 먼저 인벤토리의 물고기를 누르면물고기의 상세 정보가 뜨게 됩니다.저는 이 로직을 파는 로직과 묶어서구현해봤습니다. 먼저 인벤토리의 물고기를 그냥 눌렀을 때는 //인벤토리 내 물고기 클릭시 showInfo 메소드 실행 function showInfo(fishName, fishPrice, fishSize, event) { console.log("Fish Size: ", fishSize); var clickX = event.pageX; var clickY = event.pageY;.. 더보기 [Spring] Singleton 두 값을 입력받아서 form으로 post요청을 보낸 뒤두 값을 더한 값과 계산 횟수를 콘솔에 출력하려고합니다. form action = "calculate.do" method = "post">table> tr> td>이름: input name="n" placeholder = "name" autofocus = "autofocus">td> tr> tr> td>X: input name="x" placeholder = "X" autofocus = "autofocus">td> tr> tr> td>Y: input name="y" placeholder = "Y" autofocus = "autofocus">td> tr> tr> td>button>버튼button>td> tr>table>form> j.. 더보기 [Spring] POST요청 index.jsp에 다음과 같은 코드가 있다고 가정합시다.form button태그를 사용하는데 값을 입력하고 버튼을 누르면calculate.do라는 주소에 post요청을 보내게 됩니다. Spring에서는 위와같은 POST 요청이 들어올 때 어떻게 처리하는지 알아봅시다.@RequestMapping(value = "calculate.do", method = RequestMethod.POST) public String calcXY(@RequestParam(value="n") String n, @RequestParam(value="x") int x, @RequestParam(value="y") int y) { System.out.println(n); .. 더보기 [JSP] 홀 짝 게임 이번 시간에는 Servlet과 JSP를 활용해서홀 짝 게임이 동작하는 페이지를 만들어보려고 합니다.먼저 기능부터 구현해 보겠습니다.기능 역할을 하는 클래스를 하나 생성하겠습니다. int win = 0; int t = 0; int lose = 0; 먼저 전적을 넣을 변수를 만들어줍니다.public class HJEngine { private static final HJEngine hje = new HJEngine(); public static HJEngine getHje() { return hje; } 클래스 객체를 클래스 내에서 final로 생성해서getter로만 해당 클래스를 가져올 수 있게싱글톤 패턴으로 구현하였습니다. public void get.. 더보기 [Flask] Flask 리액트 연동 안녕하세요! 저번 시간에는 인공지능 모델을 만들어 봤는데요. 이번 시간에는 모델을 통해 얻은 데이터를 리액트와 연동시켜보는 시간을 가져보겠습니다. 먼저 Flask는 Python으로 웹 애플리케이션을 개발하기 위한 경량 프레임워크입니다. NodeJS와 같은 서버 역할을 하게 됩니다. 설치를 하기 위해서 VScode에서 서버 디렉토리에서 터미널을 엽니다. pip install Flask 를 입력해서 설치해줍니다. 다음은 중요한 포인트인 CORS설정입니다. 포트가 다를 때 포트 접근을 허용해주는 정책입니다. from flask_cors import CORS from flask import Flask, request, jsonify app = Flask(__name__) CORS(app) 이렇게 코드를 추가하면.. 더보기 [Node.js] 로그인 기능 https://youtu.be/HcAYHUHTNi4?si=_P73OEjAh9ODPZq1 https://youtu.be/yWRj4GxFcr8?si=Qf7vOOcYPnV1p9Mb 본 포스팅은 John Ahn님의 유튜브 강의를 참고하였습니다. 오늘은 로그인 기능을 구현해 보도록 하겠습니다. 먼저 로그인 Route를 server.js에서 만들어 줍니다. app.post('/login', (req,res)=>{ //로그인 데이터를 가져온다 }) 로그인을 하려면 3가지 단계가 필요합니다. 1. 로그인 하려는 이메일이 데이터베이스에 존재하는지 확인한다. 2. 이메일이 존재한다면 비밀 번호가 맞는 비밀번호인지 확인한다. 3. 비밀 번호가 맞다면 토큰을 생성한다. 먼저 첫 번째 단계부터 구현해 보도록 하겠습니다. Use.. 더보기 [MongoDB] PostMan을 사용해서 회원가입 구현 const mongoose = require('mongoose'); const userSchema = mongoose.Schema({ name:{ type : String, maxlength:50 }, email:{ type : String, trim : true, unique : 1 }, password : { type: String, minlength:5 }, lastname:{ type : String, maxlength:50 }, role:{ type: Number, default : 0 } } ) const User = mongoose.model('User', userSchema) module.exports = {User} 저번 시간에 만들었던 모델을 사용해서 간이 회원가입 기능을 구현해 보도록.. 더보기 [React] API 연동 백엔드를 무작정 코딩하면서 공부해보려고 했는데 엄두가 안나서 기본 개념부터 배워보려고 합니다. 오늘은 API 연동에 대해서 공부해 보려고 하는데 알고 있어야 할 개념이 있습니다. (벨로퍼트님의 강의를 참고하였습니다.) 비동기 처리 함수라는 것이 있는데 비동기라는 말은 작업을 동시에 처리하는 것을 의미합니다. 만약 서버쪽에서 데이터를 받와아야 할 때는, 요청을 하고 서버에서 응답을 할 때 까지 대기를 해야 되기 때문에 작업을 비동기적으로 처리합니다. 비동기 처리는 보통 Promise나 async/await함수를 사용합니다. const myPromise = new Promise((resolve, reject) => { // 구현.. }) Promise함수의 형태입니다. 성공할 때는 resolve를 호출하고 .. 더보기 이전 1 2 다음 목록 더보기
