| PHP | PHP 7.1 |
|---|
https://bgmstore.net/
bgmstore에서 음악을 재생하면 하단에 player 가 뜨면서 재생이 되는데
신기한점은
도메인주소 뒤에 /a /pagemove 등으로 주소가 넘어가도 음악이 계속재생되네요..
제가 알기론 아주 옜날에는 iframe으로 동작시켜도 주소값이 달라지면 iframe도 사라져서 음악이 중단되었던걸로
기억하는데 요새는 어떤방식으로 저렇게 구현시킨걸까요?
또 xe는 구조상 저렇게 될 수 없는지도 궁금하네요.. (애초에 코어 밑바닥 부터 다시 만들어야될 수준의 작업인지..)
소스를 확인해보니 react 기반으로 자체 제작한 듯 합니다.
예전에는 vue 기반이었던 것으로 알고 있었는데, 바뀐 건지는 모르겠네요.
xe나 rx는 구조상 불가능하긴 하지만, 일부 API를 제공하고 있으니, API를 조금 더 추가해서 Headless CMS 처럼 사용하면 가능할 것 같긴 합니다.
?
단일페이지웹앱. 싱글페이지 웹앱이라고 생각해보세요.
필요한 html, js, css는 첫페이지에서 모드 로드해두고
음악을 클릭하면 해당음원을 사이드바나 하단에서 재생시켜주면됩니다.
메뉴 이동은 해당 메뉴에 필요한 자원을 서버에 요청해서 프론트에 뿌려주면 됩니다.
주소창의 주소 url이 바뀌는 것은 react, vue 에서 router모듈 생각하시면 되는데
그게 아니라 쌩 js, 그냥 바닐라js로라도 pushState 로 값 바꿔주면 주소창의 값은 바뀝니다.
react, vue 등 SPA의 기본적인 라우팅 동작 방식입니다. pushState로 주소만 변경하고 실제로는 페이지 전환이 아닌 자바스크립트를 이용해 화면을 렌더링하는 최신 프론트엔드 개발 방식입니다. 이를 SPA, Single Page Application이라고 부르며, index.html 하나만으로 동작하고 모든 사이트의 기능을 렌더링을 포함하여 자바스크립트가 담당하는 형태입니다.
사이트가 빨라서 로딩이 안뜨는건 아닌 것 같은데 xe는 페이지 이동시에 사이트가 아무리 빨라도
0.1초라도 브라우저에서 로딩표시가 뜨는 것으로보아 ajax로 구현이 된 것일까요