슈거

[JS] 호이스팅

수이르 — Fri, 2 Aug 2019 14:44:56 +0900

호이스팅

변수의 호이스팅

function foo() {
    console.log(a);  // undefined
    var a = 100;
    console.log(a);  // 100
}

foo();

다른 프로그래밍 언어의 경우 위의 코드를 실행하면 a가 선언되지 않았는데 a를 호출했기 때문에 에러가 발생합니다. 하지만 자바스크립트의 경우는 호이스팅을 통해 a의 선언을 함수 제일 위에서 해주기 때문에, 에러 없이 undefined가 출력됩니다. 위 코드는 사실 아래와 같은 코드입니다.

function foo() {
    var a;
    console.log(a);  // undefined
    var a = 100;
    console.log(a);  // 100
}

foo();

함수의 호이스팅

foo();

function foo() {
    console.log('출력');
}

위와 같은 코드의 경우, 변수 호이스팅과 마찬가지로 함수선언이 위로 끌어올려지기 때문에 제대로 동작합니다. 하지만 아래와 같은 함수 표현식의 경우에는 오류가 발생합니다.

foo();  // foo is not a function

var foo = function() {
    console.log('출력');
};

위의 코드는 아래와 같기 때문에 오류가 난다.

var foo;

foo();  // foo is not a function

foo = function() {
    console.log('출력');
};

위와 같이 foo 선언을 위로 호이스팅 해버리기 때문에, foo가 실행될 때는 아직 변수로 선언이 된 상태일 뿐인 것입니다. 따라서 foo는 함수가 아니라는 에러 메세지를 보게 됩니다.

호이스팅 이해가 어렵다면 호출 전에 선언하는 습관을 들이자

[HTML] form 스터디

수이르 — Tue, 9 Apr 2019 01:56:14 +0900

크로스브라우징 이슈

iOS safari

input, textarea 태그에 border-radiuis 기본으로 값이 들어가있음 (별도로 0 지정)

IE9 이하 input placeholder 사용불가

