현대이지웰 자바 풀스택과정을 들으면서 배웠던 것들과 배우면서 들었던 나의 생각과 부족했던 점들을 돌아보면서
정리해보려고한다 이렇게 기록함으로써 좀 더 나은 개발자의 모습이 되었으면 희망한다.
흐름은 일단 내가 연습문제를 푸는 도중 헤맸었던 부분을 중점으로 진행하고 관련 개념들을 정리하려고한다.
Javascript 파트
1. setInterval() 연습문제1
window 객체에 대해서 배우던 중 setInterval을 사용하여 사진과 같이 구현해야하는 연습문제를 풀게되었는데 이 메서드를 어떤 위치에 사용해야할지 어떤 식으로 사용해야 할지 이해도가 떨어져서 꽤 해맸었다.
처음시도는 이러했다
let flag = 1;
let count = 0;
function start() { // onloading 되었을 때 start가 호출되고 start가 showImg를 setInterval로 호출하면 되겠지?
alert("이미지 10개 출력"); //그런데 어떤식으로 호출하고 이걸 제어해야하지?
showImg();
}
function showImg() {
if (flag == 1) {
document.write(`<img src=image/apple.png>`);
flag--;
} else {
document.write(`<img src=image/bomb.png>`);
flag++;
}
count++;
}약간의 설명을 하자면 flag라는 변수를 이용해서 참일 때는 사과그림을, 거짓일때는 폭탄그림을 보여주는 로직이다.
그리고 이 로직을 setInterval로 반복되게 하고 멈추는 지점을 제어해줘야하는데
막상 setInterval을 어떻게 활용해야 할지 마땅한 해결방안이 생각이 안나서 좀 막막했었다.
setInterval() 메서드는 일정시간 간격 안에 명령을 반복 수행하는 기능을 한다(여러 번 호출 가능하다)
setInterval('호출함수', 지연시간)로 사용할 수 있다.
setInterval메서드는 타이머ID를 변수로 받을 수 있었는데(이 점을 놓친게 해맸던 원인이라고 생각함) 다시 복습하면서 풀어보니 너무 쉽게 해결되어 당황했었다.. 거의 다 해결해놓고 빨리 해결해야한다는 부담감 때문에 생각을 못했던거 같다.
let flag = 1; // 이미지 출력을 제어해주는 변수
let count = 0; // showImg동작을 제어할 변수
let timerId; // setInterval의 값을 받아줄 변수
function start() {
alert("이미지 10개 출력");
timerId = setInterval(showImg, 1000);
}
function showImg() {
if (flag) { //flag값이 참이면 사과 이미지 출력
document.write(`<img src=image/apple.png>`);
flag--;
} else { // 거짓이면 폭탄이미지 출력
document.write(`<img src=image/bomb.png>`);
flag++
}
count++;
if (count > 9) {
clearInterval(timerId);
}
}
//...
//<body onload=start()></body>다른 풀이중에는 setTimeout 메서드를 사용해서 저 showImg가 종료되는 시간을 정해서 해결하는 방법도 존재했었다. 그러면 따로 언제 끝나는지 변수를 사용하지 않아도 되는 장점이 있었다.
학습중에 메서드에 호출함수를 문자열 형식으로 전달하는 방식이 있었는데 왜 이렇게 사용하나 궁금해서 따로 찾아보는 중 요즘에는 성능이나 보안상 권장되지 않는다는 것을 알 수 있었다. 다음부터 사용할때는 이 점을 고려해서 콜백함수로 사용해야겠다
jQuery 파트
1. css선택자 예제 구현 중(this 바인딩 문제 발생)
이 문제는 css 선택자를 이용해서 마우스를 올려놨을 때 해당하는 영역의 색깔이 바뀌는 예제이다.
이 경우에는 화살표함수로 적용하는 과정에서 알게된 점을 정리해보겠다.
첫 풀이는 이렇게 진행했었다
$(()=>{
//div의 참조값 저장 집합
let $menuItem = $('.menuItem');
//alert($menuItem.length);
//값을 출력하기 위해 특정요소의 참조값 반환 저장
let $indexSpan = $('#indexSpan');
//$menuItem변수는 배열같은 집합형태임 - jquery는 each(func)제공하고 있음
//jquery event 메소드 객체.이벤트명(func)
//객체.hover : 객체 영역으로 마우스가 들어갔을 때 나왔을때 두 개의 의미를 갖고 있음
//두개의 함수 연결가능, 함수, 함수
$menuItem.each((idx)=>{ // 화살표함수가 편해서 적용하였으나 문제 발생!!!
$(this).hover(
()=>{ //마우스가 해당 영역(this)으로 in
$(this).css('background', 'yellow');
$indexSpan.text(idx);
},
()=>{ //마우스가 해당 영역에서 outs
$(this).css('background', 'green');
$indexSpan.text("");
});
});
}); //ready() 종료하지만 문제가 발생하였다 제대로 지정이 되지않아서 적용이 안되는 문제가 발생하였다. 왜 그런지 찾아보니 each 반복문 안에서 화살표 함수를 사용했기 때문이라고 한다. 그래서 this에 문제가 발생한것이다.
jQuery의 each나 hover같은 이벤트 메서드를 등록할 때 화살표 함수와 익명함수는 문법상으로 비슷해 보이나, this의 동작 방식의 차이점이 존재한다고 한다
this의 바인딩이 시점이 달라서 발생한다는게 원인이다, 아래의 표는 둘의 차이점이다
| 함수 종류 | this바인딩 시점 | 가리키는 대상 |
| 익명함수 | 실행 시점(동적 바인딩) | 호출한 객체 |
| 화살표함수 | 정의 시점 | 상위 스코프의 this |
이미지로 예시를 들어보자
일반 함수(익명함수도 포함)에서 this는 함수를 호출한 주체가 정해주는 역할과 같다
무대감독인 jQuery가 배우인 function에게 너의 역할은(button)이야라고 역할을 정해준다
하지만 화살표 함수에서의 this는 처음 만들어질 때 역할이 정해지기 때문(바인딩 시점 때문)에 누가 호출하던 역할을 바꾸지 않는다
결론 : 그래서 jQuery 이벤트 핸들러에서는 하나의 요소에 하나의 이벤트만 발생하는것이 아니기 때문에 이벤트가 발생한 요소로 바뀌어야한다. 그래서 function을 사용하는 편이 좋다.
2. 카메라 가격 계산하기(change 이벤트 응용 연습)
우선 첫 시도는 이러하였다
<script type="text/javascript">
let defaultPrice = 4500000; // 기준이 될 기본값 선언
$(document).ready(function () {
$("#basicOption").on("change", function () { //option값이 변경되었을 때 값 추가
defaultPrice += Number($(this).val());
$("#amount").text(defaultPrice + "원");
});
$(":checkbox").on("click", function () { // checkbox값이 변경되었을 때 값 추가
let totalPrice = 0;
$(":checkbox").each(function () {
if ($(this).is(":checked")) {
totalPrice += Number($(this).val());
}
$("#amount").text(defaultPrice + totalPrice + "원");
});
});
});
</script>하지만 이 방법에는 치명적인 오류가 있다 바로 값을 다시 더하는 방식을 사용하기 때문에 값이 계속 누적되는 문제가 발생하는 오류가 있다.
그리고 이벤트를 각각 따로 선언했기 때문에 값을 따로 계산해서 올바른 값이 계산이 안되는 문제가 있었다.
복습하면서 처음 내가 시도 했던 방법과 최종 답안 코드를 비교해보니 내가 놓친점은 선택자를 같이 묶는다는 생각을 못하였다는 점이다 두 가지 요소를 따로 생각하다보니 어려움을 겪었다고 느낀다.
해당 문제는 선택자들을 묶어서 풀면 간단하게 풀린다
이렇게 옵션그룹의 id값인 basicOption과 체크박스에 해당하는 값들에 이벤트(등록된 change이벤트)가 발생하면 해당 로직이 작동하여 최종 금액을 계산해줄 수 있다 그리고 숫자값 뒤에 toLocalseString()을 사용하면 450000으로 표시될 값을 4,500,000 이렇게 콤마(,)를 붙혀서 표기할 수 있게 해준다.
이렇게 내가 해맸던 부분들을 복습을 해보았는데 그 과정에서 알게된 점이 꽤 많았고,
내가 어떤 부분을 놓치고 있는지 알 수 있어서 참 좋았던거 같다.
앞으로도 내가 놓쳤던 부분들이나 해맸던 부분들의 복습을 통해 내가 어떤 부분을 좀 더 신경써야할지 알 수 있었으면 한다.
'Archive > Java 풀스택 아카데미' 카테고리의 다른 글
| [TIL] 6. 8월 JDBC (2) | 2025.08.19 |
|---|---|
| [TIL] 5. 8월 JAVA(SET) (4) | 2025.08.09 |
| [TIL] 4. 7월 5주차 - JAVA(상속) (4) | 2025.08.02 |
| [TIL] 3. 7월 4주차 - React (학습 중에 알게된 것들) (2) | 2025.07.27 |
| [TIL] 2. 7월 3주차 - jQuery & React(학습 중에 알게된 것들) (2) | 2025.07.20 |
