안녕하세요 워누입니다😀

 

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

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

 

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

안녕하세요 워누입니다😀

오늘은 자바스크립트의 조건문 중에서 짧은 조건문에 대해 포스팅을 작성해보고자 합니다! 

 

흔히 조건문이라 하면 잘 아는 if 조건문, switch 조건문 그리고 삼항 연산자를 이용한 조건문이 있는데요,

자바스크립트에서는 논리합(||), 논리곱(&&) 연산자를 사용하여 '짧은 조건문'이라는 것이 있다고 합니다! 

 

본래 논리합(||), 논리곱(&&) 연산자는 양 변의 표현식 혹은 불(boolean) 데이터를 이용해

참(true)/거짓(false)을 도출하는 연산자인것은 대부분 다 아시는 사실인데

이를 어떻게 조건문으로 사용하는지는 생소한 분들이 꽤 있을 것이라 생각하고 한번 알아보도록 하겠습니다...!

 

1. 논리합(||)

 

연산자를 기준으로 양 변중 하나라도 참이면 true 값을 반환하는 연산자입니다. 

우선 아래 표현식을 한번 함께 보실까요?


true || (임의의 표현식 또는 값)


위 식에서는 좌변이 참이라서 우변에 어떠한 표현식이나 값이 오든 항상 true 값을 반환합니다!

자바스크립트는 이렇게 참이나 거짓이 확실한 경우 추가 연산을 진행하지 않는데,

위와 같은 식에서는 좌변이 항상 참이므로 우변의 식을 실행하지 않습니다. 

.

이를 거꾸로 생각하면, 아래와 같이 좌변을 false 바꾸면

자바스크립트는 우변의 식을 실행하거나 값을 가져오게 되겠죠?


false || (임의의 표현식 또는 값)


위 표현식의 원리를 이용하여 아래와 같은 형태로 조건문을 사용한다는 개념입니다. 


(임의의 표현식(조건)) || (좌변의 표현식의 거짓인 경우 실행할 내용)


이렇게 되면 좌변의 표현식이 거짓이라면 우변이 실행될 것입니다!

 

...

 

2. 논리곱(&&)

 

연산자를 기준으로 두 변 모두 참이면 true 값을 반환하는 연산자입니다. 

반대로 말하면 양 변중 하나라도 거짓이면 무조건 false 값을 반환한다는 이야기가 됩니다!

 

위 논리합을 이용한 조건문에서 설명한 개념을 대입해서 아래 2개의 표현식을 함께 보시기 바랍니다. 


false && (임의의 표현식 또는 값)

true && (임의의 표현식 또는 값)


좌변이 false인 경우라면, 무조건 거짓이기 때문에 자바스크립트는 우변을 실행하지 않을 것입니다. 

다만, 좌변이 true인 경우라면 우변을 실행한다는 이야기가 됩니다. 

 

즉, 아래 형식처럼 사용할 수 있다는 이야기가 되겠죠?


(임의의 표현식(조건)) && (좌변의 표현식의 참인 경우 실행할 내용)


...

 

자, 이제 실제 예시를 살펴보도록 하겠습니다. 

숫자를 입력받아서 홀수인지 짝수인지를 구분하는 프로그램을 만든다는 가정하에

맨 처음에 언급했던 if, switch, 삼항 연산자과 더불어 오늘 포스팅한 '짧은 조건문'을 각각 사용한 후

짧은 조건문이 정말 짧은지 비교해보도록 하겠습니다. 

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

 

1. if 조건문

<script>
var input = Number(prompt('숫자를 입력하세요.'));
	
if(input % 2 == 0){
	alert('짝수입니다.');
} 
if(input % 2 == 1){
	alert('홀수입니다');
} 
</script>

 

2. switch 조건문

<script>
var input = Number(prompt('숫자를 입력하세요'));
	
switch(input%2) {
    case 0:
        alert('짝수입니다.');
        break;
    case 1:
    	alert('홀수입니다.');
        break;
    default:
    	alert('숫자가 아닌것 같네요.');
        break;
}
</script>

 

3. 삼항연산자 조건문

<script>
var input = Number(prompt('숫자를 입력하세요'));
	
