TIL 2월 15일

김수찬 🤟

Facts

• somthing..

Feeling

• somthing..

Finding

• somthing..

Future (Optional)

김현우 😀

Facts

• 종인님이랑 모각코 진행
• dnd 라이브러리 적용 좀 더 고민
• 수찬님이랑 webrtc 관련 얘기 나눔

Feeling

• 하고 있는거 그리고 할게 많은데 실력적으로 부족한게 많아서 원하는 만큼 못따라가는 거 같다.

Finding

• https://github.com/izzuddinraffar/webrtc---React-Mediasoup
• 수찬님이랑 webrtc 관련 찾아보면서 괜찮은 예제 찾음. 이런 예제를 너무 늦게 찾아버린 거 같긴하지만 내용적으로 수찬님 코드에 적용가능하지 않을까 생각이 듬. 코드 자체는 3년 전 코드이긴 하지만 mediasoup v3에 타입스크립트로 코드가 짜져 있어서 사용하기 편할거 같음. 개발환경 자체도 기존에 세팅해놓은거에 그대로 사용 가능해서 편하지 않을까 생각함.
• 절대경로를 설정하게 되면 추가적으로 storybook에도 설정을 해줘야 하는데 찾아보다가 해결을 못했음. 다은님이 해결해주셨는데 찾아봤던 코드에서 조금씩 다르게 적용하면 되는 거였다니... 관련해서 좀 더 찾아봐야 될 것 같음.

Future (Optional)

• 내일 구미 가서 백엔드 연결 최대한 많이 하기
• 모달 오전에 가기 전에 마무리 해서 가기

박규현 🤑

Facts

• 응답에 양식에 대한 고민

Feeling

• 생각보다 세세하게 신경 써야 할 부분이 많다

Finding

• 응답 참고

Future (Optional)

백종인 🐭

Facts

• aws memory swap
• cors 수정
• 기본 프로필 이미지 설정
• 정보 수정 플로우 변경
• ec2 내 mysql 세팅
• 유저 api 모두 테스트
  • 리팩토링
  • 에러 해결
  • postman에 정리
• 초대권 로직 생성
• dm 로직 생성

Feeling

• 개발이 아닌, 환경 세팅에 있어 시간 잡아먹히는게 대부분인게.. 아이러니 하다.
• 이번주는 확실히 빡세게 해야할 거 같다.

Finding

• aws ec2가 왜이렇게 죽나했는데 그냥 메모리 문제였다.
  • https://hjjooace.tistory.com/entry/AWS-EC2-%EB%A9%88%EC%B6%A4-%ED%98%84%EC%83%81-CPU-Network%EC%9D%B4%EC%8A%88
    • 참고로 명령어 앞에는 sudo 를 붙여 사용해야함.
  • msa 특성상 여러 프로젝트를 구동해야 하다보니 생긴 문제다.
  • hdd 를 ram 으로 사용하도록 swap 기법을 사용하여 2gb 추가 램을 설정했고, 이후에 정말 문제없이 잘 돌아갔다.

Future (Optional)

• 커뮤니티 서비스 eureka에 등록 및 aws 배포
• db를 어떻게 설정할지.. 고민
• api 프론트와 백 테스트
• 로그인 -> 커뮤니티 -> 채팅까지.. 다 되면 좋겠다.
• 쉘 스크립트 작성 및 sql 접근 설정..

허다은 🐣

Facts

• 스토리북 절대 경로 설정하기 → 에러 해결
• 서버 글자 색깔 변경하기

• 채팅 이미지 업로드 모달 구현

• 메인화면에서 친구 검색하기 모달 위로 버튼이 올라가는 문제 해결하기

Feeling

• opacity, transform과 같은 속성을 사용하면 z-index에도 영향을 주는지 처음 알았다. 이에 대해서 좀 더 공부해보고 왜 그렇게 되는지, 영향을 주는 다른 속성들은 어떤 것들이 있는지 자세히 알아봐야겠다.

Finding

• 스토리북 절대 경로 설정하기

프로젝트에 절대 경로를 설정하고 나니 스토리북에서 에러가 발생했다. 찾아보니 스토리북도 따로 절대 경로를 설정해야 한다고 한다. 참고 자료

먼저 tsconfig.json에서 해당 코드를 추가하여 path 설정을 하였다.

{
  "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/*"]
    },
}

그리고 tsconfig-paths-webpack-plugin 을 설치한다.

yarn add -D tsconfig-paths-webpack-plugin

마지막으로 .storybook/main.js 에서 TsconfigPathsPlugin 설정을 추가한다.

const TsconfigPathsPlugin  = require('tsconfig-paths-webpack-plugin')
module.exports = {
  webpackFinal: async (config) => {
    config.resolve.plugins.push(new TsconfigPathsPlugin({}));
    return config;
  },
};

• 요소에 opacity나 transform와 같은 속성을 적용하면 z-index가 최상단으로 끌어올려진다. 이전에 친구 요청 보내기 버튼이 친구 선택하기 모달 위로 뜨는 현상이 발생했었다.

발생한 이유는 친구 요청 보내기 인풋 창 안에 값을 입력하기 전까지 친구 요청 보내기 버튼이 disabled 처리가 되는데, 이때 opacity: 0.4 속성도 적용해준다.

하지만 요소에 opacity 속성을 주게 되면 z-index: auto을 자동으로 주게 되므로 요소가 최상단으로 끌어올려진다. 그래서 웬만하면 opacity를 주는 대신에 background-color를 rgba로 주어 투명도를 조절하라고 한다.

→ 참고 자료

• https://devbirdfeet.tistory.com/200
• https://abcdqbbq.tistory.com/84

Future

• 내일 팀원들과 만나서 백엔드 부분 합치기!