JS 16

SSR(Server Side Rendering) 과 CSR(Client Side Rendering) (SPA, MPA)

90년대 중반까지 모두 Static sites 서버에 모든 html이 있었고, 사용자가 서버에 배포되어 있는 html 문서를 보는 형식이였다. 페이지 전체가 업데이트 되는 방식. 96년 iframe 태그가 도입됨. 문서를 받아와서 사용할 수 있게 됨. 98년 fetch API의 원조 XMLHttpRequest 서버에 필요한 데이터만 받아와서 JS로 페이지에 업데이트 하는 형식. 2005년 AJAX도입으로 SPA가 트렌드로 됨. CSR 서버에서 HTML 파일을 보내고, 앱에서 필요한 js 링크만 들어있음. HTML에 들어있는게 없어서 빈화면만 보이게 됨. 링크된 주소로 JS를 받게 되는데 여기에 필요한 로직 또는 라이브러리 프레임워크가 다 포함이 되어 있음. 굉장히 사이즈가 커서 다운로드 속도가 걸림. 초..

JS 2022.02.23

Vue.js Pagination Button (처음으로, 이전, 다음, 마지막 페이지 이동처리)

페이징 작업을 해야해서 찾아봤다. 모르겠다. 고로 만든다. var pageNum = 1, pageCount= 10, pageNumCount = 5, startPageNum = 1, endPageNum = 5, pageLimit = 5; var authSettings = new Vue({ el: '#contents', data: { accessLogList : [], pageNum : 0 }, mounted(){ searchList(); }, methods: { firstPage:function(){ pageNum = 1; startPageNum = 1; endPageNum = pageNumCount; contentsVue.pageNum=pageNum; }, prevPage:function(){ if(st..

JS 2022.01.27

분리된 JS 파일에 파라미터 넘기고 받기.

어떤 이유인지 모르겠지만. 프로젝트에서 jsp에서 js파일이 분리되어 있고, 버젼이 담겨서 넘어가고 있었다. 이 방식을 통해 필요한 파라미터를 담아 넘기려고 했지만 많은 방법이 실패했고, 해당 방법은 doc 자체에 script 를 읽어서 구분하는 방법으로 사용하는 것이다. 여러 방법을 찾았지만 사용할 수 없어 생각난게 비슷하긴 하지만 이렇다면, 별도의 변수를 선언하는하고 그걸 찾아서 읽는 것과 차이점은...? 나는 모르겠다. /* */ var scripts = document.getElementsByTagName('script'); var myScript = scripts[ scripts.length - 1 ]; var queryString = myScript.src.replace(/^[^\?]+\??/..

JS 2022.01.18

css 선택자 속성 태그

우선 div는 (tag) class는 속성명 "content-item"은 속성값이라고 생각하면 된다. css 선택자. [속성명] [속성명 = “속성값”] [속성명 ~= “속성값”] : 특정 문자 포함 - 속성값에 공백 허용. [속성명 *= “속성값”] : 특정 문자 포함 - 속성값에 -, _,공백과 합성어 사용 가능. [속성명 |= “속성값”] : 접두사 포함 - 속성값에 -만 허용됨. [속성명 ^= “속성값”] : 접두사 포함 - 속성값에 -, _, 공백과 합성어 전체 허용 [속성명 $= “속성값”] : 접미사 포함 - 속성값에 전체 허용. 이렇게 봤을때 같은 기능을 가졌지만 속성값에 어떤걸 허용하는지에 따라서 나누어 져있다. 속성값에 해당 값이 포함되어있는데 범용적으로 쓰려면 *= 사용하고, 접주사에..

JS 2022.01.03