쉽게 쉽게

📌 핵심 요약클릭은 한 곳에서 끝나지 않는다 — 이벤트는 캡처링 → 타깃 → 버블링 3단계로 흐르며, 자식에서 발생한 이벤트가 부모까지 전달된다addEventListener의 세 번째 인자 — 생략하면 버블링 단계에서 실행되고, true를 주면 캡처링 단계에서 먼저 실행된다stopPropagation과 preventDefault는 다른 일을 한다 — 전자는 전파를 막고, 후자는 브라우저 기본 동작을 막는다이벤트 위임 — 자식마다 리스너를 다는 대신 부모에 하나만 달면, 나중에 추가된 요소까지 자동으로 처리된다 목차1 왜 이벤트 흐름을 알아야 할까게시판 목록을 만들다 보면 이런 화면을 자주 만듭니다.행 전체를 클릭하면 상세 페이지로 이동하고, 행 안에 있는 삭제 버튼을 누르면 삭제되는 구조입니다. HTM..

▤ 목차1. 우편번호 API 활용우편번호와 주소를 입력하기 위해서 다음에서 제공하는 API를 활용할 수 있다.https://postcode.map.daum.net/guide Daum 우편번호 서비스우편번호 검색과 도로명 주소 입력 기능을 너무 간단하게 적용할 수 있는 방법. Daum 우편번호 서비스를 이용해보세요. 어느 사이트에서나 무료로 제약없이 사용 가능하답니다.postcode.map.daum.net2. 우편번호 개발1. 라이브러리 다운로드2. 우편번호 양식 고르기다음에서는 다양한 우편번호 양식을 제공한다. 이 중에 원하는 방식을 선택하여 구현하면 된다.1. 팝업을 이용하여 도로명 주소와 지번 주소 모두 보여주기2. 사용자가 선택한 값 이용하기3. iframe을 이용하여 레이어 띄우기4. iframe..

1. 이슈게시글 내용 저장 시 특수문자에 대한 처리가 부족함을 느꼈다.와 같은 특수문자들을 그대로 출력 시 이를 태그로 인식하여 원치 않는 형태로 출력되거나 했다. (빈칸이나 공백이 되거나...)또한 XSS 공격에 취약할 것이란 생각이 들었고 이를 대체문자로 치환하여 저장하는 방식을 알아봤다.2. 특수문자 치환//특수문자 -> escape 치환function escapeHtml( str ) { if (str == null) { return ""; } str = str.replace(//g,">"); str = str.replace(/\"/g,"""); str = str.replace(/\'/g,"'"); str = str.replace(/\n/g,""); ..

이미지 파일 업로드 시 썸네일도 같이 볼 수 있는 Javascript 코드를 구현했다. 1. 이미지 파일 업로드 HTML  속성 중 accept는 어떤 형식의 파일을 허용할 것인지 정해주는 속성이다.audio/*, video/*, image/* 처럼 지정하거나. gif,. jpg,. png처럼 파일 확장자로 지정하는 것도 가능하다.만약 이미지가 여러개라면 multiple 속성을 추가해주면 된다.2. JS 코드 구현이미지 썸네일 1개function setThumbnail(event) { //FileReader 객체생성 var reader = new FileReader(); //파일읽는것을 성공했을때 실행 reader.onload = functio..

2023.03.26 - [개발공부/CS] - 쿠키, 세션, 토큰, 캐시 쿠키, 세션, 토큰, 캐시'혼자 공부하는 얄팍한 코딩 지식'을 읽으며 추가적으로 공부한 내용을 정리한 글입니다. 1. 쿠키와 세션을 사용하는 이유 웹 사이트를 이용할 때, HTTP 프로토콜은 클라이언트가 요청(Request)을 서minsu092274.tistory.com이전에 포스팅했던 글에 추가적으로 JavaScript에서 쿠키를 사용하는 방법에 대해 정리하고자 한다.1. 쿠키(Cookie)란?웹 사이트를 이용할 때, HTTP 프로토콜은 클라이언트가 요청(Request)을 서버에 보내고, 서버는 클라이언트에게 적절한 응답(Response)을 주고 연결(Connection)을 끊는 특성이 있다. (HTTP는 웹에서 이루어지는 모든 데..

"오늘 하루동안 보지 않기" 설정을 포함하고 있는 팝업을 구현하고자 한다.js에서 쿠키를 다루는 방법을 자세히 알아보고자 한다. 1.  팝업창 구현위와같은 간단한 공지창을 구현하는 코드입니다. [시스템 공지] 시스템 공지입니다. 시스템 공지 내용입니다. 이용에 불편을 드려 대단히 죄송합니다. &nbsp&nbsp오늘 하루동안 보지 않기 닫기 2.  JS 쿠키 설정아래는 "오늘 하루동안 보지 않기" 기능을 쿠키로 구현한 코드입니다.쿠키 파라미터 정리1. Name과 Value쿠키는 이름-값 쌍의 형태로 쿠키를 생성하기 위해서는 반드시 이름과 ..

1. 이슈 jQuery를 사용하다 보면 ~로 시작되는 선택자들을 불러올 필요가 생기기도 한다. 이를 알아보고자 한다. 2. ~로 시작하는 선택자 호출 위와 같은 name값을 가진 input 값들이 있다. 이를 호출하기 위해서 $("input[name=user_file_path]").val() 처럼 해야 한다. 단 이걸 개수만큼 n번 반복하기는 번거롭기 때문에 공통적으로 user로 시작하는 name값을 호출하면 된다. $("input[name^=user]").val(); 이외에도 class, id 값도 동일한 방식으로 호출할 수 있다. $("[class^='user']").val(); $("[id^='user']").val(); ~로 시작하는 호출방식 말고도 다양한 호출방식도 존재한다. element [속..

1. 이슈 jquery를 사용하면서 속성을 변경하는 방법에는 attr()과 prop()가 있다. 그러나 상황에 따라 작동되는 방식이 다르다. 자주 사용하는 이 둘의 차이점을 알아보려고 한다. 2. attr()과 prop()의 차이점 있음 없음 $('#yn_1').attr("checked"); // attr로 checked상태인지 물어봄 $('#yn_1').prop("checked"); // prop로 checked상태인지 물어봄 $('#yn_2').attr("checked"); // attr로 checked상태인지 물어봄 $('#yn_2').prop("checked"); // prop로 checked상태인지 물어봄 해당 결과는 이렇다. $('#yn_1').attr("checked"); -> checked..

1. 요청사항 현재 보고 있는 페이지의 크기에 따라 페이징의 형태가 변하도록 구현해 달라는 요청을 받았다 다시 말하면 현재 창의 크기가 1025px를 넘으면(데스크톱) 페이징 개수를 10개로, 그 이하면(모바일) 5개로 구현하는 방식이다. 이를 웹 브라우저로 실행된 창의 크기에 따라 페이징 구현 방식을 다르게 해 달라는 것으로 이해했다. 이를 위해 자바스크립트를 통해 윈도우 창 크기를 구하는 방법에 대해 공부했다. 2. 에러사항 사실 백엔드 개발자라 자바단에서 창 크기를 구하는 방법을 찾고 있었는데, 자바에서 브라우저 창 크기를 구하는 방법을 찾지 못했다. 게다가 단순히 창 크기를 구하기 위해서 자바단을 건드리기보단 프런트단에서 해결하고 싶었다. 대신 자바로 접근장치(pc인지 모바일인지), 운영체제, 브..