개요 이번 글에서는 Fetch API 사용시에 서버에 Request Body를 인식하지 못하는 문제를 해결하는 방법에 대해 이야기해 보려고 한다. 배경 사내에 공유할 JavaScript SDK를 개발하고 테스트하고 있었는데 아래 사진과 같이 API 응답으로 400 Bad Request를 받는 문제가 발생하였다. Request Body도 제대로 작성하였고 JSON 형태로 만들어서 Fetch API Body에 담아 보내줬는데 자꾸 API 서버의 DTO Class Validation에 걸려 400이 떨어졌다. 문제 원인 문제 원인은 개발자 도구 -> 네트워크 탭에서 확인할 수 있었다. API 요청 헤더에 위 사진의 빨간 박스 내용과 같이 Content-Type이 text/plain으로 되어 있어 API 서버쪽..
개요 이번 글은 jQuery로 Select Box Option 태그에 value값을 여러개 주고 가져오는 방법에 대해 이야기해 보려고 한다. 예시 미선택 ${couponList.couponName} 예를들어 Select Box에서 옵션으로 쿠폰을 하나 선택하고 선택된 옵션의 value가 여러개(discountAmount, couponIdn) 필요한 상황일 때 option 태그 안에 value 속성을 여러개 주어 여러개의 value를 가질 수 있도록 할 수 있다. 가져오기 var selectCoupon = function() { var couponName = $("#couponState option:selected").text(); var discountValue = $("#couponState optio..
개요 이번 글에서는 JavaScript로 XSS 공격에 대해 방어하는 방법에 대해 이야기하고자 한다. XSS 공격이란? 크로스 사이트 스크립팅(Cross Site Scripting, XSS)은 공격자가 상대방의 브라우저에 스크립트가 실행되도록 해 사용자의 세션을 가로채거나, 웹사이트를 변조하거나, 악의적 콘텐츠를 삽입하거나, 피싱 공격을 진행하는 것을 말한다. 예를들어 HTML의 input과 같은 입력 태그 안에 스크립트를 집어 넣어 개발자가 의도하지 않은 스크립트로 공격을 하는 것이다. XSS 공격해보기 package com.btest.test; import org.springframework.stereotype.Controller; import org.springframework.web.bind.an..
개요 이번 글은 JavaScript 코드를 수정했는데 수정 사항이 반영되지 않을 때 해결하는 방법에 대해 이야기해 보려고 한다. 해결 방법 Step1. 현재 브라우저에서 F12를 누르고 Network 탭으로 들어가 해당 js 파일 확인하기 이 단계를 통해 에디터에서 작성했던 자바스크립트 코드가 브라우저에는 미적용됨을 확인할 수 있다. Step2. 브라우저 캐시 지우기 2-1. 브라우저 맨 오른쪽 위에 세로로 점 3개 버튼을 클릭한다. 2-2. 더보기 -> 인터넷 사용 기록 삭제를 클릭한다. 2-3. 설정 창이 열리고 기간을 전체 기간으로 설정한 후 인터넷 사용 기록 삭제 버튼을 클릭한다. Step3. 에디터에서 캐시 무효화를 해준다. (IntelliJ) 3-1. 인텔리제이 기준 파일 -> 캐시 무효화로 ..
