[JavaScript] 파일업로드시 용량 검사하기[JavaScript] 파일업로드시 용량 검사하기

Posted at 2019. 12. 26. 11:25 | Posted in JavaScript & jQuery/JavaScript



참고 : https://zzznara2.tistory.com/617




■ 파일업로드시 용량 검사하기




# 소스코드

<html>

<head>

<title>:: JAVASCRIPT 파일업로드 ::</title>

<script type="text/javascript">

    function imgFileUpload() {


        /// @brief 업로드할 이미지의 크기( Byte )를 구해온다.

        const imgSize = document.getElementById("personImg").files[0].size;


        /// @brief 업로드할 이미지 사이즈의 크기는 4MB 이하로 설정

        const maxSize = 4 * 1024 * 1024;


        /// @brief 이미지

        if(imgSize > maxSize) {


            alert("첨부할 수 있는 이미지 파일은 4MB 이하여야 합니다.");

            document.getElementById("personImg").focus();

            return false;


        } else {


            alert("업로드 가능한 이미지입니다.");


        }

    }

</script>

</head>

<body>

<form enctype="multipart/form-data" id="upFrm" method="post">

    <input type="file" id="personImg" name="personImg" value=""/>

    <input type="button" onClick="imgFileUpload();" value="업로드"/>

</form>

</body>

</html>




# 출력결과 - 수정예정






관련문서 : [JavaScript] 파일업로드시 확장자 검사하기







Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[Flow.Txt] 나이가 들어 변했다는 표현에 대해서(2019.12.23)[Flow.Txt] 나이가 들어 변했다는 표현에 대해서(2019.12.23)

Posted at 2019. 12. 24. 06:16 | Posted in Flow.Txt





요즘 한창 재미있게 보고 있는 드라마가 하나 있다.


얼마전 SBS에서 방영한 스토브리그...


왠지 재미 있을것 같다라는 냄새가 강하게 나서,


그냥 아무런 사전정보 없이 보게 되었다.




그러던중 지난 2019.12.20 방영된 4회 분량에서...


고세혁 팀장의 비리가 밝혀지는 부분에서


좀 계속 와닿는게 있어서 캡쳐를 해본다.






#scene01. 해고 징계를 받고 있는 고세혁 팀장





권경민 상무 : 추잡하게 돈은 왜 받아요.

고세혁 팀장 : 아니 많은 돈(오천만원)도 아니고...

권경민 상무 : 많이 받았음면 내가 잘했다고 칭찬이라도 해주지

                  왜 적은 돈을 받고 이렇게 치사한 소리를 듣습니까

                  마음아프게 아 진짜~

                  나가요





돈 오천만원이 적은돈이라니...


물론 야구선수출신이었고 한 구단의 프렌차이즈 선수였던 사람에게는 그리 큰돈이 아니게 느껴질 수 있겠지만.


뭐랄까... 


또다른 의미로라면, 그정도 돈이면 내가 힘좀 써보겠다 라는 의미로 받았을 돈이었을 텐데.


적은 돈이었을까?


하는 내 1년치 회사 연봉과 맞먹는 금액을 참 그리도 가벼이 말하는거에서...


무언가 씁쓸함이 느껴지기도...







#scene02. 떠나는 고세혁 팀장과 잠시 과거 이야기를 하는 이세영 팀장




사실 더 생각나는 장면은 이장면이다.

(뭐 위에도 좀 크게 와닿았던건 사실인지라...)



고세혁 팀장 : 그땐 뭐 젊었으니까?

이세영 팀장 : 아니요 정의로웠으니까!

                  그때 야구 재미있었죠





짐을 정리하고 떠나는 고세혁 팀장과 운영팀 이세형 팀장의 대화에서...


이세영 팀장이 과거 고세혁 팀장의 선수시절에 보였던.


양심적인 모습을 이야기 하자.


고세혁은 자신은 젊었으니까? 라는 대답을 한다.


여기서 이세영은 정의로웠으니까! 라는 말로 화답한다.



사람은 나이가 들고 경험이 쌓이면 영악해 지는것은 어쩔 수 없는 모습이기도 하다.


그렇다고 선을 위반하는 행위를 그것이 나이들었기에 어쩔 수 없다라는 모습...


개인적으로 참 되기 싫은 모습이다.



변할 수도 있고 흔들릴 수도 있다...


그렇다고 그것을 젊었기 때문에, 혹은 나이들었기 때문에라는 핑계는...


살면서 하지 않기를 바라는 내 모습을 그려 보았다.







아마도 정주행 할 것 같은 드라마이다.


그리고 완결도 되지 않은 상태에서.


내 외장하드에 영구보존이 결정된 드라마 이기도 하다.



세상 모든게 열정하나로 이루어 지는것은 아니지만...


그래도 뜨거운 것이 남아있다면...


이 드라마는 무조건 빠질 수 밖에 없는 그런 드라마 이지 않을까?






Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[API] Bittly API v4 연동, 단축 URL 생성하기 - PHP[API] Bittly API v4 연동, 단축 URL 생성하기 - PHP

Posted at 2019. 12. 23. 19:34 | Posted in API/Bitly




참고 : https://stackoverflow.com/questions/55681871/how-to-shorten-url-using-php-bitly-v4?answertab=active#tab-top





