공부하자

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>

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

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

​

setAttribute

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

​

removeAttribute

• 속성을 지워버린다.

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

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

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

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

위 링크에 들어가서 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을 이용하시거나, 웹 서버에 올린 뒤 확인해보시면 정상적으로 작동하는지 확인할 수 있습니다. 해당 오류는 충돌을 막는것으로, 로컬 서버에서는 작동이 안되게 설정이 되어있습니다.

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

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

a[0] = 명령어;

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

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

a = 명령어;

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

우선, 나는 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로 바꾼다.

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

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

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

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

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() {

참고 : Character classes - JavaScript | MDN (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가 나오면 정규식 통과 실패

innerHTML - 요소안에 있는 HTML 자체를 문자열로 리턴

*태그와 태그 사이의 들여쓰기나 줄바꿈도 모두 포함.

요소안의 HTML을 확인하는 것 보다는 요소안의 HTML을 수정할 때 자주 사용.

출력시 first <li>~ last </li> 까지 출력됨.

ex) 기존 HTML

<ul id = "list-1">

  <li>123</li>

  <li>456</li>

</ul>

이 상황에 JS로

<script>

const myTag = document.querySelector('#list-1');

myTag.innerHTML = '<li>789</li>';

</script>

를 사용한다면 

변경된 HTML

<ul id = "list-1">

  <li>789</li>

</ul>

처럼 바뀌어 출력된다.

출력 :   <li>789</li>

만약 

script에서 

myTag.innerHTML += '<li>789</li>'; 

처럼 += 을 사용한다면 해당 리스트의 마지막 부분에 추가된다.

그러면

<ul id = "list-1">

  <li>123</li>

  <li>456</li>

  <li>789</li>

</ul>

로 바뀌어 출력 된다.

출력 :

  <li>123</li>

  <li>456</li>

  <li>789</li>

outerHTML - 해당 요소를 포함한 전체의 HTML 코드를 문자열로 리턴해준다.

innerHTML과 같이 들여쓰기와 줄바꿈이 다 있다.

모든 요소를 포함하고 있다보니, 값의 수정이 아닌, 값이 아예 다른 값이 되버린다.

기존의 출력에도 <ul>~</ul>까지 다 출력됨.

ex)

기존 HTML

<ul id = "list-1">

  <li>123</li>

  <li>456</li>

</ul>

다음과 같은 코드가 있을 때.

myTag.outerHTML = '<ul id = "new-list"><li>789</li></ul>';

이를 적용하면

변경된 HTML

<ul id = "new-list">

  <li>789</li>

</ul>

이 처럼 id명도 바뀌어 출력된다.

textContent

- innerHTML과 비슷한데, 요소 안의 내용을 가져오는 것은 동일. 하지만 태그를 제외한 값만 가져옴.

- 역시나 innerHTML 처럼 값을 수정할 수도 있음.

기존 HTML

<ul id = "list-1">

  <li>123</li>

  <li>456</li>

</ul>

일때 

myTag.textHTML = 'new text';

를 사용하면

 'new text';

만 출력됨.

근데, 얘는 특수문자도 텍스트로 출력함.

ex)

myTag.textHTML = '<li>new text</li>';

를 하면

 '<li>new text</li>';

가 출력됨.

*이는 실제 HTML 값이 변하는게 아니라, JS를 출력한 이후 콘솔의 값이 변하는 것이라는 점을 주의해야함.

createElement - 원하는 태그 이름을 요소 노드로 만들 수 있음.

ex)

1. 변수 생성(기존에 ul id = one, two 존재)

const first = document.createElement('li');  // li태그 생성

2. 변수 안에 문자 넣기

first.textContent = '처음';  // 생성한 li 태그에 문자 '처음'을 넣음

3. 값이 있는 first를 prepend를 이용하여 호출한 노드에 첫번째 노드로 값 추

two.prepend(first); // prepend(변수) 

-> 메소드를 호출한 노드의 제일 첫번째 자식 노드로  파라미터로 전달한 값을 추가할 수 있음

two.append(last); // append(변수) 

-> 메소드를 호출한 노드의 제일 마지막 자식 노드로 파라미터로 전달한 값을 추가할 수 있음

two.before(prev); // before(변수) 

-> 메소드를 호출한 노드의 앞쪽에 파라미터로 전달한 값을 형제노드로 추가할 수 있음

two.after(next); // after(변수) 

-> 메소드를 호출한 노드의 뒤쪽에 파라미터로 전달한 값을 형제노드로 추가할 수 있음

빨간색으로 적은 파라미터(first,last,prev,next)자리에 파라미터가 아닌 문자열을 넣으면

문자열이 출력되고, 문자열을 적고, 파라미터를 적는 등 여러가지를 적으면 순차적으로 값이 

나열된다.

*prepend 나 before의 경우에는 요소를 앞으로 추가하기 때문에 여러개의 값을 전달하게 되면 

역순으로 추가될 거라고 오해할 수 있는데 적은 그대로 한꺼번에 출력된다.

노드를 삭제하거나 이동

삭제

two.remove(); 원하는 노드를 선택하여 호출한 뒤 remove 를 사용하면 자식노드가 모두 삭제됨.

- 자식 요소를 선택하여 삭제하는법

one.children[2].remove();

이동

(prepend,append,before,after 이용)

one.append(two.children[1]); -> one 노드의 마지막 노드로 two노드의 2번째 자식노드가 이동한다.

two.children[1].after(one.children[1]); -> two 노드의 2번째 자식노드 다음으로 one 노드의 2번째 자식 노드가 이동한다.