본문 바로가기

☁️ 구름 X kakao DeepDive/WEB IDE 프로젝트3

실시간 채팅구현(2) - 1mm도 어긋나는걸 싫어하는 사람의 채팅창 UI 제작하기 계획크게 UI 화면 잡아서 만들고 -> 쪼개서 재 사용 가능하게 만들기 우선 채팅창을 어떻게 구현할것이냐? 에 대해 생각을 해보았다.우선 보이는 화면부터 만들어야할 것이라 생각했다. 그래서 계획을 굉장히 세분화해서 이슈를 작성했다. 우선 필요한것이 채팅창 컴포넌트 (채팅 로그창과 입력창)날짜를 표시할 수있는 날짜 분리 라인과 날짜 텍스트나, 상대, 그리고 챗봇의 말풍선이었다.이걸 바탕으로 이슈를 나눠서 작성하기 시작했다. 이슈를 작성할때는 나 스스로 스프린트 기간동안의 구간을 잡고 분리해서 작성하였다. STOMP, SockJs 의존성 추가: 채팅 위한 도구전체 채팅 페이지 구조 잡기 : 메세지 영역 / 입력 영역 구분, 반응형그라데이션 말풍선 구현하기 : 배경 투명 / 그라데이션메세지 영역 : 날짜 /.. 2025. 4. 19.
실시간 채팅구현(1) - 서버에 따른 통신 도구 설정 이번 WEB IDE 프로젝트에서 실시간 채팅 구현! 을 맡게되었다.예전부터 구현해보고싶었던 기능인데 좋은 기회🎶 즐겁다. 우선, 어떻게 구현 해야할지 감이 안와서 검색을 해보았다. 보통 사람들이 사용하는것을 보면 socket.io, stomp, websoket 등등.. 이 있던데대체 뭐가 다른건지, 프론트는 뭘 해야하는건지.. 뭘 사용해야 적합한지 알아보다 마침내 결론내렸다. 백엔드를 무엇으로 구현하였냐!에 따라 달라지는것같다.우선, 채팅은 소켓을 기반으로 실시간 통신을 한다.이걸 어떤 방식으로 구현을 할지는 서버가 Node.js냐,Spring이냐에 따라 적합한 도구가 달라진다. 실시간 통신은 WebSoket이 담당하고, STOMP, Socket.io, Sockjs가 도와주는 방식이다. 여기서 Soke.. 2025. 4. 12.
Vite + React + TypeScript, ESLint + Prettier 프로젝트 세팅 이번에는 내가 프론트 프로젝트 베이스 세팅을 하게 되었다.이번 프로젝트는 Vite, React, TypeScript, ESLint, Prettier를 사용할 예정이다.create-react-app이 공식적으로 지원이 끝난것도 있고, 조금 더 빠른 개발을 위해 Vite를 채택했다.그리고 코드의 일관성 관리를 위해 ESLint, Prettier도 도입했다.리액트 테스트도 사용할까 해보았는데, 실질적으로 개발 기간이 2주이고,빨리 개발해야하는 프로젝트 + 아직 MVP 단계인 상태에서 수정 가능성이 많을 경우에는테스트를 도입했을 경우 개발 속도가 느려질 수 도있고, 굉장히 번거로워 질 것이라 하여 테스트는 빼기로 하였다.이건 최종 프로젝트에서 사용하기로! 아무튼, 처음 세팅을 해본거라 배운 점도 많기도 해서.... 2025. 4. 11.

티스토리툴바