• 급합니다. 급합니다... 급합니다.....
• 데모버젼... 갓인거 같습니다...

• Server.js에서 client와 상호작용하는 js 는 Rooms.js로 방 생성, media 전송 상태, media 음량 조절, 상대방의 정보를 가져온다.
• '@sitespeed.io/throttle' 및 'protoo-server' 를 modules로 사용하기 때문에, 이를 빼내고, 당초 팀의 목표대로 이 부분만을 따로 구현해보려고 하였지만, 시간상 부족할 것 같아 이를 그대로 사용해야할 것 같다....
  • protoo-server는 webrtc 서버 제공을 위해 만들어진 서트파티 소켓 모듈이다
  • 시간상 ~ 이렇게 생각한 이유는, 이 모듈을 parenets로 사용하고 있기에 일일이 욕심부리다간 아예 구현을 못할것같아서...
• 이 외에 createBroadcaster... func들이 있어 만들었던 것들과 전체적인 틀은 모두 유사한다.
• protoo-server라는 module로 접근을 하기에 이에 관한 handler를 살펴 봤더니, producer 및 consumer 과의 연결에 대한 내용들로 이루어져있었으며, 이 역시 전체적인 틀 은 비슷했다.
• 세부적으로 들어가려면 protoo-server 및 protoo-client를 분석을 해야해서 어제 여기까지 하였다.

• 오늘 프론트분들이랑 디코 가능한지 물어보기

• ServerList 구성 완료
• dnd 라이브러리 기본적인 거 적용까지 해볼 수 있었음
• 모달 세부 내용 구성 진행
• 모달 조정

• 간단한 문제 였는데 serverlist도 그렇고 ui 마무리한다고 하면서 마저 못해서 시간이 오래 걸렸는거 같음. 프론트 쪽으로 실력부족이 확실히 느껴지는 것 같음.

• dnd cheatsheet 찾음. dnd 적용하는데 확실하게 도움이 되는 것 같음.
• https://velog.io/@bwj0509/%EB%93%9C%EB%9E%98%EA%B7%B8%EC%95%A4%EB%93%9C%EB%A1%ADDragDrop-%EA%B5%AC%ED%98%84
• https://velog.io/@bepyan/DND%EB%A1%9C-TODO-%EB%BD%80%EA%B0%9C%EA%B8%B0
• https://velog.io/@bepyan/DND-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%BD%80%EA%B0%9C%EA%B8%B0

• webrtc 관련 얘기 수찬님이랑 하기
• TIL 작성 최근에 좀 빠뜨리는데 적어두고 나서라도 최대한 채워넣기

• somthing..

• somthing..

• somthing..

• eureka server에 node serivce 등록

image

image

• gateway 통하여 접근 테스트 성공

• gateway 에서 필터 적용하여 jwt 인증 필요하도록 구성하기 성공!

• 토큰 없을때

image

• 토큰 있을때

image

• spring cloud side car를 사용해야하는 줄 알았는데... 구글링 하다가 파이썬이나 플라스크 프로젝트를 eureka server에 등록해서 사용하는 글을 봤다
  • https://www.inflearn.com/questions/451567/python-flask%EB%A5%BC-eureka-client%EB%A1%9C-%EB%93%B1%EB%A1%9D
• 찾아보니 node 도 eureka server에 등록할 수 있도록 설정해주는 라이브러리가 존재했고(eureka-js-client), 규현님한테 물어가며 설정을 완료했다
  • 알고보니 굉장히 간단했다.. side car는 정보도 없고 비교적 복잡해서 골머리를 앓고 있었는데 다행이다.
  • 근데 그도 그럴만한게, msa는 다양한 언어 프로젝트를 손쉽게 서비스에 등록하고 사용하는게 메리트인데.. 그 과정이 복잡한게 오히려 이상했다.
• jwt 인증 부분도 잘 되는거 같아 다행이다.

• node 서비스를 eureka 서버에 서비스로 등록하는 방법
  • https://medium.com/@zilayhuda/register-nodejs-service-with-netflix-eureka-and-use-zuul-for-routing-service-part-1-e50fc49d1219
  • https://www.npmjs.com/package/eureka-js-client
• 위 과정을 위해 설치해야하는 라이브러리
  • npm i eureka-js-client (처음에 이게 설치가 안되어있어 진행이 안되었다.)
  • npm install eureka-js-client --save
