서론
어쩌다가 지나가던 백엔드 개발자한테 붙들려서 서버와 통신하는 법을 배우게 되었다.
http, udp, tcp등에 대해서 알려주더니 냅다 ajax와 json란걸 보여주더니 냅다 todo-list를 만들어보란다(예?)
약간 abcd 알려줘놓고 토익시험을 치라는것같은 느낌이었다.
그래도 하라하면 또 하는 성격인지라.. 군말없이 일단 하기는 했다.
하다보니 아래와 같은 todo-list를 만들게 되었다.(완성작이다.)
자 사실 퍼블리싱 자체는 문제가 되지 않는다. 어떻게든 하니까..
근데 이제 평소에 퍼블리싱 공부를 할때에는 저런 할일 리스트 목록이면 html에 ul > li로 직접 쳐서 바로 브라우저에 보여질 수 있게만 했다.
근데 이제는 input[type='text']에 내용 입력하면 -> 내용을 데이터 형식에 맞게끔 담아 서버에 보낸다 -> 서버에서 다시 데이터를 보내준다 -> 서버에서 받은 데이터로 li 요소를 생성한다.
이런식으로 서버와 통신을 하며 데이터를 보내고, 화면에 뿌리는(?) 걸 해보게 되었다.
자, 다 좋은데 문제가 발생했다!!
문제
todo list의 핵심 기능은 완료한 항목은 체크표가 되어야한다는 것이다.
처음에는 디자인을 딱히 정하지 않고 냅다 html로만 만들어놨어서, 냅다 input[type='checkbox']를 클릭하면 체크된 상태를 서버로 보내게 만들었는데,
막상 디자인을 하고 나니까 input[type='checkbox']를 누를 수 없는 상태가 되었다! (체크박스는 css로 디자인이 안된다.)
맨 처음 코드(label 사용 x)
체크박스를 직접 클릭하여 함수를 실행시켰기 때문에 문제가 안됐었음
<ul>
<li>
<input id="checkList##" type="checkbox" onclick(todoChekced(this, index))>
일어나서 밥먹기
<button>삭제</button>
</li>
</ul>
<script>
function todoChecked(e, index) {
/* 체크 박스가 checked 되어있는지 확인 */
let checkbox = e.checked;
/* 서버로 보낼 체크박스 상태 0이면 체크안됨, 1이면 체크됨으로 정했음 */
let checkedStatus = "";
/* 체크박스 상태와 함께 할일 리스트 인덱스번호도 같이 보냄 */
let deleteIdx = inedx;
if (checkbox == false) {
checkedStatus = 0;
} else {
checkedStatus = 1;
}
$.ajax({
생략..
});
</script>
그래도 이때까진 큰 문제라 생각하지 않아서 label요소를 추가해서 label과 checkbox를 연결하게된다. 그래서 결국 label을 누르면 checkbox가 checked가 되니까? 서버에는 똑같이 체크여부가 넘어갈것이라 생각하게 된다.
이렇게 아름답게 끝나면 얼마나 좋을까..
- 내가 생각한것 : label을 누른다 -> checkbox가 checked상태가 된다 -> 서버에 checkbox 상태를 보낸다.
- 실제로 동작된것 : label을 누른다 -> 서버에 checkbox 상태를 보낸다 -> checkbox가 checked상태가 된다.
처음에는 실제 작동된 순서를 알아채는데도 오래걸렸다.
자꾸 마음처럼 안되서 함수안에서 alert으로 찍어보니까 그제서야 서버에 check되기 전 상태가 먼저 간다는걸 깨닫게 된것이다.
수정1
자, 이제 동작의 순서가 잘못된걸 깨닫게 되었으니 수정을 해야한다.
하지만 아무리 생각해도 좋은 방법이 떠오르지 않았다.
그러다가 문득 생각난게 바로 setTimeout이다.
setTimeout을 이용해서 함수 실행을 늦춘다면, checkbox가 checked로 바뀌는 시간을 벌 수 있을것 같다는 생각이 들었다.
수정1) setTimeout을 이용하여 인위적으로 함수를 늦게 실행시킴
<ul>
<li>
<input id="checkList##" type="checkbox">
<label for="checkList##" onclick(todoChekced(this, index))>일어나서 밥먹기</label>
<button>삭제</button>
</li>
</ul>
<script>
function todoChecked(e, index) {
setTimeout(function () {
/* this가 label이 되었기때문에 label의 앞 형제(checkbox)의 체크여부 확인 */
let checkbox = e.previousSibling.checked;
let checkedStatus = "";
let deleteIdx = inedx;
if (checkbox == false) {
checkedStatus = 0;
} else {
checkedStatus = 1;
}
$.ajax({
생략..
});
}, 500);
</script>그리하여 수정된 코드가 이것이다.
일단 원하는대로 작동은 되니까 기분은 좋았다.
수정을 해놓고 서버를 만들어준 개발자에게 문제가 생겼고, 이렇게 해결했다라고 자진신고를 했다.
내 얘기를 듣더니 delay를 주는건 그닥 좋은 방법은 아니라고 하더라.
그러면서 다른 방법을 살짝 귀띔해주었다.
수정2
수정2) checkbox의 index를 통해서 n번째 checkbox의 상태를 반대로 바꿔주기
<ul>
<li>
<input id="checkList##" type="checkbox">
<label onclick(todoChekced(index))>일어나서 밥먹기</label>
<button>삭제</button>
</li>
</ul>
<script>
function todoChecked(index) {
/* 체크표시하고 싶은 체크리스트를 변수에 저장 */
let chkIdx = $('#checkList'+index);
/* 체크리스트의 checked 상태를 반대로 설정 */
chkIdx.prop('checked',!chkIdx.is(':checked');
/* 현재 checked상태 확인해서 서버에 보내주기 */
let checkbox = chkIdx.is(':checked');
let checkedStatus = ""; let deleteIdx = index;
if (checkbox == false) {
checkedStatus = 0;
} else {
checkedStatus = 1;
}
$.ajax({
생략..
});
</script>두번째로 수정한것은 checkbox의 상태를 반대로 저장해버리는 것이다.
체크박스는 1. 체크 됨 2. 체크안됨 둘중하나니까.. 현 상태의 반대로 저장하면 원하는 대로 되는것이더라. 간단한건데 왜 이런 생각은 못했을까?
그래서 label을 누르면 NOT 연산자(!)를 통해서 체크상태를 반대로 바꿀 수 있게 해주었다.
그러면서 원래는 매개변수값으로 e, index 두개를 받았는데 굳이 e는 필요없을것 같아 삭제해주었고 index만으로 원하는 할일리스트 index의 상태를 바꿀 수 있게 했다.
그런데 사실 저 코드에서 더 정리가 될 것같기도 한데 현 상황에선 잘 모르겠다.
나중에 조금더 레벨업을 한 다음에 다시 수정을 해봐야겠다.
마치며
어쨌든 checked 상태때문에 생각보다 시간이 오래걸렸다.
이게 해결하고 나서 보니까 진짜 별거 아닌것같은데 괜히 혼자 시간버려가며 삽질했나 싶었는데
개발자 친구는 삽질하면서 배워 나가는거니 너무 크게 마음쓰지 말라고 하더라.
ㄴr 이렇게 성장해 나가는 걸ㄲr...
todo list 다만들었다고 개발자한테 자랑하니까 대충 잘했다며 갑자기 이번엔 게시판을 만들어보잰다
서버는 나중에 만들어줄테니 퍼블리싱 먼저 하란다(이게맞나)
하라니까 또 하러 갑니다.
