⚠ 로컬 스토리지 주의사항
localStorage에는 string만 넣을 수 있기 때문에 JSON.stringify를 통해 문자열로 바꿔야 하며, 불러올때도 JSON.parse를 통해 파싱해서 써야한다.
localStorage는 용량이 많아지거나 외부에서 조작하면 오류가 발생될 수 있기 때문에 storage.js 를 만들고, try catch로 여기서만 접근할 수 있도록 만드는 것이 좋다.
🔺 모듈과 import
import defaultExport from "module-name";
컴포넌트는 컴포넌트당 하나의 파일로 사용하기 때문에 컴포넌트는 대부분 default 규칙으로 내보내고 가져온다.
import * as allItems from "module-name";
module-name 내에서 export된 모든 것을 모두 가져온다. as 이후 이름은 중복되지만 않으면 아무렇게나 정할 수 있다.
import { loadItem } from "module-name";
module-name 내 export 된 것 중 특정 값만 가져온다.
import defaultFunction, { loadItem } from "module-name";
export default 된 것과 개별 export 된 것을 한번에 가져올 수 있다.
import "module-name";
별도의 모듈 바인딩 없이 불러 올 수 있으며 불러오는 것만으로도 효과가 있는 스크립트에서 사용된다.
모듈을 사용하는 이유:
- 각 JS 별로 사용되는 모듈을 명시적으로 import 해오기 때문에 사용되거나 사용되지 않는 스크립트를 추적할 수 있다.
- script 태그로 로딩하는 경우 순서가 중요하지만, module은 순서가 상관없다.
- script src와 다르게 전역오염이 일어나지 않는다.
- ⚠ 주의사항: import를 사용하려면 웹서버가 필요하며, from 이후 js 꼭 붙여야한다.
Promise의 내장함수
Promise.all(iterable)ex)Promise.all([promise1, promise2, promise3]).then(()⇒{
이터러블의 모든 Promise를 실행한 후 반환한다.Promise.any(iterable)여러 promise 중 하나라도 resolve되면 종료한다.Promise.allSettled(iterable)성공실패와 상관없이 모두 이행된 경우를 처리한다.Promise.resolve(value)주어진 값으로 이행하는 Promise.then객체를 반환한다.
async await 특징
- async 키워드가 붙은 함수는 실행결과가 Promise로 감싸진다.
- async await에서 reject를 해야할 때는 try catch를 사용하면 된다.
- 기본적으로 await는 async로 감싸진 함수 sccpe에서만 사용 가능했지만, top level await가 등장하여 top level에서도 사용할 수 있다. 하지만 지원하지 않는 브라우저들도 있으니 주의할 것(IOS 사파리, IE 등)
🔺 fetch
fetch api는 Promise 기반으로 동작하는 비동기 http요청을 편리하게 해주는 API이다. XMLHTTPRequest를 대체하고 있으며, 지원하지 않는 브라우저는 특정 스크립트를 사용하면 지원할 수 있다.
⚠ HTTP error가 발생해도 네트워크 에러나 요청이 완료되지 못한 경우에만 reject 되기 때문에 rewponse의 status code나 ok를 체크하여 fetch가 성공했는지 확인해야 한다.
첫번째 인자로 URL, 두번째 인자로 옵션 객체를 받고, Promise 타입의 객체를 반환한다.
fetch("https://jsonplaceholder.typicode.com/posts/", { // 패치사용예시
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
title: "Test",
body: "I am testing!",
userId: 1,
}),
}).then(res => {
if (res.ok) { // res.ok는 200~299 사이인 경우 true 반환
return res.json()
}
throw new Error(`Status: ${res.status} 요청을 처리하지 못했습니다.`)
}) 🔺 SPA와 history api
SPA(SIngle Page Application)
HTML을 서버에서 내려받을 때 보통 HTML을 서버에서 만들어 내려주고 이후 JS에서 동작을 하는데, 이때 렌더링 시점이 뒤죽박죽되는 문제가 생겨, 중복된 렌더링이 필요한 경우가 생겼다. 이러한 문제로 인해 나온 개념이 SPA이다.
SPA는 서버는 API만 처리하고, 모든 렌더링을 클라이언트에서 하는 방식으로, Single Page 라는 이름에서도 파악할 수 있듯이 웹사이트의 전체페이지를 한 페이지에 담아 동적으로 화면을 바꿔가며 표현한다.
더 깊이 들어가자면, 웹애플리케이션에선 요청에 따른 데이터만 JSON 등으로 내려주고 별도의 클라이언트 애플리케이션을 구성한다. 클라이언트의 html은 index.html 하나만 존재하며 모든 url요청을 index.html으로 돌리고, 이후 url을 보고 어떤 페이지를 그릴 지 동적으로 처리하며 동작한다.
페이지 이동시마다 모든 내용을 불러오던 이전 방식과 달리 렌더링만 다시 동적으로 하므로, 첫 로딩 이후에는 네트워크 부담이 줄어드는 효과가 있다. 추가로 histroy api를 사용할땐 url요청을 했을때 경로에 파일이 없다면 index.html로 돌리는 추가적인 설정이 필요하다.
SPA라우팅 방식에는 hashbang, hitory api 등이 있고, 자바스크립트의 프레임워크 3대장으로 뽑는 Angular, React(React는 사실 라이브러리) , Vue라는 SPA의 프레임워크가 있다.
history api의 메서드
-
history.pushState(): 주어진 데이터를 세션 기록 스택에 넣는다. 직렬화 가능한 모든 JavaScript 객체를 저장하는 것이 가능하다 -
history.replaceState(): 세션 히스토리에 새 url상태를 쌓지 않고 현재 url을 대체(결제, 제출 등에서 뒤로가기를 방지한다) -
pushState/replaceState 에서 쓰이는 값
- state: history.state에서 꺼내쓸 수 있는 값.
- title: 변경될 페이지의 title을 가리키는 값 같지만, 대부분의 브라우저에서 지원하고 있지 않기 때문에 대부분 비어있는 string을 넣는다.
- url: 세션 히스토리에 새로 넣을 url. url이 변경되어도 화면이 리로드 되지 않는다.
-
history.go(): 특정한 세션 기록으로 이동하게 해 주는 비동기 메서드. 1을 넣어 호출하면 바로 앞 페이지로, -1을 넣어 호출하면 바로 뒤 페이지로 이동한다. -
history.back(): 세션 기록의 바로 뒤 페이지로 이동하는 비동기 메서드. 브라우저의 뒤로 가기를 누르는 것과 같은 효과를 낸다. -
history.forward(): 세션 기록의 바로 앞 페이지로 이동하는 비동기 메서드. 브라우저의 앞으로 가기를 누르는 것과 같은 효과를 낸다. -
history.popstate(): 브라우저의 back버튼이나 history.go, history.back(히스토리 앞뒤이동)일때 발생하는 이벤트이다.
request가 어떻게 이루어지는지, export default와 export의 차이점, historyAPI 등 노션 클로닝을 하기 전에 배웠던 것들에 대한 것을 하나도 모르고 있었다. 결국 강의를 다시 듣고 구글링을하며 개념을 이해하는데에 많은 시간을 쓰게 됐다. 어차피 오랜 시간이 걸릴 것이라면 배울 때 확실히 배워놓는게 좋지 않았을까.
이해를 못해서 TIL을 작성하지 않은 걸까, TIL을 작성하지 않아서 이해를 못한걸까? 이해가 안간다면 좀 더 공부해서 TIL을 작성했어야 했을텐데. 스트레스를 핑계로 이해하려 하지 않았던 것 같아 반성하게 된다. 일기장 같은 글보다는 TIL에 좀 더 집중해야겠다.
참고사이트 SPA이란? by Husky
