공부하자

css 스타일 주기.(element.style.속성명),(element.classList.add/remove/toggle)

Ratus — Wed, 22 Mar 2023 17:41:03 +0900

const a = document.querySelector('#abc');

a.style.backgroundColor = '#000000';
a.style.속성명 = '속성값';

카멜 표기법을 이용하여 속성을 나타내고, 속성 값의 경우 ' ' 혹은 " " 로 감싸서 작성한다.
style 프로퍼티를 이용하면 태그에 직접적으로 값이 적용된다.
setAttribute와 비슷한 효과.
스타일 우선순위가 바뀐다거나, 같은 스타일을 여러가지 태그에 적용해야 할 때는 불필요한 코드가 많아짐.
태그의 class를 변경하는 방식이 좀 더 권장 됨.

className

특정 태그에 스타일을 줄 때 class의 name을 전부 바꿔버림

<!-- 예를들어 -->
<div class = "a" >
  <div class = "b"></div>
</div>

b 라는 클래스를 가진 div가 존재할 때 다음과 같은 스크립트를 작성하면

const a = document.querySelector('.a');

a.children[0].className = 'c';

HTML 실행 시 class 'a'가'c'로 변경된다.

<div class = "a" >
  <div class = "c"></div>
</div>

그런데, 기존의 class 를 놔두고 새로운 class를 추가하고 싶다면 어떻게 해야할까?
바로 classList 를 이용하는 것이다.

classList

클래스를 다루는 프로퍼티
add : 클래스를 추가
remove : 클래스를 삭제
toggle : 클래스가 있으면 삭제하고, 없으면 추가

a.children[0].classList.add('c'); /* 결과 : class = 'a c' */
a.children[0].classList.remove('c'); /* 결과 : class = 'a' */
/* 여러 개의 class 추가 삭제 시  */
a.children[0].classList.add('c','d','e'); /* 컴마를 통해 추가 */ /* 결과 : class = 'a c d e' */
a.children[0].classList.remove('c','d','e'); /* 컴마를 통해 추가 */ /* 결과 : class = 'a' */

a.children[0].classList.toggle('c'); /* c 라는 클래스가 있으면 삭제, 없으면 추가 */
a.children[0].classList.toggle('c',true); /* 두 번째에 Boolean 값을 받아 true 이면 add */
a.children[0].classList.toggle('c',false); /* 두 번째에 Boolean 값을 받아 false 이면 remove */

getAttribute,setAttribute,removeAttribute

Ratus — Wed, 22 Mar 2023 17:14:54 +0900

getAttribute

속성에 접근한다.
JavaScript에서 해당 속성에 접근하여 추가 작업을 필요로 할 때 사용.

setAttribute

JavaScript를 이용해 태그의 속성 값을 변경.
해당 속성이 없다면, 속성이 추가된다.
이 속성은 HTML 문서에 직접 적용된다.

removeAttribute

속성을 지워버린다.

네이버 스마트에디터 2.0 집어넣기

Ratus — Fri, 3 Mar 2023 10:51:11 +0900

이 글은 Front-end 만 이용했음을 우선 밝힙니다.

그래서 실제 기능적으로는 동작하지 않는게 많습니다.

우선 사진 업로드 기능을 제공하는 버전인 2.8.2 버전을 이용하였습니다.

https://github.com/naver/smarteditor2/releases/tag/v2.8.2.3

Release v2.8.2.3: archive v2.8.2.4259f59 · naver/smarteditor2

2.8.2.3 보안 패치 file_uploader_html5.php의 null byte injection 취약점 추가 보완 file_uploader.php의 리다이렉트 취약점 보완 sample.php에서 XSS filtering을 위해 HTMLPurifier라이브러리를 적용 sample.php -> sample/viewer/in

github.com

위 링크에 들어가서 ZIP 파일을 다운받습니다.

압축을 풀면 긴 폴더명이 있는데요, 그걸 본인이 원하는 폴더명으로 바꿉니다. 저는 smarteditor 라는 폴더명을 이용했습니다.

