안녕하세요 워누입니다😀

여러 일이 있어 잠시 블로그 포스팅을 쉬었습니다만 다시 일상으로 복귀하고 회사에 취직되어 

다시 힘내서 복귀해보고자 해요:)

 

오늘은 HTML5, 그 중에서도 가장 기초적이지만 모든 이들이 많이 쓰는 "공간 분할 태그"에 대하여 포스팅하겠습니다!

 

HTML에 익숙치 않은 분들은 "공간 분할 태그"란 말도 이해가 안되거니와

'왜 공간을 분할할까?'라는 질문이 생길 수도 있을 것 같아 간단하게 설명하겠습니다. 

 

"공간 분할 태그"는 말 그대로 웹 페이지의 공간을 분할하기 위한 태그입니다. 

웹 페이지의 공간을 분할하면 우리가 원하는 레이아웃을 만들어내기 위함인데요,

쉽게 말해 더 예쁘게 꾸미고, Javascript를 활용하여 동적인 이벤트를 만들어낼 수도 있습니다!

 

"공간 분할 태그"의 종류는 <div>, <span> 이렇게 두 가지가 있으며,

<div> 태그는 block 형식으로 공간을 분할하고, <span> 태그는 inline 형식으로 공간을 분할합니다. 

 

글로만 보면 당연히 이해가 쉽지 않으니 예시 코드와 실행 결과를 함께 보실까요?

 

<html5 코드>

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
	<div>div 태그 1</div>
	<div>div 태그 2</div>
	<div>div 태그 3</div>
	<span>span 태그 1</span>
	<span>span 태그 2</span>
	<span>span 태그 3</span>
</body>
</html>

 

<실행 결과>

 

실행 결과를 보니 뭔가 다르다는 것을 알 수 있죠?

우선 <div> 태그는 줄바꿈이 되었고, <span> 태그는 줄바꿈이 없습니다!!!

 

그래도 태그의 명확한 차이점을 알아보기 위해 실행 결과 화면에서 개발자 도구를 실행해봅시다!

(키보드 F12 또는 Ctrl+Shift+I을 눌러주세요.)

 

개발자 도구 내 "Elements" 매뉴 클릭 시 보여지는 화면

 

이렇게 개발자 도구가 실행되었으면 맨 처음, "div 태그 1"에 마우스를 올려봅시다.

<div> 태그 구역이 표시된 것을 볼 수 있네요:)

입력한 라인 전체가 파란색으로 지정된걸 볼 수 있습니다❗

 

이번엔 "span 태그 1"에 마우스를 올려보겠습니다.

 

<div> 태그와 다르게 <span> 태그는 글자 크기에 맞게끔만 파란색으로 지정된걸 볼 수 있네요😮

 

정리해보면 <div> 태그는 웹 페이지의 너비만큼 차지하여 공간을 분할하는 태그이고, 

<span> 태그는 본인이 입력한 범위만 공간을 분할하는 태그임을 알 수 있었습니다.

 

위에서 언급한 것처럼 가장 기초적이지만 가장 많이 쓰이는 태그 중 하나에요!

 

❗❗❗❗ 당장 네이버에서 개발자 도구 실행한 다음 ctrl+f를 누르고

div, span을 각각 입력해보시면 아래와 같이 엄청 많이 나옵니다 ❗❗❗❗

 

div 태그 검색 결과(872개)
span 태그 검색 결과(736개)

 

이렇게 자주 사용되는 공간 분할 태그에 대해서 정리해보았습니다!

 

 

다음 포스팅에서는 태그에 의미를 부여하는 시멘틱 태그에 대해서 작성해보겠습니다!

오늘은 여기까지:)

읽어주셔서 감사합니다😊

 

 

 

 

 

 

 

'HTML5&CSS3' 카테고리의 다른 글

HTML 맛보기(링크 걸어주기!)  (0) 2017.10.20

안녕하세요 워누입니다😀

오늘은 자바스크립트를 입문하시는 분들이라면 꼭 알아야 할 상식 중 하나인

var 키워드와 let 키워드의 차이점에 대해서 포스팅해보고자 합니다. 

해당 내용은 가장 기본적이기에 자바스크립트 개발자(신입)로 입사지원 시 기술면접에서 물어보기도 하니,

필요하신 분들에게 도움이 되기를 바라며 글을 시작해보겠습니다!🤗🤗🤗

 

** 차이점만 간략하게 알고 싶으신 분들은 스크롤을 아래로 내려 표만 보셔도 됩니다(☞゚ヮ゚)☞ **

 

var 키워드, let 키워드 모두 아래처럼 변수 선언 시 사용한다는 것은 아실 거라 믿습니다!

 

var num1 = 12;

let num2 = 34;

 

두 키워드가 차이가 없다면 굳이 var, let을 구분하지 않았겠죠?