(input % 2 == 0) ? alert('짝수입니다.') : alert('홀수입니다.');
</script>

 

4. 짧은 조건문 

<script>
var input = Number(prompt('숫자를 입력하세요'));

input % 2 == 0 && alert('짝수입니다.');
input % 2 == 0 || alert('홀수입니다.');
</script>

 

위 4가지를 이렇게 단순 비교해보았더니 삼항연산자 조건문이 더 짧게 작성된 것 같네요🤣🤣🤣

 

사실 제가 회사에서 업무를 진행할 때도 짧은 조건문 형태로 쓰여진 코딩 스타일은 접하지 못했었는데요, 

나름의 이유가 있었네요 ㅎㅎ (삼항연산자 조건문을 애용하는 분들은 정말 잘 쓰시더라구요..ㄷㄷ)

 

그래도 최근에 javascript를 공부하기 시작하면서 알게된 신기한 조건문이라 정리해보았습니다!

그럼 이만!!

안녕하세요 워누입니다😀 

 

오늘은 자바스크립트 함수를 이용해 alert 창에서 문자열 입력받는 방법과

boolean 자료형 처리하는 방법을 가지고 포스팅해보고자 합니다! 

 

기초적인 내용이지만 종종 써먹을 때가 있으니 한 번씩 봐두시면 좋을 듯 합니다😁

 

1. prompt()

 

문자열 자료형을 입력할 때 사용하는 함수인데요,

기본적으로 아래와 같이 사용합니다!

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script>
		// 문자열을 입력받습니다.
		var input = prompt();
		
		// 입력받은 문자열을 출력합니다. 
		alert(input);
	</script>
</head>
<body>

</body>
</html>

 

예시 html 파일을 브라우저에서 실행하면 아래 이미지와 같은 결과를 얻을 수 있어요!

 

저는 여기다가 "자바스크립트"라고 입력해보겠습니다!

alert(input) 함수에 의해 "자바스크립트"라는 문자열을 그대로 출력한 것을 볼수 있네요ㅎㅎ

 

하지만 뭔가 2%가 부족합니다..😐

사용자에게 입력을 요구할 때, 위 예시처럼 빈 페이지에 입력칸만 주면 무엇을 입력해야 하는지 알 수 있을까요?

 

원하는 값을 받기 위해서는 어떤 값을 요구하는지 알려줘야겠죠??

prompt() 함수는 두가지 매개변수를 아래와 같은 형식으로 사용이 가능합니다.

 

prompt('Message', 'Default');

 

형식만 보면 이해가 되지 않으시죠?

Message에는 사용자에게 요구할 메세지를 기입하시면 되고, 

Default에는 입력란에 미리 입력시켜놓을 데이터를 기입하시면 됩니다. 

 

예시를 같이 보시죠~

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script>
		// 문자열을 입력받습니다.
		var input = prompt('본인의 이름을 입력하세요.', '홍길동');
		
		// 입력받은 문자열을 출력합니다. 
		alert(input);
	</script>
</head>
<body>

</body>
</html>

위 HTML 파일을 브라우저에서 실행하면 아래와 같이 결과를 얻을 수 있어요!

이번에는 그냥 확인 버튼을 클릭하면...

보시다시피, 입력란에 있는 값을 그대로 전달하기 때문에 '홍길동'이라는 이름을 그대로 출력했습니다!

.

여기서 만약, 확인 버튼이 아니라 취소 버튼을 누르면 어떻게 될까요?

결과는..

이렇게 나온답니다!

아무런 입력값이 없었기 때문에 null을 출력하게 되었습니다.

문자열 입력받아서 처리하는 방법은 생각보다 간단하네요😁😁😁

 

2. confirm()

 

boolean 자료형을 입력받을 때 사용하는 함수입니다!

prompt()와 비슷한 형식으로 사용하시면 되구요, 

우선 아래 예시 소스부터 볼까요?

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script>
		// boolean 데이터를 입력받습니다.
		var input = confirm();
		
		// 입력받은 문자열을 출력합니다. 
		alert(input);
	</script>
</head>
<body>

</body>
</html>

prompt() 함수와 비슷하죠?

