HwiDoorumi

solution: 페이지 로딩되는 시점 혹은 순서 바꾸기

특정 el을 컨트롤하기위해 스크립트로 style을 조정했을것이다.

페이지가 로딩되는 시점이나, 스크립트가 실행되는 라이프사이클을 확인해보자

1. 기본 mixin 사용법

@mixin 믹스인이름(매개변수){
	스타일 정의
}

@include 믹스인이름(매개변수);

mixin은 @mixin 으로 정의하고, @include로 사용된다.

2. mixin 예시 : 타이틀형 텍스트

@mixin text-title($weight: 700, $spacing: -0.03em){
	font-size:20px;
    line-height:36px;
    font-weight:$weight;
    letter-spacing:$spacing;
}

.textTitle01{
	@include text-title();
}

.textTitle02{
	@include text-title(500)
}

.textTitle03{
	@include text-title(400, -0.05em)
}

설명: mixin text-title의 경우 기본적인 스타일에서, weight와 spacing을 인자로 받는다.

.textTitle01의 경우 매개변수의 기본 스타일인 font-weight:700, letter-spacing: -0.03em의 스타일을 가진다.

.textTitle02의 경우 첫번째 인자인 500만을 받아, font-weight:500, letter-spacing: -0.03em의 스타일을 가진다.

.textTitle03의 경우 두개의 인자를 받아, font-weight:400, letter-spacing: -0.05em의 스타일을 가진다.

3. mixin 예시 : bg아이콘

@mixin bg-icon($name, $width: 20px, $height: 20px, $format: 'png'){
	width: $width;
    height: $height;
    background: url('~assets/images/icon/#{$name}.#{$format}') no-repeat 0 0;
    background-size: 100%
}

.testBgIcon01{
	@include bg-icon('icon-clear')
}

.testBgIcon02{
	@include bg-icon('icon-clear', 30px, 30px)
}

.testBgIcon03{
	@include bg-icon('icon-clear', 30px, 30px, 'jpg')
}

설명: mixin bg-icon의 경우 기본적인 스타일 +  name, width, height, format 을 인자로 받는다.

.testBgIcon01의 경우 $name의 인자 하나를 받고, 기본 스타일을 가져간다.
: 20px/20px의 크기로 '~/assets/images/icon/icon-clear.png'의 경로를 가진다.

.testBgIcon02의 경우 $name, $width, $height의 인자 3개를 받고, 매개변수의 순서에 맞게 정의된다.

: 30px/30px의 크기로 '~/assets/images/icon/icon-clear.png'의 경로를 가진다.

.testBgIcon03의 경우 $name, $width, $height, $format의 인자 4개를 받고, 매개변수의 순서에 맞게 정의된다.
: 30px/30px의 크기로 '~/assets/images/icon/icon-clear.jpg'의 경로를 가진다.

Terminal 기준 linux 명령어 정리입니다.

연결되어있는 gitlab과 사용중인 Editor가 연결되어 있다는 가정하게 작성했습니다.

 git branch  : 현재 내 로컬에 있는 브랜치들을 보여준다.

 git fetch  : gitlab과 연결된 Editor에서 local branch와 gitlab remote branch간 meta 데이터 정보를 확인
(간단히 최신 소스로 맞추는 명령어라고 생각하면 됨)

 git checkout master  : (master는 브랜치명, 원하는 branch로 네이밍 스위칭)

 - case01. local에 해당 브랜치가 없다면? remote 저장소에 있는 master 소스를 local로 checkout 후 swiching

 - case02. local에 master가 있다면, 로컬에 있는 master 브랜치로 switching

 - case03. remote에도 없고 local에도 없다면, 아무런 변화가 없음

 git pull origin master : gitlab remote에 있는 master 소스를 local branch에 있는 현재 활성화 된 소스로 내려받는다.
 - case01. local branch가 master가 아니라면? 현재 local브랜치에 master 소스를 받아옴

 - case02. local branch가 master라면? master 소스 최신화
(현재 활성화되어있는 branch에 target source를 내려받는 원리는 같음. case1의 경우 충돌 및 소스가 섞일 위험이 있음)

 git checkout -b myBranch  : 현재 활성화 되어있는 local branch 기준으로 myBranch 라는 branch를 생성