■ Bittly API v4 토큰 발급받기




① 먼저 Bittly 계정이 필요하다.

    가지고 있는 Bittly계정이 존재하지 않다면 https://bitly.com/a/sign_up 페이지에 접속하여 계정을 생성한다.






② 가입된 계정이 준비되었다면 https://app.bitly.com/ 페이지에 접근한다.(로그인 되어 있지 않은 상태로 접근 불가)

    자신의 계정정보가 노출되는 페이지에 접속 했다면 상단 우측의 메뉴 항목을 클릭한다.






③  자신의 계정을 클릭한다.






④ Generic Access Token 카테고리를 클릭한다.






패스워드를 입력하고 클릭하면 화면 하단에 GENERATE TOKEN 버튼이 나타난다.

     GENERATE TOKEN 버튼을 클릭한다.





토큰이 발급된 것을 확인 할 수 있다.










■ Bittly API v4 연동하여 짧은 URL 생성하기





PHP에서 Bittly API와 연동하여 짧은 URL을 생성해 보도록 하겠다.


PHP의 cURL을 사용하였다.




# 소스코드

<?php


/// @brief URI 값 생성

$getUri = "num=1&lang=ko";


/// @brief 접근할 URL 주소 생성

$longUrl = "http://도메인주소?".$getUri;


/// @brief  생성한 URL을 $data['long_url']에 담고 JSON 형태로 변환한다.

$data['long_url'] = $longUrl;

$payload = json_encode($data);


/// @brief BITLY API 접근 URL

$bitApi = "https://api-ssl.bitly.com/v4/bitlinks";


/// @brief 발급받은 BITLY API 토큰

$bitToken = "발급받은 API 토큰 값";


/// @brief CURL 사용

$cURL = curl_init();

curl_setopt($cURL, CURLOPT_URL$bitApi);

curl_setopt($cURL, CURLOPT_CUSTOMREQUEST, "POST");

curl_setopt($cURL, CURLOPT_POSTFIELDS$payload);

curl_setopt($cURL, CURLOPT_RETURNTRANSFER, TRUE);

curl_setopt($cURL, CURLOPT_HTTPHEADER, array(

  "Authorization:Bearer ".$bitToken         // Bearer { $token } (공백필수)

, "Content-Type:application/json"

, "Content-Length:".strlen($payload)

)

);


/// @brief 결과값 조회

$result = json_decode(curl_exec($cURL), TRUE);


echo "<pre>";

print_r($result);

echo "</pre>";


/// @brief 출력결과

if(isset($result['link']) == 1) {

echo $result['link'];

}

?> 




# 출력결과







'API > Bitly' 카테고리의 다른 글

[API] Bittly API v4 연동, 단축 URL 생성하기 - PHP  (0) 2019.12.23

Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[Flow.Txt] 동기가 있는 기업, 그리고 아싸(2019.12.20)[Flow.Txt] 동기가 있는 기업, 그리고 아싸(2019.12.20)

Posted at 2019. 12. 23. 06:00 | Posted in Flow.Txt



현재 재직중인 회사는 중소기업이다.

(여기저기 사업자 나눠논걸 보면 중견기업에 아슬아슬하게 미칠것 같지만)


암튼 나는 이곳에 32이란 나이의 어린 과장(?)으로 입사하였다.




회사에는 동기제도가 있고...


영어이름을 쓰며, 직급을 부르지 않는체제였다.

(과장을 달았는데 왜 과장이라 불리질 못하누... ㅠ.ㅠ)




암튼 크리스마스를 앞둔 어느 금요일...


사내 메신저중 동기들 방에 갑자기 알림이 쏟아졌다.






ㅋㅋㅋㅋㅋㅋ


다른 사람 사진을 참....







어쩌다 보니 인기 자랑 글이 된것같지만...


천성이 아싸이다...


움직이는고 활동하는건 엄청 좋아하지만,


피곤해지고 지치는건 정말 싫어하는





그저 어쩌다 왠지 인기 있는것 같은 일이 생기니까 한번 적어보는...


그치만 회사생활중 5일중 한번은...


주변 사람덕분에 웃을 수 있는거는 좋은일이라고...


그리고 이게 딱 적당한 일이라는 생각이 들며 글을 마무리 해본다.




멋진 짤을 만들고 공유해준 동기들에게 감사를~ ㅎㅎ







Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[JavaScript] 체크박스 전체 선택 - Sample[JavaScript] 체크박스 전체 선택 - Sample

Posted at 2019. 12. 19. 11:34 | Posted in JavaScript & jQuery/JavaScript




■ 전체영역을 선택하는 체크박스 샘플 코드




# 소스코드

<html>

<head>

<title>:: JavaScript 체크박스 ::</title>

