크래프톤 정글 7기 1일차 (프로젝트 시작,실시간 채팅,socket IO)

✨ 정글 1일차

2024년 9월 2일 크래프톤 정글 프로그램이 시작했다. 

 

아침 일찍 일어나 출발 준비를 했고, 

대중교통을 이용해서 약 3시간만에 경기대에 도착을 하게되었다. 

(캐리어 바퀴가 고장나고, 손잡이도 고장나고 ;;)

 

다행히도 12시 전까지 도착을 하였고, 

기숙사에서 코치님들이 반갑게 맞이해주셨다. 

크래프톤 정글 마크가 보였는데, 왠지 모르게 뿌듯하다. 

룸메이트 형과 인사를 하고 정신없게 입소식이 진행되었다. 

입소식에 기억에 남는 말 
- 어제의 나와 경쟁하자
- 장기적으로 성장 할 수 있는 개발자 

 

이번 프로그램을 하면서 마음속에 새길 것은, 

"어제의 나와 경쟁하자" 이다. 

 

사실 좋은 말들을 정말 많이 해주셨는데, 

노트북을 가져가지 않아서 좋은 말들을 많이 놓쳤다 ㅠㅠ 

 

이후 강의실에 가고 바로 해야할 과제들이 주어진다. 

(코치님들과 잠깐의 Q&A 시간도 갖는다. 이떄 이것 저것 물어보면 많은 것들을 답변해주신다.) 

 

그리고 조원들과 같이 팀 프로젝트를 시작하게 된다. 

---

📌 프로젝트 설명

 

 

크래프톤 정글 입학 시험으로 간단한 웹 사이트를 만드는 것들을 해보았다. 

이번 프로젝트는 좀 더 발전시킨 웹 사이트를 만드는 것이다. 

 

우리 팀의 주제는 리워드형 계시판 + 세부 프로필의 웹 서비스를 제공하는 것이다.

해당 프로젝트의 의의는 함께 도움을 주고 받으며,

서로의 장점을 배우고, 팀원의 성향을 미리 파악하고자 하는 것이다. 

(해당 서비스는 정글러만 사용 가능 !) 

 

 

다음은 간단하게 만든 와이어 프레임이다. 

 

가장 먼저 로그인 페이지가 있다. 

회원가입 페이지를 누르면 회원가입 폼으로 들어가고,

로그인 버튼을 누르면 요구 게시판으로 들어가게 된다.

 

회원가입 폼에서는 ID,PW,Email,MBTI 등 정보를 구체적으로 요구한다.

(처음보는 정글러들의 TMI를 알기위해 ! ) 

 

 

로그인을 하면 요구 게시판으로 넘어간다. 

해당 페이지에서 "해주세요"와 "해줄게요" 버튼으로, 의뢰를 할 받거나 할 수 있다.

 

의뢰한 포스터는 카드 섹션 형태로 나타내고, 

실시한 채팅으로 구현해보고자 한다. 

 

그리고 의뢰에 성공을 하게되면,

바나나를 받게되는데 이게 일종의 화폐 역할을 하게 될 것이다.

 

 

 그리고 의뢰 페이지에서 각 사용자의 프로필을 볼 수 있게 만든다. 

 

해당 프로필에서는 앞서 회원가입 폼에서 작성한 것들 기반으로, 

정글러의 TMI를 알 수 있다. 

 

 

그리고 바나나를 통해 랭킹을 확인하고, 보상을 받을 수 있다.

바나나는 매 주 5개 정도 자동 충전되게 만들려한다. 

 

 

 

다음으로는 아키텍처이다.

 

해당 아키텍처는 추후 추가 될 수도 있다. 

 

---

 

나는 실시간 채팅 부분을 담당하게 되었다. 

Flask 프레임워크는 WebSocket을 지원하지 않는다고 한다. 

그렇기 때문에 Flask-SocketIO 라이브러리를 사용한다. 

 

해당 라이브러리는 JavaScript의 SoketIO 라이브러리와 함께 작동하여, 

클라이언트-서버 간의 실시간 통신을 가능하게 한다. 

 

 

https://luvris2.tistory.com/851

