끄적끄적 개발기록

안녕하세요 워누입니다!

지난 포스팅에 이어 이번에는 STS4 기본 설정 후 첫 프로젝트를 띄워보고자 합니다. 

우선 STS4를 실행해주세요!

첫번째로 세팅할 것은 JRE 설정입니다! 

이제 상단 매뉴에서 [Windows > Reference] 를 클릭해주세요.

Preference 창에서 [JAVA > Installed JREs] 매뉴로 접속해보면

위와 같이 STS에 이미 설치된 JRE가 있다는 것을 알 수 있습니다.

그렇지만 저는 이전 포스팅에서 JDK를 설치했었기 때문에 설치한 JDK로 세팅을 바꾸도록 하겠습니다!

.

오른쪽 위 [Add...] 버튼을 클릭해봅시다. 

여기서 [Standard VM]을 선택하고 [Next >] 버튼을 클릭해주세요!

여기서 [Directory]를 클릭한 후 JDK가 설치된 경로의 폴더를 선택해주세요.

그러면 아래와 같이 나올 것입니다!

이제 [Finish] 버튼을 클릭해서 완료해주세요!

그럼 아래와 같이 [Preferernce] 화면으로 돌아오면서 위에서 세팅한 JDK가 함께 추가된 것을 볼 수 있습니다.

새로 설치한 JDK 옆 체크박스를 클릭한 다음 [Apply] 버튼을 클릭해주세요.

이후 왼쪽 매뉴에서 [JAVA > Compiler]를 클릭해주세요!

JDK Compliance level에서 자신이 설치한 JDK 버전과 맞는지 확인해서 수정해주세요!

저는 11버전을 설치했기 때문에 11로 수정했습니다. 

버전 수정이 완료되었다면 [Apply] 버튼을 클릭해줍시다!

.

이번에는 인코딩을 설정해보겠습니다. 

왼쪽 매뉴에서 [General > Content Types]를 클릭해줍시다. 

화면 내 Content types 항목 중 Text를 클릭하여 Default encoding이 어떻게 나오는지 확인해주세요!

저는 아무것도 안 떠 있어서 아래와 같이 "UTF-8"을 입력해주었습니다.

저처럼 입력을 직접 해주신 분이 계시다면 오른쪽 [Update] 버튼을 꼭 클릭해주세요!

[Text] 항목에서 "UTF-8" 적용을 완료했다 하더라도 하위 항목 중

인코딩이 제대로 설정이 안되어있는 케이스들이 있을 수 있어요.

저의 경우에는 [Java Properties File]과 [Spring Properties File]이 "ISO-8859-1"으로 세팅이 되어 있었습니다!

이렇게 세팅되어 있는 경우도 있으니 꼭 찾아서 "UTF-8"로 설정을 변경하고 [Update]를 클릭해주세요. 

다음은 [General > Workspace] 매뉴로 이동해봅시다!

저는 이미 [Text file encoding] 항목에 "Other: UTF-8"이 잘 적용되어 있었습니다!

만약 다른 인코딩으로 세팅된 분이 있다면 여기도 "UTF-8"로 수정한 다음 [Apply] 버튼을 클릭해주세요!

.

인코딩 세팅을 마무리하고, 마지막으로 [Gradle] 매뉴로 이동해보겠습니다. 

[Java home] 항목에 [Browse] 버튼을 클릭하여 JDK가 설치된 경로를 입력합니다. 

그리고 위와 같이 [Authmatic Project Synchronization] 항목에 체크가 되어 있지 않다면 체크박스 버튼을 클릭해주세요!

위와 같이 되었다면 세팅이 정상적으로 마무리 된 것입니다. 

이제 [Apply] 버튼을 클릭한 후 [Apply and Close] 버튼을 클릭해서 [Preference] 화면을 종료해주세요!

.

다시 처음화면으로 돌아왔네요 ㅎㅎ

이제  [Project Explorer]에서 [Create new Spring Starter Project]를 클릭해줍시다!

저는 [Type]을 "Gradle - Groovy"로, [Java Version]을 "11"로, Name은 "Sample", Package 명은 "sample"로 했습니다. 

이 글을 보고 세팅하시는 분들은 PC 환경에 맞게 세팅을 수정해주시고 [Next >] 버튼을 클릭해주세요!

여기서는 스프링 부트 버전 및 의존성을 설정할 수 있어요!

지금은 간단한 웹 프로젝트를 실행할 예정이므로 아래 두 가지만 추가해줍시다🙂

[Developer Tools > Spring Boot DevTools]

[Web > Spring Web]

다른 의존성에 대한 도구들은 나중에 알아가보도록 하고 우선 [Next] 버튼을 클릭해줍시다!