<script type="text/javascript">


    // @command 전체선택

    function allCheckedBox(obj) {


        // @brief 선택한 체크박스의 클래스 명칭을 가져온다.

        const termClassobj.getAttribute("class");


        // @brief 선택한 클래스명과 같은 클래스의 갯수

        console.log(document.getElementsByClassName(termClass).length);


        Array.prototype.forEach.call(document.getElementsByClassName(termClass), function(element, index, array) {


            // @brief 엘리먼트의 값 출력

            console.log(element.value);


            // @brief 선택한 클래스의 첫번째 checkbox의 상태가 체크가 되있는 경우

            if(document.getElementsByClassName(termClass)[0].checked == true) {


                // @brief 같은 클래스명을 가진 모든 checkbox의 상태를 선택 완료 처리 한다.

                element.checked = true;

            }


            // @brief 선택한 클래스의 첫번째 checkbox의 상태가 체크가 해제된 경우

            else {


                // @brief 같은 클래스명을 가진 모든 checkbox의 상태를 선택 해제 처리 한다.

                element.checked = false;

            }

        });

    }


    // @command 개별 선택이 이루어진 경우에 전체값 체크의 예외처리

    function eachCheckedBox(obj) {


        // @brief 선택한 체크박스의 상태가 선택해제인 경우

        if(obj.checked == false) {


            // @brief 선택한 체크박스의 클래스 명칭을 가져온다.

            const termClass = obj.getAttribute("class");


            // @brief 첫번째 checkbox의 상태가 체크가 되어있는경우

            if(document.getElementsByClassName(termClass)[0].checked == true) {


                // @brief 첫번째 checkbox의 상태를 체크해제한다.

                document.getElementsByClassName(termClass)[0].checked = false;

            }

        }

    }

</script>

</head>

<body>

     <h1>■ 체크박스 전체 선택 - SAMPLE</h1>


    <!-- @brief 전체의 선택의 경우 반드시 index값이 0인 첫번째에 위치해야 한다. -->

    <label>

        <input type="checkbox" class="neHeros" value="" onChange="allCheckedBox(this);"/>&nbsp;전체

    </label>


    <!-- @brief 개별선택될 체크박스들 -->

    <label>

        <input type="checkboxclass="neHeros" value="D" onChange="eachCheckedBox(this);"/>&nbsp;데몬헌터

    </label>

    <label>

        <input type="checkboxclass="neHeros" value="W" onChange="eachCheckedBox(this);"/>&nbsp;워든

    </label>

    <label>

        <input type="checkboxclass="neHeros" value="K" onChange="eachCheckedBox(this);"/>&nbsp;키퍼 오브 더 그루브

    </label>

    <label>

        <input type="checkboxclass="neHeros" value="P" onChange="eachCheckedBox(this);"/>&nbsp;프리시스 오브 더 문

    </label>

</body>

</html>




# 출력결과







Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[Flow.Txt] 출퇴근 시간은 짧아도 그 무게감은 다를 수 있다(2019.12.18)[Flow.Txt] 출퇴근 시간은 짧아도 그 무게감은 다를 수 있다(2019.12.18)

Posted at 2019. 12. 18. 23:11 | Posted in Flow.Txt





돈나갈곳도, 돈받을곳에서도 스트레스를 많이 받게되는 요즘...


서울시내에 내집마련이라는 목표를 이뤄가는 요즘...




오늘아침 페북에 7년전 사진이 올라왔던 사진이다.


사회년생 초창기 여기저기 프로젝트마다 팔려다니던 SI시절...


도데체 어떻게 출퇴근을 한거였는지...


이때가 힘들었을지 지금이 더 힘들었을지...


생각해 보니 잘 모르겠다...






언제부터인가...


나이는 나보다 한두살 연상, 경력은 나의 절반, 직급은 한단계 아래 분들이 계신다.


회사까지 출퇴근 하는거 20분 부럽네, 이러니 저리니 말씀들 하시는데...


라떼는 말이야...


20분 출퇴근도 피곤한 것을 허허...




그때나 지금이나 더 낳은 앞으로가 되는것에...


7년전에는 절실했었고, 지금은 사람이 참 간사해지네...


라고 생각하는걸 보니 나는 아직 덜 간사하구나...




Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[Concepts] 절차지향언어와 객체지향언어의 프로그래밍[Concepts] 절차지향언어와 객체지향언어의 프로그래밍

Posted at 2019. 12. 18. 19:15 | Posted in Computer Concepts




출처 : IT CookBook, 컴퓨터 사이언스




■ 프로그램 개발 과정



① 사용자 요구사항 분석

 -. 사용자의 필요나 문제가 무엇인지 파악하고 이해하기 위한 단계이다.


② 프로그램 설계

 -. 실제 코딩을 할 때 사용할 논리를 프로그래머가 대략적으로 그려내는 단계로 알고리즘 설계라고 한다.

 -. 알고리즘(Algorithm)이란 문제를 푸는 방법에 대하여 순서를 정하는 것이다.


③ 코딩 및 컴파일

 -. 프로그래밍 언어로 실제 프로그램을 작성하는 과정을 코딩이라고 한다.

 -. 코딩이 끝나면 고급 언어로 작성된 명령문을 기계어로 바꾸는데 이를 컴파일이라고 한다.


④ 디버깅 및 테스트

 -. 디버깅이란 오류를 찾아 제거하는 과정이다.

 -. 모든 오류 점검을 마치면 시험용 데이터를 입력해 테스트한 후 프로그램 개발을 완료한다.










■ 절차 지향 언어의 프로그래밍




1990년대 이전에 나온 대부분의 프로그래밍 언어는 절차 지향 언어이다.


대표적인 예로 파스칼, 코볼, 포트란, 베이직, C언어 등이 있다.


절차 지향 언어의 개념과 특징을 살펴보자.