이름을 바꾼 smarteditor 폴더를 기존에 작업하던 폴더로 옮겨 담습니다.

예를 들어 저의 경우는 scatch1 이라는 작업 폴더 안에 smarteditor 라는 폴더를 집어넣었습니다.

이제 스마트 에디터를 집어넣을 html 파일을 선택한 후

Jquery를 추가해줍니다. 네이버 스마트 에디터를 이용하려면 Jquey를 이용합니다. 저는 최신 버전을 삽입했습니다.

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

그리고 스마트에디터를 불러옵니다.

<script type="text/javascript" src="../smarteditor/js/HuskyEZCreator.js" charset="utf-8"></script>

저의 경우 상대경로를 이용하였고, smarteditor폴더안의 js 폴더 안의 HuskyEZCreator.js 를 경로로 설정하였습니다.

그리고 에디터를 넣을 위치에 <textarea> 태그를 추가하면 됩니다.

<textarea class="wrap_editor" name="editorTxt" id="editorTxt" rows="20" cols="10"
          placeholder="내용을 입력해주세요"></textarea>

저는 에디터가 안불러졌을 때 테스트를 위해 class 를 이용하였습니다. class는 빼셔도 됩니다.

중요 : 저는 textarea를 form태그 안에 집어넣었습니다. 만약에 안되면 이용할 textarea를 form태그안에 넣어보세요.

마지막으로 연결된 js 파일에 에디터 설정을 해줘야합니다. 다음과 같은 코드를 붙여넣어주세요.

<script>
    let oEditors = []

    smartEditor = function() {
      console.log("Naver SmartEditor")
      nhn.husky.EZCreator.createInIFrame({
        oAppRef: oEditors,
        elPlaceHolder: "editorTxt",
        sSkinURI: "/smarteditor/SmartEditor2Skin.html",
        fCreator: "createSEditor2"
      })
    }

    $(document).ready(function() {
      smartEditor()
    })
  </script>

여기서 중요한것은 sSkinURI : 입니다. 이건 SmartEditor2SKin.html 파일의 정확한 상대 경로/절대 경로를 입력해줘야합니다. 본인의 파일 위치로 수정해주세요.

그러면 끝입니다.

해당 스마트 에디터 위에 이렇게 버전이 적혀있을 수 있습니다.

그러면 SmartEditor2SKin.html 파일을 열어서 코드를 수정해주시면 되는데요,

<span id="rev">Version: 2.8.2.4259f59 </span>

해당 코드를 찾아서 지워주세요.

*웹을 열어서 확인했을 때 에디터가 안보일 수 있습니다. 콘솔창을 열어서 확인했을 때 accessing a cross-origin frame. 이라는 오류가 있다면, LiveServer extension을 이용하시거나, 웹 서버에 올린 뒤 확인해보시면 정상적으로 작동하는지 확인할 수 있습니다. 해당 오류는 충돌을 막는것으로, 로컬 서버에서는 작동이 안되게 설정이 되어있습니다.

css 애니메이션 효과(3/2 공부)

Ratus — Thu, 2 Mar 2023 22:14:11 +0900

출처- https://youtu.be/krdFNe2R27E

@keyframes 는 움직임 시간의 흐름을 관리하는 규칙.

@keyframes name{
	from{ /* 속성: 값 */ } /* from : 애니메이션의 시작 장면 */
	n% { /* 속성: 값 */ } /* n% : 시작점부터 n% 흐른 시점의 장면. ex) 시작점부터 50% 흐른 시점 */
    to { /* 속성: 값 */ } /* to : 끝이 되는 장면 */
	
}

/* 여기서 장면은 실제 추가적인 장면이라기 보다는 프레임 단위의 행위..? 동작..? 을 뜻하는 듯 함 */

animation-name : @keyframes 애니메이션의 이름을 지정해서 요소로 가져온다.

animation-duration : 애니메이션이 한 주기를 완료하는데 걸리는 시간을 정의

animation-delay : 애니메이션 시작에 대한 지연을 지정.

animation-iteration-count : 애니메이션을 재생해야 하는 횟수를 지정.

