안녕하세요 워누입니다😀

 

오늘은 최근 가장 핫한 프론트엔드 라이브러리인 Angular, Vue, React 그리고 백엔드 언어인 Node.js까지..!

이 모든 것들에 대한 개발 환경을 맥에서 세팅하는 방법에 대해 포스팅하고자 합니다!

 

우선 Nodejs 사이트에 가서 파일을 다운받아야겠죠?

아래 홈페이지로 접근해주세요!

https://nodejs.org/ko/

 

Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

 

위와 같은 화면이 나오면 LTS 버전으로 다운로드를 받습니다!

** 1월 말 기준으로 가장 최신버전은 17.4.0, LTS 버전은 16.13.2 입니다.

** 시간이 지나 버전이 바뀌더라도 LTS 버전으로 받으시길 권장합니다.

pkg 파일 다운로드가 완료되면 실행해주세요!

node 패키지와 npm 패키지를 동시에 설치한다고 소개되어 있네요.

"계속" 버튼을 눌러서 진행합시다!

사용권 계약 내용입니다.

"계속" 버튼을 눌러서 진행합시다.

"동의" 버튼 클릭하셔서 다음으로 넘어갑시다!

설치 위치가 변경되어야 하는 경우라면 반드시 해당 단계에서 "설치 위치 변경..." 버튼을 클릭해서 변경해주세요!

변경이 필요없거나 설정이 완료되었다면 "설치" 버튼을 클릭합니다!

이젠 맥북도 지문인증으로...!!😀😀

비싼게 좋네요 ㅎㅎ

15~20초만 기다려주면 설치가 완료됩니다!

"닫기" 버튼을 클릭해주시고, "터미널"을 실행해주세요!

(VS Code에서 진행해도 되고, 맥북 내장 터미널에서 진행해도 됩니다.)

VS Code 내 터미널은 상단 매뉴 중 "보기"->"터미널"로 접근할 수 있답니다!

터미널로 접근하셨다면 아래 명령어를 입력해주세요!

 

node -v

node 패키지가 정상적으로 설치된 것을 볼 수 있네요!

마지막으로 아래 명령어를 입력해서 npm 패키지 정상 설치 여부를 확인해봅시다!

 

npm -v

npm 패키지도 정상적으로 잘 설치되었네요!

 

도움이 되셨길 바라며 오늘 포스팅은 이만 마무리하겠습니다🙂🙂

안녕하세요 워누입니다🙂

오늘은 누구나 알만한 자바스크립트의 대표적인 버그 2개에 대하여 포스팅해보고자 합니다! 

 

우선, 우리 모두가 알고있는 보편적인 지식을 짚고 넘어가보도록 하죠😮

 

1. null

아무것도 없는 빈 값을 의미하며,

예시로 변수 선언 후 초기화하지 않은 상태라고 보시면 됩니다!

✔추가로, 참/거짓 연산 시에 거짓으로 응답되는 데이터입니다😎

 

2. 세미콜론( ; )

보편적으로 모든 프로그래밍 언어에서 문장의 끝을 알리는 기호에요!

 

위의 내용은 처음 배울 때 다루는 내용들이지만 자바스크립트에서는 조금 더 신경써서 봐야하는데요,

이제부터 그 이유를 살펴보도록 하죠...!!!!!!

 

null 데이터 타입이 object...?

 

위에서 말한 것처럼 null은 아무것도 없다는 의미로 대부분 프로그래밍 언어에서는 데이터 타입을 null로 정의합니다.

간단한 예시를 들어보도록 할게요!

 

- PHP

<?php
echo gettype(null);
?>

 

결과는 당연히 NULL 로 출력됩니다.

- Java

public class test {

	public static void main(String[] args) {
		// TODO Auto-generated method stub
		
		String a = null;

		System.out.println(a);
		System.out.println(a.getClass().getName());
	}
}

 

a라는 변수에 null로 초기화했으니 값을 출력할 땐 당연히 null이 나오겠죠?

추가적으로, 자바에서 getClass().getName() 메소드를 활용하여 값의 유형을 가져오려고 하면

아래와 같이 NullPointerException이 발생합니다. 

파일명 : test.java

 

근데 자바스크립트에서는.......

null을 object(객체)로 인식합니다......ㄷㄷ

(크롬 개발자도구에서 바로 테스트 가능합니다)

 

이로 인해 아래와 같은 촌극이 벌어지기도 합니다...