#01. 절차 지향 언어의 개념



"냉장고에 소고기를 넣는다"는 내용이 다음 그림의 A와 같은 순서로 이루어진다고 가정하자.


이것을 프로그램으로 작성하면 B와 같다.


이와 같은 절차 지향 언어(Procedure Oriented Language)란 프로그램 코드를 순서대로 작성하여 실행하는 언어이다.


   A. 냉장고에 소고기를 넣는 과정

 

   B. 냉장고에 소고기를 넣는 프로그램


     ① 냉장고 문을 연다.

     ② 소고기를 넣는다.

     ③ 냉장고 문을 닫는다.


 

     ① Open 냉장고

     ② Insert 소고기

     ③ Close 냉장고




#02. 구조적 프로그래밍의 이해



절차지향 언어는 명령을 실행하는 순서가 자주 바뀌거나 복잡해지면 운영 및 유지 비용이 많이 든다.


이러한 문제를 해결하기 위해 등장한 개념이 구조적 프로그래밍(Structured Programming)이다.


구조적 프로그래밍은 말 그대로 명령어 실행 순서가 뒤바뀌거나 제어 구조가 복잡해지지 않도록 몇가지 규칙에 따라 프로그램을


체계적으로 관리할 수 있다.



   





위 그림에서 A는 무분별한 goto문과 무한 루프의 사용으로 체계성을 잃어 버린 나쁜 프로그램의 예이다.


프로그램을 이해하기도 어렵거니와 수정하더라도 여러 부분을 고쳐야 하는 문제가 있다.


B는 순차 구조, 선택 구조, 반복 구조를 사용하여 프로그램을 모듈화 시킨 좋은 프로그램의 예이다.


명령문의 처리가 블록으로 모듈화 되어 이해가 쉽고 수정도 수월하다.




#03. 구조적 프로그래밍의 특징


 ① 프로그램을 읽고 이해하기 쉽다.

 ② 프로그램의 개발 및 유지 보수의 효율성이 높다.

 ③ 프로그래밍 규칙이 제공된다.

 ④ 프로그래밍에 대한 신뢰성이 높다.

 ⑤ 프로그래밍에 소요되는 시간과 노력이 감소된다.




#04. 구조적 프로그래밍을 하기 위해 지켜야 할 기준


 ① 프로그램을 구성하는 각 요소를 작은 규모로 조직화 한다.

 ② 단일 입 · 출구(Single Entry, Single Exit) 형태로 작성한다.

 ③ 가능하면 goto문을 쓰지 않는다.

 ④ 순차 구조, 선택 구조, 반복 구조만 쓴다.









■ 객체 지향 언어의 프로그래밍




객체 지향 언어(Object Oriented Language)는 객체 단위로 데이터와 기능을 하나로 묶어 쓰는 언어이다.


1990년대에 본격적으로 등장했고 대표적인 언어로 비주얼 베이직, C++, 자바 등이 있다.




#01. 절차 지향 언어와 객체 지향 언어의 차이점



절차 지향 언어는 변하는 현실세계와 사용자의 요구에 유연하게 대처하지 못한다.


예를 들어 홍길동이라는 사람을 데이터, 그의 행동을 기능이라고 가정해 보자.


홍길동은 밥을 먹은 후 운동하길 원하는데, 절차 지향 언어로 운동을 한 후 밥을 먹게끔 프로그래밍해 놓으면


순서를 바꾸기 위해 프로그램을 수정해야 한다.


그러나 객체 지향 언어로 밥을 먹는 것과 운동을 하는 것을 분리해 놓으면 프로그램을 수정할 필요가 없다.


이처럼 객체 지향 언어는 원하는 기능과 데이터를 따로 정의한 후 필요할 때마다 묶어 사용하기 때문에


프로그램의 운영 및 유지가 쉽다.








위 그림은 절차 지향 언어와 객체 지향 언어의 차이점을 나타낸 것이다.


절차 지향 언어는 데이터와 기능이 별도로 관리되는 언어로 프로그램은 기능을 호출하여 데이터에 접근하고 일을 처리한다.


객체 지향 언어로 기능과 데이터로 묶어 캡슐화시킨 후 메시지를 전달하여 일을 처리한다.




 Class 소고기 {


       소고기 속성( 무게, 부위, 원산지, 가격 );

       소고기(  );


 }


 Class 냉장고 {


       냉장고 속성( 용량, 전력소모량, 제조사, 색상, 가격 );

       냉장고(  );

       Open(  );

       Insert( 소고기 );

       Close(  );

 }





위 코드는 절차 지향 언어를 객체 지향 언어로 프로그래밍 한 것이다.


객체 지향 언어는 절차 지향 언어와 달리 정해진 순서 없이 단지 해당하는 작업만 수행한다.





#02. 객체 지향 언어의 주요 개념




객체 지향 언어가 공통적으로 가지는 요소와 특징에 대해 구체적으로 살펴보자.




01) 클래스와 객체



클래스(Class)란 다른 사물과 구분되는 속성을 가진 객체가 모여 일반화된 범주로 묶인 것이다.


즉, 객체에 대한 일반화된 틀(Template)을 제공한다.


예를 들어 자동차 클래스가 있다면 이 클래스는 내 자동차, A씨의 자동차, B씨의 자동차, C씨의 자동차 등의 객체로 구성될 수 있다.