이렇게 html 코드를 만들고 브라우저에서 실행하면 아래 화면처럼 나올 것입니다. 

 

여기서 확인 버튼을 클릭하면 true를, 취소 버튼을 클릭하면 false를 응답합니다. 

(아래처럼 결과를 얻을 수 있어요!)

 

confirm 함수 또한 질문을 매개변수로 넣을 수 있습니다!

우리가 흔히 보는 메세지로 예시를 한번 보여 드릴게요 ㅎㅎ

 

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script>
		// boolean 데이터를 입력받습니다.
		var input = confirm('약관에 동의하시겠습니까?');
		
		// 입력받은 문자열을 출력합니다. 
		alert(input);
	</script>
</head>
<body>

</body>
</html>

우리가 흔히 온라인 상에서 결제를 하거나 회원가입할 때 관련된 약관을 읽고 동의하여야만 다음 절차를 진행하는데요, 

가끔씩 alert 창으로 한번 더 확인하는 절차를 거칠 때 간단하게 사용할 수 있습니다 ㅎㅎ 

 

이외에도 '예/아니오' 같은 답을 필요로 하는 모든 요구사항에 대하여 confirm() 함수를 이용해 

간단하게 처리할 수 있습니다😁

 

이번 포스팅 내용도 도움이 되셨길 바라며 이만 마무리하겠습니다!

안녕하세요 워누입니다! 

오늘은 비주얼 스튜디오 코드(VS Code)에서 FTP 연결하는 방법을 포스팅해보겠습니다😃

 

우선 VS Code를 실행하면 아래와 같이 첫 화면이 보이실 겁니다!

 

해당 화면에서 마켓플레이스 검색창에 "ftp-simple"을 입력해주세요!

 

설치 버튼을 클릭하시면 바로 설치가 됩니다!

완료가 되면 아래 화면처럼 보일텐데요, 제가 설치할 때 최신버전은 0.7.6이었네요!

 

이렇게 설치가 완료되었다면 키보드의 'F1' 단축기를 누르거나,

명령어 입력창으로 직접 이동해서 'ftp-simple'이라는 명령어를 입력해봅시다! 

(엔터는 아직 누르지 마세요!!)

 

FTP를 연결하려면 어떤 서버에 연결할 것인지 먼저 세팅해줘야겠죠?

그래서 활성화된 명령어들 중에 "ftp-simple : Config - FTP connection setting"을 클릭해줍시다!

위와 같이 화면이 나올텐데요, 

ftp-simple-temp.json에서 연결할 FTP의 정보들을 세팅하면 됩니다!

JSON 파라미터의 명세는 아래 표를 참조해주세요⬇

JSON Parameter Description
name ftp 서버의 이름을 입력합니다. 
host 연결할 서버의 도메인 혹은 IP 주소를 입력합니다.
port 연결할 서버의 접속 포트를 입력합니다. 
type 연결할 프로토콜의 타입을 입력합니다. 
username ftp 서버의 계정(ID)을 입력합니다.
password username 파라미터에 입력한 계정에 맞는 비밀번호를 입력합니다.
path ftp 서버 접속 폴더의 경로를 입력합니다.
autosave 접근한 서버에서 내용을 수정한 후 자동으로 저장할 것인지 결정합니다. 
true : 내용 수정 후 저장 시 서버에서도 자동 저장.
false :  자동 저장 기능 사용 안함.
confirm 내용 수정 후 저장 시 확인 메세지(confirm)를 띄울 것인지 결정합니다. 
true : 확인 메세지 호출.
false : 확인 메세지 없이 바로 저장. 

 

작성을 마무리하셨으면 저장해주시고, 다시 명령어 창에서 이번에는

"ftp-simple : Open - Open the file directly from FTP server"를 입력하여 실행합시다!

 

명령어 입력 후 엔터를 누르면 아래와 같이 화면이 나올텐데요, 

JSON 파일에서 설정한 FTP 정보가 정상적으로 등록되어 있다면

목록에 위 사진과 같이 도메인명 혹은 IP 정보가 활성화되어 있을 것입니다. 

 

