즉시실행함수, BOM, Web Storage

공부를 하면서 헷갈렸거나 확실히 머릿속에서 정립되지 않은 부분들을 따로 공부해 정리해봤다.

이 책에 내용들이 잘 정리되어있고 이해하기도 쉬워서 참고했다! 언어에 대한 부분은 물론, 네트워크나 다른 부분에 대해서도 함께 이해하기 좋은 책이었다. 도서관에서 발견한 책인데 역시 도서관 최고!

즉시실행함수

여기서 궁금한 건 하나였다. 도대체 (function(x) {···})(Arg) 저 (Arg)가 뭐냔 말인가?

생각보다 별 게 아니라서 김이 팍 샜다. 익명함수의 매개변수로 넣어 즉시실행함수를 작동시키는 거였다. Arg를 넣어 즉시실행함수를 작동시키고 이 매개변수가 주어졌을 때 결과를 반환하게 된다.

BOM

DOM은 알아도 BOM은 뭘까, 발음도 봄이라 왠지 모를 산뜻함이 느껴지는데 말이다. 어리석었다. 그렇게 회사에서 줄창 쓰던 Location 객체, Navigator 객체, React router를 까보면서 공부했던 History 객체를 포함하는 브라우저 객체 모델(Browser Object Model)인 것을 말이다.

DOM이 실질적으로 프로그래밍 언어를 통해 화면에 그려지는 요소 모음이라면, BOM은 브라우저 기능을 활용해 웹페이지의 흐름, 요청 등을 만들 수 있도록 객체 형식으로 제공하는 기능이라고 할 수 있다.

History 객체

세션 기록, 방문 기록 등 개인 정보와 관련된 걸 보는 건 불가능하지만 현 페이지 기준 앞뒤, 특정 기준점으로 이동하는 걸 가능하게 하는 BOM 객체다.

메서드

1. go(): 숫자로 매개변수를 받아 양수면 forward(), 음수면 back() 메소드와 동일하게 작동한다. 0일 경우, 새로고침된다.
2. forward(), back(): 현 기준 앞, 뒤 페이지로 이동한다. go()와 동일하게 숫자로 매개변수를 받는다.
3. pushState(): 세션 기록에 상태를 추가한다. 매개변수는 state, title, url 순으로 받으며 url의 경우 브라우저에서 지원하지 않는 경우가 많아 보통 빈값으로 둔다. 새로운 HTTP 호출을 생성하는 것이 아니라 페이지 존재 여부와 상관이 없다.
4. replaceState(): pushState()와 동일하게 작동한다. 그러나 다른 점은 새로운 세션이 추가되는 게 아니라 현재 세션이 대체된다는 점이다.
5. state 객체

Location 객체

현 페이지 URL, 프로토콜, hostname, 포트 번호 등 위치 정보를 포함하고 있는 객체다. 이 객체를 통해 페이지를 새로고침한다든지, 페이지를 이동한다든지, pathname, 쿼리스트링을 붙여주는 등 다양한 작업이 가능하다.

메서드

1. reload(): 현 URL의 리소스를 다시 로드함.
2. replace(): 매개변수에 해당하는 URL로 이동하며 assign()과 다르게 history 스택이 초기화된다.
3. assign(): 매개변수에 해당하는 URL로 이동하며 history 스택에 추가된다. 뒤로 가기를 하면 이전 페이지로 되돌아간다. location.href 사용 시 호출되는 메서드.

Navigator 객체

클라이언트 사용자가 어떤 기기를 활용하고 있는지, 클라이언트 ID 혹은 상태를 저장하는 객체다. 현업에서 일하며 가장 많이 사용한 건 appVersion과 userAgent인데 최근에는 개인정보가 광고에 활용된다는 이슈로 userAgent를 지원하지 않도록 점차 중단해가는 추세다.

Web Storage

웹 스토리지 또한 BOM에 속하는 저장소다. 따로 뺀 이유는 그냥 내가 잘 모르기 때문이다.

웹 스토리지에는 2가지 유형이 있는데, localStorage와 sessionStorage다. 세션이라는 말은 작업하다보면 자주 듣게 되는 말인데 브라우저에서 지원하는 뭔가라고 생각했지, 저장소라곤 생각 못했다.

웹 스토리지는 클라이언트 측에 "이름: 값" 쌍의 데이터를 저장하는 매커니즘이다. HTTP 헤더로 저작이 불가능하며 서버로 전송하는 데이터가 아니다. 그래서 게시글 임시저장, 다크 테마 상태 저장 등 개인 UI 상태를 저장하기에 적합하다.

메서드

1. getItem(key)
2. setItem(key, value)
3. removeItem(key)
4. clear()
5. key(index)
6. length

모두 문자열을 반환하며 JSON.stringify(), JSON.parse()를 활용해 객체화해서 결과값을 확인할 수 있다.

localStorage

origin이 같다면 여러 창, 탭을 공유하며 심지어는 세션이 끝난 이후에도 지속된다. 브라우저를 종료하거나 심지어는 컴퓨터를 종료해도 지속된다.

무슨 말이냐면 내가 크롬과 익스플로러 중에서 크롬만 사용해서 다음 카페, 네이버 블로그, 유튜브를 열어두고 쓰고 있다고 해도 모두 동일하게 브라우저 UI에는 다크 테마를 적용해서 웹페이지를 볼 수 있다는 말이다.

하지만 익스플로러를 열면 더이상 다크 테마가 아닌 라이트 테마가 적용된 상태일 수도 있다. 크롬과 익스플로러는 origin이 다르기 때문이다. 이 UI 테마를 브라우저를 종료했다가 다시 시작할 때마다 적용해야한다면 그만큼 귀찮을 일도 없었을텐데 localStorage를 잘 활용한다면 그럴 일은 없을 것이다.

sessionStorage

한 탭에서 페이지 세션이 유지되는 동안 origin 별로 스토리지를 관리하고, 탭, 창이 닫히면 데이터가 날아간다.

세션 스토리지는 로그인한 경우를 생각해보면 된다. 내가 네이버 로그인을 한 상태에서 가입한 카페의 글은 자유롭게 볼 수 있겠지만 실수로 창을 닫았다가 다시 열고 직전에 보던 글을 열어보면 가입한 회원이 아니기 때문에 볼 수 없다는 경고 메세지가 뜰 게 분명하다. 창을 닫음으로서 로그인 세션이 만료되었기 때문이다(로그인 유지에 체크해두지 않는 이상 말이다).

한 줄 요약

즉시실행함수를 작동시키려면 가장 끝단 소괄호에 원하는 매개변수를 넣어주고, BOM의 객체들과 스토리지를 잘 활용해 브라우저에서 원하는 기능을 구현해보자!