2023-02-28 화요일

📅 오늘 한 일

1. 유저 피드백 받기 계획 수립
2. .evn 환경변수 설정
3. 모코챗 추가 기능 개발 착수

✏️ 무엇을 배웠나

1. CRA에서 .evn 파일에 환경변수 세팅해서 api key 감춰놓을 때 유의사항
   아무리 봐도 환경변수 세팅에 문제가 없는데 api key를 못 불러와서 이거 하나로 삽질을 열심히 했다. 삽자루를 내던지려던 찰나에 환경변수에 세미콜론이 붙어 있는 걸 확인했다. 삽질한 건 절대 안 까먹으니까 나름 좋은 학습이었다고 나 자신을 속여본다.

   환경변수 설정할 때 체크하면 좋은 리스트

   1. 변수 명 앞에 REACT_APP이 있는가?
   2. 설정하고 서버 재부팅했는가?
   3. .evn 파일은 최상단 폴더에 있는가 (src에 있음 안 돼요)
   4. 맨 뒤에 세미콜론이나 쉼표가 있지는 않은가?

2. 채팅창 UI 구현하기
   상대의 메시지는 왼쪽에 나의 메시지는 오른쪽에 위치하게끔 만들어 주고 싶었다. 메시지창 div를 map 돌렸을 때는 이렇게 나온다.

상대의 메시지인지 나의 메시지인지 구분해주는 값이 존재하기 때문에 이 값을 가지고 조건부 스타일링을 하면 되었고 찾아본 결과, clear랑 float을 쓰면 해결할 수 있었다.

clear: both;
float: ${(message) => (message.isSent ? 'right' : 'left')};

float은 해당 요소를 컨테이너 기준으로 왼쪽 or 오른쪽에 배치할지 결정할 수 있고, 이걸 이용해서 메시지창의 위치를 잡아줬다.

clear는 해당 요소를 floating 요소 아래에 배치할지 말지를 결정한다.

이렇게 해서 floating 요소가 왼쪽과 오른쪽에 있게 되고, clear가 both니까 메시지창은 위에 같이 나오게 됨.