민즈코드 개발 블로그

SMACSS의 개념SMACSS는 "Scalable and Modular Architecture for CSS"의 약어로, CSS를 보다 확장 가능하고 모듈화된 방식으로 구성하는 CSS 아키텍처 방법론이다.SMACSS는 CSS 코드를 다양한 모듈로 분리하고, 각 모듈을 일관성있게 작성하고 관리하는 방식을 제안한다. 이를 통해 CSS 코드의 유지보수성과 재사용성을 향상시키며, 프로젝트 규모가 커져도 일관된 코드 작성이 가능해진다.SMACSS는 5가지 유형의 모듈을 정의한다.Base: 기본적인 스타일을 정의하는 모듈Layout: 레이아웃을 정의하는 모듈Module: 기능을 가진 모듈State: 상태를 정의하는 모듈Theme: 디자인 테마를 정의하는 모듈각 모듈은 적절한 접두사를 사용하여 클래스를 작성하고, 선..

BEM의 개념BEM은 "Block, Element, Modifier"의 약자로, CSS를 구조화하고 모듈화하는 방법론 중 하나이다. 이 방법론은 유지 보수가 쉬운, 확장 가능하며 재사용 가능한 CSS 코드를 작성하는 것을 목표로 한다.BEM 방법론은 다음과 같이 작동한다.Block: 페이지나 모듈을 구성하는 큰 단위를 나타낸다. 이것은 레이아웃이나 UI 컴포넌트를 나타내는 이름을 가질 수 있다.Element: Block 내부에 있는 작은 단위를 나타낸다. 이것은 블록 내부의 부분적인 요소를 나타내며, 블록 이름을 접두사로 사용하여 작성된다.Modifier: 블록이나 요소의 상태나 모양을 나타낸다. 이것은 블록이나 요소 이름 뒤에 하이픈을 사용하여 작성된다.예를 들어, 블록으로 'header'를 사용하면 ..

OOCSS의 개념OOCSS(Object Oriented CSS)는 CSS 작성 방법 중 하나로, CSS를 객체지향 프로그래밍(OOP) 원리에 따라 구조화하는 방법이다. 이를 통해 재사용성과 유지보수성이 높은 CSS 코드를 작성할 수 있다.OOCSS에서는 CSS 스타일을 클래스로 정의하고, 이를 HTML 요소에 적용한다. 이 때 각 클래스는 하나의 기능을 수행하는 모듈 형태로 설계된다. 이렇게 클래스를 재사용 가능한 모듈 단위로 분리하면, 불필요한 스타일 중복을 피하고, 코드의 유지보수성을 높일 수 있다.또한, OOCSS에서는 스타일과 레이아웃을 분리하는 것이 중요하다. 스타일은 객체의 시각적인 표현을 담당하고, 레이아웃은 객체의 배치와 구조를 담당한다. 이를 통해, 스타일과 레이아웃을 개별적으로 수정할 ..

at() 메서드는 ES2021(ES12라고도 함)에 도입된 비교적 새로운 JavaScript 추가 기능이다. String 및 Array 클래스의 인스턴스에서 사용할 수 있는 메서드이며 간결하고 읽기 쉬운 방식으로 지정된 인덱스에서 요소를 검색할 수 있다.at() 메서드를 사용하기 위한 기본 구문은 아래와 같다.// For a string:string.at(index);// For an array:array.at(index);두 경우 모두 index는 검색하려는 요소의 인덱스이다.at() 메서드의 주요 이점 중 하나는 대괄호 표기법([])을 사용하는 것보다 문자열이나 배열에서 요소를 검색하는 더 간결하고 읽기 쉬운 방법을 제공한다는 것이다. 예를 들어 인덱싱을 사용하여 배열의 세 번째 요소를 검색하는 방법..

browser-sync이름에서 알 수 있듯이 브라우저를 동기화해주는 프로그램으로 소스파일의 수정이 감지되면 자동으로 브라우저를 새로고침하여 수정된 화면을 볼 수 있다.browser-sync - npm설치npm install --save-dev browser-sync사용 예시const browserSync = require('browser-sync').create();// 실행browserSync.init({ port: 3000, browser: "google chrome", startPath: "index.html", server: { baseDir: "./dist", }});// 새로고침browserSync.reload();gulp-ejs공통영역 include ..

src()와 dest()gulp에서는 src()와 dest() 메서드를 사용하여 파일을 읽고 쓴다.src()는 노드 스트림을 생성하고, 인자로 받은 파일 정보(Glob pattern)의 모든 파일을 찾아 메모리로 읽어 스트림으로 보낸다.src()에 의해 생성된 스트림은 signal async completion 을 위해 Task에서 return되어야 한다.const { src, dest } = require("gulp");exports.default = function () { return src("src/*.js").pipe(dest("output/"));};파이프라인(.pipe())으로 연결스트림의 주요 API는 변환(Transform) 또는 쓰기 가능한(Writable) 스트림을 연결하기 위한..

비동기 처리Node.js는 다양한 방식으로 비동기성 처리를 한다. 가장 일반적인 패턴은 error-first callbacks{:target="_blank"}이지만, streams{:target="_blank"}, promises{:target="_blank"}, event emitters{:target="_blank"}, child processes{:target="_blank"}, observables{:target="_blank"} 등도 있다. Node.js를 기반으로 하는 gulp에서도 이러한 비동기성 처리를 사용한다.Task 완료 시그널gulp에서는 series() 또는 parallel() 메서드를 사용하여 Tasks를 순차 또는 병렬로 실행이 가능하다. 이를 위하여 각 Task의 실행이 완료되..

Task란?Task는 비동기 JavaScript function이다. gulp 3.x에서는 task로 등록을 해야만 동작을 했다면, gulp 4.x에서는 function으로 작성을 하면 된다. 단, 아래의 6가지 중 하나의 형태를 가져야 한다.stream을 리턴한다.promise를 리턴한다.event emitter를 리턴한다.child process를 리턴한다.observable를 리턴한다.error-first callback을 사용한다.gulp에서 일반적으로는 stream을 리턴하거나 리턴이 없을 경우 error-first callback을 사용한다.익스포팅(Exporting)Task는 public 또는 private로 간주될 수 있다.Public tasks : gulpfile에서 exports 하여 ..