객체(Object)는 속성(Attribute)는 기능(Function)을 갖는다.


속성은 각 객체가 가진 고유한 특징이고, 기능은 행동패턴을 말한다.


객체는 바로 이 속성과 기능을 함께 캡슐화 한다.


예를들어 "홍길동 차"라는 객체는 색깔, 차종, 크기, 모양, 최고 속도 등의 속성을 가지고,


전진과 후진, 정지, 가속과 감속 등의 기능을 한다.


이러한 속성과 기능은 패키지로 묶여 관리된다.





02) 상속




클래스는 필요한 경우 더 세분해서 각각의 특성별로 관리할 수 있는데 이것을 하위 클래스라고 한다.


하위 클래스는 상위 클래스가 가지는 속성과 기능을 모두 이어받을 수 있다.


이를 상속이라고 한다.



상속(Inheritance)은 객체 지향 언어에서 주로 사용되는 재사용 수단으로 다형성과 밀접한 관계가 있다.


하위 클래스는 상속을 통해 상위 클래스의 속성과 기능을 그대로 재사용할 수 있다.


다음 그림처럼 개와 고양이는 모두  포유동물의 공통 속성을 물려받으므로


공통 속성 부분은 따로 코딩할 필요 없이 포유동물의 속성을 그대로 가져다 쓸 수 있다.



















03) 메시지



메시지(Message)란 객체 간에 전달되는 명령 단위이다.


객체는 자발적으로 행위를 수행하지 않으므로 객체가 특정 기능을 수행하게 하려면 메시지가 전달되어야  한다.


자동차를 움직이려면 운전자가 가속 페달을 밟아 직진하라고 신호를 줘야 하는 것과 같은 맥락이다.


메시지가 다듬어져서 프로그램화되면 메소드로 진화한다.


다음 그림의 객체 간 메시지 교환 과정은 수강 신청을 예로 들어 나타낸 것이다.








사각형은 객체를 의미하며 번호와 표시된 화살표는 객체간의 메시지 송수신을 의미한다.





04) 추상화



추상화(abstraction)란 어떤 객체가 상대하는 다른 객체에 대해 꼭 필요한 부분만 드러내고 나머지 세부적인 사항은 감추는 것이다.


추상환느 객체 지향 프로그래밍에서 매우 중요한 개념으로 이를 얼마난 잘 구현하는냐에 따라 시스템의 품질이 결정된다.


아래 림은 추상화의 개념을 고객센터를 예로 들어 나타낸 것이다.








한 고객이 D사의 노트북을 사용하다 고장이 났다고 가정하자.


일단 고객은 D사의 고객센터로 연락해 수리를 맡길 것이다.


하지만 고객이 직접 수리하는 엔지니어를 상대해야 하는 경우라면 어떤 일이 생길까?


고객은 여러번의 통화를 거쳐 엔지니어를 찾을 것이다.


하지만 엔지니어가 다른 부서로 옮겨 갔거나  연락이 닿지 않는 다면 여러 가지 번거로운 상황을 만날 수 있다.


이 예에서 전자가 추상화한 경우이고 후자가 추상화하지 못한 경우이다.


추상화를 해둔 경우라면 고객은 고객서비스센터의 대표 전화번호 하나만 알면 된다.





05) 캡슐화


객체를 정의한다는 말은 객체가 가진 속성, 기능 다른 객체와의 관계를 정의하는 것이다.


캡슐화(Encapsulation)란 속성과 기능을 하나로 묶되, 추상화하여 객체의 세부 내용을 사용자가 보지 못하도록 은폐하는 것이다.


예를 들어 사용자에게 자동차 엔진(객체)을 설명할 때 세부 동작 원리를 설명하지 않고 어떤 기능을 하는지 정도만 알려주는 것이다.



캡슐화는 제3자가 객체 내부 데이터와 기능을 변조하는 것을 막아주므로 프로그램의 재사용성과 유지 보수성을 향상시킨다.


이러한 이유로 개발자는 캡슐화해서 생기는 불편을 충분히 감내할 만 하다고 여긴다.





06) 다형성


상속에서 언급했던 상위 클래스를 일반화된 클래스라고 하고 하위 클래스를 특정화된 클래스라고 한다.


일반화된 클래스는 어떤 특정화된 클래스 객체를 지칭할 수 있기 때문에 같은 동작을 하지만 다른 성질을 가질 수 있다.


이런 성질을 다형성(Polymorphism)이라 한다.






포유 동물은 일반화된 클래스이고 강아지와 고양이는 구체적인 개념을 가진 틍정화된 클래스이다.


강아지 클래스인 바둑이와 고양이 클래스인 나비는 모두 포유동물 클래스에 속한다.


두 경우 포유동물의 공통 속성인 "동물 소리를 낸다"라는 기능을 한다.


하지만 바둑이는 "멍멍"이라고 소리를 내고 나비는 "야옹"이라고 소리를 낸다.


즉 포유동물 객체가 가진 "동물은 소리를 낸다."라는 기능은 하나라도 어느 객체가 지정되느냐에 따라 그 객체가 내는 소리가 다르다.


이것이 바로 다형성이다. 객체 지향 언어에서 다형성을 이용하면 프로그램의 유연성과 재사용성이 높아진다.





