포트폴리오로 사용하기 위해서 이것저것 만드는 것 보다 하나의 서비스를 1년 정도 꾸준히 운영해보는 것이 더 좋다고 한다. 그래서 프로그래머스 인턴 시험에 제출하기 위해 개발했던 문도 피구 게임을 계속 가꿔보려고 한다. 코딩 테스트를 공부할 시간이 부족해서 일단 제출했었지만 사실 게임에 고쳐야 할 부분들이 꽤나 있다. (코딩테스트가 떨어져서 문도 피구는 빛날 기회조차 없었다는 것은 안비밀)
1. 사용자가 브라우저 창을 종료하면 데이터 베이스에서 userId를 삭제해야하는데, 크롬 브라우저에서는 수행이 되지만 다른 브라우저에서는 수행이 되지 않는다. 그래서 users 테이블을 보면 제거되지 않은 유저들 데이터가 쌓여있어서 수동으로 제거해줘야한다. 아직 자세히 조사해보지는 않았는데 beforeunload 이벤트를 지원을 안해주는 것 같기도 하고 잘 모르겠다. 만약 그렇다면 다른 방법으로 해결해야 할지 아니면 크롬 브라우저일 때만 게임을 실행할 수 있게 해야할지 고민이다.
class Main extends React.Component {
constructor(props) {
super(props)
this.socket = null
this.state = {
userId: null,
socketId: null,
otherUserId: null,
otherSocketId: null,
}
window.addEventListener('beforeunload', function() {
if(this.state.userId) {
axios.post('/exit', {
userId: this.state.userId,
state: this.state.state,
otherUserId: this.state.otherUserId,
otherSocketId: this.state.otherSocketId
})
}
}.bind(this))
}
render() {
return <Box main={this} />
}
}ㄴ Main.jsx 일부분
app.post('/exit', function (req, res) {
let query = 'delete from users where userId=?'
let params = [req.body.userId]
connection.query(query, params, function (err) {
let data = {}
res.send(data)
})
if(req.body.state == 'gaming') {
io.to(req.body.otherSocketId).emit('error', {
error: 'error'
})
}
})
ㄴ server.js 일부분
2. 게임 승패가 정해지고 난 뒤, 10초가 지나면 로그아웃이 자동으로 되고, 다시하기 버튼을 누르면 로그인이 유지가 되어야하는데 로그인 유지는 되지만 자동 로그아웃을 설정한 setTimeout이 clearTimeout을 실행해도 삭제가 안되서 무조건 10초 후에는 메인 화면으로 돌아가게 되버린다...
class Box extends React.Component {
constructor(props) {
super(props)
this.main = props.main
}
render() {
if(this.main.state.state == 'end') {
(
()=>{
this.main.state.endTimeout = setTimeout(function() {
window.location.href = 'http://168.131.145.185:3000'
}, 10000)
}
)()
return <div>
<img src="../../img/logo.png" style={logo}></img>
<img src="../../../img/main.png" style={{width: '100%', height: '100%'}}></img>
<div style={box}>
<div style={{fontSize: '1.5rem'}}>
winner is {this.main.state.winner} !
</div>
<hr/>
<div style={{fontSize: '0.8rem'}}>
10초 후에 메인화면으로 돌아갑니다..
</div>
<button onClick={this.main.replay}>다시하기</button>
</div>
</div>
}
}
}ㄴ Box.jsx 일부분
class Main extends React.Component {
constructor(props) {
super(props)
this.socket = null
this.state = {
state: 'logout',
userId: null,
socketId: null,
otherUserId: null,
otherSocketId: null,
myColor: null,
otherColor: null,
winner: null,
endTimeout: null
}
this.replay = this.replay.bind(this)
}
replay() {
clearTimeout(this.state.endTimeout)
this.socket.emit('replay', {
socketId: this.state.socketId
})
}
render() {
return <Box main={this} />
}
}ㄴ Main.jsx 일부분
3. 유저가 로그인 하면 튜플의 state 컬럼이 login, logout, gaming, end 등으로 나뉘게 되는데 유저 목록 보기 버튼을 클릭한 경우에는 login유저만 보여야 한다. 그런데 gaming유저의 수까지 가져오고 출력만 안하니까 목록의 페이지 수가 login중인 유저 수와 불일치 하게 되었다.
기말고사까지 3주밖에 남지 않았으니 많은 시간투자는 못하겠지만, 틈틈히 고쳐서 해결 방법들을 작성해보록 하겠당. 게임을 즐기고 싶다면 www.dudghsx.com 로 접속하시면 된다. 그럼 20000~~
mundoDodgeBall!!
www.dudghsx.com