불타는 코딩🔥

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

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.

재직 중인 쇼핑몰에 사용되고 있는 슬라이드 로직입니다. (글작성기준)

개발 당시 캐러셀 라이브러리 중 요구하는 기능이 없어 fadeIn fadeOut 슬라이드를 만들어봤습니다.

요구사항

1. 자동 가운데 정렬

2. 반응형 사이즈

3. 하단 탭 올릴 시 자동 페이징

4. fadeIn fadeOut으로 페이지넘김

5. 이미지크기에 따라 높이값변경

6. IE 호환성검사 및 크로스브라우징(Chrome, IE9 기준)

7. 하단탭에 마우스오버시 시 해당 슬라이드 정지 

html(구조), css(표현), javascript(동작)의 조합이 엄청 중요하단 걸 깨우치게 한 과정이었습니다.

웹표준&웹접근성에 따라 다시 작성해야할 필요성을 느꼈고, 개발 후 굉장히 큰 산을 하나 넘은 기분이였습니다.

See the Pen fadeIn Slider 만들기 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를 이용한 여닫이 슬라이딩.

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

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

2019년 1월 9일 기준 메이크샵 서버 인코딩이 euc-kr 이고,

ajax는 기본 인코딩이 utf-8 이니, 서버와 알맞게 euc-kr로 설정해주었음.

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

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

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