뭐 배웠니?

오늘은 색상을 클릭했을 때 펜의 색을 바꾸는 것과 두께를 조절하는 기능을 추가했다. 색상에 관한 것은 addEventListener("click") 그리고 두께는 addEventListener("input")으로 처리했는데 여기서 이 input 이벤트를 좀 더 기억하고자 이렇게 글을 남긴다.

<input type="range" id="jsRange" min="0.1" max="5.0" value="2.5" step="0.1">

function handleRangeChange(event) {
    const size = event.target.value;
    ctx.lineWidth = size;
}

if (range) {
    range.addEventListener("input", handleRangeChange);
}

input에서 value를 가져와서 펜의 굵기를 조절하는 기능을 추가하려고 한다.addEventListener("input")을 사용하여 event.target.value를 통해 input의 value값을 가져왔다.

소감

웹사이트를 만들 때 input태그는 굉장히 많이 쓰인다고 생각한다. 오늘 이렇게 input을 이벤트로 받는 기술을 배웠으니 앞으로 이와 관련해 굉장히 멋진 것들을 만들어 낼 수 있게 됐다고 생각하니 기분이 좋다.

오늘 하루는?

스타트업에서 웹사이트 제작 프로젝트를 시작한 뒤 어느덧 4개월이 넘어간다. 프로토타입 런칭 막바지에 이르러 배포 관련해서 aws ec2를 만지작 만지작거리다 에잇! 노마드 코더에서 배운 elastic beanstalk를 써보기 위해 돌이킬 수 없는 강을 건너고 말았다. 업친데 덮친 격으로 바보같이 인스턴스를 삭제해버려서 db도 날려먹고 eb 세팅 도중 에러도 나고... 다시 ec2 인스턴스 생성 후 복구하려고 하는데 이 놈의 포트때문에 밤을 꼬박 새웠다. 다행히 같이 일하는 개발자 동료가 80포트를 8080포트로 리다이렉트하게 하는 명령어를 알려줘서 문제를 해결했다. 동료한테 다시 한번 고맙다ㅎㅎ 아무튼 이번 기회를 통해 aws에 대해 많은 관심이 생겼고 기능에 대해 차근차근 알아갈 계획이다.

오늘은 특히 수고많았다!