Python Flask - 실시간 채팅 기능 구현하기 (양방향 소켓 통신, FlaskSocketIO)

간단한 실시간 채팅은 위의 블로그를 통해 구현 할 수 있었다. 

아래는 작성하신 블로그의 핵심 포인트들만 가져왔다. 

 

[Flask]

@socketio.on('message')
def handle_message(data):
    print('Received message:', data)
    socketio.emit('message', data)

 

socketio.on 함수는 서버가 클라이언트로부터 message라는 이벤트를 수신할 때마다,

handle_message가 실행하도록 한다. 

 

socket.emit  함수는 서버에서 클라이언트로 이벤트를 전송한다. 

실제 보내지는 것은 "data"이고 "message"는 단순 이벤트 이름이다. 

 

 

[JS]

<script>
    // 소켓 서버 연결
    var socket = io.connect('http://' + document.domain + ':' + location.port);

    // 소켓 서버 이벤트 처리
    socket.on('message', function (data) {
        var userName = document.getElementById('formUser');
        var contentSpan = document.getElementById('message-container');
        var content = document.createElement('div');
        content.appendChild(document.createTextNode(data.user + " : " + data.message));
        contentSpan.appendChild(content);
    });

    // 전송 버튼을 누를 경우 유저 이름과 메시지 내용 소켓 서버로 전달c
    document.querySelector('#messageForm').onsubmit = function () {
        var userName = document.getElementById('formUser');
        var userMessage = document.getElementById('formMessage');

        let userInfo = userName.value;
        let messageInfo = userMessage.value;

        // 메시지 데이터 보내기
        socket.emit('message', { 'user': userInfo, 'message': messageInfo });

        // 메시지 입력 내용 초기화
        userMessage.value = "";

        return false;
    };
</script>

 

앞서 말한거와 같이 서버와 클라이언트 간의 상호작용을 위해, 

JS와 Flask 각각의 socket IO 라이브러리를 사용한다. 

 

JS에서는 소켓 서버와 연결해주어야한다. 

(document.domain, location.port를 사용하면, 알아서 도메인 주소와 포트 번호를 가져온다.)

 

socket.on 함수는 서버로부터 'message'라는 이벤트를 수신할 때,

실행되는 함수를 정의한 것이다. 

해당 함수가 실행되면 채팅이 추가되는 것이다. 

 

document.querySelector('#messageForm').onsubmit은  html의 폼이 제출되면 실행된다. 

User와 message를 가져와 value를 추출하고,

socket.emit 함수로 서버에 데이터를 보낸다. 

 

마지막에 return false는 기본 동작 제출 (페이지 새로고침)을 방지하여

SPA(Single Page Application) 느낌으로 메시지를 전송할 수 있게 한다. 

 

 

요약하자면, 먼저 HTML의 form 이 제출되고 
onsubmit 함수를 통해 입력된 데이터는
'message'라는 이벤트명으로 data를 서버에 보낸다. 

서버측에서는 'message' 이벤트 명으로 함수가 실행되고,
다시 'message'라는 이벤트 명으로 클라이언트 측에 data를 보낸다.

그리고 클라이언트측에서는  해당 이벤트 명으로,
socket.on 함수를 실행시키고, 새로운 채팅을 업로드한다. 

 

 

이제 해당 채팅 내용들을 MongoDB에 저장하는 것을 구현해야겠다. 

 

---

🎈  마무리

 

 

64일 연속 알고리즘 푼게 오늘로써 끝이났다.

사실 그렇게 큰 의미는 없다. 

 

막판들어 알고리즘 할 시간이 별로 없어서 (변명...),

브론즈 문제만 풀었으니 말이다 ... 

 

뭐 아무튼 힘든 정글 1일차가 이렇게 지나갔다. 

1일차부터 정말 힘들다

 

지금은 늦게까지해도 괜찮은데, 앞으로도 이렇게 가능할지 모르겠다.

또 잘 할 수 있을지 걱정된다. 

 

부족한만큼 더 열심히 해야겠다는 생각뿐이다. 

 

제발 내 체력이 정글 끝까지 되기를 바란다 !

(새벽에 필터링없이 쓴 글이라, 다시보면 부끄러울 예정)