2023-03-02 목요일

📅 오늘 한 일

1. 유저 피드백 글 개발자 커뮤니티에 게시

벌써 피드백이 몇 개 도착했는데, 피드백은 날카롭지만 응원 메시지에 진심이 담겨 있어서 힘이 됐다. 내가 만든 서비스에 대한 반응을 직접 살필 수 있다는 게 이렇게 흥분이 될 일일 줄이야.

2. openAi API 가지고 챗봇 구현하기

1. 유저가 작성한 메시지와 모코의 답변 메시지는 하나의 배열 안에서 관리한다
   1. 배열을 하나 만들어놓고
   2. 내가 쓴 건 isSent : true로 배열에 추가
   3. 모코가 답한 건 isSent false로 배열에 추가
   4. 메시지 배열은 JSON.stringify 메서드로 문자열로 변환해 로컬스토리지에 저장
   5. 로컬스토리지에서 가져올 때는 JSON.parse 메서드로 다시 JS 객체로 변환하기
2. 어떤 메시지가 유저의 것이며 모코의 것인지는 isSent 불린값으로 구분한다
3. 모코챗 데이터는 로컬스토리지에서 관리한다
   1. uid로 데이터 문서를 생성해서
   2. uid로 데이터 문서를 가져온다
   3. 서버가 아닌 로컬스토리지를 이용하는 이유
      1. 파이어베이스 무료 버전이라 read가 제한되어 있다.
      2. 채팅이기 때문에 읽고 쓰기가 많을 수 있다
      3. 파이어스토어를 사용한 경우, 이전 목록까지 불러올 때 서버 비용 낭비를 하게 된다
      4. 로컬스토리지가 최대 5mb이고 어차피 문자열만 저장이 되기 때문에, 채팅으로 사용하기에는 차고 넘치는 용량이라고 판단됨. 그러면 굳이 서버에 데이터를 저장하지 않아도 괜찮다고 판단.

이렇게 로직을 짜놓고 작업을 시작했는데 문제가 생겼다.
메시지 UI가 렌더링이 안 됐다.
리액트 렌더링 조건에 안 걸려서 그랬던 것.
로컬 스토리지에 있는 데이터를 state로 한 번 더 관리해줬다.
데이터가 추가될 때마다 렌더링이 되면서 문제 해결.

✏️ 무엇을 배웠나

1. white-space 속성

white-space는 css 프로퍼티 중 하나인데, 이걸 사용하면 공백 문자를 적절하게 처리할 수 있다. api에서 길이가 긴 문자열을 가져올 때 이 데이터를 그대로 렌더링하게 되면 가독성이 많이 떨어진다.

문자열 데이터를 렌더링할 때 white-space : pre-wrap을 사용하면 문자열 데이터가 가지고 있는 줄바꿈과 공백을 그대로 UI에서 렌더링할 수 있다.

2. JSON.stringify / JSON.parse

로컬 스토리지를 사용할 때 유의할 점은 데이터가 '문자열'로만 저장된다. 그래서 자바스크립트 객체를 저장하려면 JSON.stringifyd 메서드를 사용해 자바스크립트 객체를 문자열로 변환시켜야 로컬 스토리지에 저장할 수 있다. 반대로 꺼내서 쓸 때는 문자열을 다시 객체로 변환시켜야 해서 JSON.parse를 사용해야 한다.