웹 프론트엔드 깊게 이해하기(29)
-
웹 프론트엔드 성능 최적화(1) - 초기 렌더링 과정의 이해
이 글은 아래 글과 영상을 바탕으로 작성되었습니다. 주요 렌더링 경로 | Web | Google Developers 주요 렌더링 경로 | Web | Google Developers 주요 렌더링 경로를 최적화하는 것은 현재 사용자 작업과 관련된 콘텐츠 표시의 우선순위를 지정하는 것을 말합니다. developers.google.com 성능 최적화 성능 최적화 애플리케이션 성능 최적화는 앱과 웹에서 모두 중요하다. 최근 웹 애플리케이션은 Ajax 통신, 복잡한 UI 등 많은 기능을 담으면서 크고 무거워졌다. 무거워진 웹은 긴 로딩 시간 함께 사용자 경험 ui.toast.com https://www.youtube.com/watch?v=G1IWq2blu8c [2018] 프런트엔드 성능 최적화 [2018] 프런트엔..
2020.11.04 -
HTTP 의 Cache 에 대한 이해
www.youtube.com/watch?v=fczpUczepS4&list=PLuHgQVnccGMAM6VAWEKtaUnvzePCxnUVo 이 글은 위의 영상을 바탕으로 작성되었습니다 HTTP 에서의 캐시 제어는 주로 http 메세지 헤더의 Cache-Control 속성을 통해서 이루어집니다. 이 속성값을 "no-store" 로 해주면 브라우저는 이를 읽고 해당 데이터(파일)을 절대 캐시하지 않습니다. maxAge 를 통해 캐시 허용 캐시를 무한정 허용하면 웹 서버 내에 그 파일 내용의 업데이트가 이루어졌다고 하더라도 웹 브라우저는 그 컨텐츠를 다시 받지를 않을 것이기 때문에 절대 좋다고만 볼 수 없습니다. 따라서 캐시가 '언제까지 허용될지를 결정하기 위해' Cache-Contol 속성에 maxAge 값을 ..
2020.10.23 -
HTTPS 란?
www.youtube.com/watch?v=0cfUVrQW_yg&list=PLCZ-8rvakaqbplQZAoUku8uuxUgbLQm-1 이 글은 위의 영상을 바탕으로 작성되었습니다. HTTPS 에서 'S' 는 Over Secure Socket Layer 의 약자입니다. 보통의 HTTP 프로토콜은 암호화를 전혀 하지 않은 상태에서 통신을 수행합니다. 따라서 중간에 해커가 통신을 가로채면, 내용을 그대로 볼 수 있게 됩니다. 이를 통해 해커가 이를 조작해서 서버나 사용자를 속일 수 있습니다. HTTPS 를 사용하면 전송하는 데이터를 중간에 가로채더라도 암호화 되어 있기 때문에 해커가 보지 못하게 할 수 있습니다. 따라서 HTTP 가 아닌 사이트에서 로그인을 요구한다면 절대 그 서비스를 이용해서는 안됩니다. ..
2020.10.23 -
HTTP 전반에 대한 이해
www.youtube.com/watch?v=t7ASgtJoVz4&list=PLuHgQVnccGMBd-v_DjNm61EBaDpYZSV1Z 이 글은 위의 영상을 기반으로 작성되었습니다. HTTP 는 간단히 말해, 웹 브라우저와 웹 서버가 통신할 때 사용하는 규약입니다. 과거에는 html을 전송하기 위한 단순한 규약에 불과했지만, 점점 웹에서 요구되는 것들이 많아지면서 이미지, 비디오 등의 다양한 멀티미디어 파일을 전송하는데 사용되고 있습니다. 웹 서버와 웹 클라이언트가 서로 통신하기 위해서는 서로 알고 있는 형식이 똑같은 '메세지'가 필요합니다. 이 HTTP 메세지의 형식을 규정하는 것이 HTTP 입니다. 크롬 개발자 도구의 네트워크 탭에서 HTTP 통신을 통해 받아온 파일들을 볼 수 있습니다. 파일이 로드..
2020.10.23 -
ES6 import & export
[ Node.js ] Node.js 에서 쓰는 모듈화는 Common.js의 것이다. require('경로 or 패키지 이름') 로 불러오고 이를 변수나 상수로 담는다. 가져와야 할 파일 안에서는 module.exports = (somthing) 으로 require 를 실행했을 때 리턴되는 값이나 함수를 넣는다. [ ES6 ] 하지만 ES6 가 공개된 이후에는 모듈화를 자바스크립트에서 공식으로 지원한다. import 담을 변수 from '경로 or 패키지 이름' 으로 불러오고 export default (somthing) 으로 불러왔을 때 담길 리턴값을 설정할 수 있다. 다만 default 를 없애고 그냥 export를 쓰는 방법이 있다. 이 export는 여러번 지정할 수 있다. export (somet..
2020.10.22 -
화살표 함수에 없는 3가지
기존의 function () {} 과는 달리, 화살표 이름에는 함수 이름, this, arguments 가 없습니다. 함수 이름이 없다는 것은 화살표 함수는 익명 함수로만 동작한다는 뜻일 뿐입니다. 기존의 함수에서는 this라는 변수 이름으로 함수 스코프 안에서 자기 자신에 접근할 수 있는 방법이 제공되었습니다. 하지만 화살표 함수에서는 이게 없기 때문에, 스코프의 원칙 상, 상위 스코프에서 this 라는 변수명을 찾아보게 되고, 그러면 결국 상위 함수의 this나 전역 객체인 window 를 화살표 함수 안에서 불러오게 되는 것입니다. bind를 써도, apply, call을 써도 this를 주입할 수가 없습니다. 따라서 화살표 함수로는 new 키워드를 쓸 수 없습니다. 또한 기존의 function 에..
2020.10.22