animation-direction : 애니메이션을 앞으로, 뒤로 또는 번갈아 재생해야 하는지 여부를 정의

animation-timing-function : 애니메이션의 속도 곡선을 지정

animation-fill-mode : 애니메이션이 재생되지 않을 때(시작 전, 종료 후 또는 둘 다) 요소의 스타일을 지정

animation-play-state : 애니메이션이 실행 중인지 일시 중지되었는지 지정.

1.animation-name & animation-duration (ctrl + F 를 이용하면 찾기가 편합니다.)

css

/* 애니메이션 선언 */
/* img를 왼쪽 끝에서 오른쪽 끝으로 보내는 애니메이션. */
@keyframes move{ /* move 라는 이름의 애니메이션 선언 */
	from{ /* 애니메이션의 시작점 */
		left: 0;
		transform: rotate(0deg);
	}
	to{ /* 애니메이션의 끝점 */
		left: 500px;
		transform: rotate(360deg);
	}
}
/* animation-name 등장 */
img{
	animation-name : move; /* 애니메이션을 적용할 태그 or 클래스에 애니메이션 move를 연결 */
	animation-duration : 1s; /* 애니메이션이 동작할 시간. 이걸 적용안하면 애니메이션이 동작하지 않음. */
	position : relative; /* move를 보면 left 라는 속성을 사용했음. 이는 position 속성으로 기준점을 잡아줘야한다. */
}

/* img가 여러개라면 각각의 이미지의 duration을 따로 줄 수도 있음. */
img:nth-child(1){ /* :nth-child(n) 에서 첫 번째 자식은 0이 아니라 1이다. */
	animation-duration : 1s;
}
img:nth-child(2){
	animation-duration : 2s;
}

2. animation-iteration-count

css
/* 우선 1번에서 이용한 keyframes를 그대로 이용. */

img:nth-child(1){
	animation-iteration-count : 1; /* 기본 값, 한 번 재생 */
}
img:nth-child(2){
	animation-iteration-count : 4; /* 네 번 재생 */
}
img:nth-child(3){
	animation-iteration-count : infinite; /* 무한 재생 */
}

3. animation-direction

상단의 keyframes를 이용..


/* animation-direction 은 애니메이션을 앞으로, 뒤로, 또는 번갈아 재생 할 것인지를 정한다. */

img:nth-child(1){
	animation-direction : normal; /* 기본 값, 정방향 */
}
img:nth-child(2){
	animation-direction : reverse; /* 역방향 */
}
img:nth-child(3){
	animation-direction : alternate; /* 왕복 - 애니메이션 재생 횟수가 많아야함. 그래야 왕복이 보임. */
}
img:nth-child(4){
	animation-direction : alternate-reverse; /* 역방향 왕복 */
}

4. animation-delay

/* 상단의 keyframes 이용 */
/* 애니메이션 시작 전 delay(지연)를 걸어줌 */
img:nth-child(1){
	animation-delay: 0.5s;
}

5. animation-fill-mode

/* 상단의 keyframes 이용 */

/* animation-fill-mode : 애니메이션이 재생되지 않을 때(시작 전, 종료 후, 혹은 둘 다) 요소의 스타일을 지정 */
img:nth-child(1){
	animation-fill-mode : backwards; /* 정지시 첫 번째 키프레임(from)으로 이동. */
}
img:nth-child(2){
	animation-fill-mode : forwards; /* 정지시 마지막 키프레임(to)으로 이동. */
}

6. animation-play-state

/* 상단의 keyframes 이용 */

/* animation-play-state : 애니메이션이 실행중인지, 일시 중지 되었는지 지정. */

img:hover{/* 이미지 위에 마우스를 올려 두었을 때. */
	animation-play-state : paused; /* 제자리에 멈춤. 이미지에서 마우스를 떼면 다시 움직임. */
}

7. animation-timing-function

/* 상단의 keyframes 이용 */

/* animation-timing-funtion : 애니메이션의 속도 곡선을 지정. */