차이점을 알기 위해서 정확하게 알아두어야 할 개념이 두개 정도 있으니 함께 보면서 알아봅시다! 

 

1. 스코프(유효 범위)

 

특정 변수를 사용할 수 있는 유효 범위를 '스코프'라고 합니다.

흔히 조건문, 반복문, 대괄호 등으로 만들어 지는데요, 아래 간단한 예시로 보여드릴게요!

 

// 전역 스코프

{
    // 스코프 A
    
    {
        // 스코프 A-1
    }
}

{
    // 스코프 B
}

위 예시에서 대괄호로 감싼 부분이 하나의 유효 스코프입니다!

추가로 전역 스코프는 "가장 외곽에 있는 코드를 입력할 수 있는, 전체가 유효한 범위"라는 개념이고 이러한 전역 스코프를 포함해서 스코프의 갯수는 총 4개임을 알수 있습니다..!

 

이 개념을 잘 숙지하시고 아래 예시를 봐주세요!

(다른 html 코드는 생략하고 script 부분만 보여드릴게요!)

<script>

    {
        // 스코프 A
        var num = 12;
    }
    {
        // 스코프 B
        alert(num);
    }

    // 전역 스코프
    alert(num);
	
</script>

var 키워드로 스코프 A에서 선언 후 스코프 B와 전역 스코프에서 alert으로 출력 시

두 명령어 모두 정상적으로 실행되어 아래 이미지가 두번 출력됨을 알 수 있을 것입니다.

즉, var 키워드로 선언한 변수는 다른 스코프에서도 사용할 수 있다는 이야기가 되죠..!

그럼 이번엔 var 키워드를 let 키워드로 바꿔볼까요?

<script>

    {
        // 스코프 A
        let num = 12;
    }
    {
        // 스코프 B
        alert(num);
    }

    // 전역 스코프
    alert(num);
	
</script>

실행하면 정상적으로 alert이 뜨지 않을 건데요,

VS Code에서 실행하여 디버그 콘솔 창을 확인하거나

브라우저 실행 시 개발자 도구 등을 통해 아래와 같은 오류 메세지가 출력됨을 확인할 수 있습니다!

 

VS Code 디버그 콘솔에서 확인한 오류 메세지
크롬 개발자 도구를 통해 확인한 오류 메세지

위 오류 메세지의 뜻은 num이라는 변수명이 정의되지 않았다는 의미인데요, 

이렇게 두가지 테스트를 통해 var 키워드와 let 키워드의 차이점을 확인했으니 한번 정리해보죠!

 

var 키워드 : 전역 스코프 위치에 변수를 선언하는 키워드

let 키워드 : 특정 스코프 내부에서만 유효한 변수를 선언하는 키워드

 

스코프 범위에 따라 구분을 해보았는데요,

이로 인해 let 키워드는 특정 스코프 내부에서만 변수를 사용 후 스코프를 벗어나면 영향을 끼치지 않아 메모리 등 시스템 자원을 적절하게 이용할 수 있는 반면 var 키워드는 그렇지 못하다는 단점이 있습니다🤔

 

위에서 설명드린 var 키워드의 특성을 제대로 이해하지 못하고 사용한다면 다양한 실수를 유발하기도 하는데요,

비동기 함수에서의 문제가 조금 대표적이기 때문에 잠깐 소개해드리도록 할게요!

 

<script>
	
    for(var i=0; i<3; i++){
        setTimeout(() => {
            alert(i);
        }, 1000*i);
    }
    
</script>

위 함수의 실행 결과를 한번 예측해봅시다. 

setTimeOut() 함수는 첫 번째 매개변수에 넣은 코드(함수)를 두 번째 매개변수에 넣은 시간 이후에 실행하게 만드는 함수인데요, 이 코드를 실행하면 0초 후 '0', 1초 후 '1', 2초 후 '2'를 출력할 거라 예상하실 거에요!

 

하지만 실제로 실행을 해보면...

...?

1초 간격을 두고 '3'을 3번 출력하게 되는데요,

1초 후에 i를 출력할 때 i는 이미 반복문을 수행 후 전역 스코프에 '3'으로 저장되었기 때문에 '3'만 3번 출력한 것입니다. 

 

let 키워드를 사용하지 않으면서 위 현상을 방지하기 위해서는 아래와 같이 코드를 수정해서 사용하여야 했습니다. 

 

<script>
	
    for(var i=0; i<3; i++){
        ((i) => {
            setTimeout(() => {
                alert(i);
            }, 1000*i);
        })(i);
    }

</script>

딱 봐도 복잡해보이죠?

함수로 한번 감싸놓고 사용할 변수를 전달하는 방식이다 보니 코드가 지저분해진 것을 볼 수 있어요...😮

 

그래도 실행해보면 아래와 같이 출력은 정상적으로 진행됩니다. 

 

하지만 이것을 let으로 바꾸면...!

