불타는 코딩🔥

JSON은 데이터 보관형식 중 한 방법으로

간단하지만 엄격한 구조를 가지고 있습니다.

본인이 읽고, 이해하기 쉽도록 편집해보았습니다.

IE 브라우저는 멍청한건지 엄격한건지 모르겠지만, 심심한 오류를 안내고,

모든 브라우저에서 json 오류를 없애려면 하단의 필수사항을 참고하는 것이 좋습니다.

[1] 필수사항

1. 문자열은 쌍따옴표로 감쌀 것 {"key":"value"}

2. 숫자열는 쌍따옴표 없이 기입

[2] 오류의 근원들

1.  ; <- 세미콜론

2.  , <- 쉼표 

3.  ' <- 작은 따옴표

[3] 사례

1. dataType 을 json 설정하고 실행 후 readySatus: 4 와 Status code: 200ok 를 리턴받고, ajax는 실패로 뜨는 경우

2. dataType 을 text 설정하고 실행 후 readySatus: 4 와 Status code: 200ok 를 리턴받고, 성공으로 했으나 response가 문자열이므로, 데이터로 쓰질 못함

JSON 데이터구조의 정확한 문서 → https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/JSON

JSON 유효성 검사 → https://jsonlint.com/

See the Pen json 구조 by Choidaeboem (@choidaeboem) on CodePen.

직접 만들어본 스크롤 네비게이션

다음엔 퓨어 자바스크립트로 해야겠다.

See the Pen GPYGRO by Choidaeboem (@choidaeboem) on CodePen.

카운트다운 함수 필요할 때 쓰길 바람

chrome, safari, firefox

ie7 부터 edge+ 사용가능(양식은 무조건 지켜져야함. 구 브라우저로 갈수록 !)

See the Pen 카운트 함수 만들기 by Choidaeboem (@choidaeboem) on CodePen.

some 메소드는 Array에 쓸 수 있는 메소드중 하나이다.

some 메소드는 비교하고자 하는 배열( nameArray )에 찾는 값( findValue )이

하나라도 있다면 Boolean 값인 true, 하나라도 없다면 false를 반환한다.

See the Pen Array.prototype.some by Choidaeboem (@choidaeboem) on CodePen.

타도메인에 있는 json을 가져오는 방법 중 하나인 jsonp를 이용해보았다.

html

<button id="ajaxCallBtn" onclick="javascript:void(0)">getData</button>

script

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

<script>

        $(document).ready(function() {

// ajax 구성

            function ajaxCall() {

                $.ajax({

                    url: "yourUrl",

                    dataType: "jsonp",

                    jsonpCallback: "jsonCallback"

                });

            }

            function jsonCallback(json) {

                loadData(json);

            }

            function loadData(json) {

                console.log(json);

            }

// ajaxCall를 실행하기위한 이벤트핸들러

            $("#ajaxCallBtn").on('click', function() {

                ajaxCall();

            });

        });

    </script>

4kb의 작은 정보저장소인 Cookie를 이용한 여닫이 슬라이딩.

일반 브라우저끄기, 일반 새로고침에도 초기값으로 돌아가지않아

반복적인 작업을 계속하지않아도 되어 유용함.

숫자를 문자열로 리턴해주고, 천단위 콤마를 찍어주는 정규식

See the Pen 천단위 콤마 찍기 by Choidaeboem (@choidaeboem) on CodePen.