자신이 접근하려는 서버가 맞다면 클릭하신 다음 다시 명령창으로 돌아가 이번에는 

"ftp-simple : Remote directory open to workspace"를 입력합니다. 

 

명령어 입력 후 엔터를 누르면 아래와 같이 연결하려는 서버의 FTP 디렉토리가 보일 거에요!

이 중 접근하고자 하는 디렉토리를 클릭해줍시다 ㅎㅎ

(테스트 중인 회사들의 관련 자료들이 있어 가린 점은 양해 부탁합니다 ㅎㅎ) 

 

이 중 활성화하려는 디렉토리를 하나 클릭하면 오른쪽 아래에 잠깐 기다리는 alert이 나올 겁니다!

 

잠시 기다리다 보면 아래 화면과 같이 한번 더 alert이 뜰 텐데요,

(해당 단계만 번역기를 돌리기 위해 사진을 찍어두었어요 ㅎㅎ 파파고 만세~)

여기서 파란색 버튼을 클릭하면 연결이 완료됩니다.

 

이제 아래 화면과 같이 보인다면, 정상적으로 서버와 연결이 된 것입니다. 

이렇게 자신이 원하는 소스코드를 펼쳐서 수정하시면 되는데요, 

저장하면 자동으로 서버에도 반영이 되니 저장 전 백업은 필수입니다!!

.

이제 수정을 마치고 FTP 연결을 종료하고자 한다면 아래와 같이 명령어를 입력해주세요. 

"ftp-simple : Close all FTP connections."

 

이렇게 오늘은 VS Code에서 FTP 연결하는 방법을 포스팅해보았습니다! 

그럼 이만~

 

 

'기타' 카테고리의 다른 글

막강한 소스코드 에디터, Visual Studio Code 설치하기!  (0) 2021.09.06

안녕하세요 워누입니다.

 

학교 과제와 기말고사, 그리고 회사를 퇴사하는 등 이슈가 많아서 한동안 블로그를 방치해버렸습니다..😂😂

이제 종강도 했고, 퇴사도 했으니 블로그를 다시 꾸준하게 작성해볼까 합니다!

그럼 바로 본론으로 진행해볼게요~

.

오늘은 PHP에서 API를 활용하여 다른 서버(URL)로 파일을 전송하는 방법을 포스팅하겠습니다!

 

이전 포스팅 중 PHP로 이미지를 업로드하는 방법이 있었죠?

 

https://seoneu.tistory.com/29

 

[PHP] 이미지 파일 업로드하기!

안녕하세요 워누입니다! 오늘은 PHP로 이미지 파일을 업로드하는 방법을 포스팅하도록 하겠습니다! 거두절미하고 바로 가보도록 하죠~ . 여러분들도, 저도 인터넷에서 사진이나 문서 파일을 웹

seoneu.tistory.com

 

해당 페이지에서 언급했었던 것처럼 다른 서버로 파일을 전송할 때  "multipart/form-data" 설정을 반드시 해주어야 한다고 했었는데요, 이 설정이 무엇을 의미하는지 간략하게라도 알아야 제가 쓴 코드를 보고 이해하거나 직접 작성하실 때 이해를 하기 쉽겠죠?

 

위 페이지에서 포스팅한 내용 중 클라이언트 측의 샘플 코드를 잠깐 보겠습니다!

<!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>

 

해당 소스에서 form 데이터 내 input type을 "file"로 설정했었던 적이 있었죠?"file" 속성은 말 그대로 파일 업로드를 위해 설정하는 속성인데요, 이를 form 데이터에 담아 서버 측으로 전송하는 원리입니다. 이 때, form 태그의 enctype을 "multipart/form-data"로 지정했었습니다. 

 

"multipart/form-data"로 보내는 이유를 알려면 먼저 HTTP 통신 원리와 Content-type을 알아야 합니다.

 

간략하게 설명을 드리자면 통신 원리는 매우 간단해요!