<script>
	
    for(let i=0; i<3; i++){
        setTimeout(() => {
            alert(i);
        }, 1000*i);
    }
    
</script>

복잡하지도 않고 실행결과는 처음 예상한 것처럼 0, 1, 2를 순서대로 출력되는 것을 볼 수 있어요!

이런 식으로 var 키워드의 단점을 let 키워드로 보완할 수 있답니다!

 

2. 재선언

재선언이란 같은 이름으로 변수 또는 상수를 다시 선언하는 것을 말하는데요, 

var 키워드는 재선언을 허용하는 반면 let 키워드는 재선언을 허용하지 않습니다. 

 

VS Code를 통해 테스트한 결과를 바로 보여드릴게요!

 

 

var 키워드로 선언한 num1 변수는 재선언해도 문제 없이 넘어갔지만, num2는 재선언 시 이미 선언되었다는 뜻의 오류 메세지가 출력되었다는 것을 볼 수 있었습니다!

 

이렇게 보면 var 키워드 보다는 let 키워드를 쓰는게 좋겠다 생각이 드시겠지만, let 키워드는 ECMAScript 6에서 추가된 개념이기에 기존에 작성된 프로그램들은 대부분 var 키워드를 사용했을 것입니다!

또한 let 키워드는 인터넷 익스플로러에서는 지원하지 않기에 let 키워드를 사용하여 개발한 경우 인터넷 익스플로러에서는 정상적으로 동작하지 않는다는 특이사항이 있답니다.

(어차피 올해 하반기에는 익스플로러 이용 자체가 종료되어서 큰 의미를 두지 않아도 될것 같네요😐)

 

여기까지 두 키워드의 차이점을 알아보았습니다!

글이 너무 기니까 아래 표를 통해 한번 더 정리해보록 할게요:)

 

키워드 유효 범위 재선언 가능 여부
var 전역 스코프 가능
let 특정 스코프 내에서만 사용 불가능

 

사실 이 간단한 내용을 작성하기 위해 위에서 쓸데없이 설명이 길었던 것 같긴 하지만

확실하게 알아두면 좋을 것 같아 정리해보았습니다!

 

자바스크립트 개발 입문자 분들에게 도움이 되길 바라며 여기서 글을 마무리하겠습니다:)

 

 

 

안녕하세요 워누입니다😀

지난 포스팅에 이어 오늘은 전화번호와 이메일 데이터에 대하여 정규표현식을 이용해

유효성을 검사해보는 방법을 포스팅해보겠습니다!

 

1. 전화번호

 

전화번호의 유효성을 검사하려면 먼저 전화번호가 어떤 식으로 구성되어야 하는지 알아야겠죠?

우선 여기서는 우리가 가지고 다니는 휴대전화를 기준으로 설명드리겠습니다. 

 

전화번호 형식은 "010-0000-0000" 이런 식으로 구성되어 있다는 건 모두 아실거에요!

휴대전화는 앞자리가 대부분 010으로 시작을 합니다만, 

예전 폰을 사용하시는 분들은 간혹 011, 016 등도 사용하시더라구요...🤔

 

그래서 앞 세자리는 예전에도 사용했던 번호를 포함해 010, 011, 016, 017, 018, 019까지는 허용하도록 하고,

뒤에 특수기호인 하이픈( - )이 온 다음 중간 자리는 숫자 3자리 또는 4자리이며

다시 뒤에 특수기호 하이픈이 오고 마지막 자리는 숫자 4자리 고정이라는 형식으로 규칙을 정해봅시다. 

 

이렇게 규칙을 정했다면 다음은 패턴을 작성해보아야 겠죠?

 

우선 맨 앞 세자리는 010, 011, 016, 017, 018, 019만 허용하는 패턴은 아래와 같습니다.

(맨 처음에 오는 문자를 의미하는 기호( ^ )를 반드시 붙여줍니다!)

 

^(010|011|016|017|018|019)

 

** OR 연산에 대한 기호로 | 를 사용합니다.

그 다음, 하이픈은 아래와 같이 붙여주시면 됩니다.

 

^(010|011|016|017|018|019)-

 

중간 자리는 숫자가 3자리 혹은 4자리이므로 아래와 같이 패턴을 만들면 되며,

뒤에 하이픈이 한번 더 오므로 같이 붙여줍시다.

 

[0-9]{3,4}-

 

중괄호 {3,4}의 의미는 3, 4 byte를 검사하겠다는 의미입니다. 

 

마지막 자리는 숫자 4자리만 오면 되기에 아래와 같이 패턴을 만들면 됩니다. 

(맨 마지막에 오는 문자를 의미하는 기호( $ )를 반드시 붙여줍니다!)

 

[0-9]{4}$

 

위에서 언급한 규칙을 모두 합쳐서 아래와 같이 패턴을 완성하면 됩니다!

 


:: 전화번호 패턴 ::

 