img:nth-child(1){
	animation-timing-funtion : ease; /* 기본 값(기본 속도) */
}
img:nth-child(1){
	animation-timing-funtion : ease-in; /* 가속 */
}
img:nth-child(1){
	animation-timing-funtion : ease-out; /* 감속 */
}
img:nth-child(1){
	animation-timing-funtion : ease-in-out;  /* 시작은 감속 돌아올 때는 감속 */
}
img:nth-child(1){
	animation-timing-funtion : linear; /* 균등 속도 */
}
img:nth-child(1){
	animation-timing-funtion : cubic-bezier(0.785,0.135,0.15,0.86);; /* 속도 곡선을 임의로 만듦 */
}

animation 도 한줄로 작성 할 수 있다.

animation : /* 이름 시간 속도 지연시간 횟수 방향 fillmode playstate; */

animation : /* (name) (duration) (timing-funtion) (delay) (iteration-count) (direction) (fill-mode) (play-state); */

transform(x축,y축,z축 회전)(+position과의 차이)(3/2공부)

Ratus — Thu, 2 Mar 2023 20:03:13 +0900

출처는 https://www.youtube.com/watch?v=DVvXE4uN1oA 이분의 영상을 참고했습니다.

transform - 요소를 변형시키는 함수.

2D transform

translate(x,y) : 요소를 이동시키는 함수.

scale(x,y) : 요소의 크기를 변형

rotate(deg) : 요소를 회전시키는 함수.

skew(x,y) : 요소를 기울이는 함수.

matrix(n,n,n,n,n,n) : 6개의 행렬을 사용하여 2d transform 값을 한번에 처리.

- 순서대로, (scale x, skew x, skew y, scale y, translate x, translate y)

사용 방법.(ctrl + F 를 이용하면 더 편하게 볼 수 있습니다.)

1.scale - 크기 변경

css
/* scale 사용법. - 크기 변경. */

.abc{
	transform : scale(0.5,0.5); /* x축과 y축 모두 크기 변경 */
	transform : scaleX(0.5); /* x축 크기 변경 */
	transform : scaleY(0.5); /* y축 크기 변경 */
}

2. translate - 이동.

css

/* translate - 이동. */

.abc{
	transform: translate(20px,-20px); /* x축 y축 모두 이동. */
	transform: translateX(20px); /* x축만 이동 */
	transform: translateY(-20px); /* y축만 이동 */
}

3. skew - 기울기.

css

/* skew - 기울기 */

.abc{
	transform: skew(20deg,-20deg); /* x,y 모두 기울기 */
	transform: skewX(20deg); /* x축만 기울기 */
	transform: skewY(20deg); /* y축만 기울기 */	
}

4. rotate - 회전

css 


/* rotate - 회전 */

.abc{
	transform: rotate(30deg); /* 우측회전 */
}

5. matrix - 한번에 처리

css

/* matrix - 한꺼번에 배열로 처리 */

.abc{
	transform: matrix(0.5,0.3,0.2,0.5,10,10);
    /* matrix(scaleX,skewX,skewY,scaleY,translateX,translateY); - translate의 단위는 적지 않음. */
}

transform-origin : 요소가 변형될 때 변형의 기준점.

transform-origin : (x축 위치) (y축 위치); - 위치는 top, right, bottom, left, center

.abc{
	transform-origin: left top;
	transform-origin: center;
	transform-origin: right bottom;
}

3D transform

rotateX,rotateY,rotateZ

.abc{
	transform: rotateX(180deg); /* x축 기준 회전 */
	transform: rotateY(180deg); /* y축 기준 회전 */
	transform: rotateZ(180deg); /* z축 기준 회전 */
}

/* 회전에 더욱 생동감을 주려면 */
.abc{
	perspective : 200px; /* 을 주면 됨. - 3D 요소가 표시되는 방식에 대한 관점 */
}

// backspace-visibility : visible or hidden;

.abc{
	backspace-bisibility : visible; /* div 박스의 뒷면이 보임.(기본 값) */
	backspace-bisibility : hidden; /* div 박스의 뒷면이 안보임. */
}

