한주를 돌아보며,
이번주 토요일에는 멘토링 시간이 있었다.
멘토링 시간에 그 동안 프로젝트가 진행 된 사항을 보여주기 위해
전날에 피드백으로 제보해준 여러가지 이슈들에 대해서 다루는 시간을 가졌다.
이번주에 우리의 문제점이 무엇이 있었는지에 대해서 간략하게 정리를 하자면
1.이미지를 보내는데 발신자는 이미지 메시지를 받아오는데
이상하게 수신인은 이미지를 받아오지 못하는 이슈가 있었다.
2. 모든 페이지에 overscroll 이 생겨서 사용자들이 마우스를 조금씩 내려서 써야하는 불편함이 있었다.
3.채팅방에 입장 시 상대방의 프로필 정보를 클릭 해야만 채팅방 헤더에 닉네임이 표시 되었다.
4. 지하철 칸 번호 입력시 validation 유효성 검사를 넣지 않아 사용자들이 숫자 4자리를 입력하지 않고 이상한 문자나 4자리가 아닌 숫자로 채팅방에 입장을 하게 되어 이상하게 입력값을 넣은 사람들끼리 매칭이 되는 이슈가 있었다.
5. 여러가지 디자인에 대한 피드백
이러한 문제점들을 멘토링 전에 최대한 개선을 하고 보여주고 싶었다.
각 이슈에 대해 어떤 문제점들이 있었는지 정리를 짧게라도 해보는 시간을 가지자.
- 해당 이슈는 socket.io 에서 이미지를 보내지 않고 axios 를 통해서 서버에게 보낸 후 socket.on 으로 해당 이미지를 받는 로직으로 되어있었는데 서버에서는 보내지 않고 있었다.
나는 내가 짜놓은 이미지와 비디오 그리고 메시지를 구분해주는 삼항연산식을 잘못 짠줄 알고
이상한곳에서 문제점을 찾고 있었다.
{item.msg ? (
<ChatDiv
className={name === item.nickname && "owner"}
>
{item.msg}
</ChatDiv>
) : item.url?.split(".")[5] == "mp4" ? (
<>
<ChatVideo
className={name === item.nickname && "owner"}
src={item?.url}
/>
<Download href={item?.url}>다운로드</Download>
</>
) : (
// <div>mp4</div>
<>
<ChatImg
className={name === item.nickname && "owner"}
imgurl={item?.url}
/>
<Download href={item?.url}>다운로드</Download>
</>
// <div>img</div>
)}
</UserChatDiv>확실히 가독성이 많이 안 좋다. 삼항 연삭식에다가 또 삼항연산식을 이어서 그런지
&& 연산자를 사용하는 편이 좋아보인다.
해당 문제점 로직 부분
async function postSend() {
const formData = new FormData();
formData.append("image", file);
formData.append("name", name);
for (const key of formData.entries()) {
console.log(key);
}
console.log(file);
try {
const { data } = await trainApi2.chattingForm(formData);
console.log("잘받음", data);
setChatArr([...chatArr, { nickname: data.name, url: data.img }]);
} catch (error) {
console.log(error);
}
socket.emit("persnalchat", {
url: data.img,
nickname: data.name,
});
}socket.emit 부분을 postSend 부분에서 전송 부분으로 옮김.
const SubmitHandler = (e) => {
e.preventDefault();
if (file?.name !== undefined) {
postSend();
}
socket.emit("persnalchat", {
url: chatArr?.url,
nickname: chatArr?.nickname,
});file이 담겨있을때만 해당 로직이 돌아가게끔 조건문을 줘서 이미지 전송 할땐 저 로직이 돌게끔 하고 메시지 전송할땐 다른 로직이 돌게 수정함.
이렇게 하니 수신자도 상대방의 이미지를 잘 받아오게 이슈가 개선되었다.
- 모든페이지에 overscroll 이 생겨 사용자들이 사용하는데 불편함을 겪는 이슈
해당 문제점은 가장 근본적인 문제점에 대해서 찾아보았다. 이 페이지들마다 왜 overflow가 주어지는데 대해서.. 해당 문제점을 찾는데 얼마 걸리지는 않았다 문제점은 바로
내가 Globalstyle 이라는 컴포넌트를 만들어서 css 값을 전역으로 주고 있었는데
거기에 margin값이 주어져 있었기 때문이다.
margin-bottom 을 주고 있었다. holly ...
3. 채팅방 입장 시 상대방 닉네임이 헤더 부분에 입력되지 않는 이슈
채팅방이 매칭이 된 즉시 서버에서는 상대방에 대한 닉네임과 나의 닉네임 그리고 roomkey 를 보내주게 되어 있는데.
counterprofile 이라는 modal 창을 열었을때 해당 닉네임들을 보내주면 서버에서는 그 닉네임을 받아서 db에 있는 유저 정보를 불러와서 프론트에게 던져준다.
근데 내가 헤더 부분에다가 모달 창을 불러왔을때 받는 닉네임 값을 넣어놓아서 처음부터 뜨지 않고 무조건 프로필을 열었을때 뜨는 현상이 발생하였던 것이다.
해당 이슈를 개선한 코드
<FrontHeader msg={counter?.fair} />너무 쉽게 해결 하였다. 처음에 매칭 당시 서버에서 받은 상대방 닉네임 정보를
기입하면서 문제점을 해결하였다.
마지막 이슈 개선점에 대한 부분이다.
input값에 어떠한 유효성 검사도 넣지 않았기 때문에 이용자들은 아무 글자 숫자 특수문자를 치고도 채팅방으로 입장해서 매칭을 기다리게 된다. 우리는 지하철 칸번호의 첫번째 숫자 그리고 세번째,네번째 글자를 가지고 랜덤으로 매칭 해주기 때문에 이렇게 치고 들어온 이용자들은 매칭이 되지 않아야 하지만
신기하게도 다른 글자를 치고 들어온 사람들과 매칭이 되는 현상이 나왔다.
<StationInfo
minLength={4}
maxLength={4}
pattern={/^[0-9]/g}
placeholder="칸 정보 입력 4자리만"
value={message?.train}
name="train"
onChange={onChangeHandler}
/>해당 이슈는 input값에다가 minLength,maxLength 그리고 placeholder 를 이용해 칸 정보 입력 4자리 라는 고지를 하게 해주고 pattern 을 통해 숫자만 입력 가능하도록 정규식도 넣어주었다. 아직 완벽하지 않고 좀 더 개선을 해야 하겠지만 일단 임시방편으로 이렇게 처리를 해 놓았다.
const conversHandler = () => {
setItemWithExpireTime("train", message.train, 3000000000);
setItemWithExpireTime("profile", message.representProfile, 3000000000);
setItemWithExpireTime("nickname", message.nickname, 30000000000);
setItemWithExpireTime("dropstation", message.dropstation, 30000000000);
if (message?.train.length !== 4) {
window.alert("칸 정보는 숫자로만 4자리만 입력해주세요!!");
} else {
reset("");
navigate("/chattingpage");
}
};message?.train.length !== 4 4자리가 아닐때는 경고창을 띄우게끔 하였다.
추후에 || 또는 && 연산자를 대입하여 좀 더 좋은 조건식을 만들어서 최대한 문제점이 발생하지 않게 개선해야겠다.
내일부터는 환승시민 프로젝트 추가적인 개선 사항들은 무엇인지 찾아보고 찾아서 개선해보고
javascript 에 대해서 따로 공부를 해 나가면 좋을것같다. 아직 이론들이 머릿속에서 제대로 정리되어있지 않기 때문에 따로 시간을 내서 자바스크립트를 공부해봐야겠다.