^(010|011|016|017|018|019)-[0-9]{3,4}-[0-9]{4}$


해당 패턴을 활용하여 아래와 같이 테스트가 가능합니다. 

 

<request.html>

<html>
<head>
 <title> PHP 정규표현식 TEST </title>
</head>
<body>
 <form method="post" action="response.php">
  <table> 
	<tr>
        <th>전화번호 (000-0000-0000 형식에 맞추어 기입하세요.)</th>
        <td><input type="text" name="PhoneNo" value=""></td>
    </tr>
  </table>
  <input type="submit" value="Submit" />
 </form>
</body>
</html>

<response.php>

<?php 

//전달받은 데이터를 변수로 저장 
$phoneNo = $_POST['PhoneNo'];

//전화번호 데이터에 대한 패턴 작성
$phonePattern = '/^(010|011|016|017|018|019)-[0-9]{3,4}-[0-9]{4}$/';


//패턴 체크(유효성 검사)
if(preg_match($phonePattern, $phoneNo, $match)){
	echo "전화번호 : ".$phoneNo."<br>";
	var_dump($match);
	echo "<br>";
} else {
	echo "올바른 전화번호가 아닙니다. 다시 입력해 주세요. <br>";
}


?>

 

<테스트>

request.html : 데이터 입력
response.php : 결과

2. 이메일

 

이번엔 이메일의 유효성 검사를 정규표현식을 이용하여 검사해보도록 합시다!

이메일은 보편적으로 "ID@domain" 형식으로 구성되어 있는데요, 

ID를 영문 소문자, 숫자만 허용하는지 혹은 특수기호를 사용할 수 있는지 등 생성 규칙이 개발자 마음대로인지라,

정규표현식도 일단은 정하기 나름인 것 같습니다. 

우선 여기서는 ID의 허용 범위를 영문(소문자, 대문자 모두 포함), 숫자, 하이픈, 언더바( _ )까지만

포함하는 것으로 정하고 패턴 규칙을 만들면 아래와 같습니다. 

 

^[a-zA-Z0-9]{1}[a-zA-Z0-9\-_]

 

대괄호 [] 안에서 하이픈은 범위를 정하는 기호이다 보니 문자 그대로를 사용하려면 백슬래시( \ )를 사용해야 합니다.

.

아이디 다음에는 @가 고정값이므로 아이디 패턴 뒤에 붙여주면 됩니다. 

@ 다음에는 gmail.com이나 naver.com처럼 도메인 형식이 와야 하죠?

 

위에서 언급한 gmail이나 네이버(naver)처럼 간단하면 좋겠지만

가끔씩 하이픈이 있는 도메인을 보신 적이 있으실 거에요..!

도메인은 영문 소문자와 숫자 그리고 하이픈이 포함될 수 있지만

하이픈은 첫글자와 마지막에는 위치할 수가 없다는 특징이 있습니다. 

 

이러한 규칙들을 준수하여 점( . )을 포함한 도메인의 앞부분은 아래와 같이 패턴을 작성할 수 있습니다. 

 

[a-z0-9]{1}[a-z0-9\-]+[a-z0-9]{1}\.

 

도메인의 뒷부분은 com, net, io, co.kr 등 여러 가지가 있습니다. 

이것 역시 처음과 끝에 점이 위치하지 않아야 하고 이외에는 영문 소문자로만 구성되어야 하는 규칙을 준수하여

아래와 같이 패턴을 작성할 수 있습니다.

 

(([a-z]{1}[a-z.]+[a-z]{1})|([a-z]+))$

 

위에서 작성한 규칙들을 모두 하나로 합쳐보도록 하죠!


:: 이메일 패턴 ::

 

^[a-zA-Z0-9]{1}[a-zA-Z0-9\-_]@[a-z0-9]{1}[a-z0-9\-]+[a-z0-9]{1}\.(([a-z]{1}[a-z.]+[a-z]{1})|([a-z]+))$


....

상당히 길긴 하군요..

샘플 소스도 함께 보도록 하죠🤨

 

<request.html>

<html>
<head>
 <title> PHP 정규표현식 TEST </title>
</head>
<body>
 <form method="post" action="response.php">
  <table> 
	<tr>
        <th>이메일</th>
        <td><input type="text" name="Email" value=""></td>
    </tr>
  </table>
  <input type="submit" value="Submit" />
 </form>
</body>
</html>

<response.php>

<?php 

//전달받은 데이터를 변수로 저장 
$email = $_POST['Email'];

//이메일 데이터에 대한 패턴 작성
$emailPattern = '/^[a-zA-Z0-9]{1}[a-zA-Z0-9\-_]+@[a-z0-9]{1}[a-z0-9\-]+[a-z0-9]{1}\.(([a-z]{1}[a-z.]+[a-z]{1}[a-z]+)|([a-z]+))$/';