이때 생성되는 myBranch는 local 내에만 존재하는 branch이고, remote에는 없는 branch다. remote에 올리려면 생성된 branch를 push 해주는 작업이 필요

 git add 경로/파일명  : ex) git add ./src/pages/index.html
작업한 파일을 add명령어로 통해 attech 하는 명령어. 
기본적으로 push까지 하는 작업순서는 add > commit > push 순서를 따른다.
 p.s  'git add .' : git add 뒤에 '.'  을 붙이면 작업한 모든 파일(Changes)이 attech 된다.

 git commit m '커밋메시지'  : add로 attech한 파일들을 현재 branch에 commit 해주는 명령어. 실제로 gitlab에 보여질 커밋메시지 이므로, 어떤 작업인지 구분할 수 있는 텍스트로 commit 한다.
ex)  git commit -m 'git 명령어 정리'

 git push origin 브랜치명  : commit 까지 하고 난 후, local에만 존재했던 new branch를 remote에 올리기 위한 명령어

push 이후에 gitlab에서 생성된것을 확인하여 개발기/운영기 등의 branch로 merge 한다.

 TMI. 새롭게 생성하여 만들어진 branch들은 운영까지 반영하고난 이후에 히스토리 관리 측면이 아니라면, 쓸데없는 리소스 낭비를 줄이기위해 삭제해주는게 운영/관리에 용이함

script로 3자리마다 콤마(,) 찍는 작업이 있어서 구글링하여 적용하였다.

구글링하여 얻은 정규식 표현법에는 

.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ",");

하지만 위 정규식에서의 ?<! 와 같은 표기법은 최신 기법으로, 익스 ~11, ios, safari 에서 통하지 않는 스크립트이다.

때문에 위처럼 넣게되면 함수 자체가 에러를 뱉어내므로, 스크립트를 호출하지 못하는 에러가 발생한다.

(object Error / function undefined)

(참고 url : caniuse.com/?search=lookbehind)

.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");

위와같이 정규식을 기술해야 익스, ios, safari 에서 정상적으로 함수를 호출할 수 있게 된다.

흔히들 jQuery와 javascript의 차이점을 대답할 때,

'제이쿼리' 는 자바스크립트를 기반으로 만들어진 라이브러리 라고 많이들 대답하곤 한다.

자바스크립트는 크게 4가지 요소로 구성돼 있다.

1. 자바스크립트 core 문법

2. 자바스크립트 core 라이브러리

3. 자바스크립트 BOM (Browser Object Model)

4. 자바스크립트 DOM (Document Object Model)

제이쿼리는 이중 자바스크립트 DOM작업을 쉽게 처리할 수 있도록 도와주는 라이브러리다.

또한 제이쿼리는 DOM작업을 쉽게 도와주는 라이브러리 일뿐, 자바스크립트 문법이나 라이브러리를 대체하는

프로그래밍 언어가 절대 아님을 인지해야 한다.

* javascript와 jQuery의 문법차이

- html

<body>
	<ul id="menu">
    	<li>menu1</li>
        <li>menu2</li>
        <li>menu3</li>
    </ul>
</body>

- javascript

//menu 노트 찾기
var menu = document.getElementById("menu");
//li 리스트 구하기
var liList = menu.getElementsByTagName("li");
//li 개수만큼 루프 돌며 스타일 변경
for(var i=0;i<liList.length;i++){
	//i번째 li 접근
    var li = liList[i];
    //스타일 변경
    li.style.color="#f00";
}

- jquery

$("#menu li").css("color", "#f00");

위와같이 document의 html 구성이 있을때, javascript 코드와 jquery의 코드는 같은 뜻을 가지고 있다.

무분별하게 jquery를 남발하기 보다는, 해당 소스가 javascropt DOM 문법으로 어떻게 이루어지는지

이해를 가지면서 공부하는게 좋다.

참고문헌 : '자바스크립트 + jQuery 완정정복 스터디' 2편

nm817.tistory.com/37?category=816930

위 글을 보면 추가글로 정리해두었지만, 써놓고 내가 못찾아서 다시 정리합니다..........

