불타는 코딩🔥

유저의 브라우저에 따라 UI를 수정해야할 때가 있다.

그럴 땐 당황하지않고 navigator.userAgent 로 유저의 브라우저를 확인 후 

정규식을 활용해 브라우저 분기처리를 해주면 아주 유용하게 사용할 수 있다.

See the Pen userAgent를 활용한 브라우저 감지 by Choidaeboem (@choidaeboem) on CodePen.

펄스처럼 파형을 가진 것 같은 시선강탈 버튼입니다.

CSS3의 강력함과 표현력이 빛을 발휘합니다.

hover시엔 pulse를 멈추고 out시엔 pulse가 실행됩니다.

200px 밑으로 내려가면 보입니다!

ps.구 브라우저에선 펄스가 안보이니 당황하지마세요.

See the Pen pulse 파형 버튼만들기 by Choidaeboem (@choidaeboem) on CodePen.

DOMSubtreeModified

많은 브라우저에서 사용 중지되었으며, 무한루프를 유발할 수 있습니다.

따라서 반드시 이벤트 제어가 가능한 상태에서 호환성을 위해서만 사용되어야합니다. 

셀럭터의 하위 오브젝트 변화를 감지합니다.

만약 변화가 있는 곳에 DOMSubtreeModified 를 사용했다면, 무한루프를 유발하여

브라우저가 교착상태가 일어나는 큰 위험이 있으니 주의하시길 바랍니다.

jQuery 라이브러리를 이용하여, 

jQuery(selector).one('DOMSubtreeModified ', function(){}) 을 써보는 것이 바람직하다고 생각합니다. 

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

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.

ajax가 먼저 선언되고 실행됐음에도  하단의  console.log 가 먼저 실행되는 이유는

ajax는 서버와 통신(요청과 응답)을 하기때문에 물리적인 시간이 소요된다. 

Promise는 ie 에서 동작이 안되니 폴리필을 꼭 추가하도록 하자. 

Promise IE 대응 폴리필

<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script>

jQuery(1.7.2)

jQuery(document).ready(function() {

        var ajaxCall = function() {

            console.log('Promise 대기 전');

            return new Promise(function(resolve, reject) {

                console.log('Promise 대기 중');

                jQuery.ajax({

                    url: './ajax-promise.json',

                    data: "data",

                    type: 'get',

                    dataType: 'JSON',

                    contentType: "application/json;charset=utf-8",

                    success: function(res) {

                        //성공시 실행코드 

                        console.log('success 실행', res);

                        return resolve(res);

                    },

                    error: function(err) {

                        //실패시 실행코드

                        console.log('error 실행', err);

                    },

                    complete: function() {

                        //성공, 실패 상관없이 완료 실행하는 코드

                        console.log('complete 실행');

                    }

                }).done(function(res) {

                    //성공시 실행코드 

                    console.log('done 실행', res);

                }).fail(function(err) {

                    //실패시 실행코드

                    console.log('fail 실행', err);

                }).always(function() {

                    //성공, 실패 상관없이 완료 실행하는 코드

                    console.log('always 실행');

                });

            });

        }

        ajaxCall().then(function(data) {

            console.log('Promise 실행', data);

        });

        console.log('콘솔이 먼저 실행됨');

    });

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

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

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.