코딩기록지

가끔이 아니고 항상..용어에 대한 궁금증이 생긴다.
자바스크립트로 넘어가면서 생소한 용어들이 나오는데 아무리 찾아봐도 너무 어렵게 설명되어있어 따로 정리했다.

특히 영어 페이지를 그냥 번역 한 경우가 많은데,
어쩔 땐 요소를 Element 라고도 하고, node라고도 한다.

속성은 Attribute라고도, Property라고도 뭉뚱그려 번역되어있는데 엄연히 다 다른 의미를 갖고있다.

우선 Attribute와 Property의 차이점을 알기 전에 '요소'에 대해 정의해본다.

요소(Element)
HTML에서 시작과 종료로 이루어진 모든 명령어

태그(Tag)
시작태그, 종료태그로 나뉜다. 어떤 태그는 종료태그 없이 시작태그만 있는 경우도 있다.

body, div, p, h1, h2…,input,section 등등 모두 요소이고,
각각의 요소들은 시작태그와 종료태그를 갖고있으며 시작태그만 있는 경우도 있다.

굳이 따지자면 요소라는 의미 안에 태그가 포함된다고 이해하면 될 것 같다.

Attribute
HTML 태그의 속성을 이야기할 때 Attribute라고 한다.

예를 들면, <p align="center">오늘 저녁 메뉴</p> 에서 align이 Attribute가 된다.
<img src="#"> 에서는 src가 Attribute가 된다.

물론 이렇게 인라인으로 속성과 속성값을 줄 수도 있겠지만 css로 따로 줄 수 있다.
div class="box"를 만들고 css로 width:200px height:300px background-color:red 라는
Attribute(속성)들을 부여할 수 있다.

Property
DOM(문서객체모델)에서의 속성을 의미한다.
결론적으로 보자면 Attribute는 HTML의 요소에 변화를 줄 때 쓰이기에 정적이라는 특성이 있다면, Property는 DOM 에서 쓰이기에 동적이라는 특성이 있다.

이해하기 좋은 예시를 하나 찾았는데,

<input value="텍스트를 입력하세요"> 라는 태그에서 value는 Attribute가 된다.

이 때 사용자가 input 박스에 "고양이" 이라는 단어를 입력한다면?

이렇게 이해하면 된다.

브라우저는 웹페이지를 파싱해 DOM을 생성한다.
오 뭔소리..

번역하면

브라우저는 HTML을 읽어들여 문서객체모델(DOM)을 만들어내는데,
DOM은 노드(node)로 이루어져있다!

그러니까 우리가 열심히 입력한 태그들과 그 태그들에 여러 속성들을 부여하면 브라우저는 이걸 열심히 읽어서 이렇게 노드로 번역한다는거다.

문서객체모델(DOM)은 트리 구조로 되어있다.

최상위인 html을 뿌리로 두고 밑으로 가지처럼 구성 요소들이 자리잡고있다...그래서 html을 뿌리노드라고 부른다.
html을 브라우저 로드 시 이렇게 각 구성요소들을 객체화하여 객체트리구조가 만들어진다.

Node
html DOM tree 구조에서 html을 기반으로하여 가지처럼 뻗어나가는 것.

엄밀히 말하면 요소를 뜻하는 것이 아니다.
공부하다보니 어디서는 노드를 요소라고 칭하는 것이 있어 헷갈렸음..
요소 노드(Element node), 텍스트노드(text node), 속성 노드(Attribute node)가 있다.

그렇다면 DOM을 왜 알아야할까?

위에 Element, Tag, Attribute를 배웠으니 훨씬 더 이해하기 쉬울것이다.
html 내에서 사용하는 css와 자바스크립트에서 사용하는 스타일은 모두
html 내의 요소들의 디자인 속성을 바꿔준다.


<p id="demo">오늘의 메뉴</p>

"오늘의 메뉴" <- 글씨 크기, 색깔을 바꾸는 것은 css로도, 스크립트로도 가능하다..

Attribute는 css로 바꿀 수도 있고 문서 내에 직접 쓸 수 있으니 문제없다.

하지만
버튼 클릭 시 "오늘의 메뉴" 글씨 색이 빨간색으로 바뀌게 해주세요.
라는 주문은 어떻게할까?

