Web 썸네일형 리스트형 JavaScript ES6 & 객체 지향 문법 📒 왜? (사용 이유) ◼ JavaScript로 UI 같은 것은 매우 쉽게 만들 수 있지만, JavaScript 문법을 사용하다 보면 어렵고 불편한 문법들이 많다. ◼ ES6는 JavaScript 버전(2015)으로 대규모 업데이트가 진행되어, JavaScript를 조금 더 쉽고 편리하게 사용할 수 있도록 많은 문법들을 지원해 준다. 📒 Arrow function ◼ 함수를 만드는 방법에는 위 두 가지 방법이 존재한다. ◼ function 키워드 대신 ES6의 Arrow function을 사용해서 방법 2와 같이 함수를 만들 수 있다. ◼ this 값을 재정의 하지 않아도 될 때, 사용하는 것이 좋다. ✔ Arrow fucntion의 장점 ◼ 함수를 만들 때 가독성이 향상된다. ◼ 파라미터가 1개 있을 .. 더보기 [JavaScript] this 키워드 알아보기 📒 왜? ◼ JavaScript를 사용하면서 this를 사용했을 때, 어떤 경우에는 {window}가, 또 다른 경우에는 Object가 출력되었다. ◼ 이에 this에 대해 정리하고자 글을 작성한다. 📒 this 키워드 ◼ this는 상황에 따라서 뜻이 3~4 가지로 변경된다. ✔ 최상위 this & function에서 this 사용 ◼ 출력 결과는 window에 대한 정보가 표시된다. ◼ window는 전역 변수 보관소이다. ✔ strict mode에서 function에서 this 사용 ◼ strict mode (엄격한 실행)에서 일반 함수 안에 this를 사용하면 undefined가 출력된다. ✔ Object 안의 function에서 this 실행 ◼ Object 안의 함수에서 this를 실행하면, .. 더보기 JavaScript 기본 및 사용하기 📒 왜? (사용 이유) ◼ JavaScript를 쓰는 가장 큰 이유는 HTML 조작이 목적이다. ◼ 그 외로, 서버와 통신 가능, 클릭 및 타이핑 감지, 비동기 처리, 자료 다루기 등의 목적으로도 사용된다. 📒 JavaScript ◼ JavaScript는 Call Stack이 하나로, single thread로 동작한다. ◼ event loop를 이용해서 비동기 방식으로 동시성을 지원하는데, 이는 자바스크립트 엔진에서 지원하는 것이 아닌, 브라우저나 node.js에서 지원된다. ✔ JavaScript 구조 ◼ Heap & Call Stack: V8과 같은 JavaScript 엔진의 구성요소이다. ❗ Heap: JavaScript의 객체의 주소 값, 구조화되지 않은 메모리 영역이 쌓인다. ❗ Call St.. 더보기 SASS 사용법 📒 SASS ✔ 왜? (사용 이유) ◼ CSS 대용 언어로, CSS의 반복 코드 문제 등을 해결하기 위해서 탄생했다. ◼ CSS에 추가적인 문법(조건문, 반복문, 변수, 함수)을 제공한다. 즉, 프로그래밍스럽게 코드를 짤 수 있게 도와준다. ✔ SASS 사용하기 ◼ Live Sass Compiler를 설치한다. ◼ main.scss 파일을 생성해서 개발한다. ◼ 웹브라우저는 .css 파일만 읽을 수 있고, .scss를 읽을 수 없다. 따라서, scss 파일을 css 파일로 변환해서 사용해야 한다. ◼ Live Sass Compiler가 설치되어 있으면 VS Code 하단의 Watch Sass를 클릭하면 동일 폴더에 .main.css 파일이 생성된다. ◼ Html 파일에 .main.css 파일을 첨부해서 .. 더보기 Html&CSS 유용한 방법들 📒 웹 폰트 첨부 방법 ✔ 폰트 넣는 방법 body { font-family: "gulim", 'dotum'; } ◼ body 태그 안에 있는 모든 글자를 굴림체로 적용한다. 굴림체 적용 시 에러가 발생하면 돋음체가 적용된다. ◼ 클라이언트 컴퓨터에 해당 폰트가 설치되어 있어야 적용된다. ◼ font-family는 inherit 된다. -> 자동 상속 ✔ 커스텀 폰트 넣는 방법 @font-face { font-family: '폰트 이름'; src: url(폰트 경로); } ◼ @font-face: 내가 준비한 폰트 파일을 CSS에서 사용 가능하게 등록한다. ◼ 클라이언트 컴퓨터에 등록한 폰트가 없을 시, url로 지정한 곳에서 다운 받아 사용된다. ◼ 한글 폰트의 사이즈는 매우 크기 때문에, 1~2개만 .. 더보기 반응형 레이아웃 📒 CSS 단위 알아보기 ✔ vw 현재 브라우저 폭에 비례해서 설정할 수 있는 단위 .test { width: 100vw; height: 100vw; background-color: grey; } ✔ vh 현재 브라우저 높이에 비례해서 설정할 수 있는 단위 .test { width: 100vw; height: 50vh; background-color: grey; } ✔ rem html 태그(16px) 폰트 사이즈에 비례해서 설정할 수 있는 단위 .test { width: 100rem; // 1600px height: 50vh; background-color: grey; } ✔ em 내 폰트 사이즈에 비례해서 설정할 수 있는 단위 .test { font-size: 15px; width: 100rem; //.. 더보기 Html&CSS 사용하기 📒 HTML&CSS 학습 전 브라우저 렌더링이란? ✔ 브라우저는 텍스트로 이루어진 HTML, CSS, JavaScript 파일을 읽고 웹 페이지를 그려낸다. ✔ 웹 페이지를 그려내는 과정을 "파싱", "렌더링" 작업으로 이루어진다. ❕ 파싱 작업은 HTML, CSS, JavaScript 등의 문서를 읽고 이를 조작할 수 있는 자료구조로 변환하는 과정 ❕ 렌더링 작업은 파싱 작업으로 생성된 자료구조의 일종인 렌더 트리를 기반으로 브라우저 화면에 그 내용을 시각적으로 출력하는 과정 📒 파싱과 렌더링 과정 ✔ HTML, CSS 문서는 텍스트로 이루어져 있어, 브라우저가 해당 자료를 사용해 사용자가 시각적으로 인지할 수 있는 내용으로 렌더링하려면, 우선 전달된 문서를 파싱하고, 이를 사용할 수 있도록 메모리에 .. 더보기 이전 1 다음
