[축구모임 홈페이지개발] 03/27 개발일지 Nodejs / 승부차기 게임 구현 3 (불리언 타입 함수)

클라이언트에서 서버로 데이터가 전달되는 과정에서 데이터가 빠르게 전달되다보니 

 

클라이언트 -> 서버 -> DB -> 서버 -> 클라이언트

 

과정을 다 겪기 전에 데이터 전송이 겹쳐서 충돌이 일어나보였다.

 

20회 제한이 1 씩 감소하다가 빠르게 충돌되면 더 이상 데이터가 전달이 되지 않고,

 

로그아웃 후 다시 로그인해보면 중간에 다시 횟수 제한이 남아있는 오류가 발생했다.

 

딜레이를 넣어서 안정화를 시켜야겠다고 생각이 들었고,

 

setTimeout(function () {

                    isClickDelayed = false;

                }, 800);

 

함수를 버튼 클릭 사이에 넣어서 클릭 딜레이도 넣어보았지만,

 

결국 막힘 팝업이 뜬 후에 다시 재시도 하는 상황에서 같은 문제가 발생했다.

 

또 모바일로 보통 버튼을 누르는데, hover 는 작동을 하지만 딜레이때문에 먹히지를 않아서

 

일반 사용자 입장에서는 버튼이 씹히는 거 처럼 보이는 현상이 발생했다.

 

그래서 아는 선배에게 불리언 타입 변수에 대해 정보를 들었고 이를 이용해보기로 했다.

 

 

우선 함수 밖에서 다음과 같이 불리언 타입 함수 선언

var buttonClickable = true;

 

if (!buttonClickable) return;

            buttonClickable = false;

 

함수 안에서 해당 함수를 false 로 바꿔준다.

 

fetch('/gamezone-shooting-extrachance', {

                                method: 'POST', 

                                headers: {

                                    'Content-Type': 'application/json'

                                },

                                body: JSON.stringify({ userShootingCount: userShootingCount })

                            })

                                .then(response => response.json())

                                .then(data => {

                                    

                                    buttonClickable = true;

                                })

                                .catch(error => {

                                    console.error('Error:', error);

                                    

                                    buttonClickable = true;

                                });

 

서버로 데이터가 전달되고 받았을 때 true 값으로 바꿔서 버튼이 클릭되도록 설정.

 

함수의 마지막에서도 

buttonClickable = true;

 

true 로 바꿔줘서 함수가 끝나면 버튼이 다시 눌리게 하였다.

 

서버에서도 

 

app.post('/gamezone-shooting-extrachance', async (req, res) => {

  let username = req.user.username;

  let userShootingCount = req.body.userShootingCount;

  console.log(userShootingCount)

  await db.collection('user').updateOne(

    { username: username },

    { $set: { shooting_count: userShootingCount } }

  );

  res.json({ success: true });

});

 

마지막에 success: true 값을 클라이언트로 보내서 db 에 정상적으로 데이터가 들어갔을 때 클라이언트로 전달이 되게끔 하였다.

 

불리언 타입 함수를 통해서 확실하게 클라이언트와 서버, DB 간에 데이터가 전달이 되고서야 버튼이 눌리게끔 장치를 해 둔 것이다.

 

정말 행복하게도 정상적으로 코드가 작동하였다.

 

너무 좋다.