여기 저번에 왔던 것 같은데?

JavaScript 이벤트 전파 개념 및 막는 방법 (click 이벤트 전파 문제) outer-div inner-div 다음 예시와 같이 'outer-div' 안에 'inner-div'라는 요소가 있고, 각 요소에 click 이벤트가 있는 상황에서 'inner-div'를 한 번 클릭하였을 때, 이미지 결과처럼 'click_inner_div' 함수 동작 후 'click_outer_div' 함수도 동작되는 상황을 발견하게 되었는데요. 관련된 내용을 찾아보니 JavaScript에서는 '이벤트 전파(Bubbling, Capturing)'라는 개념이 있었으며, 해당 개념 및 이벤트 전파를 막는 방법에 대해 정리하게 되었습니다. Event 전파 (Capturing, Bubbling) javascript에서 이벤트 ..

javascript - input image width, height 구하는 방법 JavaScript를 사용하여 에 들어온 이미지 파일의 너비와 높이를 구하는 방법이 궁금하여 찾아본 내용입니다. 해당 기능에서 핵심이 되는 것은 javascript에서 사용되는 FileAPI인 'FileReader'인데요. 아래 실제 구현 코드를 통해 내용 살펴보겠습니다. (input type="file"으로 들어온 이미지 파일의 너비와 높이를 구하는 코드) /* FileReader란? 웹 어플리케이션이 비동기적으로 파일의 내용을 읽는 데 사용되는 객체이며, File 혹은 Blob 객체로부터 내용을 읽어옵니다. */ 동작 내용을 살펴보면, 먼저 FileReader 객체 생성 후에 사용되는 'readAsDataURL()' 메..

javascript에서 행의 값이 필요할 때 table.rows 함수와 row.cells 함수를 활용하여 값을 가지고 오는 코드입니다. (rows collection, cells collection) html 및 javascript 코드 중점으로 올리고 css의 경우 포스팅 맨 하단부에 추가해놓을 테니 필요하신 경우 참고 부탁드리겠습니다. First Name Last Name Phone Email Date of Birth Susan Connor (02) 338-2765 jmatman@gmail.com 01/13/1979 ... (생략) (html 코드, 단순한 테이블 구조) (행의 값을 가져오는 javascript 코드) table.rows 함수를 통해 rows collection을 가져올 수 있으며, ..

먼저 클립보드(Clipboad)란, '복사'하거나 '잘라내기'한 텍스트 또는 파일 등을 '붙여넣기' 하기 전까지 임시로 저장해두는 공간입니다. 자바스크립트 클립보드 복사하는 방법에는 document.exeCommand() 함수를 사용하는 방법과 Clipboard API를 사용하는 방법, clipboad.js 라이브러리를 사용하는 방법이 있는데요. document.execCommand() 함수의 경우 (2022년 6월) 현재 정상적으로 동작은 하지만 웹 표준에서 Deprecated 되었기 때문에 공식문서에서도 사용되지 않으며, 대체 방법으로 Clipboad API 사용이 권장되고 있습니다. 하지만 Clipboad API의 경우 Safari 13.1 버전부터 https 환경에서만 지원한다는 아쉬운 점이 있는..

쿠키(Cookie) 개념, 본격적으로 코드를 보기 전에 쿠키(Cookie)의 개념부터 간단하게 살펴보면, HTTP 쿠키는 웹 브라우저(web browser)에 저장되는 4KB 크기를 가진 문자열입니다. 기본적으로 HTTP 프로토콜은 각각의 요청을 독립적인 트랜잭션으로 취급하는 통신 프로토콜로 '무상태(Stateless) 프로토콜' 이라고도 불리는데요. 이때 쿠키는 제한적이긴 하지만 브라우저와 서버 간에 지속적으로 유지할 수 있는 데이터를 제공하는데, 이것이 HTTP 프로토콜에서 상태 관리의 개념으로 볼 수 있습니다. 하나의 예로, 쿠키는 서버에서 받은 로그인 토큰 정보를 웹 브라우저에 저장하고, 다시 서버에 요청을 할 때, 그 정보를 서버에 보냄으로써 사용자를 식별할 수 있게 하는 역할을 합니다. 쿠키를..

구글맵 google map API를 사용하는 방법 및 marker를 추가하고 변경하는 작업을 알아보겠습니다. (사용할 API는 'Maps JavaScript API'입니다.) 진행 과정은 먼저 Google Cloud Platform에서 'Maps JavaScript API' 라이브러리 사용 설정 및 API 키 발급받는 과정 이후 실제 html에 구글맵 API를 사용하는 코드를 적용해보겠습니다. 'Google Cloud Platform 설정' (Google Cloud Platform에 Project가 등록되어있다는 가정하에 진행됩니다.) Google Cloud Platform -> API 및 서비스 -> 라이브러리 -> Maps JavaScript API => 'Maps JavaScript API' 사용 ..

비동기 통신 Ajax 개념 (Asynchronus Javascript And Xml) ajax는 javascript의 라이브러리로, 클라이언트와 서버 간에 XML 데이터를 주고받는 비동기 통신입니다. (reload 없이 데이터를 불러오는 방식) HTTP 프로토콜은 클라이언트와 서버 사이에서 Request를 보내고, Response를 받으면 연결이 끊어지는 무상태성(stateless)를 가지고 있습니다. 그래서 화면의 내용을 갱신하기 위해서는 다시 request를 보내고 response를 받아 전체 페이지를 갱신해야 합니다. 그렇기 때문에 페이지에서 작은 부분을 갱신하기 위해 전체 페이지를 다시 리로드 하는 자원과 시간이 낭비되는 상황이 생깁니다. 이때 ajax를 사용하면 XMLHttpRequest 객체를..

Executing an update/delete query Error Springboot, JPA 를 사용한 프로젝트 개발 중 발생한 에러입니다. FAQ 카테고리를 삭제하면 해당 카테고리에 속하는 FAQ들을 모두 삭제시키는 경우에서 발생했습니다. (삭제라고는 하지만 실제로는 useAt 필드 값을 통해 삭제 여부를 변경 즉, update 하는 로직입니다.) 정상적으로 FAQ Category 삭제 요청이 들어왔을 때 해당 FAQ Category의 useAt 값을 바꾸고, categoryIdx를 통해 해당 카테고리에 속하는 모든 faq의 상태값을 삭제 된 것으로 바꾸는 과정에서 아래와 같이 JPA를 사용한 void method로 update를 실행했습니다. @Override public void deleteA..

프로젝트 중 input을 통해 날짜 외 시간도 함께 받아 오는 것이 필요하여 input type="datetime-loacl"을 사용하였습니다. 그 과정에서 사용한 최솟값 min 설정, 현재값 value 설정 방법에 대해서 알아보겠습니다. min, value를 설정하기 위해서는 YYYY-MM-DDTHH:mm:ss 형식의 시간이 필요합니다. Javascript의 날짜와 시간은 Date 객체로 표현할 수 있는데요. let nowDate = new Date(); console.log('nowDate : ' + nowDate); // nowDate : Sun Aug 08 2021 11:22:13 GMT+0900 (한국 표준시) let toISOStringDate = new Date().toISOString();..