[JavaScript] 읽기 쉽고, 유지보수하기 쉬운 코드 작성하기 - 코딩규약[JavaScript] 읽기 쉽고, 유지보수하기 쉬운 코드 작성하기 - 코딩규약

Posted at 2018. 10. 12. 12:01 | Posted in JavaScript & jQuery/JavaScript
반응형




■ 깔끔한 코드, 작성하고 있는가?




 AJAX가 보금되에 따라 JavaScript에서도 비교적 대규모의 코드를 작성할 기회가 많아졌다. 그에 따라서 프로그램을 단 한번만 작성해서 「자, 이걸로 마지막!」 이라고 하는 일은 점차 없어지게 되었다. 애플리케이션을 운용해 나가는 상황에서 버그가 발견되면 수정하거나 나중에 발생한 요구 안건에 따라 코드를 추가 / 갱신하는 등 프로그램은 항상 변경될 가능성에 노출되어 있다.

 그리고 프로그램을 변경하는 경우에 우선적으로 필요로 하는 것은 「코드를 읽어 이해하는」 분석 작업이다. 이 「읽고 이해하는」이라고 하는 작업은 때로는 「작성하기」보다 큰 이인경우도 있다. 자신이 작성한 코드라 해도 시간이 지난 후에 읽어보게 되면 의외로 뭐가 뭔지 알지 못하는 경우가 많은데, 그것이 타인의 코드라면 더 말할 것도 없다. 그러므로 일상적으로 발생할 수 있는 변경을 생각하면 깔끔한(=읽기 쉬운) 코드를 기술하는것이 중요하다.

 깔끔한 코드라는 것이 어떤 건지 이미지가 좀처럼 떠오르지 않을 수도 있다. 그런 사람은 코딩 규약이라는 것을 추천한다. 코딩 규약이란, 이른바 변수의 명명규칙에서부터 스페이스나 인덴트 넣는 방법, 코멘트 쓰는 법 등 통일성을 취한 코드를 기술하는 데 필요한 룰을 정하는 것이다. 규약에 따라 코드를 기술함으로써 최소한 「더럽지 않은」 코드를 기술할 수 있게 된다.

JavaScript에서도 이러한 코딩 규약이 Mozilla Developer Center 에서 JavaScript Style Guide 로 공개되어 있다.

여기에 정해져 있는 규약이 전부는 아니지만, 한번 훑어보면 좋은 공부가 될 것이다.

다음은 JavaScript Style Guide 에서 제시하고 있는 주요 포인트들이다(어디까지나 규약이며, 구문 규칙이 아닌 점에 주의하길 바란다).


#01. 기본


 -. 1행당 자릿수는 80문자 이하로 할것
 -. 파일의 말미는 개행할 것
 -. 함수나 객체 등의 정의 블록의 전후는 공백 행으로 단락지을것
 -. 문자 코드 세트는 UTF-8



#02. 공백


 -. 인스턴트는 스페이스 2개로 표현할 것(탭은 사용하지 않는다.)
 -. 2항 연산자는 공백으로 단락지을것
 -. 콤마 / 세미콜론, 키워드의 후방에는 공백을 포함할것(다만, 줄 끝의 공백은 불필요)



#03. 명명규칙


 -. 변수, 함수명은 선두 소문자의 camelCase 형식
 -. 정수명은 모두 대문자의 언더스코어 형식
 -. 생성자(객체)명은 선두 대문자의 CamelCase 형식
 -. 프라이비트 멤버는 「 _ 」로 시작할것
 -. 이벤트 핸들러 함수는 [on]으로 시작할것



#04. 그 외


 -. 모든 변수는 선언, 초기화할 것
 -. 변수의 선언이 중복되지 않을 것
 -. 배열, 객체의 생성에는 […], {…} 등의 리터럴 구문을 이용할것
 -. 논리값 true / false와 비교하지 않을것



■ Google 표준의 코딩 스타일




