📌간단 후기

7주동안 진행한 공통 프로젝트가 끝났다.
살면서 손에 꼽을정도로 열심히 한 것 같다, 7주동안 평일은 싸피에서 8시간 + 집에서 최소 2시간씩 10시간 정도 했고 주말은 쉬는 날 없이 짧게는 4시간 ~ 10시간까지도 프로젝트 진행함

👍배운점

📑협업 프로젝트의 소통 방법

대학교에서 의사소통 기술이라는 과목이 있었는데 그 과목에서 배운 내용이 생각이 난다.
대화는 과정을 거치며 변환되고 그 변환이 대화에서 오해를 부르고 서로의 말을 이해할 수 없게 만드는 원인이다, 의사소통 과정은 다음과 같다
1. 나의 생각이 말로 변환된다(단어 선택, 억양 선택, 말투 선택 등)
2. 상대방의 귀에 내 말이 전달 되고 상대방은 말을 다시 생각으로 변환한다

1. 단어 선택 잘하기

나는 프론트이다 보니 클라이언트 입장에서 계속 서버로 송신한다는 단어를 선택하여 설명했다, 하지만 백엔드 입장에서는 수신이므로 송신이라는 단어만 내 입장에서만 올바른 표현이다,
또한 게임을 만들면서 로비, 인게임 등등 내가 게임을 많이 해와서 알고 있는 게임 용어들을 자주 말했다 단어를 선택시에는 그 단어가 누구나 알아듣고 누구의 입장에서나 이해하기 쉬운지 다시 생각해보자.

2. 말하기 전에 말하고자 하는 것을 다시 정리하기

생각을 하고 바로 전달하려고 할때 내가 말하면서도 내가 뭘 말하려고 했더라?, 또는 내가 무슨 말을하고 있는지 나도 이해를 못하는 경우가 종종 있었다.
대화전에는 내가 말하고자하는 요점을 스스로 정리하는 시간을 가지고 대화를 하자

📑Chat GPT / 구글링 및 공식문서 선택 기준

프로젝트 기간동안 2개 모두 많이 써보면서 질문에 뭐냐에 따라 어떤게 더 효율적인지 알게 된 것 같다

• chat gpt
  • 답변이 간단하고 짧은 경우ex) ubuntu에서 cpu 사용률 보는 명령어
  • 구글에 질문해도 나오는 쉬운 답변을 내코드에 적용하려 할때ex) 내코드에 useMemo를 적용시켜서 렌더링 개선하는 코드 예시 써봐
  • 구글링 불가능하고 사람에게 물어야하는 질문인 경우ex) 지금 내코드에 ~이부분을 ~이렇게 고치면 성능이 더 좋아지려나?
• 구글링 및 공식문서
  • 유명하지 않은, 커뮤니티가 작은 기술에대해 물을 때ex) openvidu에서 ~이런건 어떻게해?
  • 21년 9월 이후의 업데이트된 기술에대해 물을 때
  • 전체적인 예시코드 및 스켈레톤 코드를 찾을 때(chat gpt4 코드가 그닥 좋은 코드는 아니라고 느낌, 어느정도 내가 코드 틀을 작성하고 그 이후 보완시에는 gpt가 좋은 듯)

📑계획 / 역할 분담 중요성

계획을 어느정도 정하기는 했지만 사실 처음 하는 프로젝트 이기도 하고 Web RTC나 web socket에 대하여 지식도 없다보니 이거를 언제까지 기능을 구현하겠다. 이런 판단을 하기가 굉장히 어려웠고 날짜 계획을 신중하게 정하지는 않은 것 같다.
이러다보니 게임 프로젝트에 제일 중요한 게임 내 진행 로직 및 구현이 굉장히 늦게 시작되었다. 지금 생각해보면 인게임 로직 및 구현을 프로젝트 시작하자마자 1명이 전담하여서 프로젝트 시작과 동시에 바로 시작했어야하지 않을까

📑docker, CI/CD, 배포

이번 프로젝트에서 인프라를 담당했는데 말로만 듣던 도커랑 jenkins로 CI/CD를 직접 구현해 볼 수 있었다. 대학교때 흘려들은 리눅스 명령어를 다시 공부해볼 수 있는 기회였다.
세부적이고 구체적으로 아는지 장담할 수는 없지만 docker를 사용한 배포에대한 큰 흐름 또는 큰 틀은 제대로 이해했다고 생각하여 충분히 만족한다.

📑JWT, cookie 로그인 관리

cookie에 보안옵션을 모두 쓰면서 로그인을 관리했는데, 처음에는 그냥 react cookie를 사용해서 백으로부터 body에 토큰 받아서 사용했다. 하지만 다 구현하고 그것이 보안을 신경쓰지 않은 방법이라는걸 알았고 다시 구현하게 되었다.
accessToken은 전역상태로 저장하고, refreshToken은 쿠키에 저장하되 쿠키는 서버에서 넣어주는 것이고 내가 react cookie로 따로 관리하지 않도록 한다(httpOnly, secure, sameDomain 보안 옵션 모두 최고로)

👎아쉬운 점

📑컴포넌트 재사용성이 낮았다

프로젝트 진행하면서 버튼을 common 컴포넌트로 재사용했는데 사용하다보니 어떤 버튼은 크기를 조절하고 싶고, 안에 글자 색을 조금 바꾸고 싶고, 이런식으로 하다 보니 재사용을 제대로 못한거 같다.
다음 프로젝트에는 default 값을 정해두고 props로 크기, 패딩, 폰트 사이즈, 글자 색 등등 을 받아서 사용할 수 있도록 만들어야 겠다고 생각 했다. 다음 프로젝트에서는 제대로 된 ATOMIC 패턴 하자!

📑typescript 사용이 조금 아쉽다

typescript를 배우고 프로젝트에는 처음 적용시켰는데, 프로젝트에 집중하여 개발하다보니 type을 제대로 지정하지 않아서 적당히 타입 추론으로 타입이 정해진 경우가 좀 많았다.
후반부에는 type 폴더에 다 정리를 했지만 초반에 짠 코드는 그러지 않아서 아쉽다. 다음 프로젝트에는 자바 DTO처럼 type 폴더에 JSON 형태부터 내부에서 공유하는 state 형태 꼭 제대로 정리해서 typescript 사용하자

📆앞으로 계획

• 웹 포트폴리오 만들기
• 신한은행 해커톤
• 특화 프로젝트

🚀특화 프로젝트 목표

• 테스트 코드 작성
• 반응형
• 코드 리뷰하기
  • 구체적인 코드 컨벤션 정하기
• Component - custom hooks 설계 패턴 사용
• ATOMIC 구조 사용
• 렌더링 시간 측정 및 성능 최적화 시도하기 - Light house 크롬 확장
• React Query, Zustand 사용하기

🎊최우수작 선정