내가 궁금한 개념들 정리 (6) 썸네일형 리스트형 CSS의 BEM표기법 신입으로 들어가서 처음으로 받은 디자인 시안을 보고 일단 생퍼블리싱을 해보는게 처음 맡은 일이었는데 많은 css 표기법중 가장 대표적인 BEM 표기법을 내가 제대로 모르고 있다는 사실에 충격을 먹고 다시 공부를 하기 시작했다. BEM 표기법이란? BEM은 Block Element Modifier의 약자이며 Component 기반의 웹 개발 접근법 중 하나 이다. 이 방법론은 유저 인터페이스를 독립된 여러 개의 블록으로 분리하자는 것이 목표이며. 이것은 복잡한 UI를 가진 페이지의 인터페이스 개발 환경을 쉽고 빠르게 하며, Copy and Paste 없이 존재하는 코드의 재활용을 가능하게 한다. 1. 기본구조 위에서도 말했듯이 BEM은 Block, Element, Modifier로 나눠서 표기한다 표기하는.. Callback 함수란? Callback 함수 = 나중에 호출되는 함수 이다. 콜백함수라고 해서 특별한 선언이나 문법적인 특징을 가지는건 아니다, 그냥 자바스크립트 함수이다. 콜백 함수는 코드를 통해 명시적으로 호출하는 함수가 아니라, 개발자는 단지 함수를 동록하기만 하고, 어떤 이벤트가 발생했거나 특정 시점에 도달했을 때 시스템에서 호출하는 함수를 말한다. 즉 콜백함수는 콜백함수라는 유니크한 문법적 특징을 가지고 있는 것이 아니라, 호출방식에 의한 구분이다. 대표적인 콜백 함수의 사용 예로는 자바스크립트에서 이벤트 핸들러 처리이다. 버튼1 Html에 onclick에 button1_click함수는 브라우저의 javascript API에서 DOM 이벤트 핸들러에 전달(등록)되고, 해당 버튼에 클릭이벤트가 발생했을 이벤트 핸들러가 .. Ajax란?(Asynchronous Javascript And XML) Ajax란? Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자 자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능 브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법 즉, 쉽게 말하자면 자바스크립트를 통해서 서버에 데이터를 비동기 방식으로 요청하는 것이다. 비동기 방식이란? 비동기 방식은 웹페이지를 리로드하지 않고 데이터를 불러오는 방식이며 Ajax를 통해서 서버에 요청을 한 후 멈추어 있는 것이 아니라 그 프로그램은 계속 돌아간다는 의미를 내포하고 있다. AJAX를 사용 가능하게 만드는 것들 AJAX라는 기술은 여러가지 기술이.. 컴포넌트란?(Component) 컴포넌트란? 컴포넌트(Component)란 프로그래밍에 있어 재사용이 가능한 각각의 독립된 모듈을 뜻한다. 그림에서 확인 할 수 있듯이 컴포넌트 기반 프로그래밍을 하면 마치 레고 블록처럼 이미 만들어진 컴포넌들을 조합하여 화면을 구성할 수 있다. 웹 컴포넌트는 이러한 컴포넌트 기반 프로그래밍을 웹에서도 적용할 수 있도록 W3C에서 새로 정한 규격이다. 웹 표준을 기반으로 구축되었으며, 최신 부라우저 및 모든 JavaScript 라이브러리, 프레임워크에서도 사용할 수 있다. 따라서 웹 컴포넌트를 이용하여 코드를 작성하면 Vue.js 나 React.js 와 같은 라이브러리, 프레임워크에 의존하지 않고 상호 운용이 가능하게끔 작성할 수 있다. (유저가 사용하는 시스템에 대한 조작장치를 말한다. 통상 컨트롤(C.. 노드란?(Node) XML 문서 내의 모든 것은 노드(node)라고 불리는 계층적 단위에 정보를 담고 있다. XML DOM은 이러한 노드들을 정의하고, 그들 사이의 관계를 설명해 주는 역할을 합니다. 노드의 종류 XML 문서 내에 존재하는 모든 것은 노드. 문서 노드(document node) XML 문서 전체를 나타내는 노드임. 요소 노드(element node) 모든 XML 요소는 모두 요소 노드이며, 속성 노드를 가질 수 있는 유일한 노드임. 속성 노드(attribute node) XML 요소의 속성은 모두 속성 노드이며, 요소 노드에 관한 정보를 가지고 있는 노드임. 하지만 속성 노드는 해당 요소 노드의 자식 노드(child node)에 포함되지는 않음. 텍스트 노드(text node) XML 문서 내의 텍스트는 모.. 문서 객체 모델(DOM)이란? DOM(Document Object Model)은 XML이나 HTML 문서에 접근하기 위한 API로 W3C 표준 권고안. DOM은 문서 내의 모든 요소를 정의하고, 해당 요소에 접근하는 방법까지 정의. W3C DOM 표준은 다음과 같이 세 가지 모델로 구분됨. 1. Core DOM : 모든 문서 타입을 위한 DOM 모델 2. HTML DOM : HTML 문서를 위한 DOM 모델 3. XML DOM : XML 문서를 위한 DOM 모델 HTML DOM HTML DOM은 HTML 문서에 접근하여 조작할 수 있는 표준화된 방법을 정의. 모든 HTML 요소는 HTML DOM을 통해 접근할 수 있다. XML DOM XML DOM은 XML 문서에 접근하여, 해당 문서를 조작할 수 있는 표준화된 방법을 정의. 모든 X.. 이전 1 다음