또한 Google이 제공하고 있는 Google JavaScript Style Guide 도 있다. 앞의 것과 중복하지 않는 범위에서 중요한 것을 정리해 두었다.

 · .js 파일의 이름은 소문자로 통일
 · 세미콜론은 생략하지 않는다.
 · 문자열의 괄호에는 「"」쌍 따옴표 보다 「'」홑 따옴표를 우선해 이용한다.
 · 기본 데이터형(String)이나 number, boolean등)이 랩퍼 객체는 사용하지 않는다.
 · 네임스페이스를 이용하고, 글로벌 레벨의 이름은 최소한으로 억제한다.
 · 블록을 나타내는 {...}의 전에 개행은 너지 않는다.
 · eval 함수는 deserialize에서만 이용한다.
 · 빌트인 객체의 프로토타입은 고쳐 써선 안 된다.
 · with 명령은 이용하지 않는다.
 · for...in 명령은 연관배열 / 해시에서만 이용한다.



여기서 나타나고 있는 가이드 라인은 코드를 일기 쉽게 하기만 할 뿐만 아니라 안전한 코드를 기술한다는 의미에서도 중요하다.



반응형
저작자표시

'JavaScript & jQuery > JavaScript' 카테고리의 다른 글

[JavaScript] 자바스크립트에서의 Test Suite  (0) 2018.12.25
[JavaScript] Password 형식 검사하기  (1) 2018.10.24
[JavaScript] email 형식 검사하기  (0) 2018.09.27
[JavaScript] Audio 객체를 이용한 음악 재생  (0) 2018.09.27
[JavaScript] 현재 위치를 지도에 찍어주는 Geolocation  (0) 2018.09.13
//

[jQuery] jQuery Ajax 전송[jQuery] jQuery Ajax 전송

Posted at 2018. 9. 28. 16:40 | Posted in JavaScript & jQuery/jQuery
반응형




#연관내용 : JavaScript AJAX 호출




■ jQuery Ajax 전송예제




-. jQuery Ajax는 비동기 통신을 구현해 주므로 실무에서 많이 사용한다.

-. 해당 포스팅은 무언가의 설명보다 필자가 자주 사용하는 형태를 정리하기위해 작성되었다.




# jQuery.Ajax( ) 메서드의 옵션

옵션 속성 이름

설명

자료형

 async

 · 동기, 비동기를 지정한다.

 Boolean

 complete(jqXHR, textStatus)

 · Ajax 완료 이벤트 핸들러를 지정한다.

 Function

 data

 · 요청 매개변수를 지정한다.

 Object, String

 error(jqXHR, textStatus, errorThrown)

 · Ajax 실패 이벤트 핸들러를 지정한다.

 Function

 jsonp

 · JSONP 매개 변수 이름을 지정한다.

 String

 jsonpCallback

 · JSONP 콜백 함수 이름을 지정한다.

 String, Function

 success(data, textStatus, jqXHR)

 · Ajax 성공 이벤트 핸들러를 지정한다.

 Fuction, Array

 timeout

 · 만료 시간을 지정한다.

 Number

 type

 · 전송방식 'GET' 또는 'POST'를 지정한다.

 String

 url

 · 대상 URL을 지정한다.

 String




# 소스코드① - AJAX 형식으로 데이터 전송

 ajax_get.php

<html>
<head>
<title>:: jQuery Ajax 데이터 전송 ::</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
    function ajaxCommunication(mode) {
        
        jQuery.ajax({
              url : "./ajax_set.php"
            , type : "POST"

            , async : false

            , data : {
                  mode : mode
                , soney : "xperia"
                , apple : "iphone"
                , google : "pixel"
                , microsoft : "surface"
                , samsung : "galaxy"
                , lg : "optimum"
                , xiaomi : "redmi"
            }
            , success : function(json) {
                var obj = JSON.parse(json);
                if(obj.ret == "succ") {
                    jQuery("#smart > tbody").html(obj.tbody);    
                    alert(obj.message);
                }
            }
        });
    }