transform 함수는 여러개를 동시에 사용할 수 있다.

.abc{
	transform: scale(1,2) rotate(90deg); /* 띄어쓰기를 이용하여 사용 가능. */
}

position absolute는 본인의 공간이 사라지고 div 구조가 붕괴되지만,

translate는 본인의 공간을 유지한 상태로 이동한다.

공부 한 것들을 다 나눌 예정

Ratus — Thu, 2 Mar 2023 16:03:29 +0900

지금은 몇월 몇일 공부 이런식으로 제목이 되어있는데, 이게 생각보다 다시 보려고 찾는게 어렵다고 생각해서..

보기 편한 방식으로 바꿀 예정.

getElementsByClassName,querySelector(3/2 공부)

Ratus — Thu, 2 Mar 2023 16:02:41 +0900

getElementsByClassName 은 배열로 반환됨. 고로 하나의 클래스만 이용할 때는 아래와 같이 사용해야한다.

const a = document.getElementsByClassName('a');

a[0] = 명령어;

그래서 하나의 클래스만 이용할 때는 아래와 같이 사용하는게 더 편안하다.

const a = document.querySelector('a');

a = 명령어;

속도로만 보면 querySelector 가 빠르다는듯..

forEach문 - check박스를 이용한 비밀번호 표시(비밀번호 보기)

Ratus — Thu, 16 Feb 2023 02:00:20 +0900

우선, 나는 check 박스를 click했을 때 checked 가 true 이면 input의 타입을 바꾸고, false일때도 바꾸는 식을 작성했는데,

(true : 비밀번호 password를 text로 false : text를 password로)

비밀번호 확인창까지 같은 반복문으로 사용하려하니 name을 이용해야했고, 이러니 NodelList가 생성되었다.

그래서 노드리스트의 반복을 위해 forEach문을 알아보기로 했다.(찾아봤을때 많이들 사용하고 있길래..)

좀 더 가볍다는듯....? 아직 자세하겐 몰라서 아 대충 이런거군. 이라는 느낌으로 봐주면 좋겠다.

우선 나의 경우 NodelList가 되어버린 name의 파라미터(매개변수)명을 정해주고 시작하겠다.

const pwdOpen = document.getElementByName('pwd'); // pwdOpen이라는 이름으로 name이 pwd인 input의 파라미터를 불러온다.(나의 경우 비밀번호 입력 input과 비밀번호 확인 input의 name을 pwd로 통일했다.)

그로인해 NodelList가 생성되었다. 이를 console.log(pwdOpen); 해보면 아래처럼 나온다.

우선 배열명이 되어버린 pwdOpen을 나타내보면

const pwdOpen = [input#pwd, input#pwdcheck];

이다.

이제 forEach를 알아보자.

ex)

