본문 바로가기

전체 글

 (203)
SSR/CSR (+ SEO, SPA, TTV, TTI) 웹 렌더링의 발전 순서에 따른 웹 랜더링 방식의 발전 순서 static sites 서버에 이미 배포되어있는 html 을 받아와서 그대로 보여줌 문서내에서 또다른 문서를 가져올 수 있는 iframe의 등장 페이지 내에서 부분적으로 업데이트 가능해짐 xmlHttpRequest 태그로 html문서 전체가 아니라 서버에서 json같은 형식으로 데이터만 받아올 수 있게 된다 그 데이터를 받아서 js가 동적으로 html을 생성하여 페이지를 업데이트 하는 방식 AJAX - SPA 위 방식이 정식적인 이름을 달고 등장 웹사이트에서도 사용성 올라감 Angular, React, Vue 프레임워크의 등장 CSR 등장 서버에서 index.html 을 보내주면, 필요한 js를 서버로부터 다운로드 받는다. (어플리케이션 로직 & 소스코드 등 사이즈가 큼) 추..
PWA란? 모바일 어플리케이션 구현형태 (네이티브앱, 웹앱,하이브리드앱, 크로스플랫폼앱, PWA) SPA : Single Page Application 하나의 페이지로 구성된 앱 필요한 부분만 갈아 끼운다 MPA : Multi Page Application 여러개의 페이지로 구성된 앱 페이지별로 html, css, js를 받아와서 화면을 그린다. 페이지의 이동 Nativa APP : 각각의 OS에 맞게 개발된 앱 (안드로이드-코틀린, IOS-스위프트) 내부파일시스템, 카메라 등 스마트폰 자체 기능 모두 사용가능 구글스토어, 앱스토어에 등록 아이콘으로 추가하여 사용 (단) 개발에 드는 인력/시간 (안드/애플 각각 개발해야함) (단) 각각의 스토어에서 배포 거절될 수도 있다. Mobile Web : 스마트폰 사용자를 대상으로한 웹사이트 스마트폰에서 보기 편하게 레이아웃 모바일웹 = 웹앱 OS 구분없이 개..
웹팩을 쓰는 이유 웹팩이란? 모듈 번들러 html, css, js, image등을 각각의 모듈로 보고 조합해서 병합된 하나의 결과물을 만드는 도구 모듈이란? 비슷한 성격의 기능들을 하나의 의미 있는 파일로 관리 html모듈, css모듈, js모듈.... 웹팩이 필요한 이유? - 기능별로 js 파일을 나누고 html에서 js를 불러와서 사용할 때, 의도치않게 변수들이 겹쳐서 문제가 발생할 수 있다. 파일단위로 변수를 관리할 수 있게 하여 이런 문제를 해결 - 배포시 압축 작업들을 자동화 - 서비스가 복잡해지면서 속도의 중요성이 대두, 웹팩을 사용하여, 최소통신으로 필요한 파일만 로딩 node.js 는 사실 그냥 자바스크립트를 실행시킬 수 있는 엔진, 브라우저가 갖고있는 엔진을 브라우저 밖에서도 실행 시킬 수 있도록 만든 환..

티스토리툴바