※ 객체 지향 언어로 프로그래밍을하면 유지 보수성이 무조건 좋다?



객체 지향 언어를 사용한다고 해서 절차 지향 언어을 사용할 때보다 무조건 유지보수성이 좋아지는 것은 아니다.


오히려 절차 지향 언어보다 더 복잡해지기도 하고 유지 보수성을 훼손시키기도 한다.


즉 무늬만 객체 지향 프로그래밍이 아닌


객체 지향 언어의 특성이 반영된 설계를 바탕으로 제대로 구현된 프로그램이어야 비로소 효율성도 높아지고 유지 보수도 편해진다.


제대로 된 객체 지향 프로그램을 만들려면 객체 지향 언어의 본질적 개념부터 확실히 이해해야 한다.










Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[CodeIgniter] 폼 검증하기[CodeIgniter] 폼 검증하기

Posted at 2019. 12. 17. 18:36 | Posted in PHP/CodeIgniter




■ 형식 검토



http://www.ciboard.co.kr/user_guide/kr/libraries/form_validation.html


규칙

파라미터

설명

required

NO

 · 검사 대상이 비어있으면 FALSE를 리턴한다.

matches

YES

 · 검사 대상이 파라미터의 값과 일치하지 않을 때 FALSE를 리턴한다.

is_unique

YES

 · 파라미터에서 테이블 및 필드 이름이 유일하지 않다면 FALSE를 리턴한다.

alpha

NO

 · 검사 대상이 알파벳 이외의 문자를 포함할 때 FALSE를 리턴한다.

alpha_numeric

NO

 · 검사 대상이 알파벳이나 숫자가 아닌 문자를 포함할 때 FALSE를 리턴한다.

alpha_dash

NO

 · 검사 대상이 알파벳, 숫자, 밑줄(...), 대시(...) 이외의 문자를 포함할 때 FALSE를 리턴한다.

numeric

NO

 · 검사 대상이 숫자 이외의 문자를 포함할 때 FALSE를 리턴한다.

integer

NO

 · 검사 대상이 정수 이외의 문자를 포함할 때 FALSE를 리턴한다.

decimal

YES

 · 검사 대상이 소수 이외의 문자를 포함할 때 FALSE를 리턴한다.

is_natural

NO

 · 검사 대상이 자연수 이외의 문자를 포함할 때 FALSE를 리턴한다.

   ( 0, 1, 2, 3, ... 등인지 검사 )

is_natural_no_zero

NO

 · 검사 대상이 1 이상의 자연수 이외의 문자를 포함할 때 FALSE를 리턴한다.

   ( 1, 2, 3 ... 등인지 검사 )

valid_email

NO

 · 검사 대상이 유효한 이메일 주소가 아닐 때 FALSE를 리턴한다.

valid_emails

NO

 · 검사 대상이 콤마( , )로 구분된 이메일 주소일 경우에 사용

 · 유효한 이메일 주소가 아닐 때 FALSE를 리턴한다.

   ( 여러개의 이메일을 한꺼번에 검사 )

valid_ip

NO

 · 검사 대상이 유효한 IP 주소가 아닐 때 FALSE를 리턴한다.

 · IP포맷을 검증하기 위해 "ipv4" 또는 "ipv6"를 구별하는 파라미터를 받을 수 있다.



 codeIgniter/system/language/english/form_validation_lang.php

defined('BASEPATH') OR exit('No direct script access allowed');


$lang['form_validation_required'] = "The {field} field is required.";

$lang['form_validation_isset'] = "The {field} field must have a value.";

$lang['form_validation_valid_email'] = "The {field} field must contain a valid email address.";

$lang['form_validation_valid_emails'] = "The {field} field must contain all valid email addresses.";

$lang['form_validation_valid_url'] = "The {field} field must contain a valid URL.";

$lang['form_validation_valid_ip'] = "The {field} field must contain a valid IP.";

$lang['form_validation_valid_base64'] = "The {field} field must contain a valid Base64 string.";

$lang['form_validation_min_length'] = "The {field} field must be at least {param} characters in length.";

$lang['form_validation_max_length'] = "The {field} field cannot exceed {param} characters in length.";

$lang['form_validation_exact_length'] = "The {field} field must be exactly {param} characters in length.";

$lang['form_validation_alpha'] = "The {field} field may only contain alphabetical characters.";

$lang['form_validation_alpha_numeric'] = "The {field} field may only contain alpha-numeric characters.";

$lang['form_validation_alpha_numeric_spaces'] = "The {field} field may only contain alpha-numeric characters and spaces.";

$lang['form_validation_alpha_dash'] = "The {field} field may only contain alpha-numeric characters, underscores, and dashes.";

$lang['form_validation_numeric'] = "The {field} field must contain only numbers.";

$lang['form_validation_is_numeric'] = "The {field} field must contain only numeric characters.";

$lang['form_validation_integer'] = "The {field} field must contain an integer.";

$lang['form_validation_regex_match'] = "The {field} field is not in the correct format.";

$lang['form_validation_matches'] = "The {field} field does not match the {param} field.";

$lang['form_validation_differs'] = "The {field} field must differ from the {param} field.";

$lang['form_validation_is_unique'] = "The {field} field must contain a unique value.";

