[ 프로젝트 ]/빨간 망토4 HTTP 단방향 통신으로 실시간 채팅 기능 구현하기 프로젝트 마감일이 일주일 좀 넘게 남았을 때, 채팅 페이지를 만들기 시작했다. 주제가 지역 기반 심부름 커뮤니티인 만큼 심부름 의뢰인과 심부름 수행인 사이에 공개적이지 않은 의사소통 공간이 필요했는데, 처음엔 비밀댓글 형식으로 만들려다가 댓글은 새로고침하지 않는 이상 자동으로 업데이트되지 않으니 잦은 상호작용이 필요한 경우 실시간 채팅방 형식이 더 알맞은 것 같다는 데 의견이 모였다. 문제는 실시간 채팅 기능을 어떻게 구현하느냐였다. 검색을 하고 자료를 찾아본 결과 보통 실시간 기능은 웹소켓 프로토콜을 이용하여 개발하는 것 같았다. 하지만 시간이 일주일 정도밖에 남지 않은 상황에서 새로운 기술을 공부하고 적용한다는 것이 서버 쪽도 클라이언트 쪽도 부담이 되었다. 특히 웹소켓으로 주고받은 채팅 내용을 데이.. 2023. 6. 28. 웹에디터 이미지 업로드 훅 커스텀하기 (TOAST UI, 클라우디너리) 게시글 작성 페이지를 맡아 작업하던 중 이미지 업로드와 관련한 문제가 생겼다. 유저의 자유로운 사용성을 위해 웹에디터를 적용하기로 했는데, 이미지 파일을 직접 올리는 경우 base64 형식으로 인코딩 되어 이대로 DB에 저장했다가는 문제가 생길 수도 있었기 때문이다. 꼭 문제가 생기는 게 아니더라도 사진 하나 올리는데 이만한 길이의 문자열이 필요하다면 너무 비효율적이므로 해결 방법을 찾아야 했다. 참고로 사용한 에디터는 TOAST UI이다. 이 에디터를 사용한 이유는 1.이미지 파일을 업로드할 수 있고, 2.기본 UI가 직관적이며 깔끔하기 때문이다. 심부름을 의뢰하거나 의뢰받을 수 있는 커뮤니티이므로 우리는 이 사이트가 모바일에서 주로 사용될 것이며, 직접 찍은 사진을 올리는 경우가 많을 것이라고 생각했.. 2023. 6. 18. 모달/탭 UI 구현하기 (컴포넌트 구조) 마이페이지 ↓ ↓ 모달 탭 ◆ 모달 (Modal) // 먼저, 부모 컴포넌트인 에 modal상태를 추가한다. const [modal, setModal] = useState(false); // 모달 창을 끌 때 필요한 (모달 컴포넌트에 내려 줄) 함수를 만든다. const onCancel = () => { setModal(false); }; // 수정하기 버튼을 누르면 modal상태를 true로 바꿔준다. // 모달 컴포넌트는 modal상태가 true인 경우에만 나타날 수 있게 한다. return( {modal && ( )} setModal(true)}> 수정하기 ) // 자식 컴포넌트인 에서 앞서 내려준 함수를 받은 후, // X 버튼을 눌렀을 때 실행되도록(모달 창이 꺼지도록) 연결한.. 2023. 6. 14. 메인 프로젝트 - 지역 동네 기반 심부름 커뮤니티 🔴빨간 망토🔴 ⭐ 배포 주소 : http://codestates-redhood.s3-website.ap-northeast-2.amazonaws.com Red Hood codestates-redhood.s3-website.ap-northeast-2.amazonaws.com 📝 깃허브 리포지토리 : https://github.com/codestates-seb/seb43_main_031 GitHub - codestates-seb/seb43_main_031 Contribute to codestates-seb/seb43_main_031 development by creating an account on GitHub. github.com 약 한 달간의 메인 프로젝트가 마무리되었다. 생각지 못했던 어려움을 많이 겪었고, 그만큼 많.. 2023. 6. 6. 이전 1 다음
