코린이[코딩 어린이]

IR기법이란 ?

이미지의 대체텍스트를 제공하기 위한 CSS기법

:: 웹 접근성의 일환으로, 그림을 보는데 불편함이 있어 리더기를 통해 웹 문서에 접근하기 위한 필수요소이다.

IR기법을 사용하는 경우

• <img />태그의 alt속성 값으로 표현하기에 대체 텍스트가 너무 길 때
• CSS background-image속성을 사용해 처리한 이미지 일 때

이미지의 텍스트가 너무 긴 상황

<div class="ir_bl">
    대체 텍스트가 너무 길어서 alt에 담기 힘들때 이런식으로 텍스트를 분리하고 css로 이 부분을 숨김 처리해준다.
</div>
<img src="1.jpg" alt="" />

.ir_bl {
    position: absolute; /* position: absolute/fixed 에서만 clip 속성 작동 */
    margin: -1px; /* 부트스트랩에선 안씀 */
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    white-space: nowrap;
    overflow: hidden; /* overflow: visible 이면 clip 속성 작동 안됨 */
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%); /* H5BP에선 안씀 */
}

CSS의 백그라운드를 이용할 때

<div class="bg_image ir_pm">Phark Method</div>

.bg_image {
    background-image: url("1.png");
}

.ir_pm {
    display: block;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    text-indent: -9999px;
}

Homebrew 바로가기

Homebrew 설치 [ Homebrew설치를 하러 들어가면 가장 먼저 뜨는 명령어입니다. ]

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

node, npm 설치 [ brew를 통해 설치하기 전 brew update를 한번씩 해주는 습관을 들입시다. ]

$ brew update

$ brew install node

$ node -v
$ npm -v

yarn 설치 [ node를 설치했기 때문에 node를 빼주기 위해 --ignore를 해줍니다. ]

$ brew install yarn --ignore-dependencies

$ yarn -v

사용한 플러그인 [ 슬라이드 플러그인 ]

npm install vue-carousel

사용방법

1. nuxt설치한 폴더에 npm install을 해준다. : npm install vue-carousel
2. 원하는 곳에 js파일을 만들어준다. ( vue 내용을 추가해준다. )
3. nuxt.config.js파일에 { src: '~경로', ssr: false }를 추가해준다.
4. 슬라이드를 사용한다

npm 설치

JS파일 생성

import Vue from 'vue'
import VueCarousel from 'vue-carousel/dist/vue-carousel.min.js'

Vue.use(VueCarousel)

nuxt.config.js파일에 경로 추가

:: js파일을 만든곳 경로를 설정

{ src: '~/plugins/vue-carousel', ssr: false },

.vue 파일에 슬라이드 추가

HTML부분

<div class="carousel-wrapper">
  <client-only>
    <carousel v-bind="options">
      <slide v-for="i in 5" :key="i" class="img-wrapper">
        <img :src="banners[0].image" :alt="banners[0].alt">
      </slide>
    </carousel>

    <navigationNextLabel />
    <pagination />
  </client-only>
</div>

JS부분 [ data() { } 부분에 추가해준다 ]

options: {
    loop: true,
    perPage: 1,
    paginationEnabled: false,
    autoplay: 5000
}

Workbench 메뉴의 Database --> Forward Engineer를 선택한다.

Stored Connection이 'Local stance ~'로 선택된 것을 확인하고 continue를 클릭한다.

이후 따로 설정할 필요없이 계속 continue를 눌러서 넘어가준다.

이전에 다이어그램에 만들었던 내용이 자동으로 SQL문으로 생성된것을 볼 수 있다.

continue를 클릭해준다.

문제없이 만들어 졌음을 확인할 수 있다.

여느때와 마찬가지로 Schemas로 넘어가서 오른쪽을 클릭하고 Refresh All을 클릭한다.

문제없이 ModelDB 테이블을 확인할 수 있다.

글로벌 변수를 최소화하는 방법

• 클로저를 이용하는 방법
• 모듈 / 네임스페이스 패턴을 이용하는 방법

클로저를 이용하는 방법

<script>
    (function() {
        var localVariable = "Not Global";
    }());
</script>

위처럼 클로저를 사용해 간단하게 로컬 변수로 바꿔줄 수 있다.

모듈 / 네임스페이스 패턴을 이용하는 방법

<script>
    var myModule = (function() {
        var localVariable = "local variable";

        return {
            show: function() {
                alert(localVariable);
            }
        }
    }());

    myModule.show();
</script>

myModule이라는 변수 자체는 글로벌 변수다. 하지만 myModule이외의 다른 변수들은 모두 즉시 호출 함수 안에서 사용하여 글로벌 변수가 아니다. myModule.show();를 통해 간접적으로 내부 함수의 로컬 변수들에 접근하고 사용할 수 있다.

즉시 호출 함수로 모듈을 생성하는 예

<script>
    (function() {
        var localVariable = "local variable";

        window.myModule = {
            show: function() {
                alert(localVariable);
            }
        };
    }(window));
    myModule.show();
</script>

위 두 코드는 같은 기능을 수행한다. 이렇게 글로벌 변수를 최소화함으로써 서로 다른 자바스크립트 코드간의 충돌을 최소화하고자 하는 것이 모듈 / 네임스페이스 패턴이다.

