공부방/JavaScript6 var, let, const 변수 차이점 정리 JSP 화면에서 JavaScript를 작성하다 보면 var, let, const 중 어떤 것을 써야 하는지 고민하게 된다. 단순히 문법 차이로만 보면 큰 차이가 없어 보이지만, 실제 운영 환경에서는 변수 선언 방식 하나로 예상치 못한 버그가 발생하기도 한다.var 선언 방식의 특징과 JSP에서의 문제점var는 ES6 이전부터 사용되던 변수 선언 방식으로, 현재는 레거시 코드에서 주로 확인할 수 있다. 가장 큰 특징은 함수 스코프(Function Scope)를 가진다는 점이다. if 블록 안에서 선언했지만, 같은 함수 스코프로 인식되어 기존 변수 값이 덮어써진다. JSP 페이지에서 공통 JS 파일과 함께 사용할 경우, 이로 인해 값이 꼬이는 상황이 자주 발생한다. 위 코드는 JSP + Ajax + se.. 2026. 1. 20. Uncaught SyntaxError: Invalid or unexpected token 자바스크립트 개발하다 보면 콘솔에 한 번쯤은 이 메시지가 뜨게된다. 보통은 “오타겠지” 하고 넘어가는데, 막상 해당 라인으로 가보면 코드가 멀쩡해 보이는 경우가 많다. 이 오류는 단순한 오타가 아니라 엔진이 해석할 수 없는 문자(토큰)를 만났거나, 문자열/스크립트 경계가 깨져 파싱이 중단되는 상황에서 터지더라. 1. 오류 메시지의 의미를 정확히 이해하기1) SyntaxError는 “실행 전에” 죽는 오류다TypeError처럼 실행 중에 발생하는 런타임 오류와 달리, SyntaxError는 자바스크립트 엔진이 코드를 해석(파싱)하는 단계에서 실패할 때 발생한다. 그래서 해당 파일은 “부분적으로” 실행되는 게 아니라, 스크립트 로딩 자체가 중단되는 형태로 나타난다.2) Invalid or unexpected.. 2025. 12. 19. html에서 jstl로 case 문 사용법 일을 하다가 검색하는것들을 줄이기 위해 하나씩 정리하는데이번에는 html에서 jstl로 case 문 사용법을 정리함.핵심은 c:choose, c:when, c:otherwise 조합. JSTL 스펙 c:choose 문서 JSTL 튜토리얼 1) 기본 문법 케이스1 케이스2 기본 케이스위에서부터 내려오다가 첫 번째로 참인 c:when만 실행됨.2) 숫자/코드 값 분기 승인 대기 기타3) 문자열 비교 팁 관리자 사용자 게스트4) 범위 조건(점수 라벨링) = 90}">A = 80}">B = 70}">C D5) include로 화면 쪼개기 2025. 12. 16. c:forEach 사용법 요즘 코드 손보면서 c:forEach 사용법 다시 정리했어. Jakarta EE로 넘어가면서 태그 URI가 바뀐 것도 있고, 실무에서 매번 쓰는 패턴과 함정이 있어서 찾아봄공식 forEach 태그 문서 Jakarta JSTL 3.0 개요 Maven 의존성 (3.0.x)1) 환경별 태그 선언: javax → jakarta 정리톰캣 10+나 Jakarta EE 기반이면 URI가 jakarta.tags.core로 바뀜. 구톰캣(9 이하)이나 레거시 프로젝트는 예전 http://java.sun.com/jsp/jstl/core를 쓸 때가 많다. 의존성도 새로 쓰면 깔끔해진다. 구버전 jstl:1.2는 오래됐고(그래도 레거시에선 여전히 사용), 최신은 jakarta.servlet.jsp.jstl-api 3.x 라인.. 2025. 11. 24. switch-case문 코딩을 하다보면 if-else문을 사용하기에는 조건의 종류가 너무 많은 경우가 생긴다. a라는 변수의 값의 조건이 n개 이상의 분기를 만들어낼 경우가 그러한 경우인데 그때에는 if-else문을 사용하기보다는 switch-case문을 사용하는것이 보다 깔끔하다.switch-case문JavaScript에서 조건을 처리할 때 가장 자주 사용하는 구조는 if-else 문이다. 하지만 조건이 많아지면 코드가 복잡해지고 가독성이 떨어질 수 있어서 대안으로 사용할 수 있는 것이 바로 switch-case 문이다.switch-case문은 하나의 표현식(expression)을 평가하여 여러 가지 값에 대해 조건을 처리한다. 가독성이 뛰어나고 다양한 경우(case)를 쉽게 처리할 수 있기 때문에 실무에서 매우 유용.swi.. 2025. 1. 14. insertAdjacentHTML vs innerHTML 차이점(보안) 1. 개요 insertAdjacentHTML과 innerHTML은 웹 개발에서 DOM 요소를 조작하는 데 사용되는 두 가지 중요한 JavaScript 메서드. 하지만 각 메서드는 작동 방식, 성능, 보안 측면에서 몇 가지 주요 차이점을 가지고 있다. 여기서는 두 메서드의 차이점을 명확하게 비교 분석하여 개발자가 상황에 맞는 적절한 메서드를 선택할 수 있도록 하자. 2. 작동 방식 1) innerHTML ○ 대상 요소의 모든 자식 요소를 제거하고 전달된 HTML 문자열로 완전히 대체 ○ 마치 요소 내부를 빈 캔버스처럼 비우고 새로운 그림을 그리는 것과 유사 ○ 이미 존재하는 이벤트 리스너, 데이터 속성 등이 모두 삭제2) insertAdjacentHTML ○ 전달된 HTML 문자열을 대상 요소의 특.. 2024. 6. 22. 이전 1 다음
