AHNDOORI (kAUdo)

포스트맨으로는 잘되던게 실제 브라우저에서는 오류가 발생했습니다.

알아보니까 실제로는 OPTIONS라는 메소드로 먼저 호출을 한다고 하는데,

그 이름이 PREFLIGHT라고 하네요.

그래서 오류가 일반적인 CORS오류가 아니고

blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

라고 적혀있습니다.

Access to fetch at 'https://도메인/엔드포인트' from origin 'https://호출한도메인' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

스프링프레임웤(스프링부트)에서 해결하는 방법

1. 파일중에 WebSecurityConfigurerAdapter를 상속받은 클래스를 찾는다.

2. 오버라이드 된 configure(HttpSecurity http)메소드를 편집한다. (없으면 만듦)

@Override
protected void configure(HttpSecurity http) throws Exception {

3. http에 코드 추가

.cors().and()
.requestMatchers(CorsUtils::isPreFlightRequest).permitAll()

* 리액트프론트용 자바스크립트 코드

브라우저에 붙여서 테스트

var Data = {
  METHOD : {
    GET : 'GET',
    POST : 'POST',
    PUT : 'PUT',
    DELETE : 'DELETE'
  },
  TYPE : {
    FILE_UPLOAD : 'Data.TYPE.FILE_UPLOAD'
  },
  load : ( option ) => {
    const accessToken = localStorage.getItem('access.token');
    let parameters = {
      headers : { Authorization : accessToken ? `Bearer ${ accessToken }` : '' },
      method : option.method || Data.METHOD.GET
    };
    switch ( option.method ) {
      case Data.METHOD.POST :
      case Data.METHOD.PUT :
        option.type !== Data.TYPE.FILE_UPLOAD && ( parameters = { ...parameters, headers : { 'Content-Type' : 'application/json' } } );
        break;
      default :
    }
    if ( option.data ) {
      let data;
      if ( option.type === Data.TYPE.FILE_UPLOAD ) {
        data = new FormData();
        for ( let i in option.data ) {
          data.append( i, option.data[ i ] );
        }
      } else {
        data = JSON.stringify( option.data );
      }
      parameters = { ...parameters, body : data };
    }
    window.fetch( option.url, parameters )
      .then( response => response.json() )
      .then(
        ( data ) => {
          if ( data.code === 'S000000' ) {
            option.success && option.success( data.data );
          } else if ( data.hwrErrorCode?.code === 'ERR_SUCCESS' ) {
            option.success && option.success( data.candidates[ 0 ] )
          } else {
            option.error && option.error( data );
          }
        }
      );
  }
};
Data.load({url:'http://localhost/주소'});

다음지도를 한 화면에서 2개이상 띄우는 코드 입니다.

좌표는 당근 2개씩 있어야겠죠.

확대축소 컨트롤이랑 '지도/스카이뷰' 버튼은 함께 쓸수 있습니다.

좌표중 하나는 서울역이고, 다른하나는 광화문 근처입니다.



스크립트:

$(window).load(function(){
	var zoomControl=new daum.maps.ZoomControl();
	var mapTypeControl=new daum.maps.MapTypeControl();

	var longitude='126.980101';
	var latitude='37.571982';
	var mapLongitude='126.978456';
	var mapLatitude='37.571702';

	map=new daum.maps.Map(document.getElementById('map1'),{
		center:new daum.maps.LatLng(mapLatitude,mapLongitude),
		level:4
	});

	map.addControl(zoomControl,daum.maps.ControlPosition.RIGHT);
	map.addControl(mapTypeControl,daum.maps.ControlPosition.TOPRIGHT);
	
	var marker=new daum.maps.Marker({position:new daum.maps.LatLng(latitude, longitude)});
	marker.setMap(map);



	var longitude2='126.9740458';
	var latitude2='37.5542316';

	map2=new daum.maps.Map(document.getElementById('map2'),{
		center:new daum.maps.LatLng(latitude2,longitude2),
		level:3
	});

	map.addControl(zoomControl,daum.maps.ControlPosition.RIGHT);
	map2.addControl(mapTypeControl,daum.maps.ControlPosition.TOPRIGHT);

	var marker2=new daum.maps.Marker({position:new daum.maps.LatLng(latitude2,longitude2)});
	marker2.setMap(map2);
});

<div class="map_area" id="map1" style="width:100%;height:400px;">
<div class="map_area" id="map2" style="width:100%;height:400px;">

누군가 만들어놓은 커스텀 체크박스 스타일 시트 입니다.

사용법은 <input type="checkbox" class="custom-check"........

처럼 쓰면 됩니다.

input[type=checkbox].custom-check{ 
    position: absolute; overflow:hidden; width:1px;height:1px; 
    clip:rect(0 0 0 0);margin:-1px;padding:0;border:0; 
} 

input[type=checkbox].custom-check + label.custom-check{ 
    display:inline-block; 
    padding-left:1em; 
} 

input[type=checkbox].custom-check:checked + label.custom-check:before{ 
    position:absolute;margin-left:-1em; 
    content:'✔'; 
}

나(this)의 상위를 제외한 같은레벨의 백그라운드 컬러를 빨간색으로 변경

$(this).parent().siblings().css("background-color", "red");

나의 상위중 클래스가 .txt_2인 가장 가까운 객체의 백그라운드 컬러를 빨간색으로 변경

$(this).parent().prevAll('.txt_2:first').css("background-color", "red");

div의 lang속성에 안두리를 포함한 태그안에 html추가

$('div[lang*="kaudo"]').append('<p class="title_3">안녕하세요.</p>');

가격으로 된 숫자에 콤마를 찍어주는 스크립트 입니다.

2000 > 2,000

1123000 > 1,123,000

이전 스크립트는 아이폰 사파리에서 작동하지 않습니다.

2011/06/13 - [SCRIPTING/JAVASCRIPT/JQUERY] - [JavaScript/JS] 자바스크립트 숫자에 천단위 콤마, 통화형식으로 변환 toLocaleString

화면안에서 검색할 수 있게 해주는 스크립트 입니다.

DOM방식으로 작동하는 스크립트 소스를 수정한 것입니다.

이 소스는 인풋박스 한개와 버튼 한개를 사용하고 있습니다.

contsrch.js

$('a[name="btnContSrch"]').unbind('click').click(function(){
	var strContSrch=$('input[name="txtContSrch"]').val();
	if(strContSrch==$strContSrchInit || !strContSrch){
		alert('검색어를 입력하세요.');
		$('input[name="txtContSrch"]').focus();
		return false;}
	if(navigator.appName.indexOf("Microsoft")<0){
		if(!window.find(strContSrch,false,false,true,false,false,true)){
		}
		return false;
	}
	bodySearchAll('areaDetail'/*bodySideContent*/,strContSrch,'txtContSrch'/*bdySearch 버튼*/, 'down'/*chkMode*/);
	return false;
});
$('input[name="txtContSrch"]').val($strContSrchInit).bind('focus',function(){
	if($(this).val()==$strContSrchInit) $(this).val('');
}).bind('blur',function(){
	if(!$(this).val()) $(this).val($strContSrchInit);
}).bind('keyup',function(){
	if(event.keyCode!=13) return;
	return $('a[name="btnContSrch"]').click();
	return false;
});

JSON.parse(), JSON.stringify(), JSON.encode()

json2.js

JSON 오브젝트를 생성하거나 스트링형태로 변환하거나 등등등 할때 쓰는 JSON.method들이 있습니다.

다른 브라우저들은 잘 되는데 IE7같은 고물 브라우저에서는 에러가 납니다.

<script type="text/javascript" src="json2.js" ></script>

처럼 첨부해주면 IE7에서도 JSON을 사용할 수 있습니다.

json을 var 변수2=변수1; 라고 코딩하면 복사가 되는게 아니고 이름이 두개가 됩니다.

그래서 JSON.stringify로 문자열로 변환했다가, JSON.parse로 JSON객체로 변화해준 값을 넣어주면 서로 다른 JSON객체가 생깁니다.

자바스크립트로 날짜를 계산하는 예제입니다.

오늘 날짜를 생성한 후에 생성한 날짜 객체에다가 날짜를 변경하여 다시 정의합니다.

<script src="http://code.jquery.com/jquery.min.js"></script>
<script>
$(document).ready(function(){

	// 날짜 객체 생성
	var date=new Date();

	// 날짜에 10일을 더한 후 재정의
	date=new Date(date.getYear(),date.getMonth(),date.getDate()+10);

	// 날짜를 메세지로 표시한다.
	alert(date.getFullYear()+' '+
		((date.getMonth()+1)<10 ? '0'+(date.getMonth()+1) : (date.getMonth()+1))+' '+
		(date.getDate()<10 ? '0'+date.getDate() : date.getDate() ) );

});
</script>

제이쿼리의 온로드에 예제를 작성했습니다.

날짜를 계산하고 얼랏으로 확인한 화면

네이밍 변환 스크립트(정규표현식) 입니다.

데이타베이스에서 많이쓰는 컬럼명 대문자_대문자
예를들면 - SEQ_NUM, ORDER_COST, USER_PHONE_NO...

프로그램 네이밍시 많이쓰는 변수/함수명

예를들면 - userId, tableName...

서로 변환할 수 있는 함수 입니다.

정규표현식이므로 어떤 언어에서도 적용할 수 있습니다.

대문자 언더바구분 형식으로 낙타표기법으로 변환

RESULT: kaudoAhndoori

<script>

var under2camel=function(str){
	return str.toLowerCase().replace(/(\_[a-z])/g, function(arg){
		return arg.toUpperCase().replace('_','');
	});
}

var result=under2camel('kaudo_ahndoori');
document.write(result);

<script>

낙타표기법을 대문자 언더바구분 형식으로 변환

RESULT: AHNDOORI_KAUDO

<script>

var camel2under=function(str){
	return str.replace(/([A-Z])/g, function(arg){
		return "_"+arg.toLowerCase();
	}).toUpperCase();
}

var result=camel2under('ahndooriKaudo');
document.write(result);

<script>

자바스크립트로 소숫점 숫자 표현하는 방법입니다.

Math.round(값) - 값을 반올림합니다.

Math.ceil(값) - 값을 올림합니다.

Math.floor(값) - 값을 내림합니다.

Math.parseInt(값) - 값을 정수로 바꿉니다. (값이 소숫점이 있는 숫자일 경우엔 소숫점 이하를 잘라버립니다. 내림)

10의 n승을 곱하고 반올림 한 결과를 다시 10의 n승으로 나누면

원하는 소숫점 자릴수를 표현할 수 있습니다.

<body/>
<script>

document.body.innerHTML=document.body.innerHTML+'<br/><br/>'+
	'반올림 (소숫점0번째까지)<br/>'+
	'Math.round(45.67890) : '+
	Math.round(45.67890);

document.body.innerHTML=document.body.innerHTML+'<br/><br/>'+
	'올림 (소숫점0번째까지)<br/>'+
	'Math.ceil(45.67890) : '+
	Math.ceil(45.67890);

document.body.innerHTML=document.body.innerHTML+'<br/><br/>'+
	'내림 (소숫점0번째까지)<br/>'+
	'Math.floor(45.67890) : '+
	Math.floor(45.67890);

document.body.innerHTML=document.body.innerHTML+'<br/><br/>'+
	'내림 (소숫점0번째까지)<br/>'+
	'parseInt(45.67890) : '+
	parseInt(45.67890);


document.body.innerHTML=document.body.innerHTML+'<br/><br/>'+
	'소숫점 2번째까지 반올림<br/>'+
	'Math.round(123.4567) : '+
	Math.round(123.4567*100)/100;

document.body.innerHTML=document.body.innerHTML+'<br/><br/>'+
	'소숫점 4번째까지 올림<br/>'+
	'Math.ceil(123.4567) : '+
	Math.ceil(123.4567*10000)/10000;

document.body.innerHTML=document.body.innerHTML+'<br/><br/>'+
	'소숫점 4번째까지 내림<br/>'+
	'Math.floor(123.4567) : '+
	Math.floor(123.4567*10000)/10000;

document.body.innerHTML=document.body.innerHTML+'<br/><br/>'+
	'소숫점 3번째까지 내림<br/>'+
	'parseInt(123.4567) : '+
	parseInt(123.4567*1000)/1000;


document.body.innerHTML=document.body.innerHTML+'<br/><br/>'+
	'소숫점있는 문자열을 숫자(float)로 변환<br/>'+
	'parseFloat("12.3456789") : '+
	parseFloat("12.3456789");


document.body.innerHTML=document.body.innerHTML+'<br/><br/>'+
	'앞에 0이 있는 문자열을 숫자(float)로 변환<br/>'+
	'parseInt("098.765") : '+
	parseInt("098.765");

document.body.innerHTML=document.body.innerHTML+'<br/><br/>'+
	'앞에 0이 있는 문자열을 숫자(integer)로 변환<br/>'+
	'parseInt("011") : '+
	parseInt("011");


document.body.innerHTML=document.body.innerHTML+'<br/><br/>'+
	'문자를 숫자(float)로 변환<br/>'+
	'parseFloat("안두리") : '+
	parseFloat("안두리");

document.body.innerHTML=document.body.innerHTML+'<br/><br/>'+
	'문자를 숫자(integer)로 변환<br/>'+
	'parseInt("ahndoori") : '+
	parseInt("ahndoori");

</script>

체크되면 사용금지, 해제되면 사용가능으로 바뀌는 JQuery 스크립트 입니다.

코드

<SCRIPT>
$(function(){

	$('input[name="test"]').click(function(){
		if($(this).attr('checked')){
			$('input[name="dis1"]').attr('disabled','disabled');
			$('input[name="dis2"]').attr('disabled','disabled');
		}else{
			$('input[name="dis1"]').removeAttr('disabled');
			$('input[name="dis2"]').removeAttr('disabled');
		}
	});

});
</SCRIPT>
<INPUT id=test type=checkbox name=test>
<INPUT id=dis1 value=zzz name=dis1>
<INPUT id=dis2 value=ggg name=dis2>

예제