[React/TS] Slack 클론 코딩 - 섹션3 DM 보내기

실시간 채팅..! 고대하던 기능이다. 그것을 위한 프론트 구조 짜는 섹션3이다.

DM 목록 만들기

배포시에 localhost//3095 등 실제주소값이 적혀앴으면 오류가 난다! proxy 를 사용하면 배포할때 주소를 바꾸지 않아도됨

 

변수명 길게 써서 주석역할을 하도록 함. 변수(명사역할) 함수(동사역할)... 나는 주석을 많이 달아서 기능설명하는 편이라 고민해봐야할듯

 

chanelList, DMList 코드

실제 웹소켓 사용해서 실시간 채팅 구현

Collapse 버튼 : 접었다 폈다 해주는 기능(notion >) true면 펴지고, false 면 접힘

애니메이션 반응형

const [channelCollapse, setChannelCollapse] = useState(false);

참고 -> https://anerim.tistory.com/157

[리액트 React] 실무에서 유용하게 사용되는 reactstrap Collapse

 

NavLink : 일반 Link to 와 똑같은 기능 + activeClassName

    현재 URL과 to가 가리키는 링크가 일치할 때, activeStyle과 activeClassName이 활성화 되고 일치하지 않으면 비활성화가 된다.

'selected' 기능으로 하이라이트 할 수 있음

 

채널 목록 만들기

props 받지 않고 SWR로 Hooks 를 부모에서 자식으로 데이터를 받아온다. 그러나! 공통사용 데이터는 여전히 props로 넘겨야 한다. 리덕스 useSelecter의 hooks를 SWR이 대체를 한다.

 

DM 페이지 만들기

로딩중이나 오류일때는 화면 띄우지 않기

if (!userData || !myData){
	return null;
}

컴포넌트 구현하기 전에 구성배치를 먼저! 필요한 코드 이름을 먼저 작성해놓음

챗박스 내부 에디터(부가기능) 만들기 너무 어렵다고 한다..(타라이브러리 많이 사용) 전송버튼만 강의에서 구현한다.

 

챗박스 만들기

채팅을 보냈을때 API요청, 재사용(채널채팅, 디엠채팅) -> 이런경우 props로 데이터를 부모에 올려준다.

공통되는 데이터(내정보)는 SWR로 자식컴포넌트에서 코드작성해줘도 됨.

textarea 에서 내가 어떤 키를 눌렀는지 알수있음. 키다운keydown event

(e) => {
	console.log(e);
    if(e.key == 'Enter'){
    }
};

//console
...
key:"Enter"
...

textarea 길이 길어지면 늘어나는 라이브러리 '오토그로우', '오토하이트'

npm i autosize

ref : 실제 태그들을 지정해줄때 사용

  const textareaRef = useRef<HTMLTextAreaElement>(null);
  useEffect(() => {
    if (textareaRef.current) {
      autosize(textareaRef.current);
    }
  }, []);
...
<MentionsTextarea
          id="editor-chat"
          value={chat}
          onChange={onChangeChat}
          onKeyPress={onKeydownChat}
          placeholder={placeholder}
          inputRef={textareaRef}
          allowSuggestionsAboveCursor
        >
...

스크롤바 커스터마이징, 리액트멘션 기능 -> 라이브러리 구현

 

채팅보내기

채팅을 등록해서 서버에 보내고, SWR통해 서버에 저장된 채팅을 다시 받아보는 과정

axios
	.post(`/api/workspaces/${workspace}/channels/${channel}/chats`, {
		content: chat,
	})
	.then(() => {
		revalidate();
	})
	.catch(console.error);

SWR 사용해서 채팅을 받아오는 코드

const { data: chatData, mutate: mutateChat } = useSWR<IDM[]>(
    `/api/workspaces/${workspace}/dms/${id}/chats?perPage=20=page=1`,
    fetcher,
  );

props에 받은것들(외부에서 사용한 것들) deps에 넣어주기

ChatBox/index.tsx

  const onKeydownChat = useCallback(
    (e) => {
      if (!e.nativeEvent.isComposing && e.key === 'Enter') {
        if (!e.shiftKey) {
          e.preventDefault();
          onSubmitForm(e);
        }
      }
    },
    [onSubmitForm],
  );

오류 콘솔에 Status Code:500 Internal Server Error ->서버에서 에러가 발생한것! 백엔드에 전달해야함

 

이러한 오류(필요요소 없다는것) 발생했다는 거 알려주는 코드 -> 경고창(에러처리X)

.eslintrc -> react-app 단어 추가

{
  "extends": ["plugin:prettier/recommended", "react-app"]
}

npm 설치

//console
npm i -D eslint-config-react-app eslint-plugin-flowtype eslint-plugin-import eslint-plugin-jsx-a11y

    "eslint-config-react-app": "^6.0.0",
    "eslint-plugin-flowtype": "^5.3.1",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.4.1",

 

느낀점?

재능있는 개천재 개발자들은 라이브러리를 만들고, 흥미와 노력하는 개발자들은 그 라이브러리로 개쩌는 활용을 한다고 한다. 이미 있는 많은 라이브러리를 잘 활용해야겠다.

강의에서 배포할때 주소 주의할점, 데이터 흐름, 오류파악기능(eslint)을 설명해줘서 유용했다.

프로그램을 짤때 구성요소를 미리 설계하는 것이 얼마나 중요한지 알았다. 강의로만 봐도 복잡한데 내 플젝 구성이 엉망진창이면 안되기 때문에... 미리 파악하고, 설계하며 개발해야겠다. 단순히 코드만 치는게 다가 아니라구~