[프로젝트 회고] 유저 선택형 웹 메신저
📨 유저 선택형 웹 메신저
📝 과제 설명
-
Redux로 채팅 메세지 상태 (추가, 수정, 삭제) 를 관리하고
실시간으로 firebase로 만든 데이터베이스에 전송하여 업데이트 시켰다.
-
첫 페이지에 유저를 선택한 뒤에 채팅장으로 넘어가는 형식으로 제작했다.
⚙️ 기술 스택
- React, Redux
- Typescript, JavaScript, Styled-Component
- Git & GitHub, Build Tool (Create React App)
💻 기능 구현
- 메세지 데이터 연동 및 삭제 기능 구현
📤 메세지 데이터 연동 및 삭제 기능 구현
- 첫 Redux 사용이라 흐름을 이해하는데 많은 시간이 걸렸다.
// 삭제 기능을 위한 action
export const removeContent = (content: Content[]) => ({
type: REMOVE_CONTENT,
payload: content,
});
// 삭제 기능 action을 적용한 reducer
export default function content(
state: ContentState = initialState,
action: ContentAction
) {
switch (action.type) {
case REMOVE_CONTENT:
return { ...state, content: action.payload };
default:
return state;
}
}
- 위의 과정을 거쳐 state를 메시지를 관리하는 컴포넌트로 보내준 뒤에
삭제 이모지에 아래와 같은 기능을 추가했다.
const showRemoveText = (): void | string => {
if (message.text.length >= 10) {
return message.text.substr(0, 10) + '...';
}
};
const handleRemove = () => {
if (
window.confirm(showRemoveText() + '메시지를 삭제하시겠습니까??') === true
) {
const newContents = content.filter(
(data: Content) => data.uuid !== message.uuid
);
dispatch(removeContent(newContents));
removeContentData(newContents);
} else {
return false;
}
};
- 삭제 버튼 시 alert창 확인 / 취소 버튼을 활용한 확인 기능과 삭제하려는
메시지를 최대 10글자 까지 표현해주는 기능을 구현.
- 처음엔 view에서만 메세지를 삭제하는 부분만 생각했다가 DB에서도 삭제를 해야 한다는 부분을 뒤늦게 상기시키고 코드를 재작성했다.
🌅 최종 구현
Redux와 FireBase를 처음 사용하면서 잘 알고있는 팀원분들의 설명을 들어가며 작업을 진행했는데, 프로젝트를 하면서 매순간 새로운 것을 배우고 성장하고 있다는 것을 느껴서 좋으면서도 반복숙달의 중요성을 체감할 수 있었다.
이 과제가 끝난 후로 계속해서 새롭게 배운 것을 공부해서 내것으로 만들어야겠다고 새각했던 시간이다.🎁
Author And Source
이 문제에 관하여([프로젝트 회고] 유저 선택형 웹 메신저), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@changh950/프로젝트-회고-유저-선택형-웹-메신저
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Redux로 채팅 메세지 상태 (추가, 수정, 삭제) 를 관리하고
실시간으로 firebase로 만든 데이터베이스에 전송하여 업데이트 시켰다.
첫 페이지에 유저를 선택한 뒤에 채팅장으로 넘어가는 형식으로 제작했다.
- 메세지 데이터 연동 및 삭제 기능 구현
// 삭제 기능을 위한 action
export const removeContent = (content: Content[]) => ({
type: REMOVE_CONTENT,
payload: content,
});
// 삭제 기능 action을 적용한 reducer
export default function content(
state: ContentState = initialState,
action: ContentAction
) {
switch (action.type) {
case REMOVE_CONTENT:
return { ...state, content: action.payload };
default:
return state;
}
}
삭제 이모지에 아래와 같은 기능을 추가했다.
const showRemoveText = (): void | string => {
if (message.text.length >= 10) {
return message.text.substr(0, 10) + '...';
}
};
const handleRemove = () => {
if (
window.confirm(showRemoveText() + '메시지를 삭제하시겠습니까??') === true
) {
const newContents = content.filter(
(data: Content) => data.uuid !== message.uuid
);
dispatch(removeContent(newContents));
removeContentData(newContents);
} else {
return false;
}
};
메시지를 최대 10글자 까지 표현해주는 기능을 구현.
Redux와 FireBase를 처음 사용하면서 잘 알고있는 팀원분들의 설명을 들어가며 작업을 진행했는데, 프로젝트를 하면서 매순간 새로운 것을 배우고 성장하고 있다는 것을 느껴서 좋으면서도 반복숙달의 중요성을 체감할 수 있었다.
이 과제가 끝난 후로 계속해서 새롭게 배운 것을 공부해서 내것으로 만들어야겠다고 새각했던 시간이다.🎁
Author And Source
이 문제에 관하여([프로젝트 회고] 유저 선택형 웹 메신저), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@changh950/프로젝트-회고-유저-선택형-웹-메신저저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)