본문 바로가기

Front-end12

[JSP] 이전 페이지로 이동한 후 새로고침 history.back() 함수를 이용하면, 캐시에 저장된 이전 페이지를 그대로 보여주어 의도와 다르게 작동할 수 있다. 이런 경우엔, location.href = document.referrer; 를 사용하면 이전 페이지 이동 후 새로고침한 효과를 얻을 수 있다. 2022. 5. 11.
[에러해결] JS - module 내의 함수 연동 에러(Uncaught ReferenceError) 아래와 같이 인라인으로 js로 작성한 함수를 호출했는데 //HTML 뒤로가기 이런 에러가 생겼다. 문제의 원인은 함수를 작성한 자바스크립트 파일을 '모듈'로서 연동한 것이었다. 일반적인 [type="text/javascript"] 호출 방식와 모듈의 차이 중의 하나는 스코프가 다른 것인데, 모듈 내에서 선언한 함수는 해당 모듈 내에서만 사용할 수 있기 때문에, 위와 같은 에러가 발생한 것이다. 새롭게 js파일을 생성하거나, html 내에서 직접 작성하는 것으로 문제를 해결할 수 있다! 2022. 5. 10.
[에러해결] JSP - com.mysql.cj.exceptions.StatementIsClosedException DB를 연동해서 사용할 때, 닫은 connection 객체를 다시 사용하면 발생하는 현상이다. 나의 경우, 데이터 접근 객체(DAO)에서 클래스 정의 맨 앞에 connection객체를 만들어 놓고, 모든 함수 마지막에서 닫았다. 객체 생성은 한번 해놓고 여러번 닫으니 에러가 발생할 수 밖에;; 이를 해결하기 위해 찾아보니 항상 모든 연결을 닫아주어야 에러도 줄고 데이터 누수도 막을 수 있다고 한다 그래서 dao 객체 안의 함수 마다 db에 연결 후 try catch finally를 이용해 db연결을 닫아주었다. public String getDate() { PreparedStatement pstmt = null; ResultSet rs = null; Connection conn = null; String.. 2022. 5. 9.
[에러해결] JSP - useBean의 class 속성을 위한 값 [writing.Writing]은(는) 유효하지 않습니다. 위의 문제는 JAVA version이 맞지 않아 발생할 수 있다. 이클립스를 쓴다면 [프로젝트 - properties - Java Editor - Project Facets]에서 본인에 맞는 자바 버전으로 수정해주면 해결된다! 2022. 5. 9.
[JS] this와 bind() 메서드, 그리고 정적 / 동적 문맥 작업을 하다 this / bind() 대한 이해가 없어 벽에 부닺혀 짧게 나마 얻게 된 내용을 정리하려고 한다. this는 쓰여진 상황에 따라 다르게 동작하는 아주 고약한 놈이다. 그 상황에는 크게 3가지가 있다. 1. 기본 백지 스크립트에서 this를 쓰면 전역개채인 window를 참조한다. 그럼 함수 안에서 this를 쓴다면? 그래도 window를 참조한다. 2. 생성자(constructor) 안 생성자 안에서는 클래스의 맴버를 정의하거나, 클래스의 멤버를 가리킨다. Class A { constructor() { this name = 'gildong' this.getName(); // 같은 클래스 내의 함수에 접근하려면, this를 붙여야함 } getName() { console.log(this.na.. 2022. 5. 5.
[Canvas] 이용자의 브라우저/디스플레이 맞춰 캔버스크기 조정하기 해상도가 높은 레티나 등의 디스플레이의 경우, 브라우저 크기에 비해 디스플레이의 해상도가 커서 앞으로 그릴 그림이 흐릿하게 보이는 현상이 발생함. 이를 해결하기 위해, css 속성 크기 값과 캔버스 객체에 할당된 크기 값의 비율에 따라 스케일이 변경되어 렌더링되는 특징을 활용하여, 캔버스 크기를 아래처럼 바꿀 수 있다. 참조 https://velog.io/@jehjong/JS-Canvas-Animation-Bouncing-Ball [애니메이션 초기작업] 윈도우 창이 변할 때마다 Canvas 크기 새로 지정 2차원 비트맵 그래픽과 애니메이션을 그릴 수 있는 HTML 요소패스, 도형, 글자 등을 그리고 이미지를 추가하는 다양한 함수들이 존재width와 height 속성만 존재 (default width: 1.. 2022. 5. 3.
[에러해결] JSP - Only a type can be imported. [클래스] resolves to a package 이클립스로 JSP 이용 중, 아래의 오류가 발생했다. 클래스를 패키지로 읽어들이는 문제인 듯한데, 열심히 구글링해본 결과 이클립스 상단의 [project] - [clean]을 하니 문제가 해결됐다. 클린은 이클립스가 가지고 있는는 여러 정보를(클래스 정보 포함) 삭제하는 것이라고 한다. 이번 문제는 이클립스의 문제인 걸로,,,! 2022. 5. 2.
[에러해결] JS - focus is not a function 오류 엘리멘트에 다음과 같이 focus()로 포커스를 주고싶었으나, focus is not a function에러가 발생했다. const emailBox = document.querySelector(".email"); const email = emailBox.value; email.focus(); 이유는 포커스를 인풋 엘리먼트가 아니라 그것의 value에게 줬었다.. String에는 focus()메소드가 없다..! 2022. 5. 2.
[에러 해결] innerText함수와 Transition Transition은 css의 속성 변화에 부드러운 효과를 준것인데 js의 innerText는 HTML 요소를 변화시킴으로 Transition 이 적용되지 않는다! 2022. 5. 1.