이는 자바스크립트 엔진의 버그로 수정을 했어야 했지만 이미 배포가 어느정도 되어 개발이 완료된 다른 사이트에 영향을 줄 수 있어 수정을 하지 않았다고 하네요...🙄

 

*** 주의 ***

자바에서도 자바스크립트와 유사한 상황이 있어서 NULL==object 타입이다라는 오해가 많습니다.

public class test {

	public static void main(String[] args) {
		// TODO Auto-generated method stub
		
		String a = null;
		
		System.out.println(a);
		System.out.println("this is " + a);
		System.out.println(a.getClass().getName());

	}

}

위 소스코드를 실행했을 때 아래와 같은 결과를 얻을 수 있었는데요

 

자바에서 String을 단순히 문자열 저장하는 변수로 생각해서 NULL은 object 타입이다라고 생각하면 절대 안됩니다!!

String 자료형 자체가 클래스(참조) 타입으로 원시 타입인 int, char, float 등과 다른 형태입니다.

 

원시 타입은 애초에 null로 초기화가 불가능하고,

오로지 String, Integer 같은 참조 타입으로만 변수를 null로 초기화가 가능합니다.

즉, 자료형이 object 형태였던 것이고 이를 println() 메소드에서 null을 object 형태로 치환해준 것 뿐인거죠..!

(일반적으로 String 자료형을 이용하는 getName(), length(), toUpperCase() 같은 메소드를 적용할 수 없습니다.)

.

 

반면 PHP는 어떤지 한번 볼까요?

<?php
echo gettype(null);
echo '<br>';
echo 'this is ' . null;
?>

이게 정상이랍니다..!

 

샛길로 많이 샌 것 같지만 정리하자면 다음과 같습니다!

자바스크립트는 null 자체를 object로 인식하는 버그가 있고
이미 버그가 있는 버전으로 짜여진 프로그램들이 많아 수정이 어려울 것이다..!

 

세미콜론 생략으로 인한 버그

자바스크립트 개발자라면 모두가 아시는 것처럼 자바스크립트는 세미콜론 자동 삽입 기능이 있는데요..!

이로 인해 아래와 같은 상황이 발생하기도 합니다!

분명 json_test1() 함수와 json_test2() 함수는 중괄호 위치만 다르고 나머지 내용은 다 똑같습니다만

함수 호출 시 결과는 완전 딴판이죠?

전문적인 용어로 말씀드리면 json_test1() 함수는 K&R 방식으로,

json_test2() 함수는 BSD 방식으로 작성되어 있습니다!

(K&R, BSD 방식에 대한 자세한 내용은 아래 사이트를 참조해주세요✔)

https://namu.wiki/w/%EC%BD%94%EB%94%A9%20%EC%8A%A4%ED%83%80%EC%9D%BC

 

여튼 두 함수를 호출했으나 다른 결과가 발생한 이유는 return에 있습니다!

json_test2 () 함수가 BSD 방식으로 작성해버리면서 return과 중괄호 { } 사이에 줄바꿈이 발생했는데요,

이때 return에 세미콜론이 자동으로 붙어버리면서 자바스크립트가 'return;'으로 인식해버렸기 때문입니다.

이로 인해 아래 중괄호 { key : value }가 적용되지 않은 것이죠!

 

자바스크립트에서 'return;'은 'return undefined;'와 같아서

json_test2() 함수의 호출 결과는 undefined가 된 것을 확인하실 수 있겠네요..!

 

이렇게 오늘은 javascript의 대표적인 버그들에 대해서 포스팅을 해보았는데요, 

포스팅하면서 초기 설계 및 기획의 중요성과 문법 및 오타에 대한 경각심을 다시 한 번 뼈저리게 느끼게 된 것 같아요🥶

 

오늘 포스팅은 여기서 이만 마무리하도록 하겠습니다 ㅎㅎ

감사합니다😀

 

 

안녕하세요 워누입니다😀

 

오늘은 자바스크립트에서 배열이나 객체를 더욱 쉽게 다룰 수 있는 반복문인

for in 반복문과 for of 반복문에 대하여 포스팅해보고자 합니다.

 

자바(java)의 향상된 for문과 비슷한 내용이며 일전에 제가 포스팅한 적이 있으니 참고하시면 좋을 듯 합니다ㅎㅎ

https://seoneu.tistory.com/17

 

[JAVA] JAVA에서 향상된 For문 쓰기!

