본문 바로가기

프론트엔드(Front-end)43

DOM과 BOM DOM과 BOMDOM : 화면 요소에 접근할 수 있는 XHTML, HTML용 API (Document Object Model)BOM : 웹 브라우저 정보를 제공하는 API (Browser Object Model) DOM : 문서 객체 모델DOM은 HTML 문서용 API다.일종의 인터페이스로, 노드(해당 요소), 프로퍼티(노트의 속), 메서드(요소 조작)들을 구조화한 객체로 표현한다. DOM 트리DOM은 문서를 노드의 계층적 트리 구조로 나타낸다.노드 트리의 최상위 노드를 root라고 하며, 일반적으로 HTML 문서에서 이 root 노드가 된다. NodeNode : 전체 문서의 요소들에 대한 객체 형태의 기본 데이터 타입위의 DOM 트리에서 각 구성 요소를 나타내며, nodeName, nodeVa.. 2025. 3. 11.

자바스크립트(JS) 기초 7 : 스코프(scope) 스코프(scope)스코프(scope)는 변수나 매개변수에 접근할 수 있는 범위를 결정한다.함수 단위 스코프 : 선언된 함수 단위로 생성되는 스코프함수 스코프 내에서 선언된 변수/함수블록 단위 스코프 : 블록({}) 단위 내부의 스코프블록으로 묶인 if문 내부에서 let, const 키워드로 선언된 변수let, const 키워드로 선언된 변수는 블록 스코프를 따름 렉시컬 스코프렉시컬 스코프는 변수나 함수를 어디에 작성하였는가에 기초하여 결정되는 스코프 방식이다.function foo() { var a = 1; function bar(b) { console.log(a, b); // 1, 2 } bar(2);}// 전역 스코프는 하위 스코프인 foo() 범위 내에 있는 변수 a에 접근.. 2025. 3. 11.

자바스크립트 기초(6) : 프로토타입 프로토타입자바스크립트에서는 프로토타입을 기반으로 객체 지향의 상속 개념을 구현한다.모든 객체는 자신의 부모 역할을 하는 프로토타입의 참조 링크를 가짐가지고 있는 참조 링크를 통해 프로토타입으로부터 프로퍼티/메서드를 상속받음프로토타입 역시 상위 프로토타입으로부터 프로퍼티/메서드를 상속받음객체의 프로토타입은 참조 링크 형태로 내부 프로퍼티에 저장된다.때문에 동일한 프로토타입을 상속받은 객체는 모두 같은 프로퍼티/메서드를 공유한다. const obj = { name: 'Bang';};console.log(obj.toString()); // '[Object object]'위 코드에서 obj가 toString() 메서드를 호출할 수 있다.toString()과 같은 메서드는 Object.prototyp에 포함되어.. 2025. 3. 4.

자바스크립트(JS) 기초 5 : 함수 함수함수는 객체의 특별한 형태이며, 문(statement)로 구성된 몸체를 가진 하나의 실행 단위이다.function doSomething() { console.log('hello javascript');} 자바스크립트의 함수는 일급 함수(first-class function)로서 다른 함수의 매개변수/반환값이 될 수 있다.function lastSomething(callback) { callback(); console.log('last');}finishSomething(doSomething);이 때 다른 함수의 인자로 넘어가는 함수(doSomething)을 콜백 함수라고 한다.이런 형태의 대표적인 예로 DOM에 이벤트를 추가하는 addEventListener() 함수가 있다.button.addEv.. 2025. 3. 4.

자바스크립트(JS) 기초 4 : 타입 변환 타입 변환자바스크립트는 관대한 타입 변환을 수행하여, 어떤 경우에 데이터 타입 변환이 발생하는 지 아는 것이 좋다.ECMAScript에 명시된 명세를 기준으로 자바스크립트 타입 변환을 알아보자 자바스크립트의 타입 변환은 명시적 강제 변환, 암시적 강제 변환 두 가지가 있다.명시적 강제 변환은 의도적인 타입 변환을, 암시적 강제 변환은 표현식의 평가 중의 변환을 말한다. 명시적 강제 변환1. 문자열로 변환다른 타입에서 문자열 타입으로의 변환은 ToString 추상 연산 명세를 기준으로 이루어진다.타입문자열 변환 결과undefined'undefined'null'null'booleantrue ⇢ 'true', false ⇢ 'false'numberNumber.toString()의 결과 반환(3 ⇢ '3')S.. 2025. 2. 19.

Styled Components : 전역 스타일링 스타일링React는 컴포넌트 기반 자바스크립트 라이브러리로, 대부분의 경우 컴포넌트 레벨 스타일링을 한다.하지만 font 설정이나 일괄적인 스타일 적용을 위해 모든 컴포넌트에 동일한 스타일을 적용해야하는 상황도 있다.Component LevelApplication Level컴포넌트 단위로 적용한 스타일.외부와 격리시켜 해당 컴포넌트 내부에만 유효하다모든 컴포넌트에 동일한 스타일을 적용할 수 있음.ex) font-family, normalize, reset 등 전역 스타일링을 적용할 때는 createGlobalStyle() 함수를 사용하면 된다.// GlobalStyle.jsximport {createGlobalStyle } from "styled-components";const GlobalStyle .. 2025. 2. 15.

Styled Components CSS in JSCSS in JS는 CSS파일이 아닌 JS로 작성된 컴포넌트에 바로 스타일 정의를 하는 기법이다. 기존 웹 개발은 HTML/CSS/JS를 별도로 하는 경우가 많았지만, 모던 자바스크립트 라이브러리가 많이 이용되며재활용 가능한 블록 단위 컴포넌트 기반 개발이 주류가 되고 있다.따라서 HTML, CSS, JS를 한 컴포넌트에 넣는 패턴이 많이 사용된다. React에서는 JSX로 JS가 HTML를 포함하는 형태를 취하고 있으며, CSS in JS 라이브러리를 사용하여 세가지를 한 번에 작성할 수 있다. Styled Components는 CSS-in-JS 라이브러리 중에서도 가장 널리 사용되는 라이브러리이다. styled components 패키지 설치React 프로젝트에 styled-compo.. 2025. 2. 15.

Font Awesome 아이콘 라이브러리 Font Awesome웹/앱용 아이콘 라이브러리이다.폰트어썸에 가입하여 메일로 개인 CDN을 생성하여 사용할 수 있다. Font AwesomeThe internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.fontawesome.com 사용법0. CDN 발급start for free - 가입 - kit 생성 - kit embed code 복사 1. 라이브러리 코드 붙여넣기 2. 아이콘 추가추가하고 싶은 아이콘을 선택하여 해당하는 코드를 body에 복사하여 붙여넣으면 아이콘을 사용할 수 있다. 3. 추가 스타일font-size.. 2025. 2. 15.

CSS : absolute position positionCSS에서 position 속성은 요소를 화면에 어떻게 배치할 지를 결정한다.기본값 : static변경값 : relative, absolute, fixedposition으로 속성 요소를 위치시키는 방법을 지정하고,포지셔닝 관련 속성인 top, left, bottom, right 등을 사용하여 요소의 offset을 지정할 수 있다. absolute의 특징부모 요소에 속박되지 않음요소를 화면상 원하는 위치에 자유롭게 배치시킬 수 있음상위 요소가 relative라면, 해당 요소의 내부에서 동작함 parent child 1 child 2 child 3 .parent{.. 2025. 2. 15.

이전 1 2 3 4 5 다음

티스토리툴바