</script>
</head>
<body>
    <table id="smart" border="1" width="500px" style="border-collapse:collapse;border:1px #000000 solid;text-align:center;">
        <thead>
            <tr>
                <th>제조사</th>
                <th>브랜드</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    <br/>
    <input type="button" onClick="ajaxCommunication('signal');" value="전송"/>
</body>
</html>




# 소스코드② - JSON 형태로 데이터를 출력

 ajax_set.php

<?php
$RetVal = array("ret"=>"fail", "error"=>"", "error_msg"=>"", "message"=>"");
$backUrl = $_SERVER['HTTP_REFERER'];

switch($_POST['mode']) {

    case "signal" :
       

        // $RetVal 라는 배열에 tbody 라는값을 새로 추가한다.


        $RetVal['tbody'] .= "<tr>";
        $RetVal['tbody'] .= "<td>소니</td>";
        $RetVal['tbody'] .= sprintf("<td>%s</td>", $_POST['soney']);
        $RetVal['tbody'] .= "</tr>";
        $RetVal['tbody'] .= "<tr>";
        $RetVal['tbody'] .= "<td>애플</td>";
        $RetVal['tbody'] .= sprintf("<td>%s</td>", $_POST['apple']);
        $RetVal['tbody'] .= "</tr>";
        $RetVal['tbody'] .= "<tr>";
        $RetVal['tbody'] .= "<td>구글</td>";
        $RetVal['tbody'] .= sprintf("<td>%s</td>", $_POST['google']);
        $RetVal['tbody'] .= "</tr>";
        $RetVal['tbody'] .= "<tr>";
        $RetVal['tbody'] .= "<td>MS</td>";
        $RetVal['tbody'] .= sprintf("<td>%s</td>", $_POST['microsoft']);
        $RetVal['tbody'] .= "</tr>";
        $RetVal['tbody'] .= "<tr>";
        $RetVal['tbody'] .= "<td>삼성</td>";
        $RetVal['tbody'] .= sprintf("<td>%s</td>", $_POST['samsung']);
        $RetVal['tbody'] .= "</tr>";
        $RetVal['tbody'] .= "<tr>";
        $RetVal['tbody'] .= "<td>LG</td>";
        $RetVal['tbody'] .= sprintf("<td>%s</td>", $_POST['lg']);
        $RetVal['tbody'] .= "</tr>";
        $RetVal['tbody'] .= "<tr>";
        $RetVal['tbody'] .= "<td>샤오미</td>";
        $RetVal['tbody'] .= sprintf("<td>%s</td>", $_POST['xiaomi']);
        $RetVal['tbody'] .= "</tr>";
        
        $RetVal['message'] = "제조사별 브랜드를 조회하는데 성공하였습니다.";
        $RetVal['ret'] = "succ";


        print json_encode($RetVal);
        return;

    break;

    default :
    break;
}

header("location:".$backUrl);
?>




# 출력결과






반응형
저작자표시

'JavaScript & jQuery > jQuery' 카테고리의 다른 글

[jQuery] YouTube 영상 제어  (0) 2018.10.26
[jQuery] 퍼센트 게이지를 나타내는 Progress Bar  (0) 2018.10.25
[jQuery] data( ) 메서드를 통한 값 읽고. 쓰기  (0) 2018.09.17
[jQuery] jQuery 셀렉터 정리  (0) 2018.09.10
[jQuery] DatePicker 사용시 시작일 / 종료일 입력값 체크하기  (1) 2018.08.20
//

[JavaScript] email 형식 검사하기[JavaScript] email 형식 검사하기

Posted at 2018. 9. 27. 18:30 | Posted in JavaScript & jQuery/JavaScript
반응형




■ email 형식 검사하기




# 소스코드