버튼을 클릭하면 바뀐다는 것 자체가 동적이다.
이렇게 '동적인' 주문은 자바스크립트로 처리한다.

그러기위해선 "선택자"를 알고 활용해야한다.

선택자는 크게 직접 선택자, 요소명, 인접관계선택자가 있다.
직접 콕 찝어 선택하는 방법, 간접적으로 부르는 방법이 있다는거다..
이 선택자를 잘 사용하기 위해선 문서 객체의 구조와 관계, 개념을 정확히 파악하는게 중요하다..

뭐가 최상위 객체(뿌리노드)인지, 부모관계, 자식관계, 형제관계인지..!
(그래서 코딩할 때 들여쓰기가 중요하다는거다.
어떻게 작성했는지 눈으로만 봐도 얘네가 부모자식관계인지, 형제관계인지 파악하기 쉬우니!)

그러니까 결론은 DOM을 공부할 때 중점을 둘 것은
문서객체구조가 어떻게 생겨먹었는지 잘 파악해서 적절한 선택자를 쓸 수 있게 하는것이다..

일반적으로 알고있는 동그라미 페이지네이션 외에도 
다양한 디자인의 페이지네이션을 만들 수 있다.

그리고 잘 이용하면 두 개의 슬라이드가 연동되는 것과 같은 효과를 낼 수 있다는 장점이 있다. 

내가 원하는 페이지네이션은 
첫째, 이미지+텍스트로 이루어져있고 
둘째, hover 효과를 더한
페이지네이션이다.

하나의 페이지네이션 안에 두 개의 이미지와 하나의 텍스트가 들어가도록 해야하는데..

데이터들은 각각 배열에 담고
renderBullet 옵션을 이용해 마크업 할 수 있다.

var image = ['se1_icon_1.png','se1_icon_2.png','se1_icon_3.png','se1_icon_4.png']
var hoverimage = ['se1_hicon_1.png','se1_hicon_2.png','se1_hicon_3.png','se1_hicon4.png']
var bullet = ['VISION','STRATEGY','MISSION','GOAL'];

var bottomSwiper = new Swiper('.swiper-bottom', {
    slidesPerView: '1',
    pagination: {
        el: ".swiper-pagination-custom",
            clickable: true,
            bulletClass:"custom_bullet",
            bulletActiveClass: "swiper-pagination-custom-bullet-active",
            renderBullet: function (index, className) {
                return '<div class="' + className + '"><div><img src="./img/' + (image[index]) + '"><img src="./img/'+(hoverimage[index])+'"></div><span>' + (bullet[index]) + '</span></div>';
            },
    },

    autoplay: {
        delay: 3000,
        disableOnInteraction:false,
    },
    speed: 500,
    loop: true,
    touchRatio: 0.2,
    observer: true,
    observeParents: true
});

복잡한 구조일수록 return값 작성하기가 헷갈리는데 

return '<div class=""></div>'  을 기본으로 차근차근 채워나가면 된다..

그리고 페이지네이션 class와 active class명도 정해놨으니 나머지 디자인은 css로 꾸미면 끝!

See the Pen Untitled by yeaseula (@yeaseula) on CodePen.

이렇게 텍스트만 넣어 만들 수도 있다.

게시판에서 확장변수를 생성하면 게시판과 연결한 위젯 폼에서 확장변수를 이용할 수 있다.
보통 문의 폼을 만들 때 쓴다.

이번에 sign pad에 서명을 하면 그 이미지 데이터를 관리게시판으로 보내는 기능을 만들어보라고 해서 업무 틈틈히 도전해봤다. 

1) toDataURL()를 사용, base64 를 뽑아낸다.

canvas에 서명을 하고 
var res=canvas[0].toDataURL();
를 이용해 이미지를 base64로 변환할 수 있다.
콘솔로 확인 해 보면 긴 문자를 볼 수 있다.

2) base64를 img의 src값에 넣으면 이미지로 변환 될 것이다.

base64는 실제 이미지는 아니지만 
이미지로 안내해주는 경로이다.

그럼 이 경로값을 잘 전달해서 img src값에 집어넣으면 이미지 전달을 할 수 있지않을까? 하는 생각이 들었다.

- 우선 위젯 폼 입력란은 input이다.
이 input창을 visiability나 opacity를 이용해 보이지 않게 만들고 js를 이용해 value값에 base64값을 넣었다.

