[개별 멘토링] 2024.11.04 서산

• 쉬운 시작을 위해 목차를 분리하여 제공합니다.
• 성장을 종합적으로 기록하는 데 익숙해진 이후에는 각자의 형식을 갖춰봐도 좋을 것 같습니다.

이번주 문제 해결 경험

1. 주제 선정

첫주차에 들어서 가장 처음 접한 문제는 주제 선정 문제였다. 우리 팀 5명 전원 ‘실시간 데이터’ 관련 주제를 선택했지만 더 구체적인 서비스 주제를 선정하는 것은 어려웠다. 많은 주제들이 나왔지만, 주제에 적합하고 프로젝트 완료시 서비스의 완성도 측면에서 만족할만한 주제는 총 2개가 있었다. 여기서 우리 팀은 2가지 측면을 더 고려했다.

• 로그인 없이 어느 정도 사용할 수 있어야함.
• 사용자가 적어도 괜찮은 서비스.

이런 추가적인 조건을 고려했을 때 현재 주제인 ‘주식 모의 투자 게임’이 선택 되었다.

2. 도전

사실 현재 선택된 주제는 개인적으로 피하고 싶었던 주제였다. 프로젝트의 볼륨이 너무 커 보이기도 했고 소켓 통신을 통해 실시간 데이터를 이용해 실시간으로 변하는 차트를 그린다는 것이 부담스러워 보였기 때문이다. 그리고 주식이라는 도메인도 완성도를 높이기 위해서는 많은 학습이 필요해 보였다. 하지만 팀원들과 서비스를 기획, 설계하며 구체화하는 과정에서 해당 주제에 대한 두려움보다는 이 주제를 완성시켰을 때 내가 얼마나 성장할 수 있을지 기대감이 커지게 되었다. 그리고 실시간 데이터를 시각화하는 부분도 혼자라면 너무 막막하지만 동료들과 함께라면 해낼 수 있을 것 같은 생각이 들었다.

이렇게 처음에는 ‘주식 모의 투자 게임’ 주제선정 자체가 두려운 도전이었다면, 팀원들과 대화를 할 수록 기대가 되는 도전이 되었다.

3. 도전 키워드

현재 회의를 통해 결정된 사항을 통해 나에게 몇가지 도전할 키워드들이 생겼다.

Typescript : 우선 프로젝트를 TS를 이용해 진행하기로 했다. TS를 선택한 가장 큰 이유는 타입을 지정함으로서 전체적인 코드의 안정성을 높일 수 있기 때문이었다. 하지만 나는 한번도 TS를 사용해본적이 없기 때문에 주말이나 남는 개인 시간을 활용해 학습을 진행할 예정이다.

소켓 통신 : 현재 설계상 대부분의 데이터가 소켓 통신으로 되어있다. 하지만 소켓 통신도 경험이 없기 때문에 이벤트 관련 처리는 어떻게 해야하는지 하나씩 찾아봐야 한다.

그래프 그리기 : chart.js 라는 도구가 있지만, 해당 도구가 우리가 원하는 주식 그래프를 잘 그려줄 수 있는지, 그리고 차트 디자인을 우리가 원하는 방향으로 만들 수 있는지 전혀 모르는 상태이다. 따라서 해당 부분을 조사해보고 차트를 그리는걸 직접 구현할지 의견을 제시해야 한다.

피어세션 기록

질문1. UI 디자인

현재 Figma를 통해 디자인을 진행 중인데 저희는 일단 기존에 있는 서비스에서 우리가 원하는 스타일의 컴포넌트들이 있다면 스크린샷으로 하나씩 가져와서 만들어 놓은 상태입니다. 여기서 이제 여기서 Figma 작업을 더 어떻게 진행하는게 좋을지 고민입니다.

추가로 여러분들을 UI 작업을 어떻게 진행하시는지 궁금합니다.

JuGa

-> AI가 주로 도와줌.

질문2. 여러분들의 도전 키워드

이제 다들 어느정도 프로젝트 설계를 진행하셨을 것이라고 생각됩니다. 이 시점에서 생긴 여러분들만의 기술적 도전 사항이나 키워드들에 대해 알려주세요.

• 프로토콜.
• nCloud 사용.
• 서버 확장 관련 고민.
• 인프라 관련.
  • DB 인스턴스 관련
• 웹 소켓.
• 인증/인가.

개별 멘토링 기록

멘토에게 전달하고 싶은 이야기를 정리해보세요. 개별 멘토링 24시간 전에 멘토가 미리 내용을 보고 올 수 있도록 공유해야 합니다.

개별 멘토링 이후에는 멘토와 나눈 이야기가 휘발되지 않도록 기록해보세요.

소켓 관련 답변.