<html>
<head>
<title>:: JAVASCRIPT e-Mail 형식 검사 ::</title>
<script type="text/javascript">
    function inputeIsEmail(mail) {
       
        // 변수를 선언한다.
        var regExp = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i;

        // 이메일 확인
        // test( ) : 검색한 문자열에 패턴이 있는지 여부를 나타낸다, 문자열이 존재하면 true, 존재하지 않으면 false를 리턴한다.
        if(regExp.test(mail.value) == false) {
            alert("e-mail 형식이 일치하지 않습니다.\n다시 입력하여 주시기 바랍니다.");
            mail.value = "";
            mail.focus();
        } else {
            alert("e-mail 형식에 맞게 입력하였습니다.");
        }
    }
</script>
</head>
<body>
    <input type="email" id="mail" value=""/>
    <input type="button" onClick="inputeIsEmail(mail);" value="검사"/>
</body>
</html>




# 출력결과




반응형
저작자표시

'JavaScript & jQuery > JavaScript' 카테고리의 다른 글

[JavaScript] Password 형식 검사하기  (1) 2018.10.24
[JavaScript] 읽기 쉽고, 유지보수하기 쉬운 코드 작성하기 - 코딩규약  (0) 2018.10.12
[JavaScript] Audio 객체를 이용한 음악 재생  (0) 2018.09.27
[JavaScript] 현재 위치를 지도에 찍어주는 Geolocation  (0) 2018.09.13
[JavaScript] 저장소 사용하기  (0) 2018.09.07
//

[JavaScript] Audio 객체를 이용한 음악 재생[JavaScript] Audio 객체를 이용한 음악 재생

Posted at 2018. 9. 27. 15:47 | Posted in JavaScript & jQuery/JavaScript
반응형




■ 웹 브라우저에서 MP3 음악 틀기




-. HTML5부터는 플래시와 같은 플러그인을 사용하지 않아도 Audio 태그를 사용할 수 있게 되었다.

-. 자바스크립트의 Audio 객체를 이용해서 음악을 플레이해 보자.



# Audio 객체의 속성

속성 이름

설  명

src

 · 재생하려는 음악 파일 경로

volume

 · 음악의 음량

 · 음량조절은 0부터 1까지 소수점 단위로 조절할 수 있다.(예 : 0.5)

currentTime

 · 음악의 현재 위치(초 단위)




# Audio 객체의 메서드

메서드 이름

설  명

play( )

 · 음악을 재생

pause( )

 · 음악을 일시정지




# 정지(STOP) 기능

-. Audio 객체는 정지(STOP) 메서드가 없다.

-. 음악을 정지하고 처음위치로 이동하고 싶을때는 pause( ) 메서드를 사용하고 currentTime 속성을 0으로 바꿔주어야 한다.




# 소스코드

<html>
<head>
<title>:: JAVASCRIPT 음악 재생 ::</title>
<script type="text/javascript">

    // Audio 객체생성 ①
    // var audio = new Audio('./lucky.mp3');

    // Audio 객체생성 ②
    var audio = new Audio();
    audio.src = "./lucky.mp3";


</script>
</head>
<body>
    <input type="button" onClick="audio.play();" value="PLAY"/>
    <input type="button" onClick="audio.pause();" value="PAUSE"/>
    <input type="number" onChange="audio.currentTime=this.value"/>
    <input type="number" onChange="audio.volume=this.value"/>
</body>
</html>




# 출력결과








반응형
저작자표시

'JavaScript & jQuery > JavaScript' 카테고리의 다른 글

[JavaScript] 읽기 쉽고, 유지보수하기 쉬운 코드 작성하기 - 코딩규약  (0) 2018.10.12
[JavaScript] email 형식 검사하기  (0) 2018.09.27
[JavaScript] 현재 위치를 지도에 찍어주는 Geolocation  (0) 2018.09.13
[JavaScript] 저장소 사용하기  (0) 2018.09.07
[JavaScript] Session 데이터 읽고, 쓰기  (0) 2018.09.04
//

티스토리툴바