![[JavaScript] 디바이스 구분 스크립트](https://susukkekki.kr/wp-content/uploads/2017/02/web.png)
어떤 디바이스로 접속했는지 확인 가능한 코드
var filter = "win16|win32|win64|macintel|mac|"; // PC일 경우 가능한 값
if (navigator.platform) {
if (filter.indexOf(navigator.platform.toLowerCase()) < 0) {
alert("모바일에서 접속하셨습니다");
} else {
alert("PC에서 접속하셨습니다");
}
}
# rpm -Uvh https://dl.fedoraproject.org/pub/epel/epel-release-latest-7.noarch.rpm
# rpm -Uvh https://mirror.webtatic.com/yum/el7/webtatic-release.rpm
# yum install nginx.x86_64
# systemctl start nginx
# systemctl enable nginx
# yum install yum-plugin-replace
# yum install mod_php71w php71w-common
# yum install php71w-gd
# yum install php71w-fpm
# yum install php71w-opcache
# yum install php71w-cli
# yum install php71w-mysqlnd
# yum install php71w-xml
# yum install php71w-mbstring
# sed -i 's/;date.timezone =/date.timezone = Asia\/Seoul/g' /etc/php.ini
# yum install -y make automake gcc gcc-c++ kernel-devel openssl-devel php php-devel php-pear bzip2-devel libvpx-devel yum-utils bison re2c libmcrypt-devel libpqxx-devel libxslt-devel pcre-devel libcurl-devel libgsasl-devel openldap-devel libmemcached-devel libjpeg-devel libpng-devel readline-devel
# systemctl start php-fpm
# systemctl enable php-fpm
nginx.conf 파일찾기
# sudo find / -name nginx.conf
nginx.conf 수정하기
# vi /etc/nginx/nginx.conf
nginx 다시 로드 하기
# sudo service nginx reload
검색엔진이 이해하기 쉽도록 홈페이지 구조를 설정하여 포털 사이트 상위에 노출시키는 작업이다. jekyll으로 제작된 깃허브 블로그에 SEO 작업을 진행하겠다.
sitemap.xml 파일을 만들고 root 경로 넣어준다.
layout: post
title: "제목"
date: 0000-00-00 12:00:00
lastmod : 0000-00-00 12:00:00
sitemap :
changefreq : daily
priority : 1.0
---
robots.txt는 로봇 배제 표준을 따르는 일반 텍스트 파일이다. 쉽게 표현하면 검색 엔진이 해당 사이트의 콘텐츠를 가져가도 허락하는 부분과 가져가면 안된다 라는 설정을 하는 부분이라고 보면 된다. 위와 동일하게 root 경로에 위치한다.
User-agent: *
Allow: /
Sitemap: https://recordboy.github.io/sitemap.xml
본인 블로그를 등록 해야 구글 및 네이버에서 검색이 가능하다.
github blog를 google에서 검색되도록 설정하기
구글(Google) 검색에 내 사이트 등록하기
홈페이지 검색 잘 되도록 만들기
RSS피드란?
robots.txt 파일 만들기
2019년 11월 22일 정보접근성 기술 컨퍼런스를 다녀온뒤 세미나 내용을 정리 및 웹 접근성에 대해 작성한 글이다.
웹 접근성(Web Accessibility) 이란 장애인, 고령자 등이 웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 보장하는 것이다. 법으로는 2017년 7월 26일부터 장애인차별금지법으로 시행되었다.
장애인 차별금지 및 권리구제 등에 관한 법률 제 2조(장애와 장애인)
- 이 법에서 금지하는 차별행위의 사유가 되는 장애라 함은 신처적, 정신적 손상 또는 기능상실이 장기간에 걸쳐 개인의 일상 또는 사회생활에 상당한 제약을 초래하는 상태를 말한다.
- 장애인이라 함은 제1항에 따른 장애가 있는 사람을 말한다.
웹 접근성은 정보와 사용자의 디지털정보격차를 줄인다는 개념으로도 볼 수 있다.
디지털정보격차(Digital Divide)란?
- 정보통신기술에서의 접근, 역량, 활용에 있어서의 불평등
- 사회자원에서의 접근, 역량, 활용에 있어서의 불평등
또한 접근성에서의 ‘장애’는 개인의 건강상태가 아니라 인간 상호작용이 일치하지 않는 상황으로 볼 수 있고, 접근성은 아래와 같은 의미로도 해석할 수 있다.
| 장애유형 | 특징 | 보완대책 |
|---|---|---|
| 시각장애(전맹) | 모니터를 볼 수 없음 | 스크린리더 |
| 시각장애(저시력) | 모니터 사용이 일부 가능함 | 화면확대/고대비 |
| 시각장애(색맹) | 색을 구별할 수 없음 | 색상에만 의존하지 않기/고대비 |
| 청각장애 | 사운드, 오디오 등을 창취할 수 없음 | 수화, 시각정보 제공 |
| 지체장애(상지장애) | 손을 사용할 수 없음 | 마우스 대체 방법, 키보드만 사용 |
| 지체장애(기타) | 움직임이 어려움 | 충분한 시간 제공 |
| 언어장애 | 복잡한 용어, 어려운 용어의 이해 불가능 | 쉬운 용어 사용 |
웹 접근성 한국표준이며 가이드는 한국형 웹 콘텐츠 접근성 지침 2.1 에서 확인해 볼 수 있다. 항목은 24가지 이며 국제표준(WCAG)은 더욱 엄격하여 항목으로는 78가지가 있다.
1. 적정한 대체 텍스트
텍스트 아닌 콘텐츠는 대체 가능한 텍스트와 함께 제공되어야 한다.
2. 자막, 수화 등의 제공
영상이나 음성 콘텐츠에는 동등한 내용의 자막, 원고 또는 수화가 제공되어야 한다.
3. 색에 무관한 콘텐츠 인식
화면에 표시되는 모든 정보는 색에 관계없이 인식될 수 있어야 한다.
4. 명확한 지시사항 제공
특정한 감각(시각, 청각 등)에 의존하여 지시사항을 제공할 경우 해당 감각에 장애가 있다면 인식할 수 없으므로, 다른 감각을 통해서도 인식할 수 있도록 지시사항을 제공해야 한다. (3, 4번 항목의 예: 콘텐츠 구분 접근성)
5. 텍스트 콘텐츠 명도 대비
화면에 표시되는 모든 사용자 인터페이스 컴포넌트와 텍스트는 전경색과 배경색이 구분될 수 있도록 제공되어야 한다.(예: 명도 대비 접근성)
6. 자동 재생 금지
자동으로 재생되는 배경음을 사용하지 않아야 한다. 구글은 사용자가 원치 않은 미디어가 자동 재생되면서 데이터와 전력을 소모하고, 웹 탐색 중 소음을 유발한다는 이유로 2018년 1월부터 크롬 브라우저는 웹 사이트에서 자동으로 재생되는 영상을 기본 설정에서 차단한 사례가 있다.
7. 콘텐츠 간의 구분
이웃한 콘텐츠는 구별될 수 있어야 한다.
1. 키보드 사용 보장
모든 기능은 키보드만으로도 사용할 수 있어야 한다.
2. 초점 이동
키보드의 Tab키(다음으로 이동)와 Shift + Tab(이전으로 이동)키로 확인해볼 수 있다.
초점 이동 순서가 순환적이며, 반복적이어야 한다.
페이지에 포함된 모든 링크, 버튼, 입력창에 초점이 가야한다.
사용자가 사용할 수 없는 비활성 요소(버튼, 입력창 등)에는 초점이 가지 않아야 한다.
3. 조작 가능
손떨림이 심하여 미세한 조작이 어려운 경우와 같이 운동 장애가 있는 경우에도 사용자 입력 및 컨트롤은 조작이 가능하도록 제공되어야 한다.
4. 응답시간 조절
웹 콘텐츠 제작 시 시간제한이 있는 콘텐츠는 가급적 포함하지 않는 것이 바람직하며, 보안 등의 사유로 시간제한이 반드시 필요할 경우에는 이를 회피할 수 있는 수단을 제공해야 한다.(일시 정지 등)
5. 정지기능 제공
자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야 한다.
6. 깜빡임과 번쩍임 사용 제한
초당 3~50회 주기로 깜빡이거나 번쩍이는 콘텐츠를 제공하지 않아야 한다.
7. 반복영역 건너뛰기
콘텐츠의 반복되는 영역은 건너뛸 수 있어야 한다.(스킵 네비게이션)
8. 제목 제공
페이지, 프레임, 콘텐츠 블록에는 적절한 제목(헤딩 태그)을 제공해야 한다.
9. 적절한 링크 텍스트
링크 텍스트는 용도나 목적을 이해할 수 있도록 제공해야 한다.(새창 열림 및 더보기)
1. 기본언어 표시
주로 사용하는 언어를 명시해야 한다. 웹 페이지에 주로 사용하는 언어를 <html> 요소에 lang 속성을 지정하여 명시
2. 사용자 요구에 따른 실행
사용자가 의도하지 않은 기능(새 창, 초점 변화 등)은 실행되지 않아야 한다.
3. 콘텐츠 선형구조
콘텐츠는 논리적인 순서로 제공해야 한다. 콘텐츠 및 마크업이 논리적인 순서로 구성해야 한다.
4. 표의 구성
표는 이해하기 쉽게 구성 및 caption 및 scope을 꼭 명시해 준다. 복잡한 표의 경우 id, header 를 사용한다.
5. 레이블 제공
입력 서식에는 대응하는 레이블을 제공해야 한다.
6. 오류정정
입력 오류를 정정할 방법을 제공해야 한다.
1. 마크업 오류 방지
마크업 언어의 요소는 열고 닫음, 중첩 관계 및 속성 선언에 오류가 없어야 한다.
2. 웹어플리케이션 접근성 준수
콘텐츠에 포함된 웹 애플리케이션은 접근성이 있어야 한다.
W3C는 텍스트를 시각적으로 표현하는 태그보다 프로그램적으로 의미를 전달할 수 있는 시멘틱 마크업 사용을 권장한다. 웹 사이트는 결론적으로 ‘웹으로 된 문서’이기 때문이다.
예시
<i> 태그를 사용하지만 이 태그는 이태릭체를 의미하는 태그이다. 아이콘으로 쓰지 말도록 하자. 의미가 없는 태그는 가상선택자(:after, :before)를 이용하며, 의미가 있는 태그는 <span> 태그 등에 대체 텍스트를 활용해 준다.<b> 태그는 강조보단 두껍게를 의미하는 태그이다. <i> 태그와 마찬가지로 사용을 지양하며, 강조의 의미인 <strong> 및 <em> 태그를 사용하도록 하자.<del> 태그를 사용하면 스크린리더기가 10,000원 뒤에 ‘삭제’ 라고 읽어준다. 이런식으로 의미론적인 태그를 사용하여 마크업을 작성하도록 하자.W3C는 특별한 경우를 제외하고는 텍스트를 이미지 형태로 제공하지 않도록 권장한다.
텍스트 이미지는 사용자의 요구사항에 따라 시각적으로 사용자 정의될 수 있어야 한다. 예를 하나 들면 번역을 해야 되는 경우가 있다. 꼭 이미지로 사용해야 하는 경우에는 대체 텍스트를 꼭 사용해주도록 한다.(alt 속성 등)
W3C는 기본적으로 텍스트와 배경과의 명도대비는 최소한 4.5 : 1 을 제공하도록 권장한다. 대신 비활성 상태의 인터페이스 요소나 텍스트, 순수한 장식, 로고 또는 상표명에 포함된 텍스트의 경우, 그림의 일부인 텍스트의 경우 어떠한 명도대비 요구사항도 없다. 명도 대비 검사는 Contrast Finder에서 테스트해볼 수 있다.
W3C는 UI요소 및 그래픽 콘텐츠에 한에서 명도대비를 3:1을 제공하도록 권장하고 있다. 예를들어 그래프의 경우 명도가 비슷한 색 끼리 맞닿은 경우 닿는면 사이를 흰색 라인으로 처리를 해준다. 색애 무관한 콘텐츠 인식에서 예시를 확인할 수 있다.
정적인 HTML과 단순한 JavaScript 환경이 아닌 동적인 JavaScript 및 Ajax와 같은 기술을 사용한 환경에서 스크린리더 및 보조기기등이 접근성 및 상호 운용성을 향상시키기 위하여 탄생되었으며, 역할(Role), 속성(Property), 상태(State) 정보를 추가하여 이를 개선 할 수 있도록 제공하고 있다. W3C가 권장을 하고 있지만, 느리다는 단점이 있다.
콘텐츠는 정보 또는 기능 손실 없이, 2차원 스크롤 없이 제공해야 한다. 2차원 스크롤을 이용해 본 사람은 알겠지만 콘텐츠 이용이 상당히 불편하다. 2차원 스크롤은 아래을 의미한다.
동영상 제공 시 W3C는 특별한 경우를 제외하고 동기화된 자막을 제공하도록 권장한다. 단, 미디어가 텍스트에 대한 대체수단이 분명히 명시된 경우는 예외이다. 되도록이면 대화, 해설, 효과음 등의 자막 스타일을 다르게 하여 나타내는 것도 하나의 방법이다. 동영상 자막의 경우 게임 분야가 상당히 잘 되어있다. 청각 장애와 난청을 위한 게임 만들기에서 좋은 예시를 볼 수 있다.
입력칸의 목적성을 규정하여 각각의 입력 필드가 가지는 의미는 계획하에 결정되어야 한다. 다른 말로 하면, 사용자들로부터 어떤 값들이 입력되길 기대하는지, 혹은 입력된 정보의 의미가 무엇인지를 나타내는 코드가 필요하다. 이를 정확하게 하면 사용자의 브라우저가 이전에 사용자가 입력한 데이터들을 활용하여 미리 해당 입력 필드를 자동적으로 채우는 것을 가능하게 해준다.
기술이 필요한 궁극적인 이유는 사람이다. 정보 접근성 준수 기술은 사용자를 이해하고 배려하는 것에서 시작된다. 웹 접근성을 꼭 준수하도록 하자
네이버 접근성 가이드
다음 접근성 가이드
웹 접근성이란?
웹 접근성의 이해
장애인차별금지 및 권리구제 등에 관한 법률
한국형 웹 콘텐츠 접근성 지침 2.1
[인식의 용이성] 1.3.1. 색에 무관한 콘텐츠 인식
[웹표준]WCAG 2.1 가이드라인
한국웹접근성성인인증평가원
ES6에서 class라는 문법이 추가되었고, 기존의 prototype 기반으로 클래스를 선언하는 것보다 명료하게 클래스를 선언할 수 있게 되었다.
함수를 만들 때는 함수 표현식과 선언식이 있으며, 선언식으로 작성한 클래스는 호이스팅이 일어난다. 여기서 호이스팅이란 함수를 선언했을 때 값들이 유효범위 최상단에 선언되는 것을 말한다.
클래스가 선언되기 전에 인스턴스를 생성하여 에러가 뜬다.
var obj = new Person('한나');
obj.getName(); // TypeError
var Person = function(name) {
this.name = name;
Person.prototype.getName = function() {
console.log(this.name);
}
}
인스턴스를 함수 선언 전에 생성해도 오류가 나지 않는다. 클래스를 선언식으로 작성하여 호이스팅되었기 때문이다.
var obj = new Person('한나');
obj.getName(); // 한나
function Person(name) {
this.name = name;
Person.prototype.getName = function() {
console.log(this.name);
}
}
class Person {
constructor(name) {
this.name = name;
}
getName() {
console.log(this.name);
}
}
const obj = new Person('민수');
obj.getName(); // 민수
위 코드는 새로운 클래스 키워드로 클래스를 선언하고 인스턴스를 만든 것이다. 함수 선언이 표현식과 선언식이 있듯이 클래스 키워드도 선언식과 표현식 두가지 방법으로 정의가 가능하다.
const obj = new Person('민수');
obj.getName(); // ReferenceError
class Person {
constructor(name) {
this.name = name;
}
getName() {
console.log(this.name);
}
}
위 코드는 에러를 출력하고 있다. 이유는 새로운 클래스는 호이스팅이 일어나지 않는다. 아니 엄밀히 말해 호이스팅이 발생하지 않는 것처럼 동작하는건데 이거는 추후에 알아보도록 하겠다.
constructor는 인스턴스를 생성하고 클래스 필드를 초기화하기 위한 특수한 메서드이다.
클래스 필드(class field) 클래스 내부의 캡슐화된 변수를 말하며, 데이터 혹은 멤버 변수라고 부른다. 자바스크립트의 생성자 함수에서 this에 추가한 프로퍼티를 클래스 기반 객체지향 언어에서는 클래스 필드라고 부른다.
class Person {
constructor(name) {
// 여기서 this는 생성될 인스턴스를 바라보고 있다.
this.name = name;
}
}
constructor는 클래스 내에 한 개만 존재할 수 있으며 이 함수 안에 프로퍼티를 작성하면 되며, 이 안에서 this는 생성될 인스턴스를 바라보고 있다.
class Person {
constructor(name) {
this.name = name;
}
// 클래스 몸체에는 메서드만 선언할 수 있다.
getName() {
console.log(this.name);
}
}
클래스 몸체 안에는 메서드만 선언할 수 있다. 클래스 몸체 안에 프로퍼티를 선언하면 오류를 출력한다.
ES6 클래스는 extends키워드로 상속을 구현한다.
class Wrap {
constructor(name) {
this.name = name;
}
getName() {
console.log(this.name + ' 슈퍼');
}
}
class Inner extends Wrap {
getName() {
super.getName()
console.log(this.name + ' 상속 받은 클래스');
}
}
var obj = new Inner('안녕');
obj.getName();
// 결과
// 안녕 슈퍼
// 안녕 상속 받은 클래스
위 코드를 보면 Inner는 Wrap를 상속 받았으며, new Inner('안녕')를 실행하면 아래의 과정을 거치게 된다.
Inner클래스의 constructor를 호출Inner클래스의 constructor를 작성하지 않았기 때문에 super클래스(Wrap)의 constructor가 호출됨(내부적으로 프로토타입 체인으로 인해)super클래스의 constructor에서 this는 현재의 인스턴스를 참조하므로 인스턴스의 name프로퍼티로 전달받은 값을 설정Inner에 할당위에 코드에서도 잠깐 나왔지만 super키워드는 슈퍼 클래스의 메서드를 호출할 수 있다.
class Wrap {
msg() {
console.log('안녕');
}
}
class Inner extends Wrap {
msg() {
// 슈퍼 클래스의 msg메서드를 실행한다.
super.msg();
}
}
var obj = new Inner();
obj.msg();
static키워드는 클래스를 위한 정적(static) 메서드를 정의한다. 정적 메서드는 prototype에 연결되지 않고 클래스에 직접 연결되기 때문에 클래스의 인스턴스 없이 호출되며, 클래스의 인스턴스에서는 호출할 수 없다.
class Inner {
// 인스턴스 없이 클래스에 바로 메서드를 선언해줌
static msg() {
console.log('안녕');
}
}
Inner.msg(); // 안녕
var obj = new Inner();
obj.msg(); // TypeError
동일한 클래스 내의 다른 정적 메서드 내에서 정적 메서드를 호출하는 경우 키워드 this를 사용할 수 있다.
class Inner {
static msg() {
console.log('안녕');
}
static msg2() {
this.msg();
}
}
Inner.msg2(); // 안녕
정적 메서드는 어플리케이션을 위한 유틸리티 함수를 생성하는데 주로 사용된다.
깃허브 호스팅 페이지가 404에러가 뜰 경우 아래 명령어를 실행하자, 설명은 아래 레퍼런스 참조
$ git commit --allow-empty -m 'Trigger rebuild'
$ git push origin
어플리케이션을 제작할 때 사용자가 페이지 요소들을 조작할 수 있도록 페이지의 버튼, 텍스트 등에 이벤트를 붙여야 할 때가 있다. 아래 리스트의 각 요소를 클릭하면 경고창이 뜨는 이벤트를 걸어줘야 된다고 가정해보면 아래처럼 구현할 것이다.
html
<ul id="list">
<li>list01</li>
<li>list02</li>
<li>list03</li>
<li>list04</li>
<li>list05</li>
</ul>
javascript
var item = document.getElementById('list').getElementsByTagName('li');
for (var i = 0; i < item.length; i++) {
// 각 li에 이벤트 리스너를 등록한다.
item[i].addEventListener('click', function(e) {
alert(e.target.innerText);
})
}
결과
See the Pen 이벤트 위임 by recordboy (@recordboy) on CodePen.
리스트 요소가 많이 없는 경우 위 코드는 별 문제가 되지 않는다. 하지만 리스트 요소가 천개, 만개라면 일일히 분리된 이벤트 리스너를 생성하고, 그걸 각각 요소에 등록할 것이다. 이는 매우 비효율적인 방법이다. 아이템 갯수마다 이벤트 리스너를 생성, 등록하는 것보다는 감싸고 있는 리스트에 한개의 이벤트를 등록하고, 조건을 달아줘서 리스트의 요소를 클릭했을시에만 경고창을 출력하도록 구현하면 된다.
javascript
var list = document.getElementById('list');
var item = list.getElementsByTagName('li');
// 리스트에 이벤트를 등록
list.addEventListener('click', function(e) {
// 리스트 요소일 때 경고창 출력
if (e.target.nodeName === 'LI') {
alert(e.target.innerText);
}
})
웹사이트를 운영중 이미지 및 css 또는 js를 수정해도 반영이 안되어있을 때가 있다. 브라우저 내에 저장되어 있는 캐시 때문인데, 이를 해결하려면 사용자가 직접 캐시를 지우거나 강력 새로고침을 해야하는 번거로운 상황이 있다. 이를 방지하려면 작업자가 수정된 파일의 url 뒤에 ?ver=1라고 쿼리스트링을 붙여주면버전 정보를 적어주면 브라우저가 새로운 파일로 인식하고 파일들을 다시 다운로드 한다.
html
<link type="text/css" href="./common.css?ver=1" />
위 방법은 수정될 때 마다 쿼리스트링을 변경해줘야되는데, 이것도 번거롭다면 자바스크립트를 이용하여 동적으로 랜덤한 쿼리스트링을 생성하여 붙여주는 방법이 있다.
javascript
var bust = Math.floor((Math.random() * 1000));
document.write('<link type="text/css" href="./common.css?bust=' + bust + '" />');
이 방법은 브라우저가 로딩될 때 마다 쿼리스트링 값이 다르기 때문에 항상 파일을 새로 불러오게 된다.
Array.reduce메서드는 배열의 각 요소를 순회하며 콜백 함수를 실행하며 이전 리턴값을 넘겨 받는다. 이전 값을 넘겨 받아 현재 값과 어떠한 작업을 수행하고 싶을 때 적합한 메서드이다. 인자 값이 다른 메서드와 약간 다르며, 콜백 함수 뒤에 인자를 하나 더 줄 수 있다. 이 인자는 첫 콜백함수의 이전 값으로 주입된다.
var arr = [1, 2, 3, 4, 5];
// 각 콜백 마다 리턴값을 previousItem로 넘겨받아 어떤 작업을 수행
var val = arr.reduce(function(previousItem, currentItem, index, array) {
// 콜백의 리턴 값을 받아 현재의 값과 더하려 다시 리턴
return previousItem + currentItem;
// 첫번째 콜백의 previousItem값
}, 0);
console.log(val);
// 15
// 위 결과를 수식으로 나타내면 0 + 1 + 2 + 3 + 4 + 5 이다.(0부터 5까지의 합)
[JavaScript] Array 객체에서 놓치기 쉬운 6개의 메서드
Array.prototype.reduce()
자바스크립트 규칙에 어긋나는 문법으로 작성하여 자바스크립트 엔진이 이해 못 할 문자가 입력되었을 때 발생한다. 요즘에는 에디터 내부에서 오류를 친절하게 찾아주기 때문에(ESlint 혹은 Prettier) 브라우저에서 구문 오류는 찾아보기가 힘들어 졌다.
문자열을 따옴표로 닫지 않고 변수에 할당함
let text = 'hello
Uncaught SyntaxError – 유효하지 않거나 예상치 못한 토큰
Uncaught SyntaxError: Invalid or unexpected token
가장 많이 발생하는 에러중 하나로 구문의 기대하는 값이 아닐 경우 오류가 발생한다. 쉽게 말해 변수의 값이 원하는 값이 아닐 때 나타난다고 볼 수 있다.
obj 객체에 없는 함수 myFunc를 호출할 때 타입 에러가 발생한다.
let obj = {};
let result = obj.myFunc();
Uncaught TypeError – obj.myFunc는 함수가 아닙니다
Uncaught TypeError: obj.myFunc is not a function
obj 값이 null 혹은 undefined일 경우 없는 프로퍼티를 호출하면 에러가 발생한다.
let obj = null;
// or
let obj;
let result = obj.myProperty;
Uncaught TypeError – 정의되지 않은 속성을 읽을 수 없습니다
Uncaught TypeError: Cannot read properties of undefined (reading 'myProperty')
해당 변수의 객체가 있을 경우에만 프로퍼티(혹은 함수)를 사용하고 싶다면 오류가 발생하지 않도록 아래처럼 방어 코드(단축 평가)를 추가할 수 있다. 리액트같은 라이브러리를 사용하는 경우 state가 선언되기 전에 렌더링 될때 타입 에러가 발생되는 경우가 많은데 아래처럼 사용이 가능하다.
let result = obj && obj.myProperty;
// obj가 존재할 경우에만 myProperty 프로퍼티를 호출
참조 에러는 현재 범위에 존재하지 않거나 선언하지 않은 변수를 참조하였을때 발생하는 에러유형이다.
선언되지 않은 함수 boo를 호출하면 참조 에러가 발생한다.
function foo() {}
boo();
Uncaught ReferenceError – boo가 정의되지 않았습니다
Uncaught ReferenceError: boo is not defined
어떤 값이나 데이터가 유효한 자원의 범위를 넘어설 때 발생한다. 대표적으로 콜 스택 초과 에러가 있다.
foo 함수는 boo를 호출하고 boo 함수는 foo를 호출하면 무한 루프가 걸리면서 스택이 오버되었을 때 오류가 난다.
function foo() {
boo();
}
function boo() {
foo();
}
foo();
Uncaught RangeError – 최대 호출 스택 크기 초과
Uncaught RangeError: Maximum call stack size exceeded
이 외에도 아래와 같은 에러들이 존재한다.
eval() 함수와 관련한 오류가 발생했을 때encodeURI()나 decodeURI() 함수에 부적절한 매개변수를 제공했을 때MDN Web Docs – Error
자주 발생하는 자바스크립트 에러
자바스크립트 오류 확인하는 방법과 7가지 오류 유형