끄적끄적 개발기록

[JAVA/Spring Boot] STS4_JAVA 11 설정 오류

워누 — Wed, 6 Dec 2023 23:14:18 +0900

안녕하세요 워누입니다

오늘 포스팅은 STS에서 새 프로젝트 생성 시 JAVA 11을 고를 수 없었던

이상한 오류가 발생되어 기록을 남겨보고자 합니다

우선 오류 화면은 다음과 같습니다!

새로운 프로젝트 하나를 따기 위해서 "Spring Starter Project"를 클릭했으나..

Java Version 선택 옵션이 17과 21만 존재하더군요.

기본 옵션은 아래 링크에서 작성한 것처럼 제대로 세팅되어 있는 상황이었구요!

https://seoneu.tistory.com/51

[JAVA/Spring Boot] STS4 기본 설정 및 첫 프로젝트 띄우기

안녕하세요 워누입니다! 지난 포스팅에 이어 이번에는 STS4 기본 설정 후 첫 프로젝트를 띄워보고자 합니다. 우선 STS4를 실행해주세요! 첫번째로 세팅할 것은 JRE 설정입니다! 이제 상단 매뉴에서

seoneu.tistory.com

STS를 밀고 다시 설치해보아도, Java 환경변수를 다시 설정해주어도 동일하게 11버전은 안되더라구요.

(17/21은 잘만 선택되는데 말이죠)

구글에 검색해도 해당 이슈에 대한 현상이 나오지 않아 여러모로 불편하던 중

Spring 공식 사이트에서 2.7.x 버전의 지원 종료에 대한 내용을 볼 수 있었습니다.

(https://spring.io/projects/spring-boot#support)

이것 때문인지 아닌지는 모르겠지만 여튼 저는 STS에서 11버전을 사용할 수 없는 상태입니다.

일단 boot 3.x 버전을 공부해보기 위해서라도 17 이상을 설치해보긴 하겠지만

여러모로 레거시에 대한 서비스 종료가 너무 빠르게 진행된다는 건 아쉽긴 하네요ㅜㅜ

혹시 저와 같은 문제를 겪고 계시거나 문제를 해결하신 분이 있다면 댓글로 달아주시면 감사하겠습니다

(~~저는 결국 해결 못하고 맥에 설치한 인텔리제이로 프로젝트를 진행해보겠습니다...~~ )

[JAVA/Spring Boot] STS4 기본 설정 및 첫 프로젝트 띄우기

워누 — Wed, 3 May 2023 04:01:26 +0900

안녕하세요 워누입니다!

지난 포스팅에 이어 이번에는 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의 첫 발걸음을 뗀 기분입니다!

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

감사합니다!

[JAVA/Spring Boot] Windows 환경에서 STS 4 설치하기

워누 — Mon, 1 May 2023 12:17:37 +0900

안녕하세요 워누입니다

오늘은 윈도우 PC에 Spring Boot 설치하는 방법에 대해서 포스팅하겠습니다!

우선 Spring boot 설치를 하기 전에 JDK는 기본적으로 설치가 되어 있어야 합니다.

JDK 설치가 되어 있지 않으신 분은 아래 사이트에서 JDK를 1.8 버전 이상으로 설치해주세요..!

https://www.oracle.com/java/technologies/downloads/

Download the Latest Java LTS Free

Subscribe to Java SE and get the most comprehensive Java support available, with 24/7 global access to the experts.

www.oracle.com

JDK 설치 및 환경 변수 편집 방법은 따로 설명드리지 않고 바로 넘어가도록 할게요

편집이 완료되신 분은 아래 사이트로 접속해주세요.

https://spring.io/tools

Spring | Home

Cloud Your code, any cloud—we’ve got you covered. Connect and scale your services, whatever your platform.

spring.io

해당 사이트에 접속하시면 아래와 같이 운영체제에 맞게 다운받을 수 있게 작성이 되어 있어요!

여기에서 설치하시는 PC의 운영체제에 맞는 tool을 클릭하시면 됩니다.

저는 여기서 "4.18.0 - WINDOWS X86_64"로 클릭하여 다운로드 받았습니다.

다운받은 파일은 "Spring-tool-suite-4-4.18.0.RELEASE.(이하 생략)"라는 이름의 jar 파일입니다!

버전이 업데이트 되면 제가 받은 파일명과는 달라질 수 있을 것 같네요ㅎㅎ

압축 파일 구성은 위 이미지와 같이 되어 있는데요,

압축을 한번 풀어보겠습니다..!

(압축을 풀어보니 contents.zip 압축파일이 포함되어 있어 함께 해제해 주겠습니다..!)

여기 있는 파일을 압축 해제해보니...?!?!

실패한 친구들이 꽤 있긴 해서 걱정되긴 합니다만 (나중에 프로젝트 띄울 때 실패되진 않겠죠..?)

나머지는 압축 해제가 성공적으로 된 것 같네요ㅎㅎ

그럼 이제 SpringToolSuite4.exe 파일을 실행해보도록 하죠!

클릭해보면 위 화면과 같이 나옵니다!!

그리고 eclipse에서 본 것처럼 workspace 경로 설정 단계가 있네요 ㅎㅎ

각자 자신의 환경에 맞게 해당 경로를 수정해주시면 됩니다!

그리고 Launch 버튼을 클릭하면..!

STS가 정상적으로 실행된 것을 볼 수 있습니다!!

이번 포스팅은 여기서 마무리하고

다음 포스팅에서는 기본 환경 설정 후 첫 프로젝트를 만드는 과정을 포스팅하도록 하겠습니다!

[HTML5] 공간 분할 태그에 대해 알아봅시다!

워누 — Sat, 14 May 2022 12:23:39 +0900

안녕하세요 워누입니다

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

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

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

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

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

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

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

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

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

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

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

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

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

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

오늘은 여기까지:)

