2주차 nkim : socket.io 를 이용한 SPA 채팅프로그램 만들어보기

[nyeoni]

Subject

바닐라 자바스크립트로 socket.io 를 이용한 채팅프로그램 구현해보기

• 모노레포 설정
• esbuild 사용해보기

혹시 잘못된 점이나 부족한 내용있으면 편하게 알려주시면 감사하겠습니다!!

Keyword

• SPA
• Router
• socket

Blog

• blog
• github

[rkskekzzz]

리뷰

프로젝트 구조를 다이어그램으로 그려서 직관적으로 구조를 파악할 수 있었어요!! 코드를 볼 때에도 참고하면서 보니까 너무 편했네요! 저도 다음에 프로젝트 구조를 다이어그램으로 표현해보도록 노력해야겠어요 ㅎㅎ
Monorepo설정은 정말 좋아보이네요! 저도 다음주에 진행할 프로젝트에 적용해 봐야겠어요! 항상 따로따로 관리했었는데 좋은 키워드 배워갑니다 ㅎㅎ 그리고 ES2017을 사용하셨네요!

코드상에는 App.js라고 되어있는데 파일 명은 App.ts인 것 같아요 ㅎㅎ

---

여기서 IComponent.ts 하고 interface Component라고 되어있는 부분이 조금 이해가 안되는데, 이미지 상에서 interface IComponent인데 오타가 난 걸까요?

---

 #path: string;
 #component: typeof IComponent;

여기서 attribute이름에 #을 붙이는 거는 어떤 컨벤션인가요? 신기하네요!

---

const form = document.getElementById('form') as HTMLInputElement;
const input = document.getElementById('input') as HTMLInputElement;

위 부분에서 as HTMLInputElement로 하신 것과 아래 코드의 차이가 있을까요? as를 사용하는 것에 대해서 안좋은 시선이 있어서 여쭤봅니다!

const form: HTMLInputElement = document.getElementById('form');
const input: HTMLInputElement = document.getElementById('input');

[mike2ox]

고생하셨습니다. 채팅 프로그램만 만드시는 줄 알았는데 SPA routing도 하셨더라구요 ㅎㅎ 클래스 형태의 프론트코드는 많이 보질않아서 많이 배웠습니다. 추가적으로 궁금한 건 아래 남기겠습니다!

• 저는 yarn설정시 .yarn가 생성되지 않는데 프로젝트 초기 세팅은 어떤방식으로 하시나요?
• 현장은 클래스 타입을 선호하는가? 함수형 프로그래밍 방식이 더 쉽게 컴포넌트 작성이 되지 않는가?
• 루트경로에서 yarn start 한번으로 client, server에 기술한 패키지들이 루트경로의 node_module에 다 설치되던데 이렇게 하려면 어떤 패키지들이 필요할까요? (아니면 monorepo를 찾아보면 나오려나...)
• domManager.ts처럼 하는게 바닐라 js or ts 기준 렌더링 초기 세팅일까요?

[nyeoni]

@rkskekzzz
친절하고 꼼꼼한 리뷰 너무 감사드립니다! :)

1. App.js 같은 경우 처음에는 esbuild 없이 esmodule 시스템을 사용하려고 했을 때 사용했었던 건데 미처 확인하지 못했네요!! 확인감사합니당!!
2. IComponent 랑 Component 클래스 이름을 수정하고 푸쉬를 안했네요..혼란을 드려 죄송합니다ㅜㅜ
3. # prefix 는 es2019부터 private field 를 위한 키워드입니다!!ㅎㅎ
4. as HTMLInputElement 를 사용한 이유는 만약 사용안했을 때 default 로 HTMLElement | null 로 설정이 되어서 강제로 타입 설정을 해준 거였는데 혹시 더 좋은 방법이 있을까요?? 알려주시면 감사하겠습니다!!ㅎㅎ