//패턴 체크(유효성 검사)
if(preg_match($emailPattern, $email, $match)){
	echo "이메일 : ".$email."<br>";
	var_dump($match);
	echo "<br>";
} else {
	echo "올바른 이메일이 아닙니다. 다시 입력해 주세요. <br>";
}

?>

<테스트>

request.html : 데이터 입력
response.php 데이터 결과

 

위와 같이 전화번호와 이메일을 정규표현식을 이용해서 검증하는 방법을 알아보았는데요, 

사실.. PHP에서는 사실 이메일을 굳이 정규표현식으로 검증하지 않아도 됩니다. 

filter_var()이라는 함수를 이용해서도 이메일을 아래와 같이 검증을 할 수 있거든요!

 

<response.php>

<?php 

//전달받은 데이터를 변수로 저장 
$email = $_POST['Email'];

//이메일 유효성 검사
if(filter_var($email, FILTER_VALIDATE_EMAIL)){
	echo "이메일 : ".$email."<br>";
} else {
	echo "올바른 이메일이 아닙니다. 다시 입력해 주세요. <br>";
}

?>

위 소소코드로 다시 적어서 테스트하셔도 똑같이 이메일을 검증할 수 있습니다. 

filter_var() 함수에 대하여는 기회가 되면 따로 포스팅 해보도록 하겠습니다!

 

정규표현식은 PHP 외 다른 언어에서도 자주 쓰이니 알고 계시면 좋습니다만.. 

저는 아직까지는 전 회사에서 써먹어본 경험은 없네요🙄🙄🙄

 

정규표현식에 대하여 문법이나 예시, 개념 등을 자세히 알고 싶은 분들 혹은 실무에서 사용하셔야 되는 분들은

이전 포스팅에서도 언급했지만 위키 백과에서도 자세히 나와있으니 참고하시면 도움이 될 거에요!

 

https://ko.wikipedia.org/wiki/%EC%A0%95%EA%B7%9C_%ED%91%9C%ED%98%84%EC%8B%9D

 

읽어주신 분들께서 도움이 되었기를 바라며,

오늘 포스팅은 여기서 마치도록 하겠습니다 ㅎㅎ

 

 

안녕하세요 워누입니다😀

오늘은 PHP에서 정규표현식을 사용하여 값의 패턴(유효성)을 체크하는 방법을 포스팅하고자 합니다.

 

정규표현식(혹은 정규식)이란 특정한 규칙을 가진 문자열의 집합을 표현하는 데 사용하는 형식 언어를 말합니다. 

즉, 값이 한글로만 구성되어 있는지, 영어로만 구성되어 있는지 혹은 어떤 특별한 패턴을 가지고 있는지 등에 대해 체크하기 위해 사용할 수 있으며, 이를 이용해 이름이 한글로만 이루어졌는지, 전화번호가 올바르게 입력되었는지 등을 검사할 수 있습니다.

 

정규표현식에 대한 자세한 내용은 위키에 개념, 역사, 문법, 예시 등에 대하여 상세히 기재되어 있으니

필요하신 분들은 아래 사이트를 통해 확인하시면 될 것 같습니다:)

 

https://ko.wikipedia.org/wiki/%EC%A0%95%EA%B7%9C_%ED%91%9C%ED%98%84%EC%8B%9D

 

정규 표현식 - 위키백과, 우리 모두의 백과사전

노란색 강조 부분은 다음 정규식을 사용했을 때 매치된 것이다. 정규 표현식(正規表現式, 영어: regular expression, 간단히 regexp[1] 또는 regex, rational expression)[2][3] 또는 정규식(正規式)은 특정한 규칙

ko.wikipedia.org

 

해당 포스팅에서는 PHP에서 정규표현식을 다루는 방법을 중점적으로 다뤄보도록 할게요!

PHP에서는 정규표현식의 패턴을 사용하기 위해서 preg_match()라는 함수를 아래와 같은 형식으로 사용합니다.


preg_match(패턴, 검사할 텍스트, 패턴 일치 결과를 응답받을 변수)


첫 번째 매개변수는 정규표현식을 이용해 만든 패턴을 의미하며 '/패턴/'의 형식으로 작성합니다.

두 번째 매개변수는 정규표현식을 이용해 검사할 텍스트를 의미합니다.

세 번째 매개변수는 검사한 텍스트가 패턴에 일치하는지 결과를 응답받을 변수를 의미합니다. 

 

이제, 첫 번째 매개변수에 들어갈 패턴을 작성하는 방법을 알아보겠습니다.

알기 쉽게 어떤 텍스트에 대하여 영문이나 한글, 숫자로만 구성되어 있는지에 대해 확인하는 패턴을

예시로 만들어보면서 이해해보면 좋을 것 같아요.

 

영문으로만 구성되어 있다면 첫 글자와 마지막(끝) 글자가 모두 영문이어야 하고,