안녕하세요 블로거 워누입니다! 어느새 Tistory 블로그를 버려둔지 꽤 시간이 지나버렸네요..ㅎ . 하지만 어떤 계기로 인해 이 블로그를 다시 살리게 되었습니다! 공부한 내용들을 조금씩 올리는

seoneu.tistory.com

 

자바스크립트에서는 위에서 언급한 것처럼 for in, for of 두가지 방식으로 반복문을 제공하고 있는데요,

예시 코드를 보면서 어떻게 쓰는지 바로 보여드릴게요!

 

우선 일반적인 for문으로 구현된 반복문입니다!

(html의 <script> 부분만 작성했습니다.)

<script>

var array = ['포도', '바나나', '사과', '망고'];

for (var i=0; i<array.length; i++){
	alert(array[i]);
}

</script>

보시다시피 array 배열안에 있는 요소를 하나씩 출력하는 프로그램이며,

결과는 예상하실 수 있다시피 아래 이미지처럼 포도, 바나나, 사과, 망고 순으로 alert 창에 출력됩니다!

 

이를 for in 반복문으로 구현하면 다음과 같습니다. 

<script>

var array = ['포도', '바나나', '사과', '망고'];

for (var i in array) {
	alert(array[i]);
}

</script>

결과는 똑같이 나오면서도 쓰는 코드는 좀 더 간결해졌음을 알 수 있습니다!

 

마지막으로 ECMAScript 6에서 추가된 반복문 문법인 for of 반복문은 아래와 같이 구현할 수 있습니다!

<script>

for (var array of ['포도', '바나나', '사과', '망고']){
	alert(`${array}`);		
}

</script>

for in 반복문과 비슷하지만 반복 변수를 따로 선언하지 않고 배열의 요소들을 직접 입력해주는게 특징입니다!

추가로 for of 반복문은 배열 이외에도 문자열이나 맵(map) 등의 자료형에도 사용할 수 있다고 하네요..!

 

위 세개의 반복문을 잘 숙지하고 있다가 상황에 맞게 잘 사용하면 코드를 더 깔끔하게 작성할 수 있을 것 같습니다ㅎㅎ

오늘 포스팅한 내용도 누군가에게는 도움이 되었기를 바라며 이만 마무리하겠습니다!

 

 

 

안녕하세요 워누입니다😀

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

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

 

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 포스팅에서 작성해보도록 하겠습니다:)

 

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

블로거 워누입니다!

 

오늘은 Java를 html과 융합하여 JSP와 Servlet(서블릿)이라는 것들을 이용하여 웹 페이지를 만들어 보았는데요! 코드가 조금 기니까 자세히 보셔야 해요ㅎㅎ 총 세개의 파일로 구성되어 있구요!하나는 JSP, 하나는 서블릿, 하나는 자바스크립트 파일입니다!

 

아래 코드와 결과를 같이 봐주세요!

 

