그럼에도 불구하고

모듈 / import / export에 대해 알아보자 [ 모듈 ] 모듈(module)이란 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각을 말한다. 일반적으로 모듈은 기능을 기준으로 파일 단위로 분리한다. 이때 모듈이 성립하려면 모듈은 자신만의 파일 스코프(모듈 스코프)를 가질 수 있어야 한다. 자신만의 파일 스코프를 갖는 모듈의 자산(모듈에 포함되어 있는 변수, 함수, 객체 등)은 기본적으로 비공개 상태이다. 다시 말해, 자신만의 파일 스코프를 갖는 모듈의 모든 자산은 캡슐화되어 다른 모듈에서 접근할 수 없다. 즉, 모듈은 개별적 존재로서 애플리케이션과 분리되어 존재한다. 하지만 애플리케이션과 완전히 분리되어 개별적으로 존재하는 모듈은 재사용이 불가능하므로 존재의 의미가 없다. 모듈은 ..

프로미스에 대해 알아보자 [ 프로미스 (Promise) ] 프로미스는 비동기 처리를 위한 콜백 패턴은 콜백 헬이나 에러 처리가 곤란하다는 문제가 있기에, 이를 극복하기 위해 ES6에서 도입되었다. Promise 생성자 함수를 new 연산자와 함께 호출하면 프로미스(Promise 객체)를 생성한다. ES6에서 도입된 Promise는 호스트 객체가 아닌 ECMAScript 사양에 정의된 표준 빌트인 객체다. Promise 생성자 함수는 비동기 처리를 수행할 콜백 함수를 인수로 전달받는데 이 콜백 함수는 resolve와 reject 함수를 인수로 전달받는다. HTML 삽입 미리보기할 수 없는 소스 Promise 생성자 함수가 인수로 전달받은 콜백 함수 내부에서 비동기 처리를 수행한다. 이때 비동기 처리가 성공..

내가 사용하고 싶은 패턴을 클릭하여 사용하면 된다, :) https://projects.verou.me/css3patterns/ CSS3 Patterns Gallery CSS3 Patterns Gallery Browser support The patterns themselves should work on Firefox 3.6+, Chrome, Safari 5.1, Opera 11.10+ and IE10+. However, implementation limitations might cause some of them to not be displayed correctly even on those browsers (for ex projects.verou.me

스크롤 앵커링에 대해 알아보자 [ 스크롤 앵커링 / overflow-anchor ] 스크롤 앵커링이란 데스크톱 혹은 모바일 기기를 통해 웹 페이지를 볼 때, 이미지 로딩 등으로 화면이 갑자기 다른 곳으로 스크롤링되어 버리는 현상을 해소하기 위해 도입된 기능이다. 데스크톱이나 모바일 기기를 이용해서 인터넷 뉴스나 블로그 같은 웹 페이지들을 보다 보면, 갑자기 웹 페이지의 다른 곳으로 화면이 스크롤되어 버리는 현상이 나타나고는? 했다. ( 이제는 그러지 않는다. 적어도 크롬에서는!!! ) 이는 웹 페이지를 로딩하는 방식에서 용량이 작은 텍스트를 먼저 로딩하고, 고해상도의 이미지나 비디오 같은 오브젝트들을 나중에 로딩해서 발생하는 문제이다. 사용자가 웹 페이지를 스크롤 다운로드 하면서 보고 있을 때, 이미 스..

Accordion을 만들어보자 accordion.html HTML 삽입 미리보기할 수 없는 소스 accodion.css HTML 삽입 미리보기할 수 없는 소스 accordion.js HTML 삽입 미리보기할 수 없는 소스 arrow_black.svg ※ 화살표 아이콘의 경우 이 소스 코드를 그대로 사용해도 되고, 다른 걸 사용해도 무방합니다 :) HTML 삽입 미리보기할 수 없는 소스 REF: https://stickode.tistory.com/504

Web Animation API에 대해 알아보자 HTML 삽입 미리보기할 수 없는 소스 [ Web Animation API ] Web Animation API는 자바스크립트에서 애니메이션을 사용하기 위한 하나의 수단이다. DOM 요소의 애니메이션과 같은 웹 페이지 표시에 대한 동기화 및 타이밍을 변경하는 것이 가능하다. 또한 타이밍 모델과 애니메이션 모델 두 가지 모델을 결합하여 수행할 수 있다. 또한, CSS Transitions와 CSS Animations는 CSS에 모션을 미리 등록해 놓아야 하지만 Web Animation API는 자바스크립트만으로 처리할 수 있어 종료 시점을 판단하기 쉽다는 장점이 있다. 첫 번째 인수는 시작과 종료 값을 포함하는 객체를, 두 번째 인수는 애니메이션 속성을 포함하..

