let과 const는 ES6 (2015)에서 추가됐다. let과 const의 차이는 크지 않다. const는 상수이며 선언 시 초기화가 반드시 필요하고 let은 변수이며 초기화를 반드시 할 필요는 없으며 이 외에는 같다고 보면 된다. const a; // SyntaxError const b = 1; // ok b = 3; // TypeError let c; // ok let d = 1; // ok d = 3 // ok 이제 var과의 차이를 보면 let, const는 재선언이 불가능하고 var는 가능하다. let a = 1; let a = 2; // SyntaxError var b = 1; var b = 2; // ok let, const는 선언된 블록에 영향을 받는다. var는 선언된 함수에 영향을 받..
크롬에서는 font size에 최소 크기가 정해져 있다. 현재 최소 크기는 10px이며 font-size 속성만 변경해서는 절대로 10px 미만의 크기로는 변경할 수 없다. 즉 font-size 속성에 1~10px 사이의 값이 들어가도 10px로 변경되어 표시된다. 예전 글들을 보다 보면 -webkit-font-size-adjust 속성을 사용하여 해결했다는 내용이 있는데, 현재 크롬은 해당 속성을 제공하지 않고 있다. 여기서 텍스트의 크기를 10px 보다 작게 보이도록 우회할 수 있는 편법이 있다. transform 속성을 사용하는 것이다. transform: translate(-22%, -50%) scale(0.5); display: inline-block; 편법이라고 말한 이유는 폰트의 크기를 조정..
* 아래 내용에서 테스트하여 작성한 px 값들은 크롬에서 테스트하여 작성했다. * 크롬에는 폰트 크기에 최소 크기가 정해져있다. 참고 : font size 최소 크기 폰트 크기의 단위 별 차이를 알아보기 전에 폰트 크기의 기본 값을 알아둘 필요가 있는데, 보통 브라우저의 기본 값은 16px이며, 크롬의 기본 값 또한 16px이다. 기본 값을 확인하는 방법으로는 medium, 1rem, 1em이 있는데 아래 내용을 참고하여 구해야 한다. * 1em의 경우 부모 요소의 폰트 크기에 영향을 받는다. * 1rem의 경우에는 HTML 태그의 폰트 크기에 영향을 받는다. px 폰트의 크기를 나타낼 때 가장 기본적인 단위이며, font-size 속성에 어떤 단위를 사용하던 이렇게 저렇게 계산된 후 마지막에 브라우저가..
쿠키 쿠키는 4kb의 데이터만 가질 수 있다. 클라이언트에 저장된다. 최초 서버에 요청할 때 서버에서 쿠키를 생성하여 요청에 담아 클라이언트에 보낸다. 서버에 요청할 때마다 쿠키를 같이 보내게 되어 있다. 쿠키가 같이 보내지는 이유는 서버 측에서 요청을 보내는 사용자를 분별하기 위함이다. 데이터는 키-벨류 쌍으로 저장된다. 세션 세션은 쿠키를 기반으로 동작한다. 세션은 서버에서 관리한다. 클라이언트는 세션의 아이디만 갖고 있으며 쿠키에 저장하여 관리한다. 로컬 스토리지 HTML5에서 추가된 저장소이며 window 객체에 존재하고 있다. 클라이언트에 저장된다. 사용자가 명시적으로 지우지 않는 한 브라우저나 브라우저의 탭을 닫아도 사라지지 않는 영구성을 가지고 있다. 데이터는 키-벨류 쌍으로 저장된다. 세션..
Virtual Scroll은 직역한 것과 같이 가상의 스크롤을 뜻한다. 이러한 Virtual Scroll이 필요한 이유는 브라우저 상에 랜더링된 DOM의 개수가 많아지면 스크롤할 때 느려지는 등의 사용성 문제가 발생하는 것을 방지하기 위한 방법이다. 위와 같은 문제가 발생하게 되는 이유는 스크롤을 내릴 때마다 새로운 아이템을 불러오고 불러온 아이템을 브라우저에 모두 랜더링하게 되면서 랜더링된 DOM의 개수가 계속해서 쌓이기 때문이다. 이때 Virtual Scroll은 브라우저에서 스크롤할 때 보일 정도로만 DOM의 수를 유지하여 위에서 발생하는 느려지는 등의 문제가 발생하지 않도록 한다. DOM의 개수를 유지하는 기본적인 원리는 스크롤된 위치와 DOM이 보여야 하는 공간의 높이 그리고 DOM 각각의 높이..
CSS의 속성 중 position의 속성 중 fixed는 요소의 위치를 viewport에 상대적으로 지정한다. 때문에 페이지가 스크롤되더라도 사용자가 보는 화면에서 움직이지 않고 고정된 자리를 가지게 된다. 이러한 fixed 속성을 가지는 요소의 부모 요소에 transform 속성을 추가해서 좌표를 변경하게 되면 페이지가 스크롤될 때 움직이지 않아야 할 요소가 움직이게 된다. 이렇게 고정하려고 fixed을 사용했는데 움직이는 이유는 부모 요소에 transform이 적용되면 해당 요소의 영역에 새로운 viewprot가 설정되고 이러한 viewport에 자식 요소가 position: fixed 속성을 가질 때 영향을 받기 때문이다. 아래의 테스트 코드로 테스트해보면 position: fixed 요소가 원하는..
Sass는 CSS의 상위에 있는 메타 언어로 CSS의 전처리기(pre-processor)이다. Sass를 그대로 사용하는 것이 아니라 Sass 문법으로 작성된 코드를 CSS 코드로 변환해 준다. Sass에는 sass문법과 scss문법이 있는데 scss문법이 css의 문법과 동일한 방식으로 진행되기 때문에 권장되고 있다.(아래 예제들은 모두 scss문법을 따르고 있다.) CSS는 쉽게 작성할 수 있지만 변수나 함수가 없어 코드를 재활용할 수 없기 때문에 점점 커지고 복잡해질 수록 유지보수하기가 어려워진다. Sass는 변수나 함수를 사용하여 CSS의 반복되는 부분을 줄여 더 빠르고 효율적으로 코드를 작성하고 쉽게 유지보수 할 수 있도록 만들어준다. 기본 적인 문법에 대해서는 아래에 설명을 하겠지만 일단 예를..
FlexBox는 CSS3에서 제공하는 레이아웃을 지정할 수 있는 방식 중 하나이다. FlexBox를 사용할 때는 두 단계의 태그가 필요하다. 첫 번째는 부모 태그이고 두 번째는 자식 태그이다. 부모 태그는 자식 태그를 감싸는 태그로 자식 태그를 배치하고 정렬 시킬 수 있고 컨테이너라고 부르기도 하며 부모 태그 안에 있는 모든 태그는 자동으로 자식 태그가 되며 아이템이라고 부르기도 한다. FlexBox는 main-axis와 cross-axis라는 두개의 축을 가지고 있으며 FlexBox에 기본적으로 main-axis는 가로이고 cross-axis는 세로이다. 각 축은 시작 점과 끝 점을 가지고 있는데 main-axis의 시작 점과 끝 점은 아이템이 배치되는 방향이고 cross-axis의 시작 점과 끝점은 ..
CSS란 마크업 언어로된 문서들(ex. HTML, SVG, XML, XUL)을 꾸밀 때 사용이 된다고 한다... 여기서는 HTML을 기준으로 설명한다. (HTML에서만 사용해 봤기 때문....) CSS를 사용할 때 얻을 수 있는 장점은 브라우저에 표시할 정보와 해당 정보를 꾸미기 위한 내용이 있을 때 정보와 꾸미기 위한 내용을 분리하여 관리할 수 있기 때문에 유지보수가 쉬우며 꾸미는 내용에 대한 중복을 줄여줄 수 있고 하나의 CSS로 여러 문서를 꾸밀 수 있다는 것이다. CSS에도 단점이 있는데 잘못된 내용이 작성되어도 무시가 되기 때문에 오류를 찾는데 힘들 수 있다. CSS가 적용되는 과정을 보면 브라우저가 우선 HTML 문서를 파싱한 후 HTML 문서에 스타일 정보(CSS)가 있으면 스타일 정보를 파..
자바스크립트에 있는 기본 타입은 아래와 같다. 1. Number 2. String 3. Null 4. Undefined 5. Boolean 0. 시작 자바스크립트는 느슨한 타입 체크 언어이다. Java처럼 변수의 타입마다 다른 예약어를 사용해야 하는 것이 아닌 var라는 하나의 예약어만으로 변수를 선언하고 어떤 타입의 데이터라도 담을 수 있다. 1. Number 숫자를 적어주면 된다. var int = 1; var float = 0.1; 모든 수는 실수로 처리됨으로 계산을 한다면 실수로 나타난다. 5 / 2 -> 2.5 만약 정수로 표현하고 싶다면 추가로 코딩이 필요하다. Math.floor(5/2) -> 2 2. String 문자를 홑따옴표나 큰따옴표로 감싸주면 된다. var single = 'S'; ..