스펙에 맞게 클라이언트와 서버가 문자로 구성된 데이터를 송수신하는 것이라고 생각해주시면 됩니다. 파일을 전송한다고 해서 jpg 파일이나 txt 파일 자체가 전송되는게 아니라 파일 역시도 문자의 형태로 전송되는 것이고, 이러한 문자의 형태를 스펙에 맞추어 서버에 송신하는 것 뿐이거든요.  이미지, 텍스트, 동영상 파일 모두 문자열로 이루어져 있는데 확인하고 싶으신 분들은 아무 이미지 파일이나 동영상 파일 등을 메모장 등 텍스트 편집기로 열어보세요!

 

Content-Type은 Body에 전송되는 메세지(데이터)의 타입을 정의하는 속성으로 HTTP 요청 Header에서 정의합니다. 이 중에서 파일을 송신할 때 사용하는 속성값이 바로 "multipart/form-data" 형식인 것이지요. 

 

관련해서 참고하기 좋은 블로그가 있어서 공유해봅니다! 

https://velog.io/@shin6403/HTTP-multipartform-data-%EB%9E%80

 

상세 내용은 위에서 보시고 핵심인 PHP 코드를 같이 볼까요?

<?php
header("Content-Type:text/html; charset=utf-8;"); 

// 요청 데이터(API 요구 사항에 맞게 파라미터 설정)
$value_1 = "value";				// key_1에 대한 value 
$value_2 = "value";				// key_2에 대한 value


// 파일 절대 경로 설정 (예시)
$fileDir = "C:/Bitnami/wampstack-7.2.14-0/apache2/htdocs/img/test.jpg";

// 요청자 검증을 위한 암호화 데이터(수정 금지).
$userId = "ID";
$userPwd = "Password";
$EncryptBase64 = base64_encode($userId.":".$userPwd);

// 요청 데이터를 배열 형식으로 최초 set.
$data = array(
	'key_1' => $value_1,
	'key_2' => $value_2,
	'fileDir' => $fileDir,	// 파일경로
	'fileContents' => file_get_contents($fileDir)	// 파일 내용
);	

// 배열 형식의 데이터를 multipart/form-data 형식으로 변환
$postData = setMultipartFormData($data);

// 요청 API Header 정보(Api-Key 값은 전달받은 값 그대로 사용.)
$headers = array(
	'Content-Type: multipart/form-data;boundary=^*******^',
	'Content-Length: '.strlen($postData), 
	'Authorization: Basic '.$EncryptBase64
);

// 요청 URL 
$postUrl = "https://";

// 응답 파라미터 변수 선언 및 초기화
$response = "";

// API 호출 및 응답 데이터 저장
$response = reqPost($postData, $postUrl, $headers); 
	
// 응답 데이터 print
echo "Response : " . $response;

// api 요청
function apiCall($data, $url, Array $headers){
	$ch = curl_init();
	curl_setopt($ch, CURLOPT_URL, $url);
	curl_setopt($ch, CURLOPT_HEADER, true);
	curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
	curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);	
	curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 30);		//connection timeout 30
	curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);	
	curl_setopt($ch, CURLOPT_POST, true);			// API 호출 시 method를 post로 지정
	curl_setopt($ch, CURLOPT_POSTFIELDS, $data);	// Data 
	$response = curl_exec($ch);
	curl_close($ch);	 
	return $response;
}

// multipart/form-data 형식으로 변환하는 함수
function setMultipartFormData($arrayData){
	
	$fileData = $arrayData['fileContents'];
	$boundary = "^*******^";
	$data = "";
	unset($arrayData['fileContents']);

	foreach ($arrayData as $name => $content) {
		$data .= '--' . $boundary . '\r\n'
		. 'Content-Disposition: form-data; name="' . $name . '\"\r\n\r\n'
        . $content . '\r\n';
	}
		
	// 파일 데이터 저장
	$data .= '--' . $boundary . '\r\n'
		. 'Content-Disposition: form-data; name="file"; filename="' . $arrayData['fileDir'] . '"' . '\r\n'
		. 'Content-Type:application/octet-stream' . '\r\n\r\n';
	$data .= $fileData . '\r\n';
	$data .= "--" . $boundary . '--\r\n';

	return $data;
   }
?>

 

