깃허브
채팅창 페이지 🤹♂️
목표
- Redux를 활용하여 로그인 여부와 메시지 데이터를 전역상태로 관리한다.
- 채팅창에 필요한 여러 UX 기능들을 구현한다.
소감
🍷 Redux
- 이번 과제에서 Redux를 사용했다. 수업을 통해 개념을 한번 더 복습하고 나니 쓰기가 더 수월해지는 것 같았다.
- redux-persist를 통해 브라우저 창을 종료하고 나서도 유저의 상태가 계속 남아있게 했다.
🎼 SCSS
이번 프로젝트에서 SCSS를 처음 써 보았다.
써보고 난 후 결론은 '작은 프로젝트 아니면 되도록 쓰지 말자' 였다.
-
우선은 props 넣는 과정이 너무 고되었다. 내가 맡은 파트 중에 입력창에 메시지가 있을 때만 전송 버튼이 활성화되게 하는 작업이 있었는데, styled-components에서는 바로 useState props를 넘기면 되는 이 작업이 SCSS에서는 props로 쓰일 class명을 추가하기 위해 컴포넌트를 하나 새로 만들어야 했다.
-
하나의 css 파일 안에 중첩해서 넣는 과정에서 중괄호 범위를 하나 삐끗하면 css가 적용이 안 되어서 jsx 코드와 비교하며 찾아야 했다.
-
마지막으로 파일을 무조건 .scss 파일로 분리해야 해서 vscode에서 화면 양쪽에 파일을 놓고 작업하는 것이 번거로웠다😭
개인적인 생각으로는 작은 프로젝트에서는 확실히 styled-components보다는 SCSS가 가벼울 것 같다. css와 문법이 정말 비슷하고, 색깔 같은 것을 가볍게 변수로 빼거나 styled-components의 컴포넌트 지정과 같은 무거운 느낌이 없기 때문이다. 또한 개발자도구 Element에서 코드에서 지정한 class명이 그대로 나오는 것도 편리했다.
그러나 어느 정도 규모 있는 플젝을 할 때는 공통 컴포넌트 모듈화와 props 전달이 편한 styled-components가 더 나을 것 같다. SCSS도 어느 정도의 모듈화가 가능하지만 styled-components보다는 확실히 컴포넌트 단위의 props 전달이 힘들었다.
🍵 작성한 util 함수
메시지 작성시간 (= 현재시간) 포맷 함수
export const formatDate = (date: Date) => {
return date.toISOString().substring(0, 19).replace('T', ' ');
};검색을 통해 현재 시간을 yyyy-mm-dd hh:MM:ss로 출력하는 한줄짜리 util 함수를 작성했다.
처음에 받아온 date에 .toISOString()을 붙이면 연월일과 시분초 자리 사이에 대문자 'T'가 들어가고 문자열 맨 뒤에 3글자 정도 랜덤한 영문자가 찍혀 나온다.
이러한 형태를 정리해주기 위해 맨 앞 연도부터 시분'초'까지 19자리를 자르고 가운데 대문자 'T'는 공백(' ')으로 대체했더니 원하는 형태의 문자열로 출력되었다.
문제 해결
👿 문제
입력창(textarea)에 한글 작성 시 한글이 2번씩 입력되는 현상이 있었다.
🧚♂️ 해결
stackoverflow 검색을 통해, textarea에 엔터키 함수가 들어있던 'onKeyDown' props를 'onKeyPress'로 변경하여 해결했다. 내 컴퓨터에서는 발생하지 않았지만 다른 팀원들의 컴퓨터에서는 계속해서 발생하던 에러였는데 해결해서 기뻤다.
