크래프톤 정글에 재입대(0주차 미니 프로젝트)

프로젝트 깃헙 주소

현재 상황 보고

크래프톤 정글에 재입대를 하게되었고 현재 5일차이다. 입대 당일부터 미니 프로젝트 임무를 부여받았고 월요일부터 목요일까지 수행을 명령받았다. 글을 작성하는 시점은 7월 5일 금요일로 임무를 마치고 재입대 이유와 임무 사후 보고를 같이 할 예정이다.

재입대 이유

입대 전까지 React와 Ts를 공부하며 프론트엔드 기술 스택을 공부하는 중이었는데 개발을 하면 할수록 기본기의 중요성을 느끼게 되었고 그런 교육을 진행하는 과정이 없나 찾던중 정글 크래프톤을 보았고 재입대를 결정했다.

임무 사후 보고

임무 설명

4일동안 실제 사용 가능한 서비스를 만드는게 임무였다. 단순히 개발로 끝나는게 아니라 서비스를 사용 가능하게 배포까지가 임무였다.팀원들의 기술 스택을 고려하여 Vanila js, flask, Mongo DB, 추가로 jinja와 jwt를 사용하는게 권장 사항이였다.

임무 수행 방법

우리 분대는 전투력 향상을 위한 소대내부 전서구 역할을 하는 서비스를 만들기로 하였다. 소대원들의 편지를 익명으로 전달하고 논란의 여지가 있는 편지는 관리자가 검열하여 논란의 여지를 사전에 예방하는 방식으로 기획했다.

임무 수행 방법 선정 이유 (상황 묘사)

• A라는 소대원이 B라는 소대원과 친해지길 원함, 하지만 내향적인 성격으로 인해 쉽게 다가가지 못함
• 친해지고 싶지만 같은 분대가 되지못해 작업을 매일 따로하여 기회가 없음

라는 상황을 타개하기 위해서 해당 임무를 수행했다.

임무 수행과정 상세 보고

• 로그인, 회원가입
  • JWT 토큰을 활용한 로그인
• 편지를 보낼 유저 선택
  • 존재하는 회원 리스트만 추출하여 유저에게 제공
    • 없는 사용자에게 보내는 경우를 사전에 예방
• 편지 작성 및 전송
  • 보내고싶은 문구를 적은 후 전달
• 관리자 검열
  • 승인(해당 유저에게 전달) 또는 삭제(편지 전달x)
• 유저의 편지 확인
  • 관리자의 승인을 받은 편지를 확인 가능
• 서비스를 이용하는 회원간 자유로운 채팅
  • 다양한 유저와 익명으로 채팅 가능

코치님 피드백

프론트엔드를 준비중이고 React와 Vanila로 CSR만 경험해보았는데 이번 프로젝트를 통해 처음으로 SSR을 경헙했다고 말씀드렸다.

그 말씀을 들으시고 프론트엔드 개발자를 희망하니 SSR & CSR 차이는 중요하니 잘 알아두라는 피드백을 들었다.

임무 수행후 회고

프로젝트를 진행하면서 나의 부족한점을 많이 느꼈고 해당 부분에대해서 가볍게 정리해보았다.

1. css

평소 px을 많이 사용하여 개발하였고 최근 프로젝트들이 반응형을 고려한 프로젝트를 진행하지 않아 자연스럽게 px을 사용하였다.

• 프로젝트 발표를 위해 세팅을 하던중 갑자기 커진 화면에 의해 px로 작성한 부분들이 반응형에 대응하지 못했다.

  스승님께 자문을 구하니 반응형에 대비해 px을 지양하고 rem과 %로 개발해보기 라는 피드백을 받았다.

2. Vanila JS만을 사용한 프로젝트 개발

평소 프론트엔드 기술스택중 필수인 리엑트로만 개발하여 Vanila로만 개발은 너무 오랜만이었다. 당연히 알아야할 기본이지만 그동안 라이브러리나 프레임워크에 신경쓰다보니 이번 프로젝트에서 기본기 부족이라는 과업은 나에게 그대로 돌아왔다.

3. jinja를 사용한 서버사이드 렌더링

사실 프론트엔드를 희망하는 사람으로써 SSR과 CSR의 차이점 장단점은 알고있었지만 서버사이드 렌더링을 사용한 프로젝트는 처음이었다. CSR인 리엑트로만 개발 경험이 몇번 있고 요즘 대세인 Next는 아직 경험이 없었는데 이번 기회에 jinja로 처음 SSR을 접했는데 서버에서 데이터를 같이 보내주는 부분에서 조금 어려움을 겪었다.

4. flask에서 socket.io

사실 프로젝트 제출 5시간전에 급하게 기능을 구현했었다. 원래 목표는 1대1 랜덤 채팅 기능이었다. express와 Vanila로의 경험, next와 react로는 socket을 경험이 있기에 python으로 쉽게 구현이 가능할 줄 알았는데 python으로 구현하는 socket io는 node로 구현할때와 많이 달라서 주어진 시간안에 구현하기는 불가능하다 판단하였고 서비스를 사용하는 모든 유저가 게임 전체 채팅처럼 돌아가게 기능 구현을 수정하였다.

// node로 진행했을때 adapter에서 해당 유저의 
const rooms = this.server.sockets.adapter.sids.get(socket.id);

• js로 구현했던 소켓 서버 로직
  • socket의 adapter와 소켓 아이디를 비교하여 유저들의 room을 관리했다.
• flask에서 소켓 서버 로직
  여러가지 방법이 있겠지만 시간이 거의 없어서 기본 이벤트로만 구현하였다.
  • flask에서 request에서 서버를 거칠때 보내는사람의 id를 조회가 가능하다. 그 소켓 아이디를 받는 사람의 소켓 아이디와 비교하는 방법으로 내 채팅과 다른 유저들의 채팅을 구분했다.

@socket_io.on("message")
def handle_message(message):       
    to_client = {}
    if message == 'new_connect':        
        to_client['type'] = 'connect'  
    else:        
        to_client['message'] = message        
        to_client['type'] = 'normal'
        print('socket_io',socket_io)  
    // 메세지를 보낸 유저 아이디 조회 가능
    send({'senderId': request.sid, 'message': message}, broadcast=True)

프로젝트 후 보완한 내용

프로젝트 발표때 시간 부족으로 못했던 것들을 프로젝트가 끝난 직후 보완했다.
아래는 보완한 내용들이다.

• 디자인
• 기능(뒤로가기, 로그아웃)
• 가독성을 고려한 코드및 파일 정리 (불필요한 코드 삭제, 파일 분리(css, html, js))
• README 작성
  아래 영상은 미니 프로젝트가 끝나고 디자인을 조금 다듬은 채팅 기능이다.

사실 위 채팅 ui 디자인도 프로젝트 발표후 수정한 내용이다.

회고

정글에서의 첫 프로젝트로 가장 중요하고 기본인 것들을 많이 부족하다는걸 느꼈다. 최신 기술이 어쩌구 취업시장이 어쩌구 등 주변에 휘둘려 정작 기본인 것들을 잘 수행하지 못하지 않았나 라는걸 이번기회에 많이 느꼈다. 정글을 온 목적은 CS를 위해 왔었는데 오자마자부터 엄청 많은것을 얻었고 남은 기간동안 꾸준히 성장할 수 있다는 생각이 들었다. 위 내용들은 조금씩 수정하며 나의 부족한 기초들을 조금씩 보완할 예정이다.