TIL 2월 14일
- 급합니다. 급합니다... 급합니다.....
- 데모버젼... 갓인거 같습니다...
- 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 작성 최근에 좀 빠뜨리는데 적어두고 나서라도 최대한 채워넣기
- 코드 리팩토링 시간을 가짐(메서드 파라미터 수정), 유레카 설정하여 gateway에 포함할 수 있도록 세팅
- somthing..
- eureka server에 node serivce 등록
-
gateway 통하여 접근 테스트 성공
-
gateway 에서 필터 적용하여 jwt 인증 필요하도록 구성하기 성공!
-
토큰 없을때
- 토큰 있을때
- spring cloud side car를 사용해야하는 줄 알았는데... 구글링 하다가 파이썬이나 플라스크 프로젝트를 eureka server에 등록해서 사용하는 글을 봤다
- 찾아보니 node 도 eureka server에 등록할 수 있도록 설정해주는 라이브러리가 존재했고(eureka-js-client), 규현님한테 물어가며 설정을 완료했다
- 알고보니 굉장히 간단했다.. side car는 정보도 없고 비교적 복잡해서 골머리를 앓고 있었는데 다행이다.
- 근데 그도 그럴만한게, msa는 다양한 언어 프로젝트를 손쉽게 서비스에 등록하고 사용하는게 메리트인데.. 그 과정이 복잡한게 오히려 이상했다.
- jwt 인증 부분도 잘 되는거 같아 다행이다.
- node 서비스를 eureka 서버에 서비스로 등록하는 방법
- 위 과정을 위해 설치해야하는 라이브러리
-
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 등 설정을 쉽게 할 수 있다.
처음에 여기에서 보고 따라 세팅했는데 절대 경로가 적용이 되지 않았다. 알고보니 안된 이유는 타입스크립트를 사용하는 경우에는 다르게 세팅을 해줘야하기 때문이다.
그래서 이 사이트를 참고하여 절대 경로를 재설정하였다.
- craco 설치
yarn add @craco/craco
yarn add craco-alias -D- craco.config.js 세팅
const CracoAlias = require("craco-alias");
module.exports = {
plugins: [
{
plugin: CracoAlias,
options: {
source: "tsconfig",
tsConfigPath: "tsconfig.paths.json",
},
},
],
};- tsconfig.json 세팅
{
...,
"extends": "./tsconfig.paths.json"
}- 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/*"]
}
}
}결과
이제 길게 상대경로를 작성하지 않고, 절대 경로로 파일을 불러올 수 있다!
- typescript - Pick and Omit
- 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">
>`
...- 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 → 바꾸기
- 채팅 이미지 업로드 모달 구현하기