Project
-
[Spring Boot/React] 카드 CRUD 연동해 카드 슬라이드 UI 제작Project/외국인 관광객을 위한 카드 플랫폼 2024. 8. 7. 20:01
- 카드, 카드유형, 결제 테이블 전체 crud 제작 문제- 카드 슬라이드 배너 제작 중 db 데이터는 넘어오는데 화면에 안보여짐아래가 문제 코드import React, { useState, useEffect } from 'react';import './Card.css';import Flickity from 'react-flickity-component';import axios from 'axios';function Card() { const [selectedCard, setSelectedCard] = useState(null); const [cards, setCards] = useState([]); const flickityOptions = { cellAlign: 'righ..
-
[React] Google Charts API 연동 / 소비 패턴 분석, 주간 소비 리포트 만들기Project/외국인 관광객을 위한 카드 플랫폼 2024. 8. 6. 11:28
https://developers.google.com/chart/interactive/docs/gallery/columnchart?hl=ko 시각화: 세로 막대형 차트 | Charts | Google for DevelopersSVG 또는 VML을 사용하여 브라우저에서 렌더링된 세로 막대 그래프인 열 차트를 만드는 방법을 알아보세요.developers.google.com - 구글 차트 api 사용해서 소비 패턴 분석, 주간 소비 리포트 만들기 (아직 백이랑 연동 x) - 소비 패턴 분석에 사용할 도넛 차트 만들기import React from 'react';import { Chart } from 'react-google-charts';const MyChart = () => { const dat..
-
[team-project_종합 게임 사이트 만들기] 오목 게임 만들기 (6)Project/종합 게임 사이트 2024. 1. 22. 19:20
[ 오늘의 작업 과정 ] - 임시 서버 부분 back이 만들어둔 서버로 교체해 돌을 클릭할 때마다 돌을 둘 수 있는 자리인지 아닌지 판별해서 결과를 보내주도록 한다. - 각 돌 승리시 back에서 데이터 받아와 승리 모달창 띄우기 (과정 생략) 1. 임시 서버 부분을 back에서 만들어둔 서버로 교체해 통신을 수정했지만 어디 칸을 클릭하던 아래와 같이 '돌을 둘 수 없는 자리입니다' 라는 결과만 받아와진다. 이를 해결해주기 위해 encodeGameBoard 함수 안에 있는 아래의 세 줄의 코드를 아래처럼 axios 안으로 옮겨주니 결과값이 올바르게 출력된다. 이미 돌이 놓여져 있는 칸을 클릭할 때만 '돌을 놓을 수 없습니다' 결과가 보내진다. axios.post("http://15.164.164.15:8..
-
[team-project_종합 게임 사이트 만들기] 오목 게임 만들기 (5)Project/종합 게임 사이트 2023. 11. 7. 12:32
[ 오늘의 작업 과정 ] - 게임이 종료 되었을 때 나오는 다시 하기 모달창 다시하기 버튼 누르면 오목판 초기 상태로 리셋하게 만들기 - 3-3 경고 알림 모달창 뜨고 해당 돌 지우게 만들기 1. 게임이 종료 되었을 때 나오는 다시 하기 모달창 다시하기 버튼 누르면 오목판 초기 상태로 리셋하게 만들기 다시 하기 버튼을 눌렀을 때의 동작은 resetBtn 함수안에서 이루어지기 때문에 먼저 오목판 상태를 담을 table state를 useState로 만들어두고 다시하기 버튼을 클릭하면 table 값을 state를 true로 변경하도록 했다. 그리고 table state가 true로 바뀌었을 때 오목판 페이지가 다시 리로드 되도록 하기 위해 window.location.reload 함수를 사용했고 안에 해당 ..
-
[team-project_종합 게임 사이트 만들기] 오목 게임 만들기 (4)Project/종합 게임 사이트 2023. 11. 3. 12:54
[ 오늘의 작업 과정 ] - 게임이 종료 되었을 때 나오는 다시 하기 모달창 미리 만들어두기 css로 모달창은 미리 만들었고 게임이 종료되었을 때 모달창이 나오도록 해야하지만 아직 게임 종료 상황 코드를 짜지 않아서 임시로 오목판을 클릭했을 때 모달창이 나오도록 해서 정상적으로 나오나 테스트 했다. Modal 컴포넌트를 따로 만들어 앞서 미리 UI 디자인한 코드를 넣고 useState() 함수로 UI의 상태를 담을 state를 만들어 true이면 Modal 컴포넌트가 나오고 false면 null 값이 되도록 했다. 아래 코드이다. function Game2() { var [modal, setModal] = useState(false); // 다시하기 모달창 return ( {/* 다시 하기 모달창 */}..
-
[team-project_종합 게임 사이트 만들기] 오목 게임 만들기 (3)Project/종합 게임 사이트 2023. 10. 29. 22:16
[ 오늘의 작업 과정 ] post 형식으로 아래와 같은 게임 전체 진행 상황 및 정보 데이터를 서버로 보내기 { color : "1" // 돌의 색 정보 (1이면 흑, 2이면 백) location : "4,6" // 돌의 좌표 (왼쪽 위에 칸 좌표 = "0,0" 기준 ) situation : "00000000000/00000001000/000000200/....." // 현재 게임 상황 (오목판 전체) } axios를 사용했고 아직은 서버 url을 만들지 않아 임시서버를 사용해 보낸 데이터를 확인하기로 했다. color 값은 현재 놓여진 돌의 색이 검정이면 '1', 흰색이면 '2'를 보내야 한다. 여기서 처음에 newColor가 아닌 color가 검정색일 때 '2'가 나오고 흰색일 때는 '1'이 이런식으..
-
[team-project_종합 게임 사이트 만들기] 오목 게임 만들기 (2)Project/종합 게임 사이트 2023. 10. 25. 20:15
[ 오늘의 작업 과정 ] 홀수번째 두는 돌은 검정색, 짝수번째 두는 돌은 흰색이 나오도록 구현하기 일단 css로 border-radius를 50%로 조정해서 돌을 동그랗게 만들어 줬다. 돌의 색을 담을 state인 color를 만들어두고 초기 state는 공백으로 두었다. let [color, setColor] = useState(''); // 현재 돌의 색상 돌의 색상 변경은 돌의 위치값 변경이 일어날 때마다 동작하므로 앞서 만들었던 handleCellClick 함수 안에 만들었다. 돌의 색이 검정이 아닐 때는 흰색으로 바뀌고 검정일때는 흰색으로 바뀌도록 돌의 색을 저장할 변수 newColor를 만들었다. const handleCellClick = (i,j) => { setClickedCell([.....
-
[team-project_종합 게임 사이트 만들기] 오목 게임 만들기 (1)Project/종합 게임 사이트 2023. 10. 23. 17:55
[ 오늘의 작업 과정 ] 1. 오목판 및 위에 문구 3초 뒤 없어지는 동적인 UI 만들기 2. 오목판에 칸 클릭 시 클릭된 칸 검정색으로 바뀌는 UI 만들기 1. 상단의 글자 3초뒤 없어지는 UI 구현 (Game2.js) 리액트에서 동적인 UI 만드는 3step을 따르면 된다. 먼저 html css 로 미리 UI 디자인을 다 해두고 UI의 현재 상태를 state로 저장해둔 후 state에 따라 UI가 어떻게 보일지 삼항연산자로 작성해줬다. function Game2() { let [start, setStart] = useState(true); return ( {start == true ? * 흑돌 먼저 시작 ! : } 여기서 3초 뒤 없어지는 기능인 타이머 기능이 필요하다. 이건 js로 x초후에 코드를 ..