www.youtube.com/watch?v=fczpUczepS4&list=PLuHgQVnccGMAM6VAWEKtaUnvzePCxnUVo 이 글은 위의 영상을 바탕으로 작성되었습니다 HTTP 에서의 캐시 제어는 주로 http 메세지 헤더의 Cache-Control 속성을 통해서 이루어집니다. 이 속성값을 "no-store" 로 해주면 브라우저는 이를 읽고 해당 데이터(파일)을 절대 캐시하지 않습니다. maxAge 를 통해 캐시 허용 캐시를 무한정 허용하면 웹 서버 내에 그 파일 내용의 업데이트가 이루어졌다고 하더라도 웹 브라우저는 그 컨텐츠를 다시 받지를 않을 것이기 때문에 절대 좋다고만 볼 수 없습니다. 따라서 캐시가 '언제까지 허용될지를 결정하기 위해' Cache-Contol 속성에 maxAge 값을 ..

www.youtube.com/watch?v=0cfUVrQW_yg&list=PLCZ-8rvakaqbplQZAoUku8uuxUgbLQm-1 이 글은 위의 영상을 바탕으로 작성되었습니다. HTTPS 에서 'S' 는 Over Secure Socket Layer 의 약자입니다. 보통의 HTTP 프로토콜은 암호화를 전혀 하지 않은 상태에서 통신을 수행합니다. 따라서 중간에 해커가 통신을 가로채면, 내용을 그대로 볼 수 있게 됩니다. 이를 통해 해커가 이를 조작해서 서버나 사용자를 속일 수 있습니다. HTTPS 를 사용하면 전송하는 데이터를 중간에 가로채더라도 암호화 되어 있기 때문에 해커가 보지 못하게 할 수 있습니다. 따라서 HTTP 가 아닌 사이트에서 로그인을 요구한다면 절대 그 서비스를 이용해서는 안됩니다. ..

www.youtube.com/watch?v=t7ASgtJoVz4&list=PLuHgQVnccGMBd-v_DjNm61EBaDpYZSV1Z 이 글은 위의 영상을 기반으로 작성되었습니다. HTTP 는 간단히 말해, 웹 브라우저와 웹 서버가 통신할 때 사용하는 규약입니다. 과거에는 html을 전송하기 위한 단순한 규약에 불과했지만, 점점 웹에서 요구되는 것들이 많아지면서 이미지, 비디오 등의 다양한 멀티미디어 파일을 전송하는데 사용되고 있습니다. 웹 서버와 웹 클라이언트가 서로 통신하기 위해서는 서로 알고 있는 형식이 똑같은 '메세지'가 필요합니다. 이 HTTP 메세지의 형식을 규정하는 것이 HTTP 입니다. 크롬 개발자 도구의 네트워크 탭에서 HTTP 통신을 통해 받아온 파일들을 볼 수 있습니다. 파일이 로드..

[ 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..

[ transform ] transform 속성 : 해당 요소의 위치나 크기를 바꾸는 속성으로, 값으로 translate(200px, 400px) 혹은 translateX(200px), translateY(400px)를 줄 수 있습니다. 혹은 해당 요소의 크기를 바꾸는 속성으로, 마찬가지로 scale(0.5, 2), scaleX(0.5), scaleY(2)를 줄 수 있습니다. 혹은 요소를 회전시키기 위해 3차원 에서 해당 요소를 가로축, 세로축에서 회전킨다 rotate(60deg, 90deg), rotateX(60deg), rotateY(90deg), 그리고 요소를 시계방향으로 회전시키는 rotateZ(180deg)를 쓸 수 있다(마이너스값을 주면 반시계 방향으로 회전). transform 이 일어나는 ..

[ 박스 모델 ] 블록 레벨 엘리먼트는 100% width를 차지 한다(설정한 width 넓이와 상관없이) [ floating elements ] 플롯은 이미지 바로 옆에 텍스트 단락을 둘수 있도록 만드는 기능이다. 보통의 문서 흐름을 무시하고, 원래의 블록을 바로 아래의 블록 안의 왼쪽, 오른쪽에 끼워 넣는다. 끼움당한 블록은 자동으로 끼워진 만큼 너비가 줄어든다. 그리고 아래의 박스들은 자동으로 끼워진 블록이 없어진 만큼 위로 이동한다. 이때 플록 블록에 width 속성이 정해져 있지 않으면 끼워지지 않는다. 플롯이 위에서 여러개가 있으면, 맨 아래에 플롯이 아닌 블록에 한꺼번에 겹쳐진다. 맨 아래에 있는 블록까지 플롯을 부과하면, 하나의 블록 안에 해당 플롯 블록들이 순서대로 배열된다. [ clea..