[항해99] 실전프로젝트 정리

6주간의 실전 프로젝트 과정을 거치면서 참 많은 일을 거친거 같다.

 

1주차

일단 첫주는 기획에 시간을 의도치 않게 쏟아부었는데 그 이유는 처음에 좋은 아이디어라고 생각한 프로젝트가 우리 수준으로 맞추다 보니 기존 기수에서 많이 하는 그저그런 프로그램이 되었다...

이미 3일의 시간을 쏟아부었지만 엎었다 우리는 우리만의 프로젝트를 하고 싶었기 때문이다.

여러가지 아이디어를 내기도 했지만 우리 조원들이 가장 하고 싶었던건 화상채팅 기능이었기에 이에 걸맞는 프로그램을 진행하는게 좋다고 생각했고, 보드게임 카페에서 필수로 하는 게임인 스파이풀을 웹으로 구현하자는 아이디어로 프로젝트를 결정하게 되었다.

+ 깃허브 컨벤션 (https://bald-crop-238.notion.site/Convention-Git-Flow-Front-12030b9bbc5949ffaa0a1a0a68f13c7e) 

 

 

---

2주차

- Live share를 사용하여 코드의 기본틀을 팀원들과 함께 작성했고, socket 사용을 위하여 공부를 시작했다. 

 

- 우리 조는 니코 선생님의 줌 클론 수업을 들어서 socket을 진행하기로 했는데 이 강의가 백엔드랑 프론트엔드 기술을 다 담고 있기 때문에 처음에 솔직히 이해가 되지 않았고 2번 정도 들으면 아하~ 이런 느낌이었다.

2번 들었을때는 최대한 주석으로 정리하면서 흐름을 이해하는 식으로 많이 들었고, 정리한걸 깃허브에 올려두어서 하다가 막히면 보는 식으로 했다.

https://github.com/parkharoi/zoom_websocket

GitHub - parkharoi/zoom_websocket: 웹소켓을 사용하기 위한 공부

 

- 카카오 소셜로그인을 내가 맡아서 진행했고, 한번 하면 참 쉬운데 몰라서 시간이 많이 걸린거 같다.

자세한 내용은 아래 블로그에 작성해 두었다.

 

https://haro-e.tistory.com/53 

[REST API]를 이용한 카카오톡 소셜로그인

 

---

 

3주차 

- 이제 디자인이 나와서 css를 시작했는데, 디자이너님이 정말.. 열정이 넘치시는 분을 만났다 ! 너무 예쁘게 나왔다. 근데 이걸 따라가기에는 css 에서 내가 부족한 부분이 많아서 기본적인 부분을 다시 공부하고 정리했다.

 

https://twilight-stargazer-9a8.notion.site/CSS-01cb6c2ab70e441bb88a43b4c790f48c

CSS

 

 

- 디자인 수정을 진행하고 socket.io를 이용해서 백엔드와 맞춰보기 시작했다. 이때 깃허브 마일스톤이랑 이슈를 사용해서 서로 프로젝트에서 목표 범위를 설정해서 진행했다.

 

 

- 그리고 중간발표를 했는데 정말 바짝 정신차린 기분이었다... 시니어 개발자분 한분이 돌아가면서 왜 이런 기술을 사용했는지나 등등을 물어보셨는데 대답은 모두 했지만 만족스럽지 않은 대답이 많아 팀원들과 발표가 끝나자 말자 질문 받은 내용에 대해서 구글링을 해봤다.

그 중에 WebSocket과 Socket.io의 차이점이었고, 아래에 정리해 두었다.

 

https://twilight-stargazer-9a8.notion.site/WebSocket-Socket-io-23fc522fa4124f399aa06b0121286747

WebSocket과 Socket.io

 

---

 

4주차 

이때가 정말 힘들었다.. 디자이너님도 피드백을 받아서 디자인을 수정하겠다고 하셔서 디자인도 거의 반쯤 갈아입히다 시피 새로 한다고 시간 보내고 socket.io로 받은 데이터로 코드를 작성하다가 막히는 부분들이 너무 많았고, 해결한다고 참시간이 많이 걸렸다.

아래에 트러블 슈팅에 대한 이슈를 모아 놓은 부분인데 문제를 직면한 상황이랑 어떻게 해결했는지 작성해 두었다.

https://github.com/seunghoonKang/we-all-lie-fe/milestone/4?closed=1 

GitHub - seunghoonKang/we-all-lie-fe

 

---

5주차 

사실 5주차인데도 우리는 webRTC를 들어가지 않았다. 다른 조들은 webRTC 하다가 방향을 틀기도 했고, 유저 피드백을 받기 위해서 슬랙에 글 올린 조중에서 open vidu를 사용해서 화상채팅 기능을 이미 실현한 조도 있어서 정말 많이 안달 났지만 게임 로직에서 아직 제대로 작동하지 않는 부분들을 수정하고 잡고, 마이페이지 만들고 게임 설명 슬라이드 만들고 webRTC 말고도 해야할게 너무 많았다. 

정말 6주차에는 무조건 webRTC 진행을 하기 위해서 팀원들과 엉청 으쌰으쌰 하면서 분위기 좋은 우리 조였지만 말 하는것도 아끼면서 코드를 작성했다.

 

---

 

6주차 

이때부터 webRTC를 들어갔는데 그중에서도 맞춤형 화상 서비스를 쉽게 구현할 수 있는 open vidu를 사용해서 커스텀 하기로 했다.

처음 사용해 보기도 지금까지 작성한 코드에 손상을 덜기 위해서 프로젝트를 클론해서 새로운 레포를 파서 적용시켰다.

https://github.com/seunghoonKang/wealllie-t

GitHub - seunghoonKang/wealllie-t

전시회 3일전에 와다다 하다보니 socket.io를 활용할때보다 이슈와 마일스톤 및 커밋 메시지를 제대로 작성하지 않고 올린게 솔직히 많이 아쉽긴 한데 그래도 성공했다는게 정말 기적같다.. 다른 조들이 다들 어렵다고 해서 솔직히 기대 안했는데 우리가 이걸 3일만에 했다고? 라는 생각에 우리가 하고도 믿기지가 않았다.

 

마지막 TMI 출석체크 1위 먹음 그냥 기분 좋은 사진이라서 넣었다 ㅎ 금요일 전시회에는 출석체크도 안찍었네 이제보니

 

---

 

마지막 전시회

발표회 전에  랜딩이라는 회사의 소개를 듣고 우리조의 발표가 끝나 부스에 들어왔는데 랜딩 회사에서도 우리 프로젝트에 관심이 있어서 이것저것 물어보시고 게임 한판 같이 하자고 해서 같이 하다 보니까 40분이나 계시다가 가셨는데 진짜 너무 뿌듯했다.

 

소감 

6주간 프로젝트를 하다보니까 왜 개발자들이 자신들의 코드를 지우기 아까워 하는지 알꺼 같다. 정말 이번 프로젝트는 내가 낳은 애기처럼 너무 애정이 가는 프로젝트였고, 앞으로도 리팩토링 하는 시간을 가지기로 팀원들과 약속했다.

이 애기를 다른 사람한테 자랑할 수 있도록 내가 사용하는 기술을 자신감 있게 설명할 수 있는 자식 자랑 잘하는 개발자가 되고 싶다.