저번에 웹소켓을 이용하여 React로 채팅을 구현한 경험이 있다. [바로가기] 리액트 웹소켓(Stomp) 이번 토이프로젝트로 MBTI 유형을 선택해서 채팅을 할 수 있는 서비스를 구현했다. 서버는 Java, Spring을 사용했고 클라이언트는 React, Typescript를 사용했다. 처음에 버전이 안 맞아서 조금 헤매었었 1yoouoo.tistory.com 위의 글에선 사용자가 채팅을 이용할 때 네트워크 연결에 성공한 케이스만 다뤘었다. 하지만 언제나 그렇듯 항상 행복한 상황만 나오진 않는다. 실패 케이스도 처리를 해줘야 한다. 그래서 어떠한 방법이 있는지 구글링을 통해 알아냈고, 이를 블로깅 하려고 한다. 어렵지 않은 내용이니 글을 모두 읽으면 구현하는데 어렵지 않을 거라고 믿는다. 우선, 네트워크..
라이브러리에 대한 나의 생각 라이브러리를 사용해서 똑같은 기능을 아주 쉽게 가져다가 쓸 수 있다. 하지만 나는 라이브러리를 사용해서 기능을 붙이는 것에 대해 보수적으로 생각한다. 왜냐하면 사용한 라이브러리는 내가 직접 조작할 수 없고 만들어 놓는 대로. 그대로 사용해야 한다. 나중에 그 라이브러리가 더 이상 업데이트를 하지않거나 업데이트 과정에서 핵심적인 기능이 변경되면 나는 그 라이브러리에 또 맞춰 코드를 수정해야 한다. 즉, 의존성이 생겨버린다. 이러한 이유로 최대한 라이브러리는 안 쓰려고 노력하고, 바닐라로 직접 구현하는 것을 선호한다. 그래서 이번 캐러셀도 직접 구현을 할 생각이다. 설계 우선 평평한 캐러셀 말고 이번엔 좀 독특하게 입체적으로 구현해보고 싶단 생각이 들었다. 각 카드가 원형으로 둘..
프로젝트 시작 계기 거의 6개월 동안 프론트는 혼자서 공부하다 보니까 점점 내 실력에 대해서 체크를 해보고 싶었다. 협업은 회사 들어가기 전에 꼭 경험해 보고 싶었고 Git관련해서 브랜치전략, 충돌에 대한 경험 등을 겪고 싶었다. 그리고 이제는 사람들이랑 프로젝트를 시작해도 피해는 주지 않겠다 싶어서 인프런에서 스터디 공고를 쭉 봤다. 인프런이 확실히 개발자들이 스터디 구하기 좋은 플랫폼인 거 같다. 물론 강의도 훌륭하지만. 쭉 보던 중 바로 시작하고 싶어서 인원이 어느 정도 차있고 금방이라도 시작할 거 같은 스터디에 카톡을 보냈다. 연락은 거의 바로 왔고 내 github 주소를 보내주고 그쪽 팀원분들도 오케이 하셔가지고 참여하게 됐다. 프로젝트 시작 인원은 백앤드 2명, 프론트 4명이었다. 원래 2명 ..
이번 토이프로젝트로 MBTI 유형을 선택해서 채팅을 할 수 있는 서비스를 구현했다. 서버는 Java, Spring을 사용했고 클라이언트는 React, Typescript를 사용했다. 처음에 버전이 안 맞아서 조금 헤매었었다. "dependencies": { "@stomp/stompjs": "^7.0.0", "react": "^18.2.0", "sockjs-client": "^1.6.1", "typescript": "^4.9.5", }, 보통 라이브러리를 사용하지 않고, 할 수 있다면 구현하는 방식을 해왔는데 웹소켓 라이브러리를 사용하지 않고 단체방, 채팅을 기다리는 방.. 등등 다양한 기능을 구현하는데 어려움이 너무 많을 것 같아서 Stomp 라이브러리를 사용했다. 전체적인 플로우는 다음과 같다. MBT..
