socket.io를 이용하여 채팅을 만들었다. 그리고 거기서 마주친 문제들이 있었다.
나중에 혹시 같은 문제가 발생하면 참고하기 위해서 작성하는 글. (Github_chat)
문제상황
1. DB 사용하지 않고 프로필사진 선택.
2. 선택한 프로필사진을 내가 선택한 채팅방에 띄워줄수없음.
3. 띄워진 프로필 사진을 어떻게 배치할것인가.
문제해결
1. DB 사용하지 않고 프로필사진 선택.
= 일전에 했던 팀 프로젝트랑 같은 방식으로 진행했다.
이미지를 띄워주고, 그걸 선택하는 방식.
스크립트를 이용해서 타겟을 선택하고, 선택한 것들에 border기능을줘서 사용자가 무엇을 선택했는지 알 수 있도록 해주었다.
<div class="profile-img" style="text-align: center;">
<img src="/img/img1.png" style="width: 50px" name="img1">
<img src="/img/img2.png" style="width: 50px" name="img2">
<img src="/img/img3.png" style="width: 50px" name="img3">
<img src="/img/img4.png" style="width: 50px" name="img4">
<img src="/img/img5.png" style="width: 50px" name="img5">
<img src="/img/img6.png" style="width: 50px" name="img6">
<img src="/img/img7.png" style="width: 50px" name="img7">
</div>
<input type="hidden" name="name" id="file_name">
<script>
$("img").on("click", function( obj ) {
let target = obj.currentTarget;
let brothers = $(target).siblings();
$(target).css("border", "2px solid white");
$(brothers).css("border", "none");
});
</script>결과
2. 선택한 프로필사진을 내가 선택한 채팅방에 띄워줄수없음.
url에 username, room 정보는 넘어오는데 img 정보가 넘어오지 않았다.
URLSearchParams를 이용해서 쿼리 정보를 얻고, name = imgx 형태로 넘겨주게 하였다.
그리고 chat.html에서 넘겨진 사진이 보일 수 있도록 추가해주었다.
<chat.html>
<body>
<img src="" style="width: 50px" id="img_profile" hidden>
</body>
<script>
const params = new URLSearchParams(window.location.search);
$("#img_profile").removeAttr("hidden");
$("#img_profile").attr("src", `/img/${params.get("name")}`);
</script>
<index.html>
<script>
$("img").on("click", function( obj ) {
let target = obj.currentTarget;
let brothers = $(target).siblings();
let src = target.src.split("/");
$("#file_name").val(src.pop());
$(target).css("border", "2px solid white");
$(brothers).css("border", "none");
});
</script>
3. 띄워진 프로필 사진을 어떻게 배치할것인가.
넘어온 프로필이 계속 웹브라우저 하단에 붙어있어서 문제였다.
css적인 문제. css는 하면 할수록 어렵다.
chat.html에서 index에서 넘어오는 사진을 사용자 ID가 나오는 ul 밑으로 재배치 해주었다.
relative포지션을 주고, 위치를 조종했다.
<css>
#img_profile{
position: relative;
top: 180px;
}
앞으로 보완해야할점
- 배운것들을 잘 활용해야함.
: 자꾸 새로운 문제들이 나와서 새코드로 해결하려하는데 실은 배운거에서 다있었다.
- 검색으로 끝내지 말아야함.
: 이건 아직도 문제인데, 검색으로 문제를 해결하고 나면 거기서 끝내려고한다. 이해를 하고, 다음에는 더짧은 시간내에 오류를 줄이도록 해야겠다. 블로그에 포스팅하는 이유도 이 단점을 보완하기위함이다.
(※ 혹시라도 글을 보고 피드백해주실게 있다면 자유롭게 주세요. 또한 배우는 학생 입장의 글이니, 참고하실때 유의하시기 바랍니다. )