읽어주셔서 감사합니다

[Javascript] 키워드 var와 let의 차이는 무엇일까?

워누 — Mon, 21 Feb 2022 01:25:04 +0900

안녕하세요 워누입니다

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

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	특정 스코프 내에서만 사용	불가능

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

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

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

[PHP] filter_var() 함수로 유효성 검사하기!

워누 — Wed, 9 Feb 2022 08:00:47 +0900

안녕하세요 워누입니다

오늘은 지난번 정규표현식 2번째 포스팅에서 언급했던 filter_var() 함수에 대하여 포스팅해보고자 합니다!

(이메일 유효성 검사를 하는 방법으로 정규표현식과 함께 소개하였으며 자세한 내용은 아래 링크로!!)

https://seoneu.tistory.com/43

[PHP] 전화번호, 이메일 유효성 검사 :: 정규표현식 활용 (2)

안녕하세요 워누입니다 지난 포스팅에 이어 오늘은 전화번호와 이메일 데이터에 대하여 정규표현식을 이용해 유효성을 검사해보는 방법을 포스팅해보겠습니다! 1. 전화번호 전화번호의 유

seoneu.tistory.com

PHP에서 제공하는 filter_var() 함수는 특정한 값을 검사하는 함수로,

두 번째 매개변수의 값에 따라 검사할 유형을 다르게 설정할 수 있습니다.

아래와 같은 형식으로 사용할 수 있습니다

filter_var('검사할 값', 검사할 유형, (옵션));

'검사할 값'은 말 그대로 검사를 받을 대상(값)을 의미하며,

'검사할 유형' 은 어떤 형식으로 검사할 건지를 결정할 수 있습니다!

검사할 유형에 따라 옵션을 사용할 수 있으며 자세한 내용은 아래 표를 참고해주세요

