디바운싱(Debouncing) 이란?디바운싱은 연속적으로 발생하는 이벤트를 글로벌화해서 마지막 이벤트만 실행되도록 하는 기술이다. 사용자가 빠르게 연속해서 입력할 때, 모든 입력마다 함수를 실행하지 않고 마지막 입력 후 일정시간 대기 후에 함수를 실행하는 방식이다.디바운싱에서 전역 상태관리가 필요한 이유는, 모든 화면 위에서 관리해야 하기 때문이다. 나의 경우에 입력을 완료하고 직후에 실행되는 자동저장 기능을 구현하기 위해 디바운싱을 적용했다. 매 입력마다 저장을 실행하면 API 호출도 너무 많고, 저장되는 동안 새로운 저장이 실행될 수 있기 때문에 디바운싱이 필요하다 판단하였다. 디바운싱이 필요한 사례 1. 검색창 자동완성2. 입력값 유효성 검사3. 자동저장 다음은 검색어 입력의 디바운싱 예제이다..
자바스크립트에서 파일이 이미지 일때만 등록이 가능하도록 구현을 해보자. 리액트라 구조가 아래와 같은데, 자바스크립트 함수로 작성해도 구현되는 구조이다. 파일의 타입은 'image/png' 이러한 방식으로 나타난다. 뒤의 모든 타입을 등록하는 것보다 Image 만 잘라오는 것이 나을 것 같아 들어오는 파일의 확장자는 substring 해줬다. fileTypes 변수에 image 를 등록하여 비교해줬다. 이렇게 구현하면, 나중에 타입 추가하는 것도 쉬울 것 같다. 파일명의 . 뒷자리부터 가져와도 되지만, 나는 파일 타입을 가져오는 것으로 구현했다. const fileTypes = [ 'image' ] const handleFileChange = (event) => { ..
LocalStorage 에 입력한 user_id 를 서버 단의 유효시간과 동일하게 하기 위해 아래와 같은 형태로 아이디, 만료시간을 등록하였다.{"value":"sylee","expireTime":1735917224128} 이 방법의 단점은 해당 localStorage 의 데이터에 접근하기 위해서는 아래 함수를 통해 JSON.parse 후 값을 꺼내줘야 한다는 거다. const getUserId = (key) => { const item = localStorage.getItem(key); if (!item) return null; const {value, expireTime} = JSON.parse(item); return value;} LocalSt..
this의 사용 this는 객체를 다시 호출할때 내가 호출하는 것이 이전에 정의되었던 '그' 객체를 호출하는 것이 맞다고 인식시켜주기 위한 것이다. 'this'의 값은 함수가 어떻게 호출되느냐에 따라 동적으로 결정된다. 함수가 객체의 메서드로 호출될 때: 'this'는 해당 메서드를 호출한 객체를 참조한다. 함수가 일반 함수로 호출될 때: 'this'는 전역 객체인 'window'를 참조한다. (브라우저 환경에서) 함수가 생성자 함수로 호출될 때: 'this'는 생성된 객체를 참조한다. 화살표 함수 내에서: 'this'는 주변 스코프의 'this' 값을 유지한다. 'this'를 사용하여 메서드 내에서 객체의 속성이나 메서드에 접근할 수 있다. this 아래의 예시에서 sayName function은 선언..
댓글 작성 기능은 두가지 방법이 있다. 1. 댓글 테이블을 따로 만들지 않는 방법 2. 댓글 테이블을 따로 만드는방법 이번 포스팅에서는 댓글 테이블을 따로 만들지 않는 방법을 이용한다. 댓글 테이블을 따로 만들지 않는 법 댓글 테이블을 따로 만들지 않는 방법은 댓글도 게시글처럼 올릴 수 있도록 하고 원글번호랑 연결하여 댓글이 원글번호에서만 나오도록 하는 방법이다. 1. 원글번호 객체 추가 private int parent 먼저 기본 보드 Vo에 private int parent;를 추가한다. parent는 댓글에서 원글번호를 알 수 있도록 나타내주는 변수이다. 2. 생성자, getter, setter 선언 이미 만들어진 board의 기능들까지 수정할 필요 없도록 parent 를 포함한 새로운 생성자를 추..
1. AJAX 미사용 join.jsp (id중복체크 버튼) IdCheck.java (객체 생성해 아이디 비교 후 true,false 결과값 도출) String id = request.getParameter("id"); MemberService service = new MemberService(); MemberVo vo = service.getMember(id); 서비스 객체를 생성해서 서비스의 getMember 기능 사용. => 아이디(id) 검색 boolean flag = (vo==null); request.setAttribute("flag", flag); 만약, vo가 null 이면 null == null :true 값이 나온다. 반대의 경우엔 false. flag를 setAttribute로 보낸다...
index.jsp에서 각각의 jsp 파일들을 출력해볼 것이다. 간단하게 임베드 기능을 구현한다고 생각하면 된다. header, menu, tail.jsp KOSTA 사이트 로그인 회원가입 메뉴 내 정보확인 로그아웃 탈퇴 게시판 이미지 게시판 kosta 협회 진흥원 copyrighted by 000 tel:02-1234-4567 주소: 경기도 성남시 분당구 판교동 include 지시자 변하지 않는 페이지는 include 지시자를 사용한다. 포함할 페이지가 고정으로 지정된다. 하나의 페이지에 다른 페이지들을 가져다 쓴다. 지시자 안에 EL표현식은 사용이 불가능하다. include 지시자를 사용하여 왼쪽의 빈 테이블에 include 지시자를 사용하여 내용을 넣어볼 것이다. 캡쳐에는 잘렸지만 밑에 tail.js..
JSON 자바 스크립트에서 객체를 배열하는 방법이다. JSONArray : [ ] 배열 배열은 대괄호를 사용한다. let arr = [ 'aaa', 'bbb', 'ccc' ]; JSONObject : { } 객체 객체는 중괄호를 사용한다. 이때 number와 boolean 은 ""로 묶지 않는다. let obj = { "name" : "aaa", "num" : 1, "tel" : "111", "flag" : true }; 문자열 타입을 객체로 변환 (파싱) 전체가 따옴표로 묶이면 문자열이다. 이러한 문자열 타입을 객체로 변환하는 것을 파싱이라한다. 파싱을 하지 않으면 문자열 하나씩 인식한다. let txt = '{"name":"aaaa","num":1}' //문자열 JSON.parse(txt); 아래 o..
AJAX (비동기 자바스크립트와 xml) 웹 동기 요청 : 요청을 보내면 응답페이지를 받아온다. 전체 페이지가 바뀐다. 웹 비동기 요청 : 응답페이지가 출력된 상태에서 요청을 보낸다. 페이지 이동이 없고 결과로 텍스트, json,xml 데이터를 받는다. 이 데이터를 파싱해서 Dom으로 페이지 일부만 수정한다. 차이 동기 : 새로운 페이지로 결과값을 보낸다. 비동기 : 해당 페이지에서 할당된 공간에 결과값을 보낸다. 서버에서 요청에 대한 응답이 오면 결과 페이지로 이동하는지, 아니면 결과를 텍스트로 받아와 현재 페이지에 결과를 보여주는지에 대한 차이다. 웹 동기 요청 name : 비동기 요청 방법 1. 비동기 request 객체를 생성한다. const xhttp = new XMLHttpRequest(); ..
방명록 만들기, 작성 기능을 구현해보자. 작성자, 글 비밀번호, 내용을 작성하고 작성 버튼을 누르면 새로운 영역에 글이 작성되는 기능이다. 방명록 작성자 글 비밀번호 내용 작성 바디에서 작성자, 비밀번호, 내용 의 값을 사용자에게 받아 "작성" 버튼을 이용해 함수 a() 를 불러낸다. (onclick = "a()") 에서 각 값의 이름으로 접근해 값을 받아 변수에 담는다. 값들을 파라메터에 담아 mkDiv 함수를 불러낸다 mkDiv 는 div 태그에 감싸서 내용을 프린트 하기 위해 만들었다. 새로운 div 태그를 만들어 영역을 추가한다. 새 div 태그에 id를 지정하고 비밀번호를 추가한다. 아이디가 겹치지 않도록 cnt 를 추가한다. 생성된 div 에 출력할 내용을 담은 변수 html 을 초기화해준다...
