• 에러 수정중 카메라는 꺼지는데, id가 전송이 안되는 문제가 생김
• 카메라를 껏다켰다를 반복하다 끈 상태에서 제공자가 종료버튼을 누르면 consumer 단에서 종료가 정상적으로 되지 않음

• 에러가 계속 난다... 눈물이 흐름

• webrtc에서 media를 종료 하는 방식이 remove 와 stop이 있다. 이 두가지 방식에 대한 차이를 조금 알아둬야 할 필요가 있을 것 같다 removeTrack - 특정 source의 정보 제공을 중지를 하면서 producer device의 정보 전송이 멈추게됨 -- TIL에 올렸던 producer 정보가 전송이 안되어 consume이 stop이 정상적으로 안되는 문제가 발생함

stop - mediasource 제공 자체를 중지-> 이렇게 되면 ready state 가 ended로 변경하면서 local에서 상태가 변경이 안됨.

• 저번주에 종료를 했다가 다시 켜지지 않던 에러가 발생하는 계기

• 개인 설정 페이지 내용(내계정+프로필) 구성 완료, 세부 모달은 구성 진행 중임.
• 서버 리스트 dnd 라이브러리 적용 진행 중
• 개인 설정 페이지 사이드바 구성 완료 ![Uploading

• 일정 중에 틈틈히 해서 많이 진행 못할거라고 생각했는데 생각보다 많이 할 수 있었던 것 같음.
• 구성 하면 할 수록 하나씩 고쳐줘야 할 것들이 생기는 것 같음(리펙토링 해야 되나...?)
• 아토믹 디자인 패턴 적용을 하는 걸 고려하면 버튼 같은 요소는 모든걸 테마로 넘겨서 버튼 하나로 다 돌려쓸 수 있어야 되는게 맞는건가?

• 설정 페이지 만들면서 생각난거 → 버튼을 재사용 하는 일이 많아서 쓰는데 버튼 자체에 폰트, 색깔, 구성을 다 할 수 있도록 바꿔둬야 되나 고민;; → 일단은 설정용 버튼을 하나 만들어서 던져둠.
• vocie-nobody background color 적용 안되서 01 빼둠
• modal 창 추가 구성 각각 다 해줘야 할듯
• 일단은 만든다고 이름 막 붙였는데 하나하나 세세하게 이름 바꾸고 정리해둬야 할 필요 있음
• Button Wrapper 따로 설정 해줘야 될거 같음 → size 조절 가능 하게 해서 만들면 되지 않을까?

• 설정페이지 그리드 적용해서 template 만들어서넣기
• 서버 생성 페이지 모달로 바꾸는 작업 마저 하기

• MVC 패턴에 대해서 공부 https://pstudio411.tistory.com/entry/NodeExpress-MVC-%EB%94%94%EC%9E%90%EC%9D%B8-%ED%8C%A8%ED%84%B4-A https://pstudio411.tistory.com/entry/NodeExpress-MVC-%EB%94%94%EC%9E%90%EC%9D%B8-%ED%8C%A8%ED%84%B4-B

• somthing..

• A와 B 중에서 무엇을 선택할 것인지 고민중....

• 채팅방 개념에 대해서 복습!

• 답이 없어보였는데.. 조금씩 그래도 앞으로 전진하는 거 같다.
• 오늘 많이 못했다.. 내일은 조금 더 시간 할애하기!!

• https://devcamp.notion.site/Web-Socket-In-Java-e5d74aac0ac84971a9d0ba4b39fc5b53

• 다은님과 FE + BE 합쳐보기

• 로그인/회원가입 페이지 리팩토링
  • 이메일 코드 인증 모달 만들기
• 메인페이지 UI 구현하기
  • 라우팅 구현
  • 메인 페이지 전체 UI 조립 중

🍒 로그인/회원가입 페이지

🍒 메인 페이지

• UI 구현이 뭔가 끝이 보이는 것 같으면서도 멀어보인다. 디스코드는 겹치는 디자인 요소가 많아서 이제 금방 만들 수 있을 것 같기도 한데, 세부적으로 기능이 많아서 또 많이 남은 것 같기도 하고.. 어쨌든 주말에 시간 갈아 넣어서 완성하는게 목표다.

조건에 따라 컴포넌트 렌더링하기

1. switch-case문

function MyComponent({ value }) {
	function getComponent() {
		switch(value) {
			case "a":
				return <ComponentA />;
			case 'b':
				return <ComponentB />;
		}
	}
	return (
		<div>{getComponent()}</div>;
	)
}

2. lookup table

const lookup = {
	a: ComponentA,
	b: ComponentB
}
function MyComponent({ value }) {
	const Component = lookup[value];
	return (
		<div><Component /></div>;
	)
}

props도 넘겨줄 수 있다.

const lookup = {
	a: ComponentA,
	b: ComponentB
}
function MyComponent({ value }) {
	const Component = lookup[value];
	return (
		<div>
			<Component 
				propA="more"
				propB="stuff"
			/>
		</div>;
	)
}

3. 조건문(if) 사용하기

function MyComponent({ value }) {
	let Component = ComponentA;
	if(value === 'b') {
		Component = ComponentB;
	}
	return (
		<div>
			<Component 
				propA="more"
				propB="stuff"
			/>
		</div>;
	)
}

• UI 구현 완성하기 으악