JAVA 웹개발 과정 국비 49일차 정리

49일차

※ 배우는 과정이므로 정확하지 않을 수 있습니다.
잘못된 점은 알려주시면 수정하도록 하겠습니다!

---

쓸만한 기능들을 담은 채팅창 만들기 방법을 배웠다.
어려웠던 점들을 정리해야겠다.

1. 채팅창 만들기

1) 채팅창, 입력창이 넘칠 때

채팅창이나, 입력창이 정해진 크기를 넘어서 흐른다면 overflow 속성을 이용할 수 있다.
overflow-y : auto를 해주게되면 넘치지 않을 때는 가만히 있다가 넘치기 시작하면 y축(세로축)으로 스크롤를 만든다.

See the Pen js by kkongkeozzang (@kkongkeozzang) on CodePen.

2) 채팅창 말풍선의 길이 제한

채팅창 말풍선을 div로 만들게되면, div의 block 속성에 따라 가로공간을 다 차지해버린다.
이때, 카톡과 비슷한 말풍선을 만들기 위해서는 글자수에 따라 말풍선을 다르게 해야한다.
따라서 div를 글자수만큼 공간만 차지하는 inline-block 속성으로 바꿔준다.

원하는 가로 길이보다 입력이 넘어가게 되면 word-wrap: break-word;을 사용하여 자동 줄바꿈을 할 수 있다.
또한, 카톡을 보면 채팅창 전체 너비를 말풍선을 다 쓰지 않는 것을 볼 수 있는데, 일반 width 속성으로 조절하려고 하면 짧은 단어를 써도 너비가 고정되버린다.
이때 max-width속성을 이용하여 너비를 정해주면 짧은 단어는 단어의 공간만큼만, 그리고 정한 너비가 넘어가면 위의 자동 줄바꿈 때문에 아래로 줄이 바뀌는 것을 볼 수 있다.

See the Pen js by kkongkeozzang (@kkongkeozzang) on CodePen.

3) 버튼 스타일 바꾸기

버튼 태그를 쓰면 매번 못생긴 일반 버튼이 생긴다.
기본적인 기능을 만들때는 상관없지만 이쁘게 만들고 싶을 때는 영 거슬려서 매번 찾아봐야했다.
간단히 기록해두면 만들고 싶은 디자인으로 만들 때 편하게 사용 가능할 것 같다.
가장 거슬리는 게 두가지인데 배경과 외곽선에 그림자 속성이다.
background-color:transparent; 를 해주면 배경색이 없어진다.
border-style: none;을 해주면 기존 외곽선 스타일이 모두 사라진다.

See the Pen js by kkongkeozzang (@kkongkeozzang) on CodePen.

4) 입력 div

그동안 배웠던 입력 가능한 태그는 여러줄을 입력할 수 없다거나, 이미지를 넣을 수없다는 단점이 존재했다.
그러나 div 태그에 contenteditable="true" 속성을 주면 이 단점을 모두 해결할 수 있다.
다만 이 속성이 기본적으로 가지는 엔터를 칠 때 복제되는 동작을 차단하려면 이벤트를 따로 줘야한다.

태그	여러줄입력	이미지넣기	특징
input	X	X	-
textarea	O	X	-
div	O	O	엔터 기본동작을 막아줘야 함

See the Pen js by kkongkeozzang (@kkongkeozzang) on CodePen.

5) 엔터칠 때 채팅 발사!

① 엔터칠 때 이벤트 주기

입력창의 key가 눌리는 것을 감지하는 이벤트를 등록한다.
엔터가 눌리고 shift키가 눌리지 않은 상태라면 동작하게 한다.
이렇게 조건을 두 개를 주는 이유는 shift + 엔터를 누를 때 전송되지 않고 줄바꿈이 되게 하기 위해서이다.

