본문 바로가기

개발/Web

(18)
CSS Pro-Processor(전처리기) SASS, SCSS, LESS CSS는 재사용 및 체계적인 코드를 작성하기 위한 복잡한 논리과 기능이 존재하지 않습니다. CSS 전처리기는 이러한 바닐라 CSS의 기본기능을 확장하는데 사용되는 도구입니다. 변수,함수,믹스인,코드 중첩 및 상속 과 같은 복잡한 논리 구문을 사용해 몇가지 이름을 지정하여 바닐라 CSS를 강화하여 사용할 수 있습니다. 그러나 브라우저는 바닐라 CSS 코드만 이해할 수 있으며 CSS 전처리기 구문을 해석할 수 없습니다. CSS 전처리기 구문은 네이티브 CSS 로 컴파일되어야 하며, 그 다음 브라우저에서 해석할 수 있습니다. 현재 가장 많이 사용되는 전처리기에는 Sass, LESS, Stylus 등이 있다 CSS 전처리기 사용의 장점 - 재사용성 : 공통 요소 또는 반복적인 항목을 변수 또는 함수로 대체할 수..
주요 렌더링 경로(Critical Rendering Path) Critical Rendering Path(CRP, 주요 렌더링 경로) CRP은 문서(HTML, CSS, Javascript)를 화면에 표현하기 위해 거치는 일련의 과정을 말한다. 1. HTML 마크업을 처리하고 DOM 트리를 빌드합니다. 2. CSS 마크업을 처리하고 CSSOM 트리를 빌드합니다. 3. DOM 및 CSSOM을 결합하여 렌더링 트리를 형성합니다. 4. 렌더링 트리에서 레이아웃을 실행하여 각 노드의 기하학적 형태를 계산합니다. 5. 개별 노드를 화면에 페인트합니다 1. 객체 모델 생성 바이트 → 문자 → 토큰 → 노드 → 객체 모델. HTML 마크업은 DOM(Document Object Model)으로 변환되고, CSS 마크업은 CSSOM(CSS Object Model)으로 변환됩니다. D..
Javascript 동기식/비동기식 처리 Javascript는 싱글 스레드 언어로 동기적 언어이고 브라우저 엔진에서 작동할 때 비동기적으로 처리된다. 동기 : 요청 처리 완료 후 다음 요청을 처리 하는 방식 비동기 : 하나의 요청 처리가 완료되기 이전에 다음 요청을 처리하는 방식 callback 콜백 함수는 다른 함수의 인자로 사용되거나 이벤트에 의해 호출되어지는 함수를 말한다. 함수의 요청 값을 콜백 하여 다음 함수에서 사용할 수 있는 것을 콜백이라고 한다. const arr = [0,1,2,3,4,5]; (arr.forEach(function(element){ //function이 for Each의 인자로 활용되고 있음 console.log(element); })(); setTimeOut 호출될 콜백 함수와 지연 시간 두가지 인자를 설정하여..
input array에 대해 동일한 name이 여러개일 경우 각 요소에 대한 처리
텍스트 호버 이미지 애니메이션 See the Pen hover image animation by LEE SENGWOO (@sengwoolee) on CodePen.
이미지 파일 업로드 확장자, 사이즈 체크
로딩 애니메이션 See the Pen loading-animation-1 by LEE SENGWOO (@sengwoolee) on CodePen.
ES6(ECMAScript6) const/let - const/let 은 block 스코프이다. Arrows - 화살표 함수는 문법을 사용하는 축약형 함수이다. - 표현식의 결과 값을 반환하는 표현식 본문과 상태 블럭 본문을 지원. - 일반 함수의 자신을 호출하는 객체를 가리키는 dynamic this 와 달리 arrows 함수는 코드의 상위 스코프를 가리키는 lexical this 를 가짐. Classes - ES6 클래스는 프로토타입 기반 객체지향 패턴을 더 쉽게 사용할 수 있는 대체재. - 클래스 패턴 생성을 더 쉽고 단순하게 생성할 수 있음 Enhanced Object Literals - ES6에서 객체 리터럴은 선언문에서 프로토타입 설정. - 단축 표기법, 메서드 정의 클래스 호출 및 동적 속성명 지원. - 객체 리터럴 및 ..