쓰려고 하면 기억 안 나는 Window Web Api

안녕하세여, 오랜만에 포스팅을 진행합니다. 어깨 수술이랑 새프로젝트 때문에 생각한 포스팅이 밀려있습니다. 오늘은 자주 사용하지는 않으나 까먹어서 매번 검색하는 window api 입니다.

---

1. window.innerWidth, window.innerHeight

현재 열려있는 윈도우(창)의 크기를 구하는 Web Api 입니다.

반응형웹을 만들때, 햄버거(메뉴창)를 만들때 유용합니다. 미디어 쿼리를 사용해서, 사용하는 방법도있으나, 저는 JS 가 익숙해서 컴포넌트를 올렸다 내렸다 하는 방식이 편하더라구요. 각자 다른방법이 있을테니 상황에 맞게 사용하면 될듯합니다.

아래 예제코드를 간단히 기입했습니다. innerWidth를 innerHeight으로 수정하면 반대 작업도 가능하겠죠?

See the Pen Untitled by icecokel (@icecokel) on CodePen.

 

 

 

---

2. window.scrollTo(0, 0)

scrollTo는 스크롤을 이동하는 WebApi입니다. scrollTo에 매개변수를 (0, 0)으로 준 이유는 가장 많이 쓰기 때문이죠. 과제 상황에 따라 페이지 라우팅을 사용하지 않고, 컴포넌트만 교체되는경우 SPA 특성상, 스크롤이 유지되어 화면이 하단을 보여주는 경우가 있습니다. 이런 경우에 교체되는 컴포넌트에서 최초 한번 window.scrollTo(0, 0)을 해주면 상단으로 스크롤이 이동되어 보다 편한 화면이동이 됩니다.

---

3. window.URL.createObjectURL

마지막으로 파일 핸들링 할때 사용하면 꽤나 쉽게 핸들링을 할수 있는 createObjectURL입니다.
createObjectURL는 함수 입니다. 매개변수의 타입은 File, Blob 입니다.

createObjectURL(File)을 사용하면, 말그대로 file의 url를 생성할수 있는데요. 

이를테면, 방금 사용자가 업로드한 파일을 다시 사용자가 다시 내려받아서 본인이 업로드한 파일을 확인한다던지, 이미지파일을 받아서 미리보기를 작성한다던지 할 때 상당히 유용합니다.

url이 생성되었으니, <img src=""> 에 바로 넣어서 이미지를 사용해도 편하고, 아니면 element를 생성해서, 파일 다운로드로 진행되도록 해도 좋습니다.

react typescript 조합에서 Array<File> 을 컴포넌트 상태로 관리하다가, 하나만 빼서 확인, 또는 다운로드하는 기능을 만들때도 편리합니다. createObjectURL는 생명주기가 존재해서 보안 이슈에서 도 문제가 없죠.

여기서 주의할 점이 나옵니다. 생명주기인데요. 일단 파일객체를 생성한 document가 사라지면 같이 사라집니다. 생성한 url를 db에 저장해도 다시 사용할수 없다는 말입니다.

또한 사용을 해다했다면, revokeObjectURL() 사용해서 Url 객체를 해제해주세요, 남용이 될 경우 클라이언트쪽에서 부하를 만들 수 있습니다.

 

---

또 망각하기 전에 급하게 포스팅을 하느라, 오늘 포스팅에 대해서는 내용이 만족스럽지 않습니다. 예제 코드나 설명을 추가하여 제가 아닌 보시는 분들도 이해하기 쉽게 수정하겠습니다.