파라미터(Parameter)	검사 유형	설명(Discription)
FILTER_VALIDATE_BOOLEAN FILTER_VALIDATE_BOOL	Bool	'1', 'true', 'on', 'yes'라는 데이터를 검사하면 'TRUE'를 응답합니다. 이외의 다른 값은 'FALSE'를 응답합니다. *PHP 8 버전에서 추가된 파라미터입니다.
FILTER_VALIDATE_DOMAIN	도메인	입력된 값이 도메인 형식인지 검사합니다. (예시 : http://test.domain.com) 도메인 형식이 맞다면 'TRUE'를 응답하고, 아니라면 'FALSE'를 응답합니다. *PHP 7 버전에서 추가된 파라미터입니다.
FILTER_VALIDATE_EMAIL	이메일	입력된 값이 이메일 형식인지 검사합니다. (예시 : id@testmail.com) 이메일 형식이 맞다면 'TRUE'를 응답하고, 아니라면 'FALSE'를 응답합니다. <옵션 파라미터 및 설명> FILTER_FLAG_EMAIL_UNICODE : 이메일 주소 중 로컬(예시 중 'testmail'에 해당하는 부분)에 유니코드 문자를 포함하여 검사하는 옵션입니다.
FILTER_VALIDATE_FLOAT	실수	입력된 값이 실수 형식인지 검사합니다. (예시: 3.4, 12.01 ...) 이메일 형식이 맞다면 'TRUE'를 응답하고, 아니라면 'FALSE'를 응답합니다. <옵션 파라미터 및 설명> FILTER_FLAG_ALLOW_THOUSAND : 1000 단위 숫자를 콤마( , ) 기호로 구분합니다.
FILTER_VALIDATE_INT	정수	입력된 값이 10진수 정수 형식인지 검사합니다. (예시 : 1, 52, -4 ...) 이메일 형식이 맞다면 'TRUE'를 응답하고, 아니라면 'FALSE'를 응답합니다. <옵션 파라미터 및 설명> FILTER_FLAG_ALLOW_OCTAL : 입력된 값을 8진수로 검증하는 옵션입니다. 입력된 값이 0으로 시작하는 8진수의 데이터라면 TRUE를 응답하고, 아니라면 'FALSE'를 응답합니다. FILTER_FLAG_ALLOW_HEX : 입력된 값을 16진수로 검증하는 옵션입니다. 입력된 값이 0x 혹은 0X으로 시작하는 16진수의 데이터라면 TRUE를 응답하고, 아니라면 'FALSE'를 응답합니다.
FILTER_VALIDATE_IP	아이피	입력된 값이 IP(default : IPv4) 형식인지 검사합니다. (예시 : 192.168.0.101) 이메일 형식이 맞다면 'TRUE'를 응답하고, 아니라면 'FALSE'를 응답합니다. <옵션 파라미터 및 설명> FILTER_FLAG_IPV4 : IP를 IPv4 형식으로 검사하는 옵션입니다. FILTER_FLAG_IPV6 : IP를 IPv6 형식으로 검사하는 옵션입니다.
FILTER_VALIDATE_MAC	맥(MAC) 주소	입력된 값이 맥(MAC) 주소 형식인지 검사합니다. (예시 : 00-FF-2D-72-E8-F0) 맥 주소 형식이 맞다면 'TRUE'를 응답하고, 아니라면 'FALSE'를 응답합니다.
FILTER_VALIDATE_REGEXP	정규식(Perl 호환)	입력된 값이 정규식 형식인지 검사합니다. 정규식 형식이 맞다면 'TRUE'를 응답하고, 아니라면 'FALSE'를 응답합니다.
FILTER_VALIDATE_URL	URL	입력된 값이 URL 형식인지 검사합니다. (예시 : http://test.domain.com) URL 형식이 맞다면 'TRUE'를 응답하고, 아니라면 'FALSE'를 응답합니다. <옵션 파라미터 및 설명> FILTER_FLAG_SCHEME_REQUIRED : 입력 URL의 RFC를 준수하였는지 검사하는 옵션입니다. (예시 : http://example) FILTER_FLAG_HOST_REQUIRED : 입력 URL의 호스트 이름이 포함되어 있는지 검사하는 옵션입니다. (예시 : http://test.domain.com) FILTER_FLAG_PATH_REQUIRED : 입력 URL의 도메인 이름 뒤에 경로가 있는지 검사하는 옵션입니다. (예시 : http://test.domain.com/example/). FILTER_FLAG_QUERY_REQUIRED : 입력 URL의 쿼리 문자열이 있는지 검사하는 옵션입니다.(예: http://test.domain.com/example/test.php?query=value).

제가 알아보기 쉽게 작성한 내용이다 보니

위 표의 내용에 대하여 더 자세히 알고 싶으시다면 PHP에서 제공하는 매뉴얼을 참고해주시면 됩니다.

https://www.php.net/manual/en/filter.filters.validate.php

PHP: Validate filters - Manual

Contrary to what documentation implies, the FILTER_NULL_ON_FAILURE seem to affect any validation filter, not just FILTER_VALIDATE_BOOLEAN. I've been using that since PHP 5.2, and as of PHP 5.6.8 it still works. I have no clue if it's a blug or if it is as

www.php.net

그럼 이제 예시 코드를 보실까요?

간단하게 IP 검증하는 방법과 URL 검증하는 것 두 개 정도만 한번 보도록 하겠습니다!

(이번에는 요청-응답 페이지 없이 PHP 파일만 보여드리겠습니다 )

IP는 다음과 같이 검증합니다!

<?php

// 검증할 IP
$checkIP = "192.168.0.101" ;

// 검증
if (filter_var($checkIP, FILTER_VALIDATE_IP)) {
  echo $checkIP."은 정상적인 IP입니다.";
} else {
  echo "올바르지 않은 IP를 입력하셨습니다.";
}

?>

위 소스코드를 실행하면 다음과 같은 결과를 얻을 수 있습니다.

IP가 정상적으로 검증된 것을 볼 수 있습니다ㅎㅎ

검증하는 값이 IP 형식과 맞지 않다면 "올바르지 않은 IP를 입력하셨습니다."라고 나오겠죠?

다음으로 URL을 검증해봅시다!

<?php

// 검증할 URL
$checkUrl = "http://test.domain.com";

// 검증
if (filter_var($checkUrl, FILTER_VALIDATE_URL)) {
  echo $checkUrl."은 정상적인 url입니다.";
} else {
  echo "올바르지 않은 url을 입력하셨습니다.";
}

?>

위 소스코드를 실행하면 아래와 같은 결과를 얻을 수 있습니다.

마지막으로 URL 검증할 때 사용할 수 있는 옵션을 적용해보겠습니다!

표에 소개된 URL 추가 검증 옵션 중 "FILTER_FLAG_QUERY_REQUIRED"를 사용하여 검증해봅시다!!

<?php

// 검증할 URL+Qurey
$checkUrl = "http://test.domain.com/example/test.php?query=value" ;

// 검증
if (filter_var($checkUrl, FILTER_VALIDATE_URL, FILTER_FLAG_QUERY_REQUIRED )) {
  echo $checkUrl."은 정상적인 url입니다.";
} else {
  echo "올바르지 않은 url을 입력하셨습니다.";
}
?>

위 소스코드를 실행하면 아래와 같은 결과를 얻을 수 있습니다.

세번째 매개변수에 옵션을 넣어서 검증된 것을 볼 수 있습니다!

위 내용을 활용하여 PHP로 개발된 웹 페이지에서 특정 IP를 전달받는 경우, 회원가입 페이지를 구성하여 이메일을 검증하거나 숫자로 된 데이터(나이, 생년월일, 휴대폰 번호 등)를 검증하는 경우 등 나름 쓸만한 구석이 있을 것 같네요 ㅎㅎ

이 글을 읽어주시는 분들께서도 도움이 되었기를 바라며, 오늘 포스팅은 여기서 마무리하겠습니다

[Node.js] Mac에 nodejs, npm 설치하기!

워누 — Sun, 6 Feb 2022 08:00:10 +0900

안녕하세요 워누입니다

오늘은 최근 가장 핫한 프론트엔드 라이브러리인 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 패키지도 정상적으로 잘 설치되었네요!

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

[Javascript] 자바스크립트의 대표적인 버그를 알아봅시다!

워누 — Thu, 3 Feb 2022 08:45:19 +0900

안녕하세요 워누입니다

오늘은 누구나 알만한 자바스크립트의 대표적인 버그 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의 대표적인 버그들에 대해서 포스팅을 해보았는데요,

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

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

감사합니다

[Javascript] for in/for of 반복문 다뤄보기!

워누 — Wed, 19 Jan 2022 01:29:05 +0900

안녕하세요 워누입니다

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

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) 등의 자료형에도 사용할 수 있다고 하네요..!

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

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

[PHP] 전화번호, 이메일 유효성 검사 :: 정규표현식 활용 (2)

워누 — Wed, 12 Jan 2022 23:35:55 +0900

안녕하세요 워누입니다

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

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

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

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

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