$lang['form_validation_is_natural'] = "The {field} field must only contain digits.";

$lang['form_validation_is_natural_no_zero'] = "The {field} field must only contain digits and must be greater than zero.";

$lang['form_validation_decimal'] = "The {field} field must contain a decimal number.";

$lang['form_validation_less_than'] = "The {field} field must contain a number less than {param}.";

$lang['form_validation_less_than_equal_to'] = "The {field} field must contain a number less than or equal to {param}.";

$lang['form_validation_greater_than'] = "The {field} field must contain a number greater than {param}.";

$lang['form_validation_greater_than_equal_to'] = "The {field} field must contain a number greater than or equal to {param}.";

$lang['form_validation_error_message_not_set'] = "Unable to access an error message corresponding to your field name {field}.";

$lang['form_validation_in_list'] = "The {field} field must be one of: {param}.";




■ 입력 길이



규칙 

파라미터

설명

min_length

YES

 · 검사 대상의 길이가 파라미터 값보다 작을 때 FALSE를 리턴한다.

max_length

YES

 · 검사 대상의 길이가 파라미터 값보다 클 때 FALSE를 리턴한다.

exact_length

YES

 · 검사 대상의 길이가 파라미터 값과 다를 때 FALSE를 리턴한다.

greater_than

YES

 · 검사 대상이 지정된 값보다 작거나 숫자가 아닌경우 FALSE를 리턴한다.

less_than

YES

 · 검사 대상이 지정된 값보다 크거나 숫자가 아닌 경우 FALSE를 리턴한다.





■ 폼 검증 예


<?php


      // @details 필드의 앞뒤 공백제거 | 필수 필드 | 5자 이상 | 12자 이하 | 필드에서 XSS 공격에 해당하는 내용 제거

      $this->form_validation->set_rules( "username", "Username", "trim | required | min_length[5] | max_length[12] | xss_clean" ); 


      // @details 필드의 앞뒤 공백 제거 | 필수 필드 | passconf 필드와 매칭되는지 체크 | MD5로 변환

      $this->form_validation->set_rules( "password", "Password", "trim | required | matches[passconf] | md5" );


      // @details 필드의 앞뒤 공백 제거 | 필수 필드 | 이메일 형식이 맞는지 체크

      $this->form_validation->set_rules( "email", "Email", "trim | required | valid_email" );


?>











■ 폼 검증 에러메시지를 한글로 표시하기


 codeIgniter/application/config/config.php

<?php

defined('BASEPATH') OR exit('No direct script access allowed');


      // ~~ 이 하 생 략 ~~


/*

|--------------------------------------------------------------------------

| Default Language

|--------------------------------------------------------------------------

|

| This determines which set of language files should be used. Make sure

| there is an available translation if you intend to use something other

| than english.

|

*/

// $config['language'] = "english";

$config['language'] = "korea";


      // ~~ 이 하 생 략 ~~





 codeIgniter/system/language/korean/form_validation_lang.php

defined('BASEPATH') OR exit('No direct script access allowed');


$lang['form_validation_required'] = "{field} 필드가 필요합니다.";

$lang['form_validation_isset'] = "{field} 필드는 반드시 필요한 값입니다.";

$lang['form_validation_valid_email'] = "{field} 필드는 유효한 이메일 주소를 반드시 포함해야 합니다.";

$lang['form_validation_valid_emails'] = "{field} 필드는 모든 유효한 이메일 주소를 반드시 포함해야 합니다.";

$lang['form_validation_valid_url'] = "{field} 필드는 유효한 URL을 포함해야 합니다.";

$lang['form_validation_valid_ip'] = "{field} 필드는 유효한 IP를 포함해야 합니다.";

$lang['form_validation_valid_base64'] = "{field} field must contain a valid Base64 string.";

$lang['form_validation_min_length'] = "{field} 필드의 길이는 최소한 {param} 개의 문자를 넘어야 합니다.";

$lang['form_validation_max_length'] = "{field} 필드의 길이는 최대 {param} 개의 문자를 넘어서는 안됩니다.";

$lang['form_validation_exact_length'] = "{field} 필드의 길이는 정확히 {param} 개의 문자여야 합니다.";

$lang['form_validation_alpha'] = "{field} 필드는 알파벳 문자만 포함할 수 있습니다.";

$lang['form_validation_alpha_numeric'] = "{field} 필드는 알파벳 문자와 숫자만 포함할 수 있습니다.";

$lang['form_validation_alpha_numeric_spaces'] = "{field} 필드는 알파벳 문자와 숫자, 그리고 공백만 포함할 수 있습니다.";

$lang['form_validation_alpha_dash'] = "{field} 필드는 알파벳 문자와 숫자, 밑줄, 대시만 포함할 수 있습니다.";

$lang['form_validation_numeric'] = "{field} 필드는 반드시 숫자만 포함할 수 있습니다.";

$lang['form_validation_is_numeric'] = "{field} 필드는 반드시 숫자만 포함할 수 있습니다.";

$lang['form_validation_integer'] = "{field} 필드는 반드시 정수만 포함할 수 있습니다.";

$lang['form_validation_regex_match'] = "{field} 필드는 형식이 맞지 않습니다.";

$lang['form_validation_matches'] = "{field} 필드가 {param} 필드와 일치하지 않습니다.";

