화면 위에 여백이 생기는 현상
문제 상황
body와 전체 컨테이너에 height를 100%로 주고 margin을 0으로 주었는데 컨테이너 위에 여백이 생기는 현상이 발생함
해결
컨테이너 내부의 intro-box에 margin을 10px씩 줬었다
너무 당연하게 컨테이너가 화면 전체를 차지하고 그 안에 intro-box가 margin을 갖게 될거라고 생각했는데 컨테이너도 같이 margin 만큼 여백을 갖게 됨
이게 그 margin 겹침현상인 듯하다
자식인 intro-box의 margin을 부모인 컨테이너의 margin에 겹쳐서 컨테이너의 위에 여백이 생긴것 같다
margin 겹침현상은 top과 bottom에만 나타나므로 위에만 여백이 생겼던 것
해결은 intro-box에 margin을 주는 대신 컨테이너한테 padding을 줘서 해결했다
스톱워치 setInterval 멈춤 안됨
문제 상황
스톱워치를 구현했는데 시작버튼을 누르면 setInterval로 타이머를 시작하고 정지버튼을 누르면 clearInterval로 타이머를 멈춤
그런데 시작버튼을 한번만 누르고 정지를 하면 멀쩡히 동작하는데 시작버튼을 여러번 누르고 정지를 하면 정지가 안됨
해결
setInterval을 할때 받은 timerId를 출력해보니 시작버튼을 누를때마다 timerId의 숫자가 올라간다는 것을 확인했다
그리고 바뀐 이전 timerId는 clearInterval을 해도 사라지지 않아서 setInterval이 제대로 멈추지 않는 것 같다
그래서 isRunning이라는 플래그를 만들어서 setInterval을 isRunning이 false일 때만 실행되게 하고 멈춤버튼을 누르거나 초기화버튼을 누르면 isRunning이 false가 되게 해서 해결했다
참고: https://cat-holic0713.tistory.com/15
toLocaleTimeString() 시,분만 가져오기
문제 상황
시간을 가져오기 위해 toLocalTimeString()을 사용했는데 이러면 '오후 3:23:37'이런 식으로 시, 분, 초가 같이 나온다
그런데 나는 시, 분까지만 가져오고 싶었다
해결
아래와 같이 options라는 값을 줘서 해결했다
let options = { hour: "numeric", minute: "numeric" };
console.log(today.toLocaleTimeString("ko-KR", options));
// -> 오후 3:23참고로 시간을 24시로 하고싶으면 options에 hour12: false를 주면 되고 시간을 2자리 숫자로 받고 싶으면 hour: '2-digit'를 주면 된다
⬇️ 아래에 시간을 가져오는 다양한 방법들이 나와있어서 참고하였다
https://carrotweb.tistory.com/159
스크롤 이동 시키기
문제 상황
채팅방에 메시지를 추가할 때 마다 스크롤을 맨 밑으로 이동시키는 것은 잘 됨
구현 코드는 아래와 같음
chatSreenContent.scrollTop = chatSreenContent.scrollHeight;
// 또는
chatSreenContent.scrollTo(0, chatSreenContent.scrollHeight);그런데 메시지를 삭제할 때 스크롤을 원래 있던 위치에 그대로 유지시키고 싶은데 그게 안됨
삭제할 때 띄우는 alert창을 sweet alert2라는 라이브러리를 사용했었는데 이걸 사용하니까 alert창이 뜰 때마다 페이지가 새로고침되는 문제가 생김
이것 때문에 alert창이 뜰 때마다 스크롤이 맨 위로 올라가버리고 스크롤의 위치 이동이 안되는 문제가 발생함
해결
sweet alert창을 쓸 때 새로고침이 안되게 하는 방법을 찾아봤으나 딱히 나오지 않아서 그냥 css로 내가 alert창을 꾸미고 sweet alert 대신 이걸 사용하여 해결했다
스크롤의 위치를 원래 위치로 유지시키는 코드는 다음과 같다
history.scrollRestoration = "auto";auto가 기본값이라 딱히 안써줘도 스크롤은 원래 위치에 유지된다
공백, 엔터 제거
문제 상황
textarea에 문자 입력할 때 엔터 입력도 그대로 줄바꿈해서 보여주고 싶음
아래 코드로 엔터 입력을 <br>로 바꾼 다음 객체에 값을 보여줄 때 innerHTML을 이용해 보여주면 줄바꿈이 그대로 나타남
str = str.replace(/(\n|\r)/g, '<br/>');하지만 textarea에 공백과 엔터만 입력되었을 때는 저장이 안되게 하고 싶음
해결
아래와 같이 엔터와 공백 입력을 지우고 길이를 검사해서 엔터와 공백만 입력되었는지 체크한 다음에 엔터를 <br>로 바꿔서 입력값을 저장하여 해결
if (str.replaceAll(/(\n|\r|\s)/g, "").length != 0) {
str = str.replace(/(\n|\r)/g, '<br/>');
}