이 화면에서는 Spring Boot의 구성 정보를 확인할 수 있습니다. 

아직 아무것도 모르므로 일단 [Finish] 버튼을 클릭해줍시다!

.....? 이 오류는 무엇인가...

오류 메세지:

'Import Getting Started Content' has encountered a problem.

NoMatchingConfigurationSelectionException

해당 내용을 구글링해서 찾아보니

Spring Boot 3.x 버전으로 사용하려면 JAVA 17 버전 이상으로 세팅이 되어야 한다는군요...

처음 다뤄보니 별 실수를 다하는군요..😂

여러분은 저같은 실수 하지 마시고 Spring Boot 버전을 JAVA 버전에 맞게 사용하세요!!

여튼 저는 생성했던 프로젝트를 삭제하고 아래와 같이 다시 생성했습니다. 

(나중에는 JDK 17 버전 다시 설치하고 돌아오겠습니다ㅋㅋ)

처음과 다르게 Spring Boot 버전을 2.7.11로 세팅하고 프로젝트를 생성했습니다!

.

이번에는 문제 없이 정상적으로 생성이 된 것 같군요..!

그렇다면 이제 실제로 Run을 시켜보도록 하겠습니다. 

.

프로젝트를 우클릭한 상태에서 [Run As > Spring Boot App] 을 클릭해주세요!

콘솔 창을 보면 위와 같이 출력된 것을 볼 수 있습니다! 

이 중에서 5번째 줄을 살펴보자면, 

STS에 내장된 Tomcat 서버가 8080 포트로 구동되었다는 사실을 알 수가 있습니다!

그럼 이제, Browser에 접속해서 결과를 볼까요?

.

브라우저를 하나 띄워주시고 "localhost:8080"을 입력해서 접속해주세요!

....??? 이번엔 또 무엇인가..싶겠지만 이번에는 다행히 정상적인 결과입니다. 

프로젝트를 띄우기는 했지만 화면에 보이는 부분은 자동으로 만들어지지 않기 때문에 이런 화면이 나온 것이죠!

.

프로그래밍의 첫 관문인 "Hello World!"를 띄워보면 조금이나마 감을 잡을 수 있을 것 같네요 ㅎㅎ

이번엔 sample package 밑에 Controller 패키지를 생성해봅시다!

위 화면에서 sample 패키지를 우클릭 한 후 [New > Package]를 클릭합니다!

화면을 띄웠다면 [Name]에 "sample.controller"를 입력해준 후 [Finish]  버튼을 클릭합니다. 

[Finish] 버튼을 클릭하여 완료하면 아래 화면과 같이

sample 패키지 안에 controller 패키지가 추가된 것을 볼 수 있습니다!

이제 controller 패키지 밑에 HelloWorldController 클래스를 생성해봅시다!

controller 패키지 우클릭 후 [New > Class]를 클릭해주세요!

Name에만 "HelloWorldController"라고 이름합시다. 

원래 Java에서는 [public static void main(String[] args)] 항목을 추가하지만

여기서는 그럴 필요 없이 여러 어노테이션들이 대신 기능을 수행해줄겁니다 ㅎㅎ

.

[Finish] 버튼을 클릭하면 아래와 같이 나올 겁니다. 

자, 이제 여기다가 아래의 코드를 작성해볼까요?

package sample.controller;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class HelloWorldController {

	@RequestMapping("/")
	public String hello() {
		return "Hello World!";
	}
}

코드에 대하여 짤막하게 설명하자면,

@RestController 어노테이션은 REST 컨트롤러 기능을 수행하도록 하는 어노테이션이며, 

@RequestMapping 어노테이션은 해당 메서드를 실행할 수 있는 주소를 설정하는 어노테이션입니다. 

여기서는 기본 주소를 " / "로 지정하였습니다. 

대충 설명했지만 나중에 조금 더 복잡한 코드가 나올 때 자세히 설명드릴 수 있을 것 같아요! 

우선 작성한 코드를 가지고 다시 한 번 프로젝트를 실행하겠습니다!

로그도 정상적으로 실행이 되었구요!

무사히 "Hello World!"도 띄웠습니다!

 .

조금은 다사다난 했지만 Spring Boot의 첫 발걸음을 뗀 기분입니다! 

첫 발걸음을 떼는 다른 분들은 저보다는 덜 실수하기를 바라며 이만 글을 마치겠습니다😀

감사합니다!

안녕하세요 워누입니다😀

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

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

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

https://seoneu.tistory.com/17

자바스크립트에서는 위에서 언급한 것처럼 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>";
}


?>

<테스트>

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>";
}

?>

<테스트>

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

사실.. 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

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

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