web dev


[수정]

반응형 웹 관련

  • CSS를 화면별로 LOAD 가능, 미디어쿼리, 미디어타입
    • 미디어 쿼리 : 장치의 특성에 따라 브라우저가 해석해야할 css 코드의 분기 처리
    • 모든 모바일 브라우저가 미디어처리를 지원하지는 않는다.
  • 유동형 그리드(Fuild Grid)

    • 웹화면의 폭을 컬럼으로 나누는것
    • 12 column grid : 화면을 12개의 가로분할
    • 폭을 너비가 아닌 %, em 으로 설정하는 것
    • 즉, 가로폭에 따라서 column 의 가로사이즈가 변한다.
  • 유동형 레이아웃

    • 그리드와 같이 레이아웃이 웹의 크기에 따라 유동적으로 변경
    • 여러가지 패턴이 존재함.
  • 유연한 이미지

    • 이미지 태그의 width 를 퍼센트(%)로 지정
    • 웹 창의 크기게 따라서 보여지는 이미지의 크기가 변경된다.
  • viewport

    • 웹 페이지 로딩시 확대에 대한 설정, meta tag
    • 데스크탑 viewport : 보이는 영역
    • 모바일 viewport : 문서의 크기, 뷰포트를 설정하지 않으면 full browsing 이 된다.

JQuery

$(document).on('click', '#ID_CHK_ALL', function (e) {
    //전체 선택
    $(".checkbox").each(function () {
        $(this).trigger('click');
    });
});

$(document).on('change', '.checkbox', function (e) {
 // todo : implement 
});

React

모바일 관련

Cross-Domain 관련 이슈 정리

  • js 에서 동일 서버 이외의 접근이 막히는 이슈
  • SOP(Same-origin policy) : js 로 다른 웹페이지 접근시, 같은 출처의 페이지만 접근 가능
  • 서로 다른 도메인안에서 js 로 접슥니 또는 다른서버의 ajax 통신을 받을경우.

서브 도메인이 다른 경우

  • a.naver.com => b.naver.com
document.domain = naver.com  

CORS(Cross-Domain Resource Sharing)

  • 요청을 받은 웹서버가 허용 할 경우에 한해서 다른 도메인의 웹페이지 스크립트에서도 자원 접근 및 공유 가능

  • preflight request(사전 요청)

    • 외부 도메인의 경우, 웹 브라우저가 preflight 요청을 먼저 날림.
    • http options 메소드를 요청해서 권한을 확인한다.
access-control-allow-origin  
  • 요청을 받는 서버 파트에서 모든 응답 헤더에 위와 관련된 설정을 해야함.

정리

  • 개발 단계에서 cross-domain 이슈의 해결 : 웹브라우저의 옵션, 플러그인 사용
  • 서버에서 CORS 지원 X : JSONP(JSON with padding)
  • 서버 개발쪽 수정 가능 : 서버 cors 구현

JSONP(JSON with padding)

  • ajax 호출시, 호출후의 응답 데이터는 자바스크립트 객체
  • json 을 리턴하는 부분에서(호출 당하는 쪽) 에서 함수호출(호출하는 쪽)을 같이 리턴
<scirpt src="http://aaa.com/data.json"><script>

=> {'test':1234}
<scirpt src="http://aaa.com/data.json"><script>

=> fn({'test':1234})

<script>  
function fn(data){  
  console.log(data);
}
</script>  
  • Cross-Domain 이슈를 회피할 수 있다.
  • jsonp 관련 구현 예제 :

Reference