투케이2K

557. (javaScript) [유틸 파일] common_json_validate_check - 자바스크립트 typeof 사용해 null 및 json 형식 여부 유효성 확인 수행 본문

JavaScript

557. (javaScript) [유틸 파일] common_json_validate_check - 자바스크립트 typeof 사용해 null 및 json 형식 여부 유효성 확인 수행

투케이2K 2026. 6. 20. 15:17
728x90
반응형

[개발 환경 설정]

개발 툴 : Edit++ / Vscode

개발 언어 : JavaScript

 

[소스 코드]

-----------------------------------------------------------------------------------------
[사전 설명 및 설정 사항]
-----------------------------------------------------------------------------------------

- 개발 환경 : Web


- 개발 기술 : 자바스크립트 / common_json_validate_check / json / typeof


- 사전) 👉 typeof 간략 설명

  >> typeof 는 자바스크립트에서 변수나 값의 데이터 타입을 확인하는 연산자(operator) 입니다.

  >> 기본 사용 방법 : typeof 값 / typeof(값)

  >> typeof "Hello"; -> 결과 "string"

  >> typeof 반환 값 종류 : 

    | 데이터          | typeof 결과   |
    | ------------ | ----------- |
    | "hello"      | "string"    |
    | 100          | "number"    |
    | true         | "boolean"   |
    | undefined    | "undefined" |
    | Symbol()     | "symbol"    |
    | BigInt(10)   | "bigint"    |
    | {}           | "object"    |
    | []           | "object"    |
    | function(){} | "function"  |
    | null         | "object"    |

-----------------------------------------------------------------------------------------





-----------------------------------------------------------------------------------------
[소스 코드]
-----------------------------------------------------------------------------------------

<!DOCTYPE HTML>
<html lang="ko" translate="no">
<head>
    <title>javaScriptTest</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- 반응형 구조 만들기 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

    <!-- Chrome / Edge (Chromium)에서 자동 번역 기능을 완전히 비활성화 -->
    <meta name="google" content="notranslate">

    <!-- 내부 CSS 스타일 지정 -->
    <style>

      html, body {
        width: 100%;
        height: 100%;
        margin : 0 auto;
        padding : 0;
        border : none;
        background-color: #666;
      } 

    </style>





    <!-- [CDN 주소 설정] --> 
    <script src="https://code.jquery.com/jquery-latest.min.js"></script>






    <!-- [자바스크립트 코드 지정] -->
    <script type="module">    


      // -----------------------------------------------------------------
      // ✅ [Window.onload 웹 브라우저 로드 완료]
      // -----------------------------------------------------------------
      window.onload = async function() {
        console.log("[window onload] : [html 최초 로드 및 이벤트 상시 대기 실시] : [start]");

        try {

          common_json_validate_check(null);

          common_json_validate_check('');

          common_json_validate_check( {} );

          common_json_validate_check( {name: 'twok'} );

          common_json_validate_check( `{"name" : "2k"}` );

        }
        catch (exception) {
          console.error("[window onload] : [Exception] : ❌ 예외 상황 발생 : ", exception);

        }

      };






      // -----------------------------------------------------------------
      // ✅ [common_json_validate_check : JSON 형식 여부 체크 수행]
      // -----------------------------------------------------------------
      function common_json_validate_check(data){ // ✅ 공통 : null or JSON

      /*
      common_json_validate_check :  null  /  {"valid":false,"message":"🟥 [Error] : data is null"}
      common_json_validate_check :    /  {"valid":false,"message":"🟥 [Error] : data is null"}
      common_json_validate_check :  {}  /  {"valid":true,"message":"🟦 [Success] Json Type Check"}
      common_json_validate_check :  {name: 'twok'}  /  {"valid":true,"message":"🟦 [Success] Json Type Check"}
      common_json_validate_check :  {"name" : "2k"}  /  {"valid":true,"message":"🟦 [Success] Json Type Check"}
      */

      let result = {valid: false, message: ''}; // 리턴 변수 생성

      try {
        
        if (data !== null && data !== undefined && data !== ''){

          // JSON 형식 체크
          var parseJson = null;
          try {
            parseJson = typeof data === 'string' ? JSON.parse(data) : data; // 인풋 데이터 타입 체크

            result = {valid: true, message: '🟦 [Success] Json Type Check'};
          } catch (err) {
            console.error('Json Parsing Exception : ', err);
            
            result = {valid: false, message: '🟥 [Json Parsing Error] : ' + err.message};
          }

        }
        else {
          result = {valid: false, message: '🟥 [Error] : data is null'};
        }

      }
      catch(error){
        console.error('common_json_validate_check : ', common_validate_check);

        result = {valid: false, message: '🟥 [' + error.name + '] : ' + error.message};
      }

      console.log('common_json_validate_check : ', data, ' / ', JSON.stringify(result));

      return result;
    };


    </script>


</head>


<body>

</body>

</html>

-----------------------------------------------------------------------------------------





-----------------------------------------------------------------------------------------
[참고 사이트]
-----------------------------------------------------------------------------------------

▶️ 64. (javascript/자바스크립트) JsonArray 에 담긴 JsonObject 객체 파싱해 특정 idx (순서) 로 정렬 실시

https://kkh0977.tistory.com/876

https://blog.naver.com/kkh0977/222399966146?trackingCode=blog_bloghome_searchlist


▶️ 187. (TWOK/UTIL) [Web/JavaScript] 자바스크립트 Deep Proxy (재귀 Proxy) JSON 객체 상태 변경 이벤트 감지 - 전체 데이터 변경 감지

https://kkh0977.tistory.com/8768

https://blog.naver.com/kkh0977/224252361170?trackingCode=blog_bloghome_searchlist


▶️ 62. (javascript/자바스크립트) jsonArray to jsonObject 형식 데이터 파싱 수행 실시

https://kkh0977.tistory.com/869

https://blog.naver.com/kkh0977/222398661411?trackingCode=blog_bloghome_searchlist


▶️ 111. (javascript/자바스크립트) json 특정 key 포함 확인 및 데이터 출력 실시 - hasOwnProperty , for in

https://kkh0977.tistory.com/1092

https://blog.naver.com/kkh0977/222461468315?trackingCode=blog_bloghome_searchlist

-----------------------------------------------------------------------------------------
 
728x90
반응형
Comments