미니 프로젝트

내일배움캠프 첫 주 과제로서 왕초보 웹개발 강의를 전부 듣게 되었다. 하지만, 이미 국비지원 k-digital 과정으로 수강한 전적이 있기 때문에 이틀에 걸처 빠르게 수강을 완료했다. 이후 남은 이틀 동안 배운 지식을 이용해 첫 미니 프로젝트를 시작했다. 미니 프로젝트는 catpop의 사이트를 클론하는 것이다.

1. 기능

• 캣팝 사진을 마우스 클릭하면 캣팝이 입을 벌린다.
• 캣팝 사진에서 마우스 클릭을 때면 캣팝이 원상복귀 된다.
• 캣팝을 누른만큼 카운트 되어 DB에 저장된다.
• 저장된 DB값은 웹페이지에 표시 된다.

2. 기능 구현 방법

• 이미지는 catpop 사이트에서 url을 가져다 썼다.
• 캣팝 이미지를 div태그로 묶어 id값을 할당하고 할당된 div는 이벤트 함수로 마우스클릭 상태인지 마우스 클릭을 땐 상태인지 확인한다.

// on() 매소드를 사용했다.
$(function() {
	$('#clickCount').on('mousedown', function () {
    	alert('마우스 클릭 성공!');
    })
})

• 마우스 클릭을 눌렀을 때, 자바스크립트를 이용해 css를 건드려 이미지를 교체했다.

// cat-image는 태그 div값의 class명이다.
$('.cat-image').css({"background":"url(https://popcat.click/img/op.353767c3.png)"});
$('.cat-image').css("background-size", "cover");
$('.cat-image').css("background-position", "center");

• 마우스 클릭을 눌렀을 때, 카운트가 즉시 페이지상에 표시되도록 했다. 이때, 웹페이지가 매번 새로고침 하게되면 이미지를 누를때마다 약간의 시간을 기다려야 하기 때문에 이를 해결하기 위해서 마우스 클릭이 감지 됬을 때 DB에서 카운트 값을 가져오도록 코드를 작성했다.

3. 예상치 못했던 부분

• 도메인 할당 후 지인에게 부탁하여 웹페이지 테스트를 맡긴 결과 스마트폰에서는 캣팝이미지가 동작하지 않음을 확인 - mouse함수는 마우스 클릭 이벤트에만 반응하다는 것을 구글링을 통해 알게 되어 다음과 같이 스마트폰에서도 이벤트를 감지할 수 있도록 touch함수를 on() 매소드에 포함 이후 정상 동작하는 것을 확인.

$(function() {
	$('#clickCount').on('mousedown touchdown', function () {
    	alert('마우스 클릭 성공!');
    })
})

• 마우스 클릭 시 카운트가 되지 않고 이후 클릭할 때 두번 카운트 되는 상황 확인 - 코드 검토 시 API(post):'이미지 클릭'호출 후 API(get):'횟수 카운트' 이 호출되어야 하지만, 랜덤하게 호출하는 현상이 발생, 이후 자바스크립트에서 API호출 함수코드의 위치 변경 이후 정상 동작 확인

• 스마트폰에서 이미지를 터치할 경우 2회~3회 씩 카운트되는 현상 발생. - 구글링 진행하였으나 해결하지 못함.

이번 미니프로젝트는 나의 첫 작품이였으며 시작하기 앞서 구현하기 아주 쉬워보이는 사이트로 선정했었다. 이때, 캣팝은 누를때마다 횟수가 카운트되기만 하면 되기 때문에 아주 쉬워보였지만 막상 시작하고보니깐 처음 시작부터 웹을 어떻게 구성하고 이미지는 어떤방식으로 동적이게 만들며 카운트는 웹이 새로고침되지 않으면서 카운트 값이 실시간으로 표시되게 만들 수 있을지 등 많은 고민거리가 시작하기 전과 달리 많은 생겨났다. 특히 코드를 짜는 내내 이걸 내가 나중에 봤을 때 알아볼 수나 있을까라는 생각을 너무 많이 하게 됬었다. 그리고 구현은 되긴 하다만 내가 생각해도 이렇게나 비효율적이고 불안정하게 짤 수 있을까 생각이 들정도 였다. 아니다 다를까 지인에게 피드백 받아 수정하고자 다시 킨 코드는 도대체 어디서부터 잘못되었는지 한숨밖에 나오지 않았다. 그럼에도 불구하고 처음으로 A-Z까지 스스로 웹페이지를 만들고 타인이 사용한 후 피드백까지 받아 버그를 수정하기까지 해보니 개발자가 된거같은 느낌이 들어서 뿌듯했었다. 하지만, 결국 마지막 스마트폰 터치 시 카운트가 여러번 발생하는 버그를 해결하지 못한 것은 너무 안타까웠다.

내가 이번 미니프로젝트르 성공적으로 수행한 이유는 시간적 압박감을 통한 쉬운 타겟 선정과 작품을 사용하는 유저가 있다고 의식했기 때문이라고 생각한다. 이보다 더 어려운 과제로 프로젝트를 수행했다면 완성은 커녕 동작도 제대로 되지 않는 작품을 끙끙 들고있다가 어영부영 종료했을 것이다. 이틀간 진행해야 한다는 시간적 압박감이 있었기 때문에 대체로 쉬운 과제를 선정했고 이는 제대로 들어맞았다. 하루동안 프로젝트를 완성했고 이후 나머지 하루는 피드백을 해결하는 시간이였다. 또 내가 만든 작품을 지인에게 보여줬고 이후 피드백이 왔을 때, 이는 더이상 나만의 작은 작품이 아니게 된것이었다. 누가 들어오더라도 부끄럽지 않게 해야겠다는 생각이 들었고 이는 프로젝트를 성공적으로 다듬는데 큰 원동력이 되었다.

웹 개발의 A-Z를 스스로 해봤기 때문에 앞으로 계속 웹개발을 해야하는 나로서는 이런 경험은 크게 도움이 될거라고 본다. 또한 이번 경험을 통해서 내가 코드를 너무 막 짠다는 것을 알게 되었다. 이후에 코드 짤 때는 충분히 생각하고 스케치를 한 후 작성하며 3개월 이후 내가 보더라도 다시 알아 볼 수 있도록 주석을 잘 활용해야 겠다고 느꼈다. 그리고 당장 내게 크게 부족한 것은 경험이라고 느꼈다. 어떻게 코드를 짜야 효율적으로 짤 수 있는지 알 수가 없었다. 이를 해결하기 위해서 다른 사람이 짠 코드를 많이 구경하고 연구하며 나의 것으로 만들 수 있어야 겠다.

1. To-do List

• 이번주 금요일에 본 주간테스트 답지 확인하고 나의 것과 비교해보고 어떻게 다른지 TIL 작성해보기.