$("#input-chat").on("keypress", function (e) {
	if (e.keyCode == 13 && e.shiftKey == false) {

② 동적 요소 만들기

엔터를 딱! 치는 순간 입력창에 있는 문구들이 채팅창에 말풍선으로 짠 하고 나타나야한다.
동적요소를 만들어서 append를 시켜주는 것으로 해결할 수 있다.
아래 순서들이 엔터를 치는 순간 좌르륵하고 실행되는 것이다.

1. 채팅말풍선을 감싸는 div 생성 (class는 chatLineBox)
2. 채팅말풍선 div 생성 (class는 chatLine)
3. 채팅말풍선에 입력창 내용 담기
4. 삭제 버튼 생성 (class는 delBtn)
5. 삭제 버튼은 숨겨놓기 - 마우스를 올리면 보여주는 것으로 나타냄
6. 채팅 말풍선 박스에 채팅 말풍선 넣기
7. 채팅창에 채팅 말풍선 박스 넣기
8. 채팅 말풍선에 삭제 버튼 넣기(숨어있는 상태-안보인다)

let chatLineBox = $("<div>");  // 1
chatLineBox.addClass("chatLineBox");  
let chatLine = $("<div>");  // 2
chatLine.addClass("chatLine");

chatLine.html($("#input-chat").html());  // 3
let delBtn = $("<button>");  // 4
delBtn.addClass("delBtn");
delBtn.text("X");
delBtn.hide();  // 5

chatLineBox.append(chatLine);  // 6
$("#chat-view").append(chatLineBox);  // 7
chatLine.append(delBtn); // 8

③ 스크롤 고정

채팅이 많아지면 채팅창이 올라가면서 가장 최근에 보낸 채팅에 스크롤이 멈춰있는 것이 보통 채팅창의 모습이다.
그러나 아무런 조치를 취하지 않으면 내가 만든 채팅창은 위쪽으로 스크롤이 고정되어버린다.
제이쿼리든 바닐라JS이든 스크롤을 아래로 고정시키는 방법은 많으니 검색해서 사용하면 된다.

나의 경우는 코드를 이것저것 긁어와서 써봐도 고정이 안됐었다.
이유를 알아보니 이벤트 안 if 문 안쪽에 써주지 않아서였다.
엔터를 칠 때, 스크롤이 아래로 고정되어야하니까 안쪽에 써줘야한다.
이걸로 좀 고생을 해서 잊어버리지 않으려고 적어둔다!

$('#chat-view')  // 스크롤을 고정시키고 싶은 div 선택
	.stop()
	.animate({ scrollTop: $('#chat-view')[0].scrollHeight }, 1000);

6) 삭제 버튼 보였다 안보였다

수업에서 만든 삭제 기능은 채팅 말풍선에 마우스를 올리면 x 버튼이 나타나고, 이걸 눌렀을 때 보낸 채팅을 삭제하는 것이다.
카톡처럼 만들고 싶었는데 카톡은 보니까 그냥 오른쪽 클릭해서 삭제하면 되는 것이였다.
어쨌든 수업에서 배운 내용 정리..!

5-2번에서 삭제 버튼은 이미 만들어서 숨긴 상태이므로, 채팅말풍선에 마우스를 올렸을 때 버튼을 보여주고, 마우스를 뗐을 때 다시 숨기는 기능을 만들어준다.
동적 이벤트 바인딩을 이용할 때 주의할 점은, this를 이용하여 요소를 선택해야 나머지 다른 요소들도 한꺼번에 이벤트가 적용되지 않는다는 것이다.

1. 동적 이벤트 바인딩으로 mouseenter 이벤트 등록
2. this를 이용하여 버튼을 보여주기
3. 버튼을 클릭했을 때 이벤트 등록
4. 부모요소 삭제 - this 꼭 이용하기
5. 동일하게 mouseleave 이벤트 등록
6. this를 이용하여 버튼 숨기기

$("#chat-view").on("mouseenter", ".chatLine", function () {  // 1
    $(this).parent(".chatLineBox").find(".delBtn").show();  // 2
    $(this).parent(".chatLineBox").find(".delBtn").on("click",function(){  // 3
        $(this).closest(".chatLineBox").remove();  // 4
    })
})
$("#chat-view").on("mouseleave", ".chatLine", function () {  // 5
    $(this).parent(".chatLineBox").find(".delBtn").hide();  // 6
})

7) 채팅창에 이모티콘 보내기

icon 버튼을 누르면 가지고 있는 이모티콘을 보여준다.
나는 icon Box도 동적 요소로 생성했는데, 다른 사람들 코드를 보니 위의 버튼처럼 미리 만들어놓고 숨긴다음 버튼을 클릭하면 나타나게 한 것 같다.
이 부분은 위에서 정리한 방법과 비슷하므로 패스하고, 이모티콘을 넣는 방법만 정리한다.

clone()을 이용하여 이모티콘을 복사한 뒤, 복사한 클론을 입력창에 append 해준다.
여기서 주의할 점은 위쪽에 채팅을 전송할 때, text()를 사용하면 안된다는 것이다.
html()을 사용해야 이모티콘도 말풍선에 넣어서 전송할 수 있다.

$("#chatbox").on("click",".iconBox img",function(){
    let imgClone = $(this).clone();
    $("#input-chat").append(imgClone);
})

8) 채팅창 만들기 - 예제

See the Pen js by kkongkeozzang (@kkongkeozzang) on CodePen.