한글로만 구성되어 있다면 첫 글자와 마지막 글자가 모두 한글이어야 겠죠?

 

먼저 공통적으로 알아야 할 것은 첫 번째 글자를 적용하는 기호와 마지막 글자를 적용하는 기호를 알아야 합니다!

첫 번째 글자를 적용하는 기호는 ( ^ )이며, 마지막 글자를 적용하는 기호는 ( $ )입니다. 

 

다음은 영문, 한글, 숫자 각각에 대한 패턴을 적용하는 방법을 알아야 합니다!

영문은 대문자와 소문자로 나뉘어 지며 대문자는 'A'로 시작해 'Z'로 끝나고, 소문자는 'a'로 시작해 'z'로 끝납니다. 

이를 간격으로 지정하면 대문자는 'A-Z', 소문자는 'a-z'으로 지정할 수 있는데요,

지정한 간격을 대괄호로 감싸주면 됩니다. 즉, '[A-Z]', '[a-z]'와 같은 형식이 됩니다!

(대소문자 혼용은 '[a-zA-Z]' 형식으로 지정한 간격을 합쳐서 사용하면 됩니다.)

 

위에서 언급한 방식으로 다른 문자들도 똑같이 간격을 지정하면 되는데요,

한글은 '가'로 시작해 '힣'로 끝나도록 설정되어 있으므로 '[가-힣]',

숫자는 0부터 9까지 이므로 '[0-9]'와 같은 형태가 되겠네요!

 

이제 마지막으로 위에서 언급한 내용들을 하나로 묶으면 기본적인 패턴이 완성됩니다!

아래 표에 한번에 정리했습니다:)

 

검사할 텍스트(변수) 패턴
영문 대문자 /^[A-Z]$/
영문 소문자 /^[a-z]$/
영문 대문자+소문자 /^[a-zA-Z]$/
한글 /^[가-힣]$/
숫자 /^[0-9]$/

 

위 내용을 활용해서 만든 샘플 소스도 함께 보시죠!

 

<request.html>

<html>
<head>
 <title> PHP 정규표현식 TEST </title>
</head>
<body>
 <form method="post" action="response.php">
  <table> 
    <tr>
        <th>한글이름</th>
        <td><input type="text" name="KorName" value=""></td>
    </tr>
    <tr>
        <th>영문이름</th>
        <td><input type="text" name="EngName" value=""></td>
    </tr>
	<tr>
        <th>주민번호(특수기호 제외, 숫자만)</th>
        <td><input type="text" name="UniqueNum" value=""></td>
    </tr>
  </table>
  <input type="submit" value="Submit" />
 </form>
</body>
</html>

 

<response.php>

<?php 

//전달받은 데이터를 변수로 저장 
$korName = $_POST['KorName'];
$engName = $_POST['EngName'];
$uniqueNum = $_POST['UniqueNum'];

//각 데이터에 대한 패턴 작성
$korPattern = '/^[가-힣]+$/';
$engPattern = '/^[a-zA-Z]+$/';
$numPattern = '/^[0-9]+$/';

//패턴 체크(유효성 검사)
if(preg_match($korPattern, $korName, $match)){
	echo "한글이름 : ".$korName."<br>";
	var_dump($match);
	echo "<br>";
} else {
	echo "올바른 한글 이름이 아닙니다. 다시 입력해 주세요. <br>";
}

if(preg_match($engPattern, $engName, $match)){
	echo "영문이름 : ".$engName."<br>";
	var_dump($match);
	echo "<br>";
} else {
	echo "올바른 영문 이름이 아닙니다. 다시 입력해 주세요. <br>";
}

if(preg_match($numPattern, $uniqueNum, $match)){
	echo "주민번호 : ".$uniqueNum."<br>";
	var_dump($match);
	echo "<br>";
} else {
	echo "올바른 고유번호가 아닙니다. 다시 입력해 주세요. <br>";
}

?>

** 예제 중 패턴이 입력된 대괄호[] 옆 더하기( + ) 기호의 의미는 1byte 이상 검사하겠다는 기호입니다.

 

<결과 :: 브라우저 화면>

화면 출력(request.html)
데이터 입력
데이터 전달 결과(response.html)

 

이번 예제에서는 한글은 한글만, 영문은 영문만, 숫자는 숫자만 입력하도록 코딩을 한 것입니다.

그래서 조건에 맞게 잘 입력했다면 위 화면과 같이 if문을 정상적으로 실행하여 데이터를 보여주고,

띄어쓰기나 다른 문자, 특수기호 등이 들어갔다면

else문을 실행하여 올바른 데이터가 아니다라는 것을 알려주고 있습니다!

 

정규표현식은 위 예시보다 조금 더 폭넓게 활용할 수 있는데요, 

이는 다음 PHP 포스팅에서 작성해보도록 하겠습니다:)

 