글로벌 변수의 사용을 최소화하기 위한 방법 기준

• DOM에 자바스크립트 코드를 넣고 변수에 접근해야 한다. :: 모듈방식
• 다른 개발자와 상호작용하는 코드를 만든다. :: 모듈방식
• 자바스크립트 라이브러리를 만들고 싶다. :: 모듈방식
• 외부에서 접근할 일이 없다. :: 클로저 방식
• 잘 모르겠다. :: 클로저 방식

위 기준에 따르면 대부분 클로저를 사용해서 글로벌 변수 없이 전체를 로컬 변수로 만들어 사용하는 것이 좋다. 특히 자바스크립트 개발자 커뮤니티에서는 글로벌 변수의 사용 자체를 막기 위해, 그리고 DOM과 자바스크립트의 역할을 명확하게 구분하기 위해 위 기준 중 1번 DOM에 자바스크립트 코드를 넣는 것을 반대하고 있기도 하다.

JSON과 AJAX

JSON ( Java Script Object Notation )

• JavaScript Object Notation이라는 의미의 축약어로 데이터를 저장하거나 전송할 때 많이 사용되는 Data교환 형식
• Javascript에서 객체를 만들 때 사용되는 표현식을 의미
• JSON표현식은 사람과 기계가 모두 이해하기 쉬우면서 용량이 작기때문에, 데이터 전송 등에 많이 사용된다.
• 데이터를 표시하기 위한 단순한 표현 방법

AJAX ( Asynchronous Javascript And XML )

• Javascript를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능
• 브라우저가 가지고 있는 XMLHttpRequest객체를 이용해서 전체 페이지를 새로 고치지 않고 페이지의 일부만을 로드하는 기법

JSON파일과 AJAX를 이용한 간단한 통신

HTML

<div class="json_test_wrap">
    <div class="title">JSON and AJAX</div>

    <button id="btn">Click</button>

    <div id="info"></div>
</div>

<script src="../js/main.js"></script>

JS

// 카운트
var count = 0;
// 클릭버튼
var btn = document.getElementById("btn");
// 버튼을 클릭했을 때 내용이 나타날 부분
var animal = document.getElementById("info");

btn.addEventListener("click", function() {
    var ourRequest = new XMLHttpRequest();

    ourRequest.open('GET', '../json/jsonData.json');
    
    ourRequest.onload = function() {
        if(ourRequest.status >= 200 && ourRequest.status < 400) {
            var ourData = JSON.parse(ourRequest.responseText);
            renderHTML(ourData);
        } else {
            console.log('err');
        }
    };
    ourRequest.send();
    ++count;
    // 내용 나오면 버튼 삭제
    if(count === 1) {
        btn.remove();
    }
});

function renderHTML(data) {
    var stringHTML = "";

    for(var i = 0; i < data.length; i++) {
        stringHTML += "<p> 이름은 " + data[i].name + ' 종류는 ' + data[i].species + ".</p>";
    }

    animal.insertAdjacentHTML('beforeend', stringHTML);
}

JSON

[
  {
      "name": "다롱이",
      "species": "고양이",
      "favFood": "통조림"
  },
  {
      "name": "메론",
      "species": "당나귀",
      "favFood": "당근"
  },
  {
      "name": "민트",
      "species": "강아지",
      "favFood": "사료"
  }
]

버튼을 클릭하면 JSON내용을 불러오고 버튼이 삭제

구글 폰트 바로가기

구글폰트 접속

원하는 폰트를 클릭하고 아래로 내려보면

+ Select this style이 보인다. 원하는 폰트 클릭 ( 다중 선택 가능 )

그럼 오른쪽에 link가 나온다. ( 복사 )

nuxt.config.js

export default {
    link: [
      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap" rel="stylesheet' }
    ]
}

링크부분에 내가 원하는 링크를 넣어준다.

NuxtJS 홈페이지

nuxt 정적 이미지 추가하기

<img src="~/assets/imgs/logo.png" alt="Logo">

nuxt 동적 이미지 추가하기 ( 백틱을 사용해 줘야함 ` ` )

<img :src="require(`~/assets/imgs/${image}.jpg`)" alt="Logo">

글로벌 설정 [ nuxt.config.js파일 안에 리소스 include하기 ]

export default {
  css: [
    '~/assets/reset.scss'
  ],
}

~/assets/reset.scss

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

정말 오래된 에릭마이어의 CSS Reset 

에릭마이어의 CSS 바로가기

NUXT JS 외부 리소스 바로가기

NUXT JS 사용하기

글로벌 설정 [ nuxt.config.js파일 안에 리소스 include하기 ]

export default {
    script: [
    	{ src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js' }
    ]
}

로컬 설정 [ pages 디렉토리의 .vue파일 안에서 리소스 include하기 ]

export default {
    script: [
    	{ src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js' }
    ]
}

두 방법은 같기 때문에, 전체적으로 jQeury를 사용해야 하는 상황이면 nuxt.config.js파일에, 부분적으로 사용해야 하는 상황이면 .vue파일 안에 include해주면 된다.