개인 과제 완료

과제 4번 완료

바위바위보를 채팅창 형식으로 만듬.

 

 

막혔던 부분

 

 

1.클라이언트를 담당했던 채팅창에서의 내용이 서버로 넘어갈 때 세션을 통해 넘기는데 서버에서의 컴퓨터가 선택한 가위바위보와 결과값을 어떻게 가져와야하나 이 부분에서 막막했음

 

해결 방안 :

세션에서 데이터를 받아오고 db.session.add(game_histort)을 통해
game_histort 객체를 현재 데이터베이스 세션의 대기 목록에 추가합니다. 그 후 세션을 커밋할때까지 실제 데이터베이스에는 반영하지 않고 커밋까지 완료후에 json화 하여 클라이언트 응답을 반환합니다.

 

game_histort = GameHistory(
        computer_choice=computer_choice,
        user_choice=user_choice,
        result=result,
        username=username
    )
    db.session.add(game_histort)
    try:
        db.session.commit()
    except Exception as e:
        db.session.rollback()
        return jsonify({'error': str(e)})

    return jsonify({
        'computer_choice': computer_choice,
        'user_choice': user_choice,
        'result': result,
    })

 

2. 메세지 상태 업데이트 

 

const insertMessage = async () => {
    ...
    setUserMessages([...userMessages, userMessage]);  //수정 전 코드 
    setUserMessages(prevMessages => [...prevMessages, userMessage]); //수정 후 코드

    const gameResult = await fetchResponse(messageInput);
    setUserMessages(prevMessages => [
        ...prevMessages,
        { content: `Computer chose ${gameResult.computer_choice}`, type: 'fake', timestamp: new Date().toLocaleTimeString() },
        { content: `Result: ${gameResult.result}`, type: 'result', timestamp: new Date().toLocaleTimeString() }
    ]);
    ...
};

 

수정전의 코드는 최신 상태를 반영하지 못하고 많은 에러를 나타냈습니다. 그리고 insertMessage 함수가 호출되는 시점의 userMessages 상태를 업데이트해서 이전 업데이트가 반영되지 않았기 때문에 최신 상태를 반영하지 못했습니다.

 

수정 후의 코드는 setUserMessages에서의 코드를 변경하여 메세지들을 fetch 작업의 결과(여기서는 서버로부터의 응답)를 받았을 때, 이를 기반으로 상태를 업데이트하는 것이었습니다.

 

 

배운점

1. SQLite에서 데이터를 삭제할 때 "PRAGMA foreign_keys = OFF"와 관련된 에러가 나타나면 쿼리 에디터에 들어가 PRAGMA foreign_keys = OFF를 작성 후  삭제 진행하면됨.

 

 

2. 싱글 페이지 애플리케이션(SPA),서버 사이드 렌더링(SSR),클라이언트 사이드 렌더링(CSR)들에 대해 헷갈림이 있었다.

 

싱글 페이지 애플리케이션(SPA)은 웹 애플리케이션 또는 웹사이트가 하나의 페이지로 구성되어 사용자와 상호작용하는 구조를 말합니다.

 

서버 사이드 렌더링(SSR)은 초기 페이지 로드 시 서버에서 HTML을 미리 생성하여 클라이언트로 보내는 기술입니다.

 

클라이언트 사이드 렌더링(CSR)는 클라이언트(브라우저)에서 JavaScript를 사용하여 페이지의 내용을 동적으로 생성하는 방식입니다.

 

SPA와 CSR은 서로 비슷한 관계이고 이번에 개인과제에서 만든 것이 이쪽이다.

CSR은 첫주차 떄 팀프로젝트였던 python과 html을 직접적으로 연결하여 만든 것으로 이해하면 편하다