DogGae

이 글은 아래 글과 영상을 바탕으로 작성되었습니다. 주요 렌더링 경로 | Web | Google Developers 주요 렌더링 경로 | Web | Google Developers 주요 렌더링 경로를 최적화하는 것은 현재 사용자 작업과 관련된 콘텐츠 표시의 우선순위를 지정하는 것을 말합니다. developers.google.com 성능 최적화 성능 최적화 애플리케이션 성능 최적화는 앱과 웹에서 모두 중요하다. 최근 웹 애플리케이션은 Ajax 통신, 복잡한 UI 등 많은 기능을 담으면서 크고 무거워졌다. 무거워진 웹은 긴 로딩 시간 함께 사용자 경험 ui.toast.com https://www.youtube.com/watch?v=G1IWq2blu8c [2018] 프런트엔드 성능 최적화 [2018] 프런트엔..

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

[ CSS 그리드의 특징 ] CSS 그리드는 부트스트랩이나 여타 다른 CSS 와는 다르게, 마크업의 위치나 클래스 이름이 크게 중요하지 않습니다. 웹 페이지 하나를 하나의 큰 격자들의 모음으로 보고, 그 격자에 어떤 태그가 어느정도를 차지할지를 결정하는 식으로 레이아웃이 결정되지요. 그리고 이를 화면 크기에 따라 재정렬하고 크기를 조절할 수 있는 유연성을 가지고 있습니다. 이 격자들은 위의 그림에서는 8 x 8 이지만 사실 이는 사용자가 맘대로 정할 수 있습니다. 2 x 2 가 되던, 12 x 12 가 되던 상관 없습니다. 게다가 각각의 column 과 row 는 모두 동일한 너비와 높이로 이루어져 있어야 할 필요가 없으며, 이용자가 마음대로 이를 지정할 수 있습니다. [ CSS 그리드 적용 방법 ] 관..

[ flex container ] 그냥 div 태그 같은 display: block; 속성이 할당된 태그는 width 를 지정해도 요소 자체는 전부 100%의 width 값을 가지게 되지만, 해당 div 들이 display 값이 flex인 컨테이너 안에 들어있다면, 모두 지정된 width 값을 가진 블록 아이템이 되어 정렬됩니다. float 과의 차이점은, 문서 흐름에서 벋어나지 않기 때문에, 플렉스 속성이 지정된 상위 태그의 높이와 너비는 안의 자식 요소들에 의해 결정된다는 것입니다. [ flex-grow ] flex-grow 는 flex container 안의 아이템들에 지정하는 것이며, 부모 태그에서 채워지지 못한 남은 width 들을 해당 아이템이 채우게 됩니다. 1 부터 수치를 매길 수 있는데,..

www.youtube.com/watch?v=1d38YZKCM88&list=PLuHgQVnccGMDF6rHsY9qMuJMd295Yk4sa 이 글은 생활코딩님의 '관계형 데이터 모델링' 유튜브 재생목록 영상들을 바탕으로 작성되었습니다. 논리적 데이터 모델링이란 논리적 데이터 모델링은 뽑아낸 ERD를 관계형 데이터베이스 모델에 어울리게 잘 정돈하는 것이다. 이때 핵심적으로 활용하는 것이 Mapping Rule 이다. ERD를 관계형 데이터베이스로 전환할 때 사용하는 방법론이다. 이를 통해 철저하게 전환을 처리할 수 있기에 필요하다. 개체 -> 테이블 속성 -> Column 관계 -> PK, FK 단순히 테이블의 이름, Column, key들을 명시하는 것뿐만 아니라 들어가는 데이터들의 길이, 타입 등을 정의하..