1) 11_testpage.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>WebTest Page</title>
<script type="text/javascript" src="testScript.js"></script>
</head>
<body>
<form method="get" action="testServlet" name="frm">
<h2> 회원 가입 페이지 </h2>

 <label for="userName"> 이름 </label><span style="color:blue;"> * </span>
 <input type="text" id="userName" name="userName"> <br>
 
 <label> 주민등록번호 </label><span style="color:blue;"> * </span>
 <input type="text" id="userNoBir" name="userNoBir"> -
  <input type="password" id="userNoSec" name="userNoSec"> <br>

  <label for="userID"> 아이디 </label><span style="color:blue;"> * </span>
  <input type="text" id="userID" name="userID"> <br>

  <label for="userPwd"> 비밀번호 </label><span style="color:blue;"> * </span>
  <input type="password" id="userPwd" name="userPwd"> <br>

  <label for="userPwdchk"> 비밀번호확인 </label><span style="color:blue;"> * </span>
 <input type="password" id="userPwdchk" name="userPwdchk"> <br>
 
 <label for="userEmail"> 이메일 </label><span style="color:blue;"> * </span>
  <input type="text" name="userEmail" id="userEmail"> @
  <input type="text" name="Emailaddr" id="Emailaddr">

  <label for="EmailSelect" style="float: left;"> </label>
     <select id="EmailSelect" name="EmailSelect" size="1">
      <option value="직접입력">직접입력 </option>
      <option value="naver.com"> naver.com </option>
      <option value="nate.com"> nate.com </option>
      <option value="hanmail.net"> hanmail.net </option>
      <option value="gmail.com"> gmail.com </option>
    </select>
    <br>

 <label for="userHomeNo"> 우편번호 </label> &nbsp;
    <input type="text" id="userHomeNo" name="userHomeNo"> <br>
   
    <label for="userAddr1"> 주소 </label> &nbsp;
  <input type="text" id="userAddr1" name="userAddr1">
  <input type="text" id="userAddr2" name="userAddr2"> <br>
  
  <label for="userHP"> 전화번호 </label> &nbsp;
  <input type="text" name="userHP"> <br>
 
 <label for="job" style="float: left;"> 직업 </label>
    <select id="job" name="job" size="1">
      <option value="학생"> 학생 </option>
      <option value="공무원"> 공무원 </option>
      <option value="언론"> 언론 </option>
      <option value="컴퓨터/인터넷"> 컴퓨터/인터넷 </option>
   </select>
   <br>

  <label for="chkMailSMS"> 메일/SMS 정보 수신 여부 </label> &nbsp;
  <input type="radio" id="chkMailSMS" name="chkMailSMS" value="yes" checked> 수신
  <input type="radio" id="chkMailSMS" name="chkMailSMS" value="no"> 거부 <br><br>

 <label for="pl"> 개발언어 관심 분야 </label> &nbsp; <br>
 <input type="checkbox" name="pl" value="C"> C
 <input type="checkbox" name="pl" value="C++"> C++
  <input type="checkbox" name="pl" value="Java"> Java <br>
  <input type="checkbox" name="pl" value="C#"> C#
  <input type="checkbox" name="pl" value="JavaScript"> JavaScript
 <input type="checkbox" name="pl" value="python"> python <br>

 <br><br>
 <input type="submit" value="회원가입" style="float: center;" onclick="return check()">
 <input type="reset" value="취소" style="float: center;margin-right:50px">

</form>
</body>
</html>

 

2) testServlet.java <- 얘가 서블릿이에요!

package unit11;

import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class testServlet
 */

@WebServlet("/testServlet")

public class testServlet extends HttpServlet {

 private static final long serialVersionUID = 1L;

 /**
  * @see HttpServlet#HttpServlet()
  */

 public testServlet() {
  super();
  // TODO Auto-generated constructor stub
 }

 /**
  * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
  *      response)
  */