EJS에 대해 알아보자 [ 템플릿 엔진 ] 웹 페이지 구성 시 가장 기본적으로 쓰이는 마크업 언어인 HTML은 정적인 언어이다. 정적이기 때문에 주어진 기능만 사용할 수 있으며, 직접 기능을 추가할 수 없다. ( 자바스크립트를 사용하면 가능하다.) 템플릿 엔진은 자바스크립트를 사용하여 HTML을 렌더링 할 수 있게 해 준다. 따라서 기존 HTML과 문법이 다른 부분이 있고, 자바스크립트 문법이 들어가기도 한다. ( 놀랍다. ) 템플릿 엔진에는 대표적으로 퍼그 (Pug), EJS, Handlebars 등이 있다. https://despiteallthat.tistory.com/152 [Png] Pug에 대해 알아보자 오늘은 pug에 대해 알아보자 :) [ 템플릿 엔진 ] 웹 페이지 구성 시 가장 기본적으로 ..

Pug를 이용하여 공통된 layout을 만들어보자 shop.html HTML 삽입 미리보기할 수 없는 소스 add-product.html HTML 삽입 미리보기할 수 없는 소스 404.html HTML 삽입 미리보기할 수 없는 소스 위 3개의 html에는 공통된 부분을 main-layout.pug로 변환해 보자 HTML 삽입 미리보기할 수 없는 소스 위와 같이 공통된 부분을 하나의 파일로 저장해두면 다른 png 파일에서 이를 extends 하여 사용할 수 있다. title의 경우 #{pageTitle}과 같이 동적 렌더링을 위해 각각의 js 파일에 랜더링을 위한 pageTitle 키와 값을 설정해줘야 한다. app.js admin.js shop.js block styles 과 block content의 ..

비동기 프로그래밍에 대해 알아보자 [ 동기 처리와 비동기 처리 ] 실행 콘텍스트에 따르면 함수를 호출하면 함수 코드가 평가되어 함수 실행 콘텍스트가 생성된다. 이때 생성된 함수 실행 콘텍스트는 실행 콘텍스트 스택(콜 스택)에 푸시되고 함수 코드가 실행된다. 함수 코드의 실행이 종료되면 함수 실행 콘텍스트는 실행 콘텍스트 스택에서 팝 되어 제거된다. 함수 호출 -> 함수 코드 평가 -> 함수 실행 콘텍스트 생성 -> 실행 콘텍스트 스택(콜 스택)에 푸시 -> 함수 코드 실행 -> 함수 코드 실행 종료 -> 함수 실행 컨텍스트를 실행 콘텍스트 스택에서 팝 되어 제거 함수가 실행되려면 "함수 코드 평가 과정"에서 생성된 함수 실행 콘텍스트가 실행 콘텍스트 스택에 푸시되어야 한다. 다시 말해, 실행 컨텍스트 스..

Pug를 이용하여 동적 콘텐츠를 출력해 보자 참고: https://despiteallthat.tistory.com/152 [Node.js] pug에 대해 알아보자 오늘은 pug에 대해 알아보자 :) [ 템플릿 엔진 / Pug ] 웹 페이지 구성 시 가장 기본적으로 쓰이는 마크업 언어인 HTML은 정적인 언어이다. 정적이기 때문에 주어진 기능만 사용할 수 있으며, 직접 기 despiteallthat.tistory.com shop.png HTML 삽입 미리보기할 수 없는 소스 app.js HTML 삽입 미리보기할 수 없는 소스 admin.js HTML 삽입 미리보기할 수 없는 소스 shop.js HTML 삽입 미리보기할 수 없는 소스 const products = adminData.products; res...

오늘은 pug에 대해 알아보자 :) [ 템플릿 엔진 ] 웹 페이지 구성 시 가장 기본적으로 쓰이는 마크업 언어인 HTML은 정적인 언어이다. 정적이기 때문에 주어진 기능만 사용할 수 있으며, 직접 기능을 추가할 수 없다. ( 자바스크립트를 사용하면 가능하다.) 템플릿 엔진은 자바스크립트를 사용하여 HTML을 렌더링 할 수 있게 해 준다. 따라서 기존 HTML과 문법이 다른 부분이 있고, 자바스크립트 문법이 들어가기도 한다. ( 놀랍다. ) 템플릿 엔진에는 대표적으로 퍼그 (Pug), EJS, Handlebars 등이 있다. 즉 Pug는, HTML을 Pug 문법으로 작성하여 HTML로 바꿔주는 기능을 한다. [ Pug 설치 & 사용법 ] Pug는 Express의 패키지 view engine이다. $ npm..

외부에서 css를 적용하는, 정적으로 파일 서비스하는 방법에 대해 알아보자 내가 관리하고 있는 node.js 폴더가 이런 구성을 갖고 있다고 해보자. 일반적으로 css를 html 파일에 외부에서 연결시킬 때는 경로를 따라가서 적용시킨다. 하지만 node.js에서 이 방식을 사용하면 다음과 같이 적용이 되지 않는다. 모든 스타일링이 적용이 되지 않는데 개발자 도구에서 볼 수 있듯이 파일 시스템에 엑세스 하지 못해 main.css 파일을 찾지 못한다. 이를 구현하려면 Express.js가 제공하는 기능이 필요하다. 바로, 파일을 정적으로 서비스하는 기능이다. 정적이란 의미는 express.Router이나 다른 미들웨어 소프트에서 처리되지 않고 파일 시스템으로 직접 포워딩된다는 것을 뜻한다. 이를 위해 app..