$lang['form_validation_differs'] = '{field} 필드는 {param} 필드와 값이 달라야만 합니다.';

$lang['form_validation_is_unique'] = "{field} 필드는 고유값을 포함해야 합니다.";

$lang['form_validation_is_natural'] = "{field} 필드는 자연수만 포함할 수 있습니다.";

$lang['form_validation_is_natural_no_zero'] = "{field} 필드는 0을 초과하는 자연수만 포함할 수 있습니다.";

$lang['form_validation_decimal'] = "{field} 필드는 10진수여야 합니다.";

$lang['form_validation_less_than'] = "{field} 필드는 {param} 필드보다 작은 값이어야 합니다.";

$lang['form_validation_less_than_equal_to'] = "{field} 필드는 {param} 필드보다 작거나 같은 값이어야 합니다.";

$lang['form_validation_greater_than'] = "{field} 필드는 {param} 필드보다 큰 숫자여야 합니다.";

$lang['form_validation_greater_than_equal_to'] = "{field} 필드는 {param} 필드보다 크거나 같은 숫자여야 합니다.";

$lang['form_validation_error_message_not_set'] = "{field} 필드는 오류 메세지와 일치하여 사용할 수 없습니다.";

$lang['form_validation_in_list'] = "{field} 필드는 다음중 하나여야 합니다. : {param}";







Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[JavaScript] 실시간 타이머(시계) 만들기[JavaScript] 실시간 타이머(시계) 만들기

Posted at 2019. 12. 5. 19:25 | Posted in JavaScript & jQuery/JavaScript




■ 실시간 타이머(시계) 만들기




# 소스코드

<html>

<head>

<title>:: JavaScript 전광판 효과 ::</title>

<script type="text/javascript">

    document.addEventListener("DOMContentLoaded", function() {


        // 시간을 딜레이 없이 나타내기위한 선 실행

        realTimer();


        // 이후 0.5초에 한번씩 시간을 갱신한다.

        setInterval(realTimer, 500);

    });


    // 시간을 출력

    function realTimer() {

const nowDate = new Date();

const year = nowDate.getFullYear();

const monthnowDate.getMonth() + 1;

const datenowDate.getDate();

const hournowDate.getHours();

const minnowDate.getMinutes();

const secnowDate.getSeconds();

document.getElementById("nowTimes").innerHTML = 

                  year + "-" + addzero(month) + "-" + addzero(date) + "&nbsp;" + hour + ":" + addzero(min) + ":" + addzero(sec);

}


        // 1자리수의 숫자인 경우 앞에 0을 붙여준다.

function addzero(num) {

if(num < 10) { num = "0" + num; }

  return num;

}

</script>

</head>

<body>

    <h1>■ 현재시간 : <span id="nowTimes"></span></h1>

</body>

</html>




# 출력결과







Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[JavaScript] 전광판 효과 구현하기[JavaScript] 전광판 효과 구현하기

Posted at 2019. 12. 5. 13:51 | Posted in JavaScript & jQuery/JavaScript




출처① : http://www.dynamicdrive.com/dynamicindex2/crawler/index.htm

출처② : https://balancing425.tistory.com/7

CSS : http://www.dynamicdrive.com/dynamicindex2/crawler/crawler.js





■ 전광판 효과 구현(Marquee 대체)




한때 HTML이 막 유행하던 초창기에 <marquee> 태그가 들어간 싸이트는


뭔가 굉장히 화려한 사이트라고 느껴지던 때가 있었다.


지금은 완전히 묻혔지만.



프로젝트 진행중 marquee와 비슷하지만,


무한 루프처럼 끊이없이 화면에 텍스트 내용이 비춰야 하는

(<marquee> 태그사용시 해당영역에서 모든 내용이 다 사라지고 나서 출력된다.)


상황이 있었기에 필요한 코드를 찾았고 정리해 본다.





# 소스코드

<html>

<head>

<title>:: JavaScript 전광판 효과 ::</title>

<style type="text/css">

    span { margin-right:50px; }

</style>

<script type="text/javascript" src="./crawler.js"></script>

<script type="text/javascript">

document.addEventListener("DOMContentLoaded", function() {

        marqueeInit({

              uniqueid : "mycrawler"

            , style : {

                 "padding" : "2px"

                , "width" : "600px"

                , "height" : "30px"

            }

            , inc : 5                              // 속도

            , mouse : "cursor driven"       // 마우스 사용여부

            , moveatleast : 2                  // 이동속도

            , neutral : 150

            , savedirection : true             // false를 선언하면 마우스 커서가 위치하는 순간 역방향으로 움직인다.

            , random : false                   // 나오는 순서(기본값 : true)

        });

    });

</script>

</head>

<body>

<h1>■ 전광판 효과</h1>

<div class="marquee" id="mycrawler">

    <span>I'm defying gravity And you can't pull me down!</span>

    <span>이제는 나 중력을 벗어나 날아올라 날개를 펼칠거야</span>

    <span>They'll never bring us down!</span>

    <span>아무도 우릴 막지 못할 거야</span>

    <span>Everyone deserves the chance to fly</span>

    <span>그 누구라도 날아오를 자격이 있잖아!</span>

</div>

</select>

</body>

</html>




# 출력결과








Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기