이번 WIL의 키워드 :
실전을 진행하며 기술적으로 막혔던 부분, 해결했다면 해결 과정
sokcjs/stomp 를 사용해 기본적인 채팅 기능이 동작됐다.
여러개의 로컬을 띄우고 각자 메세지를 입력하면 모든 로컬에서 읽고 쓰기까지 가능했다.
다만, 메세지만 보여주고 있어 채팅을 입력하게 되면 누가 작성했는지 알 수가 없었는데
간단한 방법으로 해결할 수 있었다.
우선 회원가입을 할 때 아이디, 비밀번호 + 닉네임을 입력하고
로그인을 하면 백엔드에서 응답이 성공 했다는 메세지와 닉네임을 반환해주기로 했다.
그렇게 반환된 닉네임을 브라우저 내 세선스토리지에 저장을 하고
채팅방을 입장하고 채팅을 작성하게 되면 세션스토리지에 저장된 닉네임을 불러오고
body에 닉네임과 메세지를 담아서 보낸다.
그렇게 보낸 메세지들의 닉네임을 보여줄 수 있게 됐다.
const nickname = sessionStorage.getItem('nickname')
// ...
client.current.publish({
destination: 'pub/chat/message',
// 메세지를 보내는 구독 경로
body: JSON.stringify({
// body에 담아 보낼 내용들
type: 'TALK',
roomId: id,
sender: nickname, // sender에 nickname을 담아 보냄
message: message,
}),
});
// ...
{chatMessages?.map((newMessage, index) => (
<div key={index}>
{`${newMessage.sender}: ${newMessage.message}`}
// 닉네임: 채팅메세지로 화면에 잘 출력된다.
</div>
))}
그리고 팀원 파트였던 로그인 회원가입에서 유효성 검사를 통과하지 못 했을 때
아이콘(svg)과 문구를 같이 보여주고 싶었는데 문구는 조건문을 통해 잘 보여지는데
아이콘은 뜻대로 되지 않아서 고민하고 있던 문제를 같이 해결해 봤다.
const emailCheck = () => {
const result = /^[a-zA-Z0-9+-\_.]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/.test(email);
if (result) {
setMeesage('');
} else {
setMessage('올바른 메일 형식이 아닙니다.');
}
}
// ...
<div>
<input
onChange={setEmail}
onBlur={emailCheck}
placeholder="메일을 입력하세요"
/>
<p>
<Redicon />
{messageEmail}
// 메세지는 조건문에 맞춰서 잘 보여주고 있지만
// .svg 아이콘을 어떻게 보여줘야 할지 고민하고 있었다.
</p>
</div>처음에 어떻게 하면 좋을까 여러 생각들을 하고 같이 코드를 작성해보다가 모달 창을 사용할 때
useState를 이용해 true, false로 상태 값을 변경해 보여줬던 방법을 여기에도 적용하면 되지 않을까
라는 생각을 하게 됐고 아래와 같이 코드를 작성하고 나니 처음엔 안보였다가 통과를 못 했을 경우
아이콘과 문구가 잘 나타나게 됐다.
const [showEmail, setShowEmail] = useState(false)
// 기본 상태값이 false를 가진 useState를 사용
const emailCheck = () => {
const result = /^[a-zA-Z0-9+-\_.]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/.test(email);
if (result) {
setMeesage('');
} else {
setMessage('올바른 메일 형식이 아닙니다.');
setShowEmail(true)
}
}
// ...
<div>
<input
onChange={setEmail}
onBlur={emailCheck}
placeholder="메일을 입력하세요"
/>
{showEmail ? (
// 조건문을 통해서 아이콘과 문구를 같이 보여줄 수 있게 됐다.
<p>
<Redicon />
{messageEmail}
</p>
) : null}
</div>그러다가 다시 입력하게 되면 아이콘이 사리지지 않는다는 사소한 오류를 발견하고
아래처럼 간단하게 수정해서 마무리 할 수 있었다.
const [showEmail, setShowEmail] = useState(false)
// ...
if (result) {
setMeesage('');
setShowEmail(false)
} else {
setMessage('올바른 메일 형식이 아닙니다.');
setShowEmail(true)
}
}주절주절 소감글..
이번주는 스스로에게 아쉬움이 많은 시간이였다.
채팅이란 기능을 너무 어렵게 생각했던 나머지 학습하는 과정에서 벽을 너무 높게 쌓았다.
그러다 보니 채팅 기능들이 동작하는 순간까지 너무 오래 걸린 것 같다.