• eureka server에서 포트번호를 자동 추적하기 위해서는 package.json 에서 이름을 맞춰줘야 한다!

• 현우님과 스터디 하면서 프론트 백 또 맞춰봐야겠다.
• 가능하면 커뮤니티 서비스도 ec2에서 service 등록하고 배포해보아서 모든 과정 테스트 할 수 있도록 구성하면 좋을 거 같다.

• 22:00 ~ 00:30 온라인 코어 스터디
• 절대 경로 설정하고 상대 경로를 절대 경로로 코드 리팩토링하기
• typescript의 Pick and Omit을 사용하여 코드 리팩토링하기

• 벌써 다음주면 끝! 이번주 다음주는 죽었다 생각하고 갈아 넣어야겠다.

• 절대 경로 설정하기: craco(Create React App Configuration Override)

프로젝트를 cra로 생성했을 때, craco를 사용하면 eject를 하지 않고도 root 폴더에 craco.config.js 파일을 추가하여 eslint, babel 등 설정을 쉽게 할 수 있다.

처음에 여기에서 보고 따라 세팅했는데 절대 경로가 적용이 되지 않았다. 알고보니 안된 이유는 타입스크립트를 사용하는 경우에는 다르게 세팅을 해줘야하기 때문이다.

그래서 이 사이트를 참고하여 절대 경로를 재설정하였다.

1. craco 설치

yarn add @craco/craco
yarn add craco-alias -D

2. craco.config.js 세팅

const CracoAlias = require("craco-alias");
module.exports = {
 plugins: [
 {
 plugin: CracoAlias,
 options: {
 source: "tsconfig",
 tsConfigPath: "tsconfig.paths.json",
 },
 },
 ],
};

3. tsconfig.json 세팅

{ 
 ...,
 "extends": "./tsconfig.paths.json"
}

4. tsconfig.paths.json 세팅

{
 "compilerOptions": {
 "baseUrl": ".",
 "paths": {
 "@api/*": ["src/api/*"],
 "@components/*": ["src/components/*"],
 "@configs/*": ["src/configs/*"],
 "@fonts/*": ["src/fonts/*"],
 "@hooks/*": ["src/hooks/*"],
 "@pages/*": ["src/pages/*"],
 "@store/*": ["src/store/*"],
 "@styles/*": ["src/styles/*"],
 "@utils/*": ["src/utils/*"]
 }
 }
}

결과

이제 길게 상대경로를 작성하지 않고, 절대 경로로 파일을 불러올 수 있다!

image

• typescript - Pick and Omit

1. Pick

여러 개의 타입 중에서 일부 타입만 골라 사용하고 싶은 경우에 사용한다. 즉, 몇 개의 속성을 선택하여 타입을 정의할 수 있다.

(적용한 코드) - color, backgroundColor, fontWeight 타입만 가져온다.

interface SettingButtonProps {
 text: string;
 onClick: MouseEventHandler<HTMLButtonElement>;
 fontWeight?: "normal" | "bold";
 color?: ColorType;
 backgroundColor?: BackgroundColorType;
 disabled?: boolean;
 status: ServerSettingType;
}
...
export const SettingButtonContainer = styled.button<
 Pick<SettingButtonProps, "color" | "backgroundColor" | "fontWeight">
>`
...

2. Omit

특정 속성만 제거한 타입을 정의한다. 즉, Pick과 반대이다.

(적용한 코드) - text, onClick을 제외한 모든 타입들을 가져온다.

interface DefaultButtonProps {
 text: string;
 onClick: MouseEventHandler<HTMLButtonElement>;
 width?: number | null;
 height?: number | null;
 fontSize?: FontSizeType;
 fontWeight?: "normal" | "bold";
 color?: ColorType;
 backgroundColor?: BackgroundColorType;
 hoverBackgroundColor?: BackgroundColorType;
 disabled?: boolean;
 borderColor?: BorderColorType;
 mb?: number;
 ph?: number;
 pv?: number;
}
...
const DefaultButtonContainer = styled.button<
 Omit<DefaultButtonProps, "text" | "onClick">
>`
...

• API 합칠 준비하기
• 메인화면에 검색하기 모달 안되는거 고치기
• 채팅 구현 준비하기
• 스토리북 절대 경로 설정하기
• 서버 글자 색깔 black → 바꾸기
• 채팅 이미지 업로드 모달 구현하기