긴 글 읽어주셔서 감사하며 오늘 포스팅은 여기서 마무리하겠습니다😁

안녕하세요 워누입니다! 

오늘은 PHP로 이미지 파일을 업로드하는 방법을 포스팅하도록 하겠습니다!

거두절미하고 바로 가보도록 하죠~

.

여러분들도, 저도 인터넷에서 사진이나 문서 파일을 웹에서 업로드한 경험이 있을 것입니다!

이런 폼을 html에서 제공하는데요,

html 폼에서 파일을 업로드하기 위해서는 <input> 태그 내 type 속성 값으로 "file"을 사용하고, 

<form> 태그에 enctype 속성을 적용하고 값으로 "multipart/form-data"를 지정해야 합니다.

 

아래 예시코드처럼 작성을 해주시면 됩니다. 

(편의를 위해서 구분선을 작성했습니다!)

.

[fileUploadRequest.html]

<!DOCTYPE html>
<html>
<head>
</head>
<title>파일 업로드 테스트</title>
<body>
<form name="reqform" method="post" action="fileUploadResult.php" enctype="multipart/form-data"> 
 <p>이미지 파일 업로드 테스트</p>
 <hr> <br>
 <input type="file" name="imgFile" /><br>
 <input type="submit" value="업로드" />
</form>
</body>
</html>

.

이렇게 html로 요청 폼을 만들었으면 요청을 받는 응답 페이지도 만들어주어야 겠죠?

PHP에서는 파일을 어떻게 받아서 처리하는지 한번 보도록 합시다.

 

바로 PHP 응답 페이지 코드 보시죠!!

.

[fileUploadResult.php]

<?php 

/*********************************************
* 넘어오는 데이터가 정상인지 검사하기 위한 절차
* 실제 페이지에서는 적용 X
**********************************************/

//$_FILES에 담긴 배열 정보 구하기.
var_dump($_FILES);

// php 내부 소스에서 html 태그 적용 - 선긋기
echo "<hr>";

/*********************************************
* 실제로 구축되는 페이지 내부.
**********************************************/

// 임시로 저장된 정보(tmp_name)
$tempFile = $_FILES['imgFile']['tmp_name'];

// 파일타입 및 확장자 체크
$fileTypeExt = explode("/", $_FILES['imgFile']['type']);

// 파일 타입 
$fileType = $fileTypeExt[0];

// 파일 확장자
$fileExt = $fileTypeExt[1];

// 확장자 검사
$extStatus = false;

switch($fileExt){
	case 'jpeg':
	case 'jpg':
	case 'gif':
	case 'bmp':
	case 'png':
		$extStatus = true;
		break;
	
	default:
		echo "이미지 전용 확장자(jpg, bmp, gif, png)외에는 사용이 불가합니다."; 
		exit;
		break;
}

// 이미지 파일이 맞는지 검사. 
if($fileType == 'image'){
	// 허용할 확장자를 jpg, bmp, gif, png로 정함, 그 외에는 업로드 불가
	if($extStatus){
		// 임시 파일 옮길 디렉토리 및 파일명
		$resFile = "./img/{$_FILES['imgFile']['name']}";
		// 임시 저장된 파일을 우리가 저장할 디렉토리 및 파일명으로 옮김
		$imageUpload = move_uploaded_file($tempFile, $resFile);
		
		// 업로드 성공 여부 확인
		if($imageUpload == true){
			echo "파일이 정상적으로 업로드 되었습니다. <br>";
			echo "<img src='{$resFile}' width='100' />";
		}else{
			echo "파일 업로드에 실패하였습니다.";
		}
	}	// end if - extStatus
		// 확장자가 jpg, bmp, gif, png가 아닌 경우 else문 실행
	else {
		echo "파일 확장자는 jpg, bmp, gif, png 이어야 합니다.";
		exit;
	}	
}	// end if - filetype
	// 파일 타입이 image가 아닌 경우 
else {
	echo "이미지 파일이 아닙니다.";
	exit;
}
?>

이렇게 코드를 작성해보았습니다.

.

이전 PHP 포스팅에서 $_POST 필드를 이용해 form 태그의 method가 post인 data를 가져온 것을 볼 수 있습니다. 

즉, $_POST 필드는 요청 시 method 속성의 값이 post 방식인 데이터를 배열 형태로 가져온다는 것을 알 수 있습니다.

 

일반적인 데이터라면 $_POST 필드를 이용해 값을 가져왔겠지만, 파일 데이터는 조금 다릅니다. 

$_FILES라는 필드를 이용해 파일에 대한 데이터 값을 배열로 가져옵니다. 

 

자세한 내용을 설명드리기 위해 var_dump() 함수를 이용해 $_FILES 필드에 담긴 배열 데이터를 모두 print하였습니다. 

(PHP에서 데이터를 체크하기 위해 자주 사용하는 함수이니 꼭 알아두세요!!)