** 주의사항 : 요청 필드는 제가 임의로 작성해서 Key_1, Key_2 등으로 만든 것이지만 실제로는 API 명세서에서 요구하는 필드를 입력하여야 합니다. 일반적으로 파일 절대 경로나 파일명을 요구하므로 fileDir이라는 필드를 만들었지만 이는 제가 임의로 작성한 코드이므로 API 명세에 따라 수정이 필요합니다. 

또한 예시 코드로 작성하다보니 인증 방식 역시 HTTP 기본 인증 방식인 Basic Authorization을 선택하여 만들었습니다. 실제 코드를 작성하실 때 API 명세에 별도 암호화 방식을 요구할 수 있으니 주의하셔야 합니다.

 

이렇게 예시 코드를 작성해 보았는데요,

위에서 언급했던 "multipart/form-data" 파라미터는 $headers에 담아 HTTP header 정보에 담았습니다!

 

이중 가장 자세히 보아야 할 부분은 제가 임의로 만든 setMultipartFormData 함수입니다!

 

배열로 세팅한 $data를 매개변수로 받아 key-value 데이터와 파일 내용을 분리해서 다시 세팅하는 형태로 구성되어 있는데요, 굳이 이러한 과정을 거치는 이유는 multipart/form-data 형식을 준수하기 위함입니다!

 

우선 첫째로 $boundary 변수는 header에 Content-type=multipart/form-data 지정 시 함께 지정한 boundary와 같은 값을 가져야 합니다. 이유는 boundary가 HTTP 요청 Body 데이터 중 파일 데이터를 구분하기 위한 역할을 가지기 때문입니다. 

 

둘째로 $boundary 양 옆으로 "--" 기호와 "\r\n" 이스케이프 시퀀스를 넣어 놓았는데요,

먼저 "--" 기호는 body의 끝을 알리는 구분자이며 "\r\n" 이스케이프 시퀀스는 Header와 Body, Body 데이터 간의 구분을 위해 넣었다고 생각하시면 됩니다!

 

...?

이해가 되지 않는 부분들이 생기실 거에요..!

여기선 요청 Body 데이터만 세팅하는데 왜 또 header/body를 구분하느냐 말이죠??

 

이유는 body의 내용을 보시면 이해되실 거에요!!

body 데이터에서 Content-Disposition을 지정해주었죠? 이는 HTTP 응답 Header의 한 종류로 브라우저에 Content가 웹페이지로 나타낼지, 다운로드될지 정하는 속성이에요. 즉, $headers에 담은 HTTP 요청 Header 정보가 아닌 응답 Header 정보와 구분하기 위해 "\r\n"을 두번 써서 구분하는 것이랍니다 ㅎㅎ 

Body 데이터 간 구분은 "\r\n"을 한번 써서 구분합니다!

 

이외 자세한 HTTP 통신 규약은 아래 사이트를 참고해주세요!

https://www.donnywals.com/uploading-images-and-forms-to-a-server-using-urlsession/

 

추가적으로 응답 헤더 정보인

Content-Disposition, application/octet-stream에 대한 자세한 내용은 각각 아래 페이지를 참고해주세요!

 

Content-Disposition :

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Disposition

 

Content-Disposition - HTTP | MDN

In a regular HTTP response, the Content-Disposition response header is a header indicating if the content is expected to be displayed inline in the browser, that is, as a Web page or as part of a Web page, or as an attachment, that is downloaded and saved

developer.mozilla.org

Content-Type: application/octet-stream : https://developer.mozilla.org/ko/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types

 

MIME 타입의 전체 목록 - HTTP | MDN

다음은 일반적인 확장자로 정렬된, 문서 타입과 관련된 MIME 타입의 포괄적인 목록입니다.

developer.mozilla.org

 

참고해야할 사이트가 많지만 찾아보면 분명 도움이 되실 내용들입니다!

.

제가 위에 작성한 코드들은 자바로 작성되어 있던 샘플과 위 페이지를 참고하여 만든 것으로,

필요하신 분들은 가져가서 작성해주셔도 무방합니다만 그냥 복사-붙여넣기하는 방식은 본인에게 제일 좋지 않은 개발습관이에요!

몇몇 분들께서 제 코드를 가져다가 본인이 작성한 코드라고 말하다가 신고되었다고 댓글로 알려주신 사례가 꽤나 적지 않네요..물론 바로 지워주시긴 하셨지만..

 

