📚TIL
day16
정적인 웹페이지
- 여러개의 HTML 파일들로 페이지가 구성되며 모든 게시물마다 html을 필요로 함
- a테그를 통해 html을 연결하며 url이 파일 경로와 이름이 됨
- url상 파일명이 없는 경우 index.html을 우선적으로 찾음
- 페이지를 이동할 시 매번 브라우저가 브라우저 내에 있는 파일 전체를 다시 내려받음
웹 애플리케이션
- 정적인 파일을 웹 서버로 제공하면서 PHP, Java, Node.js등을 이용해 동적으로도 HTML을 생성해서 제공하는 방식
- 단순한 웹 서버 기능 뿐만 아니라 특정 url로 서버에 요청시 정적인 html파일이 아닌 서버에서 html파일을 생성하여 내려주는 방식
- 서버 렌터링 시점에서 구현했던 것을 클라이언트에서 동적으로 렌더링해야하는 경우 중복해서 구현이 필요하기도 함
- UI 생성을 템플릿화하여 서버, 클라이언트에서 같이 쓸 수 있는 방안이 나왔지만 환경에 따라 동작이 불안정
Single Page Application (SPA)
- 서버는 API만 처리하고 모든 렌더링을 클라이언트에서 하는 방식
- 웹 어플리케이션에선 요청에 따른 데이터만 JSON 등으로 내려주며 별도의 클라이언트 어플리케이션을 구성
- 클라이언트에서 html 파일은 index.html하나만 존재하며 클라이언트로 오는 모든 url요청을 index.html로 돌림
- 이후 클라이언트에서 url을 확인 한 후 어떤 페이지를 그릴지 동적으로 처리
- 이전 방식에선 이동시 페이지의 모든 내용을 새로 불러왔으나 SPA 내에선 동적으로 렌더링만 재실행
- 따라서 처음 로딩 이후엔 네트워크 부담이 적음
hashbang
- hash를 통해 어떤 페이지를 렌더링할지 정하는 로직을 구현해 사용하는 방식
- #는 같은 페이지 내의 요소를 가리킬 때 많이 사용
hashbang API
- 브라우저에서 페이지를 로딩하면, 세션 히스토리(Session History)를 갖음
- 세션 히스토리는 페이지를 이동할 때마다 쌓이며 이를 통해 뒤로가기, 앞으로가기 사용이 가능
- pushState, replaceState 두 개의 함수를 통해 화면 이동 없이 현재 url 업데이트 가능
- pushState : 세션 히스토리에 새 url 상태를 쌓음
- replaceState : 세션 히스토리에 새 url 상태를 쌓지 않고 현재 url을 대체하며 이전 페이지로 돌아가는 것을 방지
- popState : hash.go(), hash.back()을 할 때 발생
history.pushState
- history.pushState(state, title, url)
- state : history.state에서 꺼내쓸 수 있는 값으로 이동할 url에 같이 실을 값을 포함해 JSON으로 넣음
- title : 변경될 페이지의 title을 가리키는 값이지만 대부분의 브라우저가 지원하지 않아 빈 String을 넣음
- url : 세션 히스토리에 새로 넣을 url로 이 url이 변경된다고 해서 화면이 새로고침되지는 않음
- hash.go(), hash.back() : 쌓여있는 히스토리를 이동할 수 있음
console.log(history.state) //null
console.log(history) //History 출력
history.pushState(
{
productId : 100 //state
},
'', //title
'/product/100' //url
)
//url : localhost:5000 -> localhost:5000/product/100
console.log(history) //History의 state에 prodouctId : 100 쌓임
console.log(history.state) //{productId : 100} 출력
history.pushState(null, '', '/list')
//url : localhost:5000/product/100 -> localhost:5000/list
history.go(1)
//url : localhost:5000/product/100 -> localhost:5000/list
history.replaceState(null, '', '/replace')
//url :localhost:5000/list -> localhost:5000/replace
//뒤로가기 클릭시 localhost:5000/product/100로 돌아감hashbang 실습
🌊하루를 마치며
오늘 서버와 클라이언트 사이에서 각각 수행하는 역할의 변화와 함께 더 효율적인 웹 페이지를 띄우는 위한 방식의 변화들을 공부했다. 언젠가 개발자 도구를 통해 html파일을 들여다봤을 때 html내용이 거의 없던 것에 의아했던 기억이 있었다. 오늘 강의를 통해 그 페이지는 서버에 의존한 방식으로 짜여진 것이었을 거라는 생각이 들었다. hash 강의에서도 id와 hash를 통한 스크롤 제어 부분은 알고 있었지만 hashbang을 통해 hash의 활용 범위가 더 넓다는 사실을 알게 됐다. history API를 배우면서 신기했던 점은 뒤로가기, 앞으로가기에 사용된다는 점이었다. 내가 사용하지만 어떤식으로 구현되는지 몰랐던 부분들을 하나씩 알아가는 것이 즐겁게 느껴진다.
오늘 스터디를 준비하느라 강의를 들을 시간이 부족했당.. 그래도 많이 따라 잡았고 이번주 주말을 잘 활용해서 뒤처진 진도를 빨리 따라잡아야겠다.
Front-end Develop🥰