스크립트를 사용하는 [방법](https://archive.cmsfactory.net/node/10224)

require 속성에 따른 브라우저별 툴팁 표시

파이어폭스 : box-shadow 속성 추가
IE : outline 속성 추가
크롬 : 미입력 input에 말풍선 툴팁

커스텀

placeholder color
input { padding: 0.78571429em 2.1em 0.78571429em 1em; border-radius: 0.28571429rem; &.input_error { background-color: rgba(221, 78, 90, 0.1); } &::placeholder { color: #f5747f; opacity: 1; /* Firefox */ } &:-ms-input-placeholder { color: #f5747f; /* Internet Explorer 10-11 */ } &::-ms-input-placeholder { color: #c6c6c6 !important; /* Microsoft Edge */ } &::-webkit-input-placeholder { color: #f5747f; /* Safari, Chrome */ } }

IE9 이하는 placeholder.js 사용하여 추가되는 클래스로 컬러 변경

select 화살표 지우기

.remove_select_arr { -webkit-appearance: none; /* for chrome */ -moz-appearance: none; /*for firefox*/ appearance: none; &::-ms-expand { display: none; } &:focus { outline: none; } }

괜찮은 UI 프레임워크

input 키보드 이벤트 발생 순서

keydown = keypress(문자가 입력될 때만 발생, 방향키/백스페이스/딜리트 x)
input
change
keyup

[참고사이트](https://dororongju.tistory.com/91)

[HTML] 문서의 기본 구조

수이르 — Fri, 15 Mar 2019 14:56:41 +0900

HTML 문서 구조

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>HTML</title>
    </head>
    <body>
        <h1>Hello, HTML</h1>
    </body>
</html>

1. DTD 선언

문서 타입을 정의하는 문구, 선언문에 따라 브라우저 렌더링 모드가 정해진다.

반드시 문서 최상단에 위치, <html> 태그보다 위에 선언돼야 한다.

2. html 태그 lang 속성

검색엔진이나 브라우저가 어떤 언어로 작성되었는지 알 수 있게 나타내는 속성

3. head 태그

브라우저에 표시되지 않는 문서의 기본정보 설정(meta, title ..)이나 외부 스타일 시트, JS 파일을 연결한다.

4. body 태그

실제 브라우저에서 나타나는 내용들이 들어가는 태그

[HTML] 웹 표준과 웹 접근성

수이르 — Fri, 1 Mar 2019 22:34:55 +0900

웹 표준이란

웹 표준화 단체(W3C)가 권고한 표준안을 뜻한다.
https://www.w3.org/TR/html5-author/
KISA 번역본
이를 준수하여 웹을 구현한다는 것과 그에 따른 효과
용도에 맞는 태그 사용과 CSS를 분리하여 작업하는것
이를 통해 다양한 브라우저들과 기기에서 동일한 화면을 구현
검색엔진 최적화, 웹 페이지의 데이터를 의미론적으로 분석 가능
진단방법
W3 validator - Markup
W3 validator - CSS
한국인터넷진흥원 - 기술지원센터

웹 접근성이란

장애 여부와 상관없이 모든 환경에서 웹 콘텐츠를 이용할 수 있어야 하는 것
스크린리더를 통해 음성으로 웹 페이지 내용을 들을 수 있어야한다
모든 기능은 키보드만으로 사용할 수 있어야 한다.
명료성, 가독성, 콘텐츠의 논리성, 멀티미디어 대체 수단을 고려해야한다
진단방법
한국웹접근성평가센터 - 체크리스트
NHN Web Accessibility eXtension
웹 접근성 연구소

[JS] input 입력값 byte 체크 (키보드이벤트)

수이르 — Wed, 19 Dec 2018 14:14:35 +0900

input 입력값 byte 체크 (키보드이벤트)

<div class="ui input square" style="width: calc(100% - 400px); margin-right: 10px;">
 <input class="text" type="text" placeholder="검색어를 입력하세요.">
 <span>(<span class="bytes">0</span>/38 Byte)</span>
</div>

<script type="text/javascript">
  //byte 체크
    $('.text').keyup(function(){
        bytesHandler(this);
    });
    function getTextLength(str) {
        var len = 0;
        for (var i = 0; i < str.length; i++) {
            if (escape(str.charAt(i)).length == 6) {
                len++;
            }
            len++;
        }
        return len;
    }
    function bytesHandler(obj){
        var text = $(obj).val();
        $('span.bytes').text(getTextLength(text));
    }
</script>

키보드 이벤트 발생 순서

keydown = keypress(문자가 입력될 때만 발생, 방향키/백스페이스/딜리트 x)
input
change
keyup

https://dororongju.tistory.com/91 참고 사이트

[CSS] font-face 설정 (브라우저 호환성 고려)

수이르 — Wed, 12 Dec 2018 17:21:33 +0900

EOT(Embedded Open Type) : IE8 이하 버전은 .eot 파일만 인식
oft(OpenType)/ttf(TrueType) : 웹과 문서 파일에서도 사용 가능. 대부분 브라우저에서 사용 가능 (Chrome 4+, Firefox 3.5, Opera 10+, Safari 3-5, Android, iOS 에서 지원)
WOFF(Web Open Font Format) : TrueType이나 OpenType 서체를 압축한 것 (Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+, FF Mobile(Gecko) 5, Opera Mobile11 에서 지원)
SVG(Scalable Vector Graphic) : (Chrome, Opera, Safari, Opera Mobile 10.0, Safari Mobile에서 지원)

//한 줄씩 설명
@font-face {
  font-family: 'Noto Sans CJK'; // 폰트 이름 원하는데로 설정 가능
  font-weight: 400;
  src: url('./assets/fonts/NotoSansCJKkr-Regular.eot');//  IE 호환성 모드
  src: url('./assets/fonts/NotoSansCJKkr-Regular.eot?#iefix') format('embedded-opentype'),
  // format() 작성 시 지원하는 브라우저만 자운
  url('./assets/fonts/NotoSansCJKkr-Regular.woff') format('woff'),
  url('./assets/fonts/NotoSansCJKkr-Regular.otf') format('opentype');
  // IE8 이하는 format() 구문 인식을 못 해 다른 url()을 다운받는다
  // 그래서 '#iefix'를 삽입하여 뒤로는 인식 못 하게 하여 .eot 파일만 받게 함 (IE 특성 이용)
  // 이후 타 브라우저들은 해당 포맷만 다운로드
  src: local(※), url('./assets/fonts/NotoSansCJKkr-Regular.woff') format('woff');
  // local('폰트이름') -> 외부 자원을 참조하기 이전에 시스템에 설치된 글꼴을 우선 참조
  // 없을 경우 url() 주소로 연결 (IE는 local() 속성을 인식 못 함->건너뜀)
}
//적용되는 순서 설명
@font-face {
  font-family: 'Noto Sans CJK';
  font-weight: 500;
  src: url('./assets/fonts/NotoSansCJKkr-Medium.eot');
  src: local(※),
  url('./assets/fonts/NotoSansCJKkr-Medium.woff') format('woff'),
  url('./assets/fonts/NotoSansCJKkr-Medium.woff') format('opentype');
  //  IE 6~8 로 접속 - 첫 src : local() 속성 인식 못하여 다음 src 에서 .eot 다운
  //  IE 호환성 보기로 접속 - 첫 src : local() 속성 인식 못하여 다음 src 에서 .eot 다운
  //  IE 9 이상으로 접속 - .woff 다운
  //  크롬, firefox, opera, safari 접속 - .woff 또는 opentype 다운
}

[JS] jQuery .on() 이벤트

수이르 — Tue, 11 Dec 2018 14:37:54 +0900

//이벤트 하나
$('.main-nav ul > li').on('click', function(){

});
//이벤트 둘
$('.main-nav ul > li').on('click mouseover', function(){

});
//이벤트 넷
$('.main-nav ul > li').on({
    'focusin mouseover': function () {},
    'focusout mouseleave': function () {}
});

[JS] jQuery .trigger() 함수 (이벤트/이벤트핸들러/함수 비교)

수이르 — Tue, 11 Dec 2018 11:30:29 +0900

trigger() 메서드는 요소에 등록된 이벤트 핸들러만 실행시킨다.

<script>
    //이벤트 이벤트핸들러(이벤트 발생했을 때 실행되는 함수)
    $('#foo').on('custom', function (event, param1, param2) {
        //                 이벤트 핸들러의 첫번째 매개변수는 이벤트 객체를 전달받는다.
        alert(param1 + "\n" + param2);
    });
    $('#bar').on('click', function () {
        $('#foo').trigger('custom', ['Custom','Event']);
        // #foo 요소에 등록된 이벤트 핸들러만 실행
    });

    //함수의 매개변수는 값 그대로 반환 (함수 그 자체는 이벤트 핸들러가 아니다)
    function bbb(a, b) {
        console.log(a * b)
    }
    $('#aaa').click(function () {
        bbb(3, 5);
    });
</script>

[HTML] 텍스트 관련 태그 모음

수이르 — Tue, 4 Dec 2018 15:31:14 +0900

<b>의미 없는 bold체</b>
<strong>중요한 의미의 bold체</strong>
<i>의미 없는 italic체</i>
<em>강조하는 italic체</em>
<small>small text 지정</small>
<mark>형광펜 표시</mark>
<del>취소선 표시</del>
<ins>추가된 text 지정</ins>
<sub>아래 쓰인 text</sub>
<sup>위에 쓰인 text</sup>
<p>본문에 쓰이는 text<q>인용문을 지정하는 q태그, 큰 따옴표로 감싼다</q></p>
<hr>수평줄(빈요소)

[JS] ES6 기본

수이르 — Wed, 21 Nov 2018 17:58:08 +0900

<script>
  // 값과 리터럴(값의 표기법)
  console.log(`let and const`)
  // 변수 선언
  // let 은 값 없이 명만 선언 가능
  let six, two;
  six = 55, two = 2;
  console.log(six + ' ' + two);
  six = 7;
  six = 19;
  console.log(six);
  // const nine; const 는 변수 명과 값을 대입해주어야 한다
  const nine = 9, ten = 10;
  console.log(nine + ' ' + ten);
  //const nine = 99; 최초 선언 후 다른 값 대입 불가능
  //안 변하는 값이면 let 보다는 const 를 사용하는 것이 좋음

  // 식별자(Identifier) = 변수 명
  // 숫자, 알파벳, 달러문자, 언더바 포함 가능
  // 숫자로 시작 X, 예약어 사용 X
  let foo = 'ff', _underbar = 100, $jquery;

  // 리터럴 형태 반환
  console.log('리터럴 형태 반환 - typeof x')
  console.log(typeof 0.1111);

  // 정수 = true, 실수 = false
  console.log('정수인지 실수인지 - Number.isInteger(x)')
  console.log(Number.isInteger(six/two));

  // 문자열을 number 타입으로 변환
  console.log('문자열을 number 타입으로 변환 - parseInt()/parseFloat()')
  parseInt('123'); // 123
  parseInt('110', 2); // 문자열을 2진수로 간주
  parseFloat('12.323'); // 12.323
  parseInt('hello'); // NaN

  // NaN 가 되는 경우
  console.log('NaN 이 되는 경우 - 0/0, 1/문자, NaN')
  console.log(0/0);
  console.log(1/'x');
  console.log(NaN);
  console.log(Number.NaN);

  // NaN(Not a NUmber) 판별
  console.log('NaN 인 경우에만 True 반환 - Number.isNaN(x)/Object.is(x, NaN)')
  console.log(Number.isNaN(parseInt(foo))); // NaN 일 경우에만 true 반환
  console.log(Number.isNaN(Number.NaN));
  console.log(Object.is(_underbar, NaN));

  // const input = prompt('정수를 입력하세요');
  // const num = parseInt(input); // 숫자 외 모두 NaN 반환
  // if (Number.isNaN(num)) {
  //     alert('정수가 아닙니다.');
  // } else {
  //     const result = num * 2;
  //     alert(`${num}의 두 배는 ${result} 입니다.`); // ES6 - 템플릿 리터럴
  // }

  // Math 객체
  console.log(Math.abs(-456)); // 절대값
  console.log(Math.ceil(1.003)); // 올림 2
  console.log(Math.ceil(-1.003)); // 올림 -1
  console.log(Math.floor(1.9465)); // 내림 1
  console.log(Math.floor(-1.9465)); // 내림 -2
  console.log(Math.round(3.4465)); // 반올림 3
  console.log(Math.round(-3.4465)); // 반올림 -3
  console.log(Math.round(3.5465)); // 반올림 4
  console.log(Math.round(-3.5465)); // 반올림 -4
  console.log(Math.trunc(4.4465)); // 소수점 이하 제거 4
  console.log(Math.trunc(-4.4465)); // 소수점 이하 제거 -4
  console.log(Math.trunc('-4.4465')); // 소수점 이하 제거 -4 (Number 형태로 반환)

  const spr= 'spread function'
  const arr = [1,2,3];
  console.log(...spr);
  console.log(...arr);
  console.log(Math.max(...arr));

  // number 타입의 메소드
  (12345).toString(); // '12345'
  (12345).toLocaleString(); // '12,345'
  (1.2345).toFixed(2); // '1.23'

  // 템플릿 리터럴
  const txt1 = 'sdfsdf';
  const txt2 = 'fshgsg';
  console.log(`template literal is ${txt1} ${txt2}`);
</script>