- 위젯에서 입력한 값은 
{$val->getValueHTML()|noescape} 를 통해 게시판으로 
데이터가 이동된다.

그럼 img src="{$val->getValueHTML()|noescape}"
해주면 끝!

구글에 sign ajax sign data sign...어쩌구 
검색해봤는데 ajax를 이용해 전달하는 방법이 제일 많았다. 근데 다 실패함 ㅡㅡ;

거듭실패로 굳이..이 방법을 베낄 필요가 있나? 하는 생각이 들었고 기본적인 base64의 역할(+ 1g의 php 지식)을 다시 되새겨보니 돌파구가 생겼다.

나를 화나게 한 controller 연동 오류 종류와 해결 한 방법 적어봄.

1) 연동만 시키면 슬라이더 순서가 뒤죽박죽 지멋대로 됨.

1->2->3->4 차례대로 잘 흐르던게 연동만하면 

1->3->2->1->...

어이가 없다.

아무리 서칭해봐도 이런 오류를 겪었다는 사람이 없어서 

swiper 자체가 미쳤나보다 생각했지만 

늘 그러하듯 시스템은 잘못이 없다. ㅠ

사용하는 사람이 문제일 뿐..

계속 노려보니 연동한 두 개의 스와이퍼 모두 

autoplay가 걸려있었다.

혹시 이거때문인가 하고 

둘 중 하나만 autoplay 옵션을 빼봤다.

잘 돌아감 

각자의 autoplay 끼리 박터지게 경쟁중이었나보다..

2) pc에서 브라우저 창 크기를 늘렸다 줄였다 할 때 마다 오류 발생

나처럼 몰컴하다보면 창 크기도 줄였다 늘였다 할 수 있을텐데..

그때마다 스와이퍼가 빠갈나면 참 슬프다.ㅜ....

조건이 바뀔 때 마다 초기화해주는 옵션을 추가하면 끝!

dasharray, dashoffset의 속성, 선 길이를 구하는 간단한 함수를 이용해 기초적인 애니메이션 효과를 학습할 수 있다!

우선 svg로 동그라미를 그려줌

See the Pen Untitled by yeaseula (@yeaseula) on CodePen.

1.stroke 관련 css

dasharray, dashoffset의 속성

stroke-dasharray : 점의 길이
stroke-dashoffset : 점 사이 간격의 길이

더 자세히 뜯어보자면 

stroke-dasharray 숫자가 작아질수록 dash가 촘촘하다.
즉, stroke-dasharray = 선 길이 일 땐 그냥 완벽한 라인이 된다.

stroke-dashoffset 숫자가 커질수록 점과 점 사이의 간격이 넓어진다.
반대로 숫자가 작아질수록 점 사이 간격이 좁아져 결국 선으로 보여진다.

*참고 : https://observablehq.com/@shreshthmohan/svg-stroke-dasharray-stroke-dashoffset-and-pathlength

선 길이 = stroke-dasharray
점 하나의 길이가 전체 선 길이와 같다면 결국 하나의 선으로 보인다.

이 상태에서 
선 길이 = stroke-dashoffset
조건도 충족된다면?

화면엔 아무것도 보이지 않게된다

반대로 stroke-dashoffset가 0이되면 dash만 남게된다! (하나의 선으로 보임)

이런 특성을 이용해 stroke-dashoffset 값을 변화시켜서 효과를 주면 된다.

그럼이제 선 길이를 구해야 한다.

2.선 길이 구하는 함수

getTotalLength()

		var cl = document.querySelector(".circle");
		function circleLine(el) {
			var line = el.getTotalLength();
			el.style.strokeDasharray = line;
			el.style.strokeDashoffset = line;

			console.log(line)
		}

		circleLine(cl);

이제 keyframes 를 이용해 무한반복 자동재생되는 애니메이션을 만들 수 있다.

stroke-dasharray = stroke-dashoffset = 선길이로 아무것도 보이지 않는 상태로 시작, 

stroke-dashoffset = 0 으로 라인만 보이도록 해서 끝!

이 애니메이션을 infinite로 무한반복한다~

결과물)

See the Pen Untitled by yeaseula (@yeaseula) on CodePen.