실행된 예시 화면을 보면서 조금 더 상세하게 설명드릴게요ㅎㅎ

.

1) fileUploadRequest.html 실행

fileUploadRequest.html 실행 화면

 

2) fileUploadRequest.html 페이지와 동일 경로 내 img 폴더 임의 생성

img 폴더 생성

 

빈 폴더

** 이미지가 업로드되는지 확인하기 위해 빈 폴더로 생성해 놓았습니다!

 

3) fileUploadRequest.html 페이지에서 "파일 선택" 버튼 클릭 후 첨부할 이미지 선택

첨부할 이미지 선택
"파일 선택" 버튼 옆에 선택한 이미지의 파일명이 체크됨.

 

4) fileUploadRequest.html 페이지에서 "업로드" 버튼 클릭 후 결과 확인

fileUploadResult.php 결과 화면

5) fileUploadResult.php 페이지에서 설정한 경로에 선택한 이미지가 업로드 되었는지 확인.

img 폴더 재확인, 선택한 파일이 업로드된 부분 확인.

.

이런 식으로 테스트가 진행되었습니다. 

 

1-3번 과정은 요청하는 페이지에 대한 과정이니 추가 설명을 생략하고, 바로 4번부터 상세하게 설명을 드리겠습니다. 

 

fileUploadResult.php 소스 내 9번째 라인에서 "var_dump($_FILES);"로 체크한 부분을 통해

파일 데이터가 어떻게 저장되어 넘어오는지 알수 있습니다. 

 

넘어온 데이터 형식을 보면 아래와 같은데요,


array(1) { ["imgFile"]=> array(5) { ["name"]=> string(10) "watch3.jpg" ["type"]=> string(10) "image/jpeg" ["tmp_name"]=> string(48) "C:\Bitnami\wampstack-7.2.14-0\php\tmp\phpFC9.tmp" ["error"]=> int(0) ["size"]=> int(367171) } }


imgFile이라는 배열 데이터 안에 name, type, tmp_name, error, size라는 필드들이 또 배열로 들어가 있는 것을 확인 할 수 있습니다. 아래 표를 통해 각 필드에 대한 설명을 드립니다. 

 

Field value
imgFile 요청 시 input 태그 내 name 속성으로 지정한 값을 그대로 받아옴.
Field in "imgFile" name 파일명
type 파일 타입과 확장자명을 받아옴 (구분자: /)
tmp_name 업로드한 파일을 임시로 저장할 폴더와 파일명
error 에러 여부
size 파일 사이즈 (단위: byte)

위 표에 대해서 인지를 하고 fileUploadResult.php 소스를 보시면 조금 더 이해가 되실 겁니다ㅎㅎ

다만 소스 내에서 언급한 것처럼 var_dump로 찍은 데이터는 어디까지나 개발할 때 데이터를 체크하기 위한 용도로 쓰기 때문에 만약 실제로 개발하실 때에는 위 데이터가 실제 서비스하는 페이지에서는 보이지 않게 반드시 주의해주세요!

 

다음부터는 주석을 참고하시면서 이런 의미구나 하고 소스를 이해해주시면 되겠습니다!

 

제작된 샘플 소스의 동작 구조는 임시로 저장된 파일경로를 변수에 담아두고 확장자를 검사해서 이미지 파일이 맞으면 

임시 파일 경로에 두었던 파일을 실제 서버 내 폴더에 업로드하고,

허용된 확장자를 쓰지 않았거나 이미지 파일이 아니라면 실패 처리를 알리는 문자열을 출력하는 형태로 구성됩니다!

 

이 소스에서 중요하게 사용된 함수는 아래 설명을 참고 바랍니다!

 

**

explode : PHP에서 하나의 구분자를 가지고 배열 데이터를 만드는 기능을 제공하는 함수

-> syntax : explode("구분자", "데이터");

 

move_uploaded_file : 임시적으로 업로드된 파일을 새로운 경로로 옮겨주는 기능을 제공하는 함수

-> syntax : move_uploaded_file("업로드한 파일의 임시 위치", "옮길 위치 및 파일명");

**

 

이렇게 제가 작성한 코드와 그에 대한 설명을 담아보았는데요. 

제가 드린 샘플 소스를 그대로 사용해도 좋지만 변형도 해보고,

일부러 다른 파일도 올려서 오류가 어떻게 나는지도 직접 시도해보는 것을 권장합니다!

 

저처럼 초보개발자라면 반드시 이렇게 직접 자신의 코드를 써보고, 설명해보고, 일부러 오류도 내보시면 

실력이 더 많이 향상될 것 같아요 ㅎㅎ

제 코드와 설명도 완벽하지는 않아서 언제나 피드백을 주시면 반영하도록 하겠습니다 ㅎㅎ 

 

오늘 포스팅은 여기서 마치도록 하겠습니다~

그럼 20000!!!

 

+ Recent posts