티스토리

기억보단 기록을

검색하기

블로그 홈

기억보단 기록을

ckprk.tistory.com/m

최고의 개발자를 꿈꾸다

구독자: 1

방명록 방문하기

주요 글 목록

input 텍스트 입력 시 숫자만 허용하기 (onkeyup) input 태그 속성에 onKeyup="this.value=this.value.replace(/[^0-9]/g,'');" 를 추가해주면 된다. 공감수 0 댓글수 0 2022. 4. 1.
jquery 이벤트 처리 on() / off() / one() on( ) jQuery는 특정 요소에 이벤트 바인딩(event binding)하기 위해 .on()를 사용한다. (bind() 대신 사용 가능) 기본형 $("p").on("click", function(){ alert("문장이 클릭되었습니다."); }); 이벤트 핸들러 하나에 이벤트를 여러개 설정 $("p").on("mouseenter mouseleave", function() { $("div").append("마우스 커서가 문장 위로 들어오거나 빠져 나갔습니다. "); }); 또한, 하나의 요소에 여러 개의 이벤트 핸들러를 사용하여 여러 개의 이벤트를 같이 바인딩할 수도 있다. $("p").on({ click: function() { $("div").append("마우스가 문장을 클릭했습니다. "); }.. 공감수 0 댓글수 0 2022. 3. 30.
querySelector() / querySelectorAll() 사용법 querySelector dom 요소를 하나만 선택할 때 사용한다. 해당 요소의 속성을 변경하거나, 자식 / 부모 관계로 Element를 만들 때 주로 사용된다. 예제1 Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor 예제2 Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor querySelectorAll 해당되는 모든 요소를 nodeList(배열)로 반환한다. 예제1 Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor 예제2 Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor 공감수 0 댓글수 0 2022. 3. 29.
innerText / innerHTML 비교 값 가져오기 (innerText vs innerHTML) 이 두 속성은 다루는 값이 text element인지, html element인지에 따라 사용법이 다르다. A B function getInnerText() { const element = document.getElementById('content'); alert(element.innerText); // A // B } function getInnerHTML() { const element = document.getElementById('content'); alert(element.innerHTML); // A // B } element.innerText; 이 속성은 element 안의 text 값들만을 가져옵니다. element.innerHTML.. 공감수 0 댓글수 0 2022. 3. 29.
[React 기초]let, var, const 비교 자바스크립트를 사용할 때 변수를 선언하기 위해 var를 많이 사용한다. 하지만 var는 많은 단점을 가지고 있기 때문에 사용을 지양하는 것이 좋다. 바로 hoising 같은 개념 때문인데 이와 관련해서는 이전에 포스팅해 놓은 아래 글을 참고 바란다. https://ckprk.tistory.com/74?category=971162 [javascript] var hoisting hoisting이란 변수, 함수 선언을 최상단으로 끌어 올린다는 것이다. 즉 런타임시 어떤 변수를 출력하는데 변수선언이 되어있지 않음에도 불구하고 오류가 나지 않는다는 것이다. 예를 들어보자 con ckprk.tistory.com 자 그럼 var, let, const 를 비교해보자 var name = "Sarah"; console.l.. 공감수 0 댓글수 0 2021. 7. 21.
커넥션 풀(Connection Pool) 사용법 커넥션 풀(Connection Pool)이란 데이터베이스와 연결된 커넥션을 미리 만들어서 풀(pool)속에 저장해 두고 있다가 필요할 때에 커넥션을 풀에서 가져다 쓰고 다시 풀에 반환하는 기법을 의미한다. 필자는 tomcat-dbcp 라이브러리에서 제공하는 dbcp 방식을 포스팅 해보겠다. 먼저 준비과정이 필요하다 DB에 연동하여 사용하는 것이므로 이클립스에서 프로젝트 안에 WEB-INF라는 디렉터리안에 lib디렉터리가 보일 것이다. 여기에 각자 사용하는 DB시스템의 jar파일을 복사해 넣어야 한다. 필자는 mariadb client용 2.7.2 버전을 사용하므로 아래와 같이 넣었다. 그리고 두개의 xml파일이 필요하다 첫번째는 프로젝트를 생성하면 자동으로 생성되어지는 web.xml파일이다. 이 파일은 .. 공감수 0 댓글수 0 2021. 6. 3.
tomcat 에러 해결하기 ("Port 8090 required by Tomcat v9.0 Server at localhost is already in use") Port 8090 required by Tomcat v9.0 Server at localhost is already in use 와 같이 같이 포트번호가 이미 사용중이라는 오류 메세지가 뜰 때 해결하는 방법에 대해 포스팅해보겠다 필자는 포트번호를 tomcat 포트번호를 8090으로 사용하고 있다. 이클립스에서 아래 서버창에 Tomcat 서버를 더블클릭한다. 그러면 오른쪽 부근에 아래와같이 보일 것이다 본인이 어떤 포트번호를 사용하고 있는지 확인할 수 있다. cmd 창으로 간다 netstat -a -n -o -p tcp | more 를 입력하여 tomcat이 사용하는 pid를 확인한다. 필자는 8090을 사용하고 있기 때문에 로컬주소에 뒷자리가 8090인 것을 찾고 해당 pid 번호(5092)를 기억한다... 공감수 0 댓글수 0 2021. 6. 3.
쿠키와 세션비교 쿠키 세션 저장위치 브라우저 서버 보안 비교적 보안이 취약 상대적으로 안전 LifeCycle 유효기간이 남아 있으면 브라우저를 종료해도 유지 브라우저 종료시 세션 삭제 속도 상대적으로 빠름 요청마다 서버에서 처리해야하기 때문에 느림 쿠키는 웹브라우저가 보관하는 데이터이다. 웹 브라우저는 웹 서버에 요청을 보낼 때 쿠키를 함께 전송하며, 웹 서버는 웹 브라우저가 전송한 쿠키를 사용해서 필요한 데이터를 읽을 수 있다. 이를 사용하면 웹 서버와 웹 브라우저는 필요한 값을 공유하고 상태를 유지할 수 있다. ex) 아이디 자동완성, 오늘만 보지않기(팝업창), 쇼핑몰에서 로그인 안한 상태에서 장바구니 담기(지워져도 크게 상관없는 것) 세션은 클라이언트의 상태를 저장할 수 있다. 쿠키와의 차이점은 세션은 웹 브라우저.. 공감수 0 댓글수 0 2021. 6. 2.
[javascript] var hoisting hoisting이란 변수, 함수 선언을 최상단으로 끌어 올린다는 것이다. 즉 런타임시 어떤 변수를 출력하는데 변수선언이 되어있지 않음에도 불구하고 오류가 나지 않는다는 것이다. 예를 들어보자 console.log(a); var a = 1; console.log(a); 위의 경우 변수 a를 선언하기도 전에 콘솔 창에 a를 출력하도록 했다. 원래대로라면 오류가 나야 정상이지만 자바스크립트에서 var 로 변수를 선언하게 되면 hoisting이라는 특성 때문에 오류가 나지않는다 즉, 최상단에서 변수선언이 이루어 진 것이다. 때문에 변수 선언문 다음의 콘솔출력은 정상적으로 1이 출력되는 것을 볼 수 있다. 이러한 hoisting은 다른언어를 공부한 사람들에게는 정말 미친(?) 개념이 아닐 수 없다. 이러한 오류를.. 공감수 0 댓글수 0 2021. 5. 27.
[javascript] use strict (strict mode) 순수 바닐라 자바스크립트를 사용할땐 use strict을 선언하는 것이 좋음 자바스크립트 언어는 굉장이 유연한 언어이다. 유연하다는 것은 아주 위험하기도 하다는 것이다. 이는 개발자가 많은 실수를 할 수 있다는 것을 의미한다. 자바스크립트에서는 선언되지 않은 변수의 값을 할당 한다던지 아니면 기존에 존재하는 프로토타입을 변경한다든지 이런 비상식적인 것들은 다른언어를 공부하고 온 개발자들이 봤을 때 미친 것들이다... use strick는 ECMAScript5 에 추가되어 있다. 그래서 use strict를 선언하면 비상식적인 행위들을 할 수 없게된다. 즉 비상식적인 오류들을 줄일 수 있다는 것이다. 공감수 0 댓글수 0 2021. 5. 26.
[javascript] asyn, defer 비교 html로 자바스크립트를 불러올 때 여러가지 방법으로 코드를 가져올 수 있는데 asyn와 defer 속성을 사용하는 것이 이에 해당된다. asyn와 defer말고도 다른 가능한 경우들도 코드를 보면서 차근차근 설명해보겠다. 위 코드에는 html을 쭉 parsing 하다가 script tag가 보이면 main.js를 다운받는다. 이때 parsing을 잠시 멈추고 필요한 자바스크립트 파일을 서버에서 다운받아 실행한 다음에 parsing하는 부분으로 넘어간다 이때 단점은 js파일이 용량이 크면 속도에 많은 지장을 준다. 따라서 사용자의 속도가 느려진다. 이 때문에 script를 head에 넣는것은 좋은 습관이 아니다. 그리고 위코드처럼 body안 끝부분에 script를 추가하는 경우가 있는데 이 경우는 htm.. 공감수 0 댓글수 0 2021. 5. 26.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.