const pwdOpen = [input#pwd, input#pwdcheck];

pwdOpen.forEach(function(pw) {

console.log(pw);

})

결과물은 console 창에서

이런식으로 나온다. 또한 아래처럼 작성해도 결과는 같다.

pwdOpen.forEach(pw =>{

console.log(pw)

})

이처럼 순차적으로 한번 씩 다 출력하는 걸 알 수 있다.

그 말은 즉, 배열pwdOpen을 index[0]부터 index.length까지 순회한다는 것이다.

for문을 이용하는 것에 비해 훨씬 간결하게 작성할 수 있었다.

이제 비밀번호 보기에 들어가보도록 하겠다.

우선 조건을 달자면,

다음과 같다.

- 비밀번호 입력란의 id와 name은 pwd 이고,

- 비밀번호 확인란의 id는 pwdCheck, name은 pwd로 비밀번호 입력란과 동일하다.

- 체크박스를 이용하여, type=password로 가려진 비밀번호를 type=text로 바꿔 볼 수 있도록 하고 싶다.(주요사항)

- 비밀번호 보기의 id는 pwdOpen이고, onclick 프로퍼티를 이용하여 클릭시 이벤트가 일어나도록 한다.

*프로퍼티란 객체 자체에 프로퍼티로 이벤트를 주는 것 이다. 함수 하나만 할당이 가능하다.

- pwd_open()함수를 onclick 프로퍼티에 연결한다.

준비가 다 되었다면 연결된 script를 보도록 하자.

처음, 비밀번호 입력란만 체크박스를 이용하여 보도록 하는 코드이다.

비밀번호 입력란의 id인 pwd를 상수 pword로 파라미터를 연결한다.

비밀번호 보기(표시) 체크박스의 id인 pwdOpen을 상수 check로 파라미터 연결을 한다.

(1)비밀번호 입력란에 비밀번호를 입력한 후 제대로 입력했는지 확인하거나, (2)규칙이 어려워 내가 비밀번호를 제대로 치고있는지 확인하기 위해 다음과 같은 체크박스를 넣어 체크하면 동작하는 방식이다.

이는 다음과 같이 표현할 수도 있다.

if문 안에서 boolean값이 있다면, 기본값은 boolean값이 true일때 괄호안의 문장이 실행된다.

그렇기때문에, 굳이 check.checked를 true와 같은지 확인하지 않아도 된다.

이를 해석하면,

1. 체크박스가 체크되었을때if(check.checked)

2. 비밀번호입력란의 type 속성이 기본 설정값인 password에서 text로 {pword.setAttribute('type','text')} 변한다.

3. 아니면(체크를 다시 해제하면) (else) 바뀐 설정값인 text에서 password로 다시 바뀐다.{pword.setAttribute('type','password')}

그렇다면, 비밀번호 입력란과, 비밀번호 확인란 모두 체크박스 하나로 컨트롤 하려면 어떻게 할까?

내가 처음 생각했을때는 name을 이용하면 될 것 같다고 생각했다.

다른 인풋을 한꺼번에 통제하기 위해서 name을 통일 시키면 통제가 가능하기 때문이다.

그래서 name을 이용해서 두가지의 input을 묶어보았다.

pword에 getElementsByName('pwd');를 이용해 네임이 pwd인 input들을 다 가져온다.

그러면 이렇게 노드 리스트가 생성된다.

우리는 이 노트 리스트를 0번 노드부터 1번노드까지 두번 순회해야한다.

그러기 위해서 반복문을 사용해야하는데 가장 가볍고 간단한 forEach문을 사용할 것이다.

기존과 방식은 같다. if문이 true이면 내부의 실행문이 실행되는 형식이다.

1. if(true)이면 내부에서 반복문이 실행된다. name=pwd인 input들의 type이 text로 바뀐다.

2.if(false)이면 역시 반복문을 실행한다. name=text로 바뀐 input들을 다시 password로 바꾼다.

이와같이 체크박스를 이용한 비밀번호 표시를 해낼 수 있었다.

회원가입 유효성 검사

Ratus — Wed, 15 Feb 2023 01:07:43 +0900

유효성 검사를 할때는 함수를 하나 만들고 그 안에 다 때려 박아서 함.

여태껏 많은 블로그들을 돌아보았고, 너무 오래된 것들이라 정보 찾기가 힘들었는데, 많은 분들의 도움을 받아 해냈다.

우선 여타 블로그들의 경우 사용한 방식은

button의 type을 submit에서 button으로 바꾼 이후 script 에서 onclick을 이용해 작동 시키는 방식을 많이 사용했는데,

이는 input에 값을 입력하고 엔터를 치면 서브밋이 되어버리는 문제가 생겼다.

오로지 회원가입 버튼으로만 한다면 모를까, 엔터를 쳐버리면 action이 동작해버리니 큰 문제였다.

해당 문제를 해결하기 위해 엔터기능을 막는 방안을 이용했어야 했는데, 해당 기능을 구현하지 못하였고, 구현과정에서 계속 오류가 나서 만들기를 실패했다.

그런데 form에 onsubmit = "return joinform_check()"를 줘서 submit을 작동 시키는 방식이 있었고, 이 방법이 훨씬 편했다.

onsubmit은 사용자가 input 에 값을 입력하고, form을 통해 값을 보내 action의 경로로 진입하기 직전! 바로 그 타이밍에 동작하는 이벤트핸들러이다.

onsubmit = return false 를 하게되면 false 라는 거짓값이 return(돌아오다)하게 되는데, 그러면 action이 작동하지 못하고 현재페이지에 머물게 된다. 이를 이용하여, onsubmit = "return joinform_check()"를 동작시키고 유효성 검사 함수인 joinform_check()의 결과값이 true 이면 정상적으로 action이 작동하게 만들고, false 이면 action이 작동하지 못하게 하여 현재페이지에 머물게 할 수 있다.

ex) 유효성 테스트를 위한 함수. 이름만 입력받는다는 가정을 했을때.

