Get 썸네일형 리스트형 [Spring] 물고기 판매 이 게임의 최종 목적은물고기를 팔아서 돈을 벌고,상점에서 낚시대를 사서 데미지를 강화 후물고기를 쉽게 잡는 것입니다.그래서 잡은 물고기를 파는 기능이 필요한데오늘은 그 기능 구현 과정을 리뷰해보려고 합니다. 먼저 인벤토리의 물고기를 누르면물고기의 상세 정보가 뜨게 됩니다.저는 이 로직을 파는 로직과 묶어서구현해봤습니다. 먼저 인벤토리의 물고기를 그냥 눌렀을 때는 //인벤토리 내 물고기 클릭시 showInfo 메소드 실행 function showInfo(fishName, fishPrice, fishSize, event) { console.log("Fish Size: ", fishSize); var clickX = event.pageX; var clickY = event.pageY;.. 더보기 [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.. 더보기 [Node.js] 로그아웃 기능 https://youtu.be/zye0VrVUfuI?si=9Tmd6CsGreZ3m3SL 본 포스팅은 John Ahn 님의 유튜브 강의를 참고하였습니다. 안녕하세요 오늘은 로그아웃 기능을 구현하는 방법을 알아보도록 하겠습니다. 로그아웃은 로그아웃 라우터를 만들고 데이터베이스에 있는 로그아웃 하려는 유저의 토큰을 지워주기만 하면 됩니다. 먼저 로그아웃 라우터를 만들어 보겠습니다. server.js파일로 가서 app.get함수를 만들어 줍시다. app.get('/api/users/logout', auth, async (req, res) => { try { const updatedUser = await User.findByIdAndUpdate(req.user._id, { token: "" }, { new: tr.. 더보기 [React] API 연동 백엔드를 무작정 코딩하면서 공부해보려고 했는데 엄두가 안나서 기본 개념부터 배워보려고 합니다. 오늘은 API 연동에 대해서 공부해 보려고 하는데 알고 있어야 할 개념이 있습니다. (벨로퍼트님의 강의를 참고하였습니다.) 비동기 처리 함수라는 것이 있는데 비동기라는 말은 작업을 동시에 처리하는 것을 의미합니다. 만약 서버쪽에서 데이터를 받와아야 할 때는, 요청을 하고 서버에서 응답을 할 때 까지 대기를 해야 되기 때문에 작업을 비동기적으로 처리합니다. 비동기 처리는 보통 Promise나 async/await함수를 사용합니다. const myPromise = new Promise((resolve, reject) => { // 구현.. }) Promise함수의 형태입니다. 성공할 때는 resolve를 호출하고 .. 더보기 [React] 리액트로 서버에 데이터 연동하기2 저번 시간에는 express를 이용해서 서버에 데이터를 추가하고 변경하는 것까지 해봤습니다. 이번에는 리액트에서 코드를 짜서 서버에 데이터 요청을 해보겠습니다. (라매개발자님의 강의 영상을 참고하였습니다.) 먼저 create-react-app database를 터미널에 입력해서 작업 폴더를 만들어 줍니다. 그리고 필요없는 css파일들과 logo.svg파일을 지워줍시다. 파일을 지웠으니까 index.js와 app.js의 import문과 내용을 지워줍니다. function App() { return ( Todolist ); } export default App; 임의로 코드를 적고 npm start를 통해서 테스트 해봅시다. 잘 나오네요! 서버에 데이터를 요청하려면 fetch와 axios를 사용해야 합니다... 더보기 이전 1 다음