→ 소켓 통신에 대해 간단하게 설명 드리면 기본적으로 소켓은 이벤트를 통해 통신이 됩니다. 소켓 통신에서 전달 되는 것을 emit라고 하고 on을 통해 해당 전달을 받습니다. 얘를 들어 서버에서 블록의 이동을 emit하게 된다면 클라이언트에서 on으로 해당 키워드를 listen하고 있다가 동일한 키워드로 서버에서 전달 받으면 동작을 하는 방식으로 진행됩니다.

프로토콜 관련 답변.

→ 프로토콜의 경우 자신에게 맞는 기능을 더 잘 구현하기 위해 학습한다고 보시면 됩니다.

개별 멘토링 질문 항목

---

타입스크립트 학습하면서 저번 미션 코드를 리펙토링 진행했습니다.

질문 1. 아직 학습 중이긴 하지만 JS와 차이점이 타입 지정 말고는 없다고 생각되는데 맞을까요?

→ 네 그렇습니다. 이 부분은 타입스크립트가 어떻게 동작하는지 확인한다면 더 이해가 빠를 것 같습니다. 타입스크립트 자체가 JS로 번역되는 것을 보시면 이해가 빠르게 될거에요

질문 2. 매개변수를 위해 Interface를 사용했는데 그럼 함수마다 Interface가 생기는데 이렇게 사용하는 것이 맞을까요?

→ 일반적으로 컴포넌트마다 Interface가 생기기는 합니다. 그리고 구조분해 할당으로 받을지 props로 받을지 그런 부분은 팀원이랑 상의해서 결정하면 되고 현업에서도 팀의 코드 컨벤션 따라가는 것 같습니다. 그리고 Interface를 공통으로 두는 방식으로 따로 선언해서 사용하는 방법도 있습니다.

TS 학습을 하며 아래와 같이 문제를 푸는 것을 발견하여 풀었습니다.

type-challenges/questions/00004-easy-pick/README.ko.md at main · type-challenges/type-challenges

질문 1. 위의 문제를 풀며 아래와 같이 제네릭 타입을 선언하는 방식이 있는데 이 부분이 가장 이해가 되지 않는 것 같습니다. 아래와 같이 제네릭 타입을 정하는게 일반적으로 많이 쓰이는 방식인지 궁금합니다. 만약 아니라면 현업에서는 어떤식으로 이용하는지 궁금합니다.

→ 일반적으로 제네릭 타입의 경우 많이 쓰이지는 않습니다. 주로 라이브러리 같은 부분에서 객체 같은 것을 받을 때 여러 객체들을 받을 수 있게 하는 역할로 쓰입니다. 제네릭 타입의 경우 일반적으로 많이 쓰이지 않고 특수한 경우에 많이 사용됩니다.

type MyPick<T, K extends keyof T> = {
  [P in K]: T[P];
};

프로젝트 개인 목표 고민

이번 그룹프로젝트에서 개인 목표를 어떤 것을 설정해야 좋을지 명확하게 감이 잡히지 않는 것 같습니다.

• 소켓을 이용한 실시간 데이터 관리
• 데이터 시각화(차트 그리기)
• 프로젝트 완성도

이런 키워드들이 현재 제가 생각하는 목표들인데 이 모든 것을 하기에는 시간이 부족할 것 같습니다. 취업과 이력서 측면에서 봤을 때 어떤 부분에 가장 초점을 맞추는 것이 좋을까요?

→ 각각의 모든 키워드가 다 괜찮아 보입니다. 어떤 키워드든 하나를 확실하게 정해서 학습하는 경험을 가졌으면 좋겠습니다. 하지만 ‘소켓을 이용한 실시간 데이터 관리’의 경우에는 백엔드에 더 가까운 주제이기 때문에 본인이 백엔드 쪽에도 관심이 있다하면 좋은 주제라고 생각됩니다. 결론은 데이터 시각화나 완성도(최적화) 둘 중 아무거나 상관없다고 생각됩니다. 단지 확실하게 하나를 정해서 가시길 추천드립니다.

디자인 관련 질문

피그마 디자인을 어느정도 수준까지 해야할지 모르겠습니다. 현재 피그마에서는 각각의 컴포넌트들을 유사한 서비스에서 스크린샷으로 가져와서 위치만 잡은 상태입니다. 이 상태에서 피그마 작업을 추가로 얼마나 완료하고 개발을 시작하는게 좋을지 궁금합니다.

→ 사용자의 동작이나 시뮬레이션 같은 것을 토대로 UI 디자인을 하시면 더 좋을 것 같습니다. 예를 들어 사용자가 로그인을 할 때 아이디를 입력하면 어떤 버튼이 어떤 색으로 변하는지, 혹은 클릭을 했을 때 어떤 화면이 나오는지 나오면 더 좋을 것 같습니다.