{
    "liveSassCompile.settings.formats":[
        {
            "format": "expanded",
            "extensionName": ".css",
            "savePath": "~/../css"
        }
    ],
    "liveSassCompile.settings.excludeList": [
         
        "**/node_modules/**",
        ".vscode/**" 
    ],
    "liveSassCompile.settings.generateMap": 
      false,
    "liveSassCompile.settings.autoprefix": [
        "> 1%",
        "last 2 versions"
    ],
    "editor.fontSize": 14,
    "editor.renderWhitespace": "all",
    "editor.wordWrap": "on",
    "emmet.triggerExpansionOnTab": true,
    "editor.tabCompletion": "on"
}

상세내용 및 세팅방식은 상위 글 참조

dataTab.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="../css/reset.css">
    <link rel="stylesheet" type="text/css" href="../css/dataTab.css">
    <script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="../js/dataTab.js"></script>
</head>
<body>
    <div class="container">
        <h1>css/jquery 데이터 탭</h1>
        <div class="content">
            <ul class="tab_wrap">
                <li class="active" data-tab="tab1">
                    <a href="javascript:void(0);">Tab1</a>
                </li>
                <li data-tab="tab2">
                    <a href="javascript:void(0);">Tab2</a>
                </li>
                <li data-tab="tab3">
                    <a href="javascript:void(0);">Tab3</a>
                </li>
                <li data-tab="tab4">
                    <a href="javascript:void(0);">Tab4</a>
                </li>
            </ul>
            <div id="tab1" class="tab_cont active">1번탭에 대한내용입니다.</div>
            <div id="tab2" class="tab_cont">2번탭에 대한내용입니다.</div>
            <div id="tab3" class="tab_cont">3번탭에 대한내용입니다.</div>
            <div id="tab4" class="tab_cont">4번탭에 대한내용입니다.</div>
        </div>
    </div>
</body>
</html>

dataTab.scss

@charset 'UTF-8';

.container{
    width:1080px; margin:0 auto;
    h1{padding:20px;border-bottom:1px solid #ccc;}
    .content{
        padding:40px;
        .tab_wrap{
            overflow:hidden;
            li{
                float:left;
                &.active{
                    background:#bababa;
                }
                a{
                    display:inline-block;
                    text-align:center;
                    padding:14px 16px;
                    font-size:17px;
                    transition:0.3s;
                }
            }
        }
        .tab_cont{
            display:none;
            background:#bababa;
            padding:6px 16px;
            min-height:300px;
            &.active{
                display:block;
            }
        }
    }
}

dataTab.js

$(function() {
    $('ul.tab_wrap li').click(function() {
        var activeTab = $(this).attr('data-tab');
        $('.tab_wrap li').removeClass('active');
        $('.tab_cont').removeClass('active');
        $(this).addClass('active');
        $('#' + activeTab).addClass('active');
    })
});

mouseEffect.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="../css/reset.css">
    <link rel="stylesheet" type="text/css" href="../css/mouseEffect.css">
    <script type="text/javascript" src="../js/common.js"></script>
</head>
<body>
    <div class="container">
        <h1>클릭시 마우스 효과</h1>
    </div>
</body>
</html>

mouseEffect.scss

@charset 'UTF-8';

.container{
    width:1080px; margin:0 auto;
    h1{padding:20px;border-bottom:1px solid #ccc;}
}

.clickEffect{
    position:fixed;
    box-sizing:border-box;
    border-style:solid;
    border-color:#111;
    border-radius:50%;
    animation:clickEffect 0.4s ease-out;
    z-index:99999;
}
@keyframes clickEffect{
    0%{
        opacity:1;
        width:0.5em; height:0.5em;
        margin:-0.25em;
        border-width:0.5em;
    }
    100%{
        opacity:0.2;
        width:15em; height:15em;
        margin:-7.5em;
        border-width:0.03em;
    }
}

common.js

//이벤트 function 정의
function clickEffect(e){
  var d=document.createElement("div");
    d.className="clickEffect";
    d.style.top=e.clientY+"px";
    d.style.left=e.clientX+"px";
    document.body.appendChild(d);
    d.addEventListener('animationend',function()
        {d.parentElement.removeChild(d);}.bind(this)
    );
}
//document에 clickEffect function 등록
document.addEventListener('click',clickEffect);

** 위 이벤트는 css 애니메이션 amimationend 이벤트를 지원해야 작동합니다.

IE10+ 이하 브라우저에서 호환하지 않습니다.

참고