function joinform_check() {

const uname = document.querySelector('#name'); //이름 파라미터의 값를 가져옴.

const regName = /^[가-힣]{2,30}$/; // 이름 규칙

let checkAll = true; // 유효성 검사 결과 최종 값이 들어갈 곳. 기본값 true

if (!regName.test(uname.value)) { // 이름 규칙 확인

alert("이름은 한글 2~30자 이내로 작성해주세요."); // 창띄우기

uname.focus(); // 이름으로 돌아가기

checkAll = false;

}

if(!checkAll){

return false;

}

정규식

Ratus — Tue, 14 Feb 2023 19:47:04 +0900

참고 : Character classes - JavaScript | MDN (mozilla.org)

Character classes - JavaScript | MDN

Character classes distinguish kinds of characters such as, for example, distinguishing between letters and digits.

developer.mozilla.org

정규식은 항상 //를 작성하고 시작.

ex)우편번호 5자리를 받고싶음

const reg_post = /^\d{5}$/;

^ : 꺽새표시가 붙으면 무조건 바로 뒤에오는 패턴만으로 값이 시작되어야 한다는 뜻. ex)^\d 는 오로지 숫자로만.

\d : 숫자라는 뜻.

{x} : x자리만큼

$ : 끝내겠다. 라는 소리. 예시에선 5자리가 나오면 끝내버린다 라는 뜻.

ex) 전화번호

const reg_tel = /^(02|064)-(\d{3}|\d{4})-\d{4})$/;

(02|064) : 처음은 무조건 02 아니면 064이다. | 를 이용해 값을 늘릴 수 있음.

' - ' : ' - '는 하이픈으로 값을 입력할 때 꼭 같이 입력을 해야한다.

const reg_mobile = /^(010)-\d{4}-\d{4}$/;

const reg_email = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;

\w : a-z , A-Z, 0-9, _ 까지 이용가능하다.

+ : 무조건 하나 이상의 앞의 패턴이 들어가야한다.

\. : ' . ' 은 정규 표현식에 들어 있는 패턴이므로, 문자로서의 ' . '을 이용하기 위해선 앞에 ' \ ' 를 붙여줘야한다.

[x]? : x라는 값이 있을 수도있고, 없을 수도 있다. 이어서 계속 작성하면 다 조건에 포함 가능

- ex)[xyz]? : x와 y와 z가 있을 수도 있고, 없을 수도 있다.

* : 곱하기는 여러개 있을 수 있다는 뜻으로,

- ex) ([\.-]?\w+)* 에서는( .이나-가 있을 수도 있고, 문자는 무조건 하나 이상이다)가 여러개 있을 수 있다. 라는

@ : 무조건 @가 들어가야한다.

\w{2,3} : 적어도 \w 패턴이 2개에서 3개 이상은 있어야 한다.

(?= .* )은 보통 비밀번호 유효성 검사할 때 필수로 하나씩은 들어가야할 때 사용하는데, 작성한 모든 문자를 체크한다 라는 의미로 파악하면 된다.

.이 모든 단일문자를 뜻하고, * 이 여러개를 뜻하니 합치면 여러개의 단일 문자 이기때문에 작성한 모든 문자를 체크한다라는 의미로 이용하면 될듯.

정규식 테스트 방법

console.log(reg_post.test('파라미터 or 값 직접입력');

true 가 나오면 정규식 통과

false가 나오면 정규식 통과 실패