 protected void doGet(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {
  // TODO Auto-generated method stub
  response.setContentType("text/html; charset=UTF-8");

  String userName = request.getParameter("userName");
  int userNoBir = Integer.parseInt(request.getParameter("userNoBir"));
  int userNoSec = Integer.parseInt(request.getParameter("userNoSec"));
  String userID = request.getParameter("userID");
  String userPwd = request.getParameter("userPwd");
  String userPwdchk = request.getParameter("userPwdchk");
  String userEmail = request.getParameter("userEmail");
  String Emailaddr = request.getParameter("Emailaddr");
  String EmailSelect = request.getParameter("EmailSelect");
  int userHomeNo = Integer.parseInt(request.getParameter("userHomeNo"));
  String userAddr1 = request.getParameter("userAddr1");
  String userAddr2 = request.getParameter("userAddr2");
  String userHP = request.getParameter("userHP");
  String Job = request.getParameter("job");
  String chkMailSMS = request.getParameter("chkMailSMS");

  PrintWriter out = response.getWriter();

  out.print("<html><body>");
  out.print("<h1> 회원 정보 <h1> <br><hr>");
  out.println("이름 : <b>" + userName);
  out.print("<br>");
  out.println("</b>주민등록번호 : <b>" + userNoBir + "-" + userNoSec);
  out.print("<br>");
  out.println("</b>아이디 : <b>" + userID);
  out.print("<br>");
  out.println("</b>비밀번호 : <b>" + userPwd);
  out.print("<br>");
  

  if (Emailaddr.trim() == "")
   out.println("</b>이메일 : <b>" + userEmail + "@" + EmailSelect);
  else
   out.println("</b>이메일 : <b>" + userEmail + "@" + Emailaddr);  
  out.print("<br>");

  out.println("</b>우편번호 : <b>" + userHomeNo);
  out.print("<br>");
  out.println("</b>주소 : <b>" + userAddr1);
  out.print(userAddr2);
  out.print("<br>");
  out.println("</b>핸드폰번호 : <b>" + userHP);
  out.print("<br>");
  out.println("</b>직업 : <b>" + Job);
  out.print("<br>");
  out.println("</b>메일/문자 수신 여부 : <b>" + chkMailSMS);
  out.print("<br>");

  String pls[] = request.getParameterValues("pl");
  if (pls == null) {
   out.print("</b>선택한 항목이 없습니다. <b>");
  } else {
   out.println("</b>관심분야 : <b>");
   for (String pl : pls)
    out.print(pl + " ");
  }

  out.print("</b><br>");
  out.println("</b><br><br><a href='javascript:history.go(-1)'>다시</a>");
  out.print("</body></html>");
  out.close();
 }

 /**
  *
  * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
  *      response)
  *
  */

 protected void doPost(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {

  // TODO Auto-generated method stub

  doGet(request, response);

 }

}

 

3) testScript.js

/**
 *
 * 입력된 값에 대하여 유효성을 검사하는 자바스크립트입니다.
 *
 */

function check() {

 if (document.frm.userName.value == "") {
  alert("이름을 입력해주세요.");
  document.frm.userName.focus();
  return false;
 } else if (document.frm.userNoBir.value == "") {
  alert("주민번호 앞자리를 입력해주세요.");
  document.frm.userNoBir.focus();
  return false;
 } else if (isNaN(document.frm.userNoBir.value)) {
  alert("숫자로 입력해주세요.");
  document.frm.userNoBir.focus();
  return false;
 } else if (document.frm.userNoBir.length == 6) {
  alert("주민번호 앞자리는 6자리여야 합니다. 다시 입력해주세요.");
  document.frm.userNoBir.focus();
  return false;
 } else if (document.frm.userNoSec.value == "") {
  alert("주민번호 뒷자리를 입력해주세요.");
  document.frm.userNoSec.focus();
  return false;
 } else if (document.frm.userNoSec.length == 7) {
  alert("주민번호 앞자리는 7자리여야 합니다. 다시 입력해주세요.");
  document.frm.userNoSec.focus();
  return false;
 } else if (isNaN(document.frm.userNoSec.value)) {
  alert("숫자로 입력해주세요.");
  document.frm.userNoSec.focus();
  return false;
 } else if (document.frm.userID.value == "") {
  alert("아이디를 입력해주세요.");
  document.frm.userID.focus();
  return false;
 } else if (document.frm.userID.length < 4) {
  alert("아이디는 최소 4자리 이상이어야 합니다.");
  document.frm.userID.focus();
  return false;
 } else if (document.frm.userPwd.value == "") {
  alert("비밀번호를 입력해주세요.")
  document.frm.userPwd.focus();
  return false;
 } else if (document.frm.userPwdchk.value == "") {
  alert("비밀번호 확인란에 비밀번호를 재입력해주세요.");
  document.frm.userPwdchk.focus();
  return false;
 } else if (document.frm.userPwd.length < 6) {
  alert("비밀번호는 최소 6자리 이상이어야 합니다.");
  document.frm.userPwd.focus();
  return false;
 } else if (document.frm.userPwd.value != document.frm.userPwdchk.value) {
  alert("비밀번호가 일치하지 않습니다. 다시 확인해주세요.");
  document.frm.userPwd.focus();
  return false;
 } else if (document.frm.userEmail.value == "") {
  alert("이메일 계정을 입력해주세요.");
  document.frm.userEmail.focus();
  return false;
 } else
  return true;

}

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

 

뭔가 좀 많죠..? ㅎㅎ 그럼 바로 아래 결과를 보겠습니다.

 

1. 출력 화면

.

.

2. 정보 입력

.

.

3. 결과 확인

.

.

나름 괜찮나요? 만약 이름이나 비밀번호 등 * 표시 된것들 중에서 하나 빼고 확인 누르거나 취소 버튼 눌러보거나 하는 액션을 취해주시면 흥미로운 결과도 발견됩니다. 확인해 보시고 이상이 있거나, 지적할 사항, 보충해야 되는 부분들 확인해 주시면 감사하겠습니다 ㅎㅎ 

 

아직 데이터베이스를 구축하지 않아 저장은 되지 않네요 ㅎㅎ 앞으로 데이터베이스를 빨리 익혀서 회원 정보를 구축하는 법도 익혀야겠어요! 그러면 하나의 웹 페이지를 제작할 수 있는 능력이 생기겠죠?? 얼른 제대로 된 웹개발자가 되어야 겠습니다! 그 전까지 같이 공부하고 응원합시다!

 

밤이 늦었으니 전 이만 자러 가볼께요! 다음 포스팅에서 봅시다!! 안녕!!

 

 

 

 

+ Recent posts