저 역시도 초급 개발자이다보니 많은 웹 페이지와 서적들을 보고 공부하느라 내용이 틀릴 수도 있으니 만약 제가 작성한 내용을 보시고 틀린 부분이 있다면 지적해주세요 ㅎㅎ

 

오늘 포스팅은 여기서 마치도록 할게요!

긴글 읽어 주셔서 감사합니다~~😃😃😃

안녕하세요 워누입니다!

 

오늘은 안드로이드에서 앱을 개발하기 위한 도구,

Android Studio를 맥북에서 설치하는 방법을 포스팅해보고자 합니다! 

 

바로 시작해보도록 하죠!

우선 안드로이드 스튜디오 공식 홈페이지에서 안드로이드 스튜디오를 다운로드 받아볼까요?

아래 링크를 클릭해주세요!

 

https://developer.android.com/studio

 

Download Android Studio and SDK tools  |  Android Developers

developer.android.com

 

 

링크를 클릭하면 위와 같은 화면이 보일 겁니다!

바로 "Download Android Studio" 버튼을 클릭해주세요 ㅎㅎ

 

클릭하면 약관 및 라이센스에 관련된 내용이 나올건데요, 

"I have read and agree~" 문장 왼쪽에 있는 체크박스를 클릭해주세요!

 

클릭하시면 위와 같이 버튼 두개가 활성화되는데요, 

저는 Apple M1 칩 기반 CPU를 사용하고 있어 "Mac with Apple chip"를 클릭하여 다운로드 받았습니다!

 

이 글을 읽으시면서 설치하시는 분들은 사용하시는 칩이 인텔(Intel) 기반 칩인지, 애플(Apple) M1 칩인지 꼭 확인하고

다운로드 받아주세요!!

(잘못 다운로드받아서 작동 안되도 내책임 아님 ㅎ)

 

 

1~2분만 기다려주면 다운로드가 완료되니 잠시 SNS하면서 시간을 때워보아요!!

 

Finder에서 안드로이드 스튜디오가 다운로드 받아진 것을 확인하였다면, 

zip 파일이므로 압축 해제를 진행해주세요!

 

압축 해제되면 응용 프로그램 형태로 Finder에서 보여질 거에요!

더블 클릭해서 실행해줍시다 ㅎㅎ

"열기" 버튼을 클릭해서 바로 실행해주세요!

따로 포함할 디렉토리나 Configuration이 있다면 위에 것을 체크하고, 

저처럼 없다면 아래 것을 체크해주세요 

 

영어가 가득 써져 있지만 대충 해석해보면 구글에게 데이터 수집을 공유할거냐 말거냐를 묻는 것인데, 

전 그냥 "Don't send" 클릭해서 넘어갔어요!

 

설치하는 사람을 환영해주는 문구군요!

얼른 "Next"를 클릭해서 넘어갑시다.

 

설치 타입을 묻는 화면입니다!

"Standard"를 클릭하고 다음으로 넘어가시면 됩니다. 

 

배경은 각자 취향대로 고르고 넘어가시면 됩니다!

 

설치할 컴포넌트 목록 및 설정 확인을 하는 화면입니다. 

스크롤 내리면서 확인한번 하시고 "Finish" 버튼을 클릭해주세요!

 

컴포넌트 설치를 시작합니다! 

제 맥북 기준으로 한 5분 걸렸으니 유튜브 영상 하나 보고 오면 딱 설치가 완료되어 있을거에요!!

 

5분 보고 왔더니 Finish 버튼이 활성화 되어있네요 ㅎㅎ

Finish 버튼 클릭해서 마무리해줍시다!

 

이제 Android Studio를 이용해 개발이 가능합니다!!

(처음 개발하시는 분들은 왼쪽 화면의 "Learn Android Studio" 버튼을 클릭해서 배워보는 것도 괜찮으니 한번 해보세요!)

 

글을 읽어주시는 분들께서 도움이 되셨길 바라며

Android Studio 설치 방법에 대한 포스팅은 여기서 마무리할게요!

 

+ Recent posts