안녕하세요.
이 공간은 제가 프론트엔드를 처음 접하며 배운 것을 주저리주저리 쓰는 공간입니다.
이번 내용은 javascript 10편입니다.
localStorage 객체
lacalStorage 객체는 웹 브라우저가 기본으로 제공하는 객체입니다.
이 객체는 다음과 같은 메소드를 가지고 있습니다.
localStorage.getItem(key)저장된 값을 추출합니다.
값이 없다면 undefined가 출력됩니다.
localStorage.key 혹은 localStroage[key]를 사용합니다.
localStorage.setItem(key)값을 저장합니다.
localStorage.removeItem(key)특정 키의 값을 제거합니다.
localStorage.clear()저장된 모든 값을 제거합니다.
간단한 예시를 살펴볼까요?
<!-- HTML -->
<body>
<p></p>
<button>지우기</button>
<input type="text" />
</body>// JS
document.addEventListener('DOMContentLoaded', () => {
const p = document.querySelector('p')
const input = document.querySelector('input')
const button = document.querySelector('button')
// savedValue 변수는 localStorage에 저장된 값을 불러옵니다.
const savedValue = localStorage.getItem(input)
if (savedValue) {
input.value = savedValue
p.textContent = `이전 실행때의 마지막 값: ${savedValue}`
}
input.addEventListener('keyup', (event) => {
const value = event.currentTarget.value
// localStorage에 input에 입력된 값을 저장합니다.
localStorage.setItem('input', value)
})
button.addEventListener('click', (event) => {
// 모든 localStorage값을 삭제합니다.
localStorage.clear()
input.value = ''
})
})코드를 실행하고 input창에 값을 입력한 후 새로고침하면,
글씨가 상단에 저장됩니다.
localStorage는 브라우저가 기본적으로 제공해주는 웹 API입니다.
예외처리
오류의 종류
javascript에서의 오류는
1. 프로그램 실행 전 발생하는 오류
2. 프로그램 실행 중 발생하는 오류
2가지입니다.
괄호 개수를 잘못 입력하거나 쉼표를 잘못 기입하는 등 코드가 실행조차 되지 않는 오류를 구문 오류라고 하고,
이러한 오류를 제외하고 코드 실행 중 발생하는 오류를 예외, 혹은 런타임 오류라 합니다.
이를 처리하는 것은 예외처리라고 부르죠.
구문 오류
아래는 구문 오류가 있는 예시입니다.
console.log('Ready')
console.log('Start'뒤에 괄호가 날아간 모습이에요.
실행시키면 SyntaxError가 발생합니다.
전체 코드가 실행되지 않습니다.
뒤의 괄호를 닫아주면 해결되는 오류입니다.
예외
런타임 오류라고도 불리우는 오류입니다.
아래는 예외 오류의 예시입니다.
console.log('Ready')
consol.log('Start')console의 e가 하나 빠진 모습이죠.
실행하면 TypeError 메세지가 나옵니다.
구문 오류와는 다르게 위의 코드는 실행이 되고, 아래의 코드만 실행되지 않습니다.
javascript에서 SyntaxError 외의 모든 오류는 예외로 분류됩니다.
기본 예외 처리
조건문을 사용해서 예외가 발생하지 않게 하는 것을 기본 예외 처리라고 합니다.
예시를 보겠습니다.
<!-- HTML -->
<body>
</body>// JS
document.addEventListener('DOMContentLoader', () => {
const h1 = document.querySelector('h1')
h1.textContent = 'Hello!'
})HTML 내부에 h1 태그가 없으므로, 위 코드는 예외가 발생합니다.
이를 조건문으로 예외 처리를 해주겠습니다.
// JS
document.addEventListener('DOMContentLoader', () => {
const h1 = document.querySelector('h1')
if (h1) {
h1.textContent = 'Hello!'
} else {
console.log('h1 tag is undefined')
}
})h1이 존재하면 Hello라는 문자가 반환되고, 만약 존재하지 않으면 콘솔창에 메세지가 나오며 에러를 막아줍니다.
때문에, 문제가 발생할 여지가 있는 부분은 조건문으로 처리해주는 것이 좋습니다.
고급 예외 처리
예외를 조금 더 쉽게 잡을 수 있는 기능으로, try catch finally 구문이 있습니다.
try catch finally 구문의 구조는 아래와 같습니다.
try {
// 예외가 발생할 수 있는 코드
} catch {
// 예외가 발생하면 실행해줄 코드
} finally {
// 예외가 나던 안나던 실행해줄 코드
}마지막 finally 구문은 선택사항입니다.
있어도 그만 없어도 그만이에요.
finally를 제외하고 나면 if문과 비슷한 느낌입니다.
finally 구문을 굳이 써야하나 싶은 생각이 드는데요.
아래 두 예제에서 finally 구문이 필요한 상황을 볼 수 있습니다.
// 1.
function test () {
try {
alert('A')
throw "오류다.."
} catch (exception) {
alert('B')
return
}
alert('C')
}
test()// 2.
function test () {
try {
alert('A')
throw "오류다.."
} catch (exception) {
alert('B')
return
} finally {
alert('C')
}
}
test()1번 예제에서는 return 키워드로 함수를 빠져나가며 A와 B가 출력되고,
2번 예제에서는 finally 구문의 추가로 A와 B와 C 모두 출력됩니다.
아, 그리고 throw 키워드는 강제로 오류를 발생시키는 키워드입니다.
진심으로 왜 이딴게 필요한가 싶지만...
꼭 필요한 상황이 존재한다고 합니다.
그렇다고 합니다.
저건 뒤에서 살펴볼게요.
이처럼 try와 catch 구문 내부에서 return, break, continue 키워드를 만나게 되면 결과값이 달라집니다.
