• 하던거 엎고 새로짜야함
• 모각코 때 회의 진행

• 일단 뭐 하던거 열심히 해야하지 않을까요?
• 미리 만나서 해보자는 의견을 강력하게 피력하지 못했던게 아쉽다
• 근데 지금이라도 본게 어디..

• static 형태로 제공을 해주는 방식은 팀의 프로젝트 진행 방향성과 맞지 않아 엎기로 결정이 났다.

• 작업 환경 맞춰 둔 것을 바탕으로 다른 컴퓨터에서 테스팅을 해 본 뒤 작업 환경만 있어도 괜찮은 것이면 공유을 할 예정

• 기존에 목표했던 양들 절반 정도 진행 완료
• 코어타임 때 얘기하면서 webrtc...

• 생각했던 것 보다 진척이 안나서 마음이 급해짐

• webrtc에 대해서 처음붙어 같이 했어야 됐는데 생각했던 것 보다 프론트 쪽에서 해줘야 되는 부분이 많았는 것 같음..

• 일단 프론트 ui 먼저 마무리 해놓고 넘어가기

• 완성된 뼈대에서 수정
• 클래스 구조로 api를 만들어서 mvc패턴에 조금 더 맞게 고치기

• models, controller 각각의 역할을 좀 더 세분화
• models 는 주로 sql 쿼리문을 보내는 역할을 담당
• controller는 쿼리문을 보내기 전에 로직을 담았음(서비스 계층을 따로 분리하는 것도 있지만, 일단은 컨트롤러와 모델로만 분리했음)

• 채팅서버 뼈대는 완성
• 현재 제작한 서버들, db aws에 모두 배포 완료~! image image Untitled

• rds때문에 개고생했는데.. 다은님이 만들어주신 rds 덕분에 편히 해결했다 ᅲᅲ
  • 내꺼는 왜 안되는지 아직도 의문, 언젠가 세팅 초기화 해보고 시도해봐야겠다.
• 어찌되었던 이제 어디서든 서비스에 접근할 수 있다! 묵은 체중이 내려가는 느낌이다 ☺☺
• 채팅 서버의 동작 과정 자체는 웹소켓 통신 기반으로 꽤나 간단한데.. 이거를 이제 어떤식으로 구성할지가 고민이다.

• ec2 내에서 redis 설치하는법
  • https://wookgu.tistory.com/26
• yml 파일에 ''' ''' 스타일의 주석을 하니 윈도우에서는 먹혔는데.. ec2내에서는 빌드중 오류가 났다. 참고하고 주석은 # 키워드 사용하자.

• ERD 정리좀하자!
• 채팅서버 아키텍처를 조금 더 상세하게 그려보고 설계해보자.
  • 채팅 내역 저장을 위한 DB 부분과, rabbit mq 의 exchange 부분을 생각할 필요가 있어보인다.
  • connect 및 discoonet 이벤트 리스너를 이용해서 어떤 부분을 활용할 수 있는지 고민해보자.

• 22:00~00:00 코어 스터디
• 메인 페이지 구현 (메인 페이지에 요소들은 어느 정도 다 구현이 된 듯 하다..)
  • 디엠에서 통화 기록 보여주기 메시지 생성 Untitled
  • styled.d.ts 생성하기
  • 스크롤 설정 (메인 친구 목록, 탭바 친구 목록, 메시지 부분)
  • 메시지 위 호버 버튼 위치 문제 해결
    • before image
    • after image

• UI 구현을 하니 정신이 혼미해진다. 빨리 모두 구현하고 백엔드와 연결도 하고 싶다.

styled.d.ts에 스타일들을 선언해주면 typescript가 타입 추론을 할 수 있도록 도울 수 있다.

원래 theme.ts 파일에 모든 값들에 대한 타입을 작성해주었는데, styled.d.ts를 만들어서 그 코드들을 제거해주었다!

원래 아래와 같이 작성해주었다면,

export type FontSizeType =
 | "xxs"
 | "xs"
 | "sm"
 | "base"
interface FontSize {
	xxs: string;
	xs: string;
	sm: string;
	base: string;
}
...
interface ThemeType {
 fontSize: FontSize;
}
const theme: ThemeType = {
 fontSize: {
 xxs: "0.625rem",
 xs: "0.75rem",
 sm: ".875rem",
 base: "1rem",
 },
...

styled.d.ts를 생성하면 FontSize가 모두 필요없어진다. (깔끔)

🕹️styles/styled.d.ts

import "styled-components";
declare module "styled-components" {
 export interface DefaultTheme {
 fontSize: FontSizeType;
 backgroundColor: BackgroundColorType;
 color: ColorType;
 borderColor: BorderColorType;
 statusColor: StatusColorType;
 }
}

styled-components 모듈의 DefaultTheme라는 이름으로 인터페이스를 생성하여 타입을 명시한다.

🕹️styles/theme.ts

import { DefaultTheme } from "styled-components";
const theme: DefaultTheme = {
 fontSize: {
 xxs: "0.625rem",
 xs: "0.75rem",
 sm: ".875rem",
 base: "1rem",
...

그리고 DefaultTheme를 import하고, 테마 안에 선언된 타입에 맞게 스타일을 작성한다.

• 서버 페이지에 필요한 기능들 구현하기