728x90 반응형 SMALL 기술 개발74 프로토타입과 객체지향 프로그래밍 프로토타입이란? JavaScript는 프로토타입 기반 객체지향 프로그래밍 언어입니다. 클래스 기반 객체지향 프로그래밍 언어는 객체 생성 이전에 클래스를 정의하고 이를 통해 객체(인스턴스)를 생성하지만, 프로토타입 기반 객체지향 프로그래밍 언어는 클래스 없이도 객체를 생성할 수 있습니다. 자바스크립트의 모든 객체는 자신의 부모 역할을 담당하는 객체와 연결되어 있기 때문에, 부모 객체의 프로퍼티 또는 메소드를 상속받아 사용할 수 있게 합니다. 이 때, 부모 객체를 Prototype(프로토타입)이라고 하고, Prototype은 생성자 함수에 의해 생성된 각각의 객체에 공유 프로퍼티를 제공하기 위해 사용합니다. 이는 객체를 생성할 때, 그 객체는 자신의 부모 역할을 하는 프로토타입 객체를 가리키는 [[proto.. 2024. 3. 20. 동기(Synchronous)와 비동기(Asynchronous) 동기(Synchronous)와 비동기(Asynchronous)는 프로그래밍에서 매우 중요한 개념이다. 동기(Synchronous) 동기는 호출하는 함수가 반환하기 전에 작업이 완료될 때까지 기다리는 것을 의미한다. 즉, 호출한 함수는 결과가 반환될 때까지 블로킹(blocking)되며, 결과가 반환된 후에야 다음 코드를 실행할 수 있다. 이러한 특성 때문에, 동기 방식은 순차적인 처리를 보장하고, 코드가 간단하고 직관적이다. 하지만, 작업이 끝날 때까지 대기해야 하기 때문에, 시간이 오래 걸리는 작업을 수행할 때는 성능 이슈가 발생할 수 있다. function func1(){ console.log('func1'); func2(); } function func2(){ console.log('func2'); .. 2023. 4. 16. HTML의 inline 요소와 block 요소 HTML의 인라인(inline) 요소와 블록(block) 요소는 웹페이지의 레이아웃과 구조를 결정하는 데 중요한 역할을 한다. 인라인(inline) 요소 인라인 요소는 텍스트나 이미지 등과 같은 작은 내용을 표시하는 데 사용된다. 인라인 요소는 컨텐츠가 차지하는 공간 만큼만 공간을 차지한다. 즉, 다른 요소와 함께 한 줄에 표시될 수 있다. ex) , , , , 등 이것은 인라인 요소입니다. 이것은 인라인 요소입니다. 이것은 인라인 요소입니다. See the Pen inline 요소 by Jo Sujeong (@suzzeong) on CodePen. 블록(block) 요소 블록 요소는 대형 콘텐츠, 예를 들어 단락, 제목, 목록 등과 같은 구조적 요소를 나타내는 데 사용된다. 블록 요소는 자신의 줄을 차.. 2023. 4. 7. ul 요소와 ol 요소의 자식 요소는 li 요소 , HTML에서 요소와 요소 모두 목록을 나타내기 위한 요소다. 하지만, 두 요소의 차이점은 목록의 형태다. 요소 요소는 비순서 목록(unordered list)을 나타내며, 목록 항목이 순서 없이 나열된다. 아이템 앞에 추가되는 마커(marker)는 검정색의 작은 원(bullet)이나 정사각형 모양으로 표현된다. 요소 요소는 순서 목록(ordered list)을 나타내며, 목록 항목이 순서대로 나열된다. 이 때 목록 항목은 숫자, 알파벳, 로마 숫자 등과 같은 순서 지시자로 표시된다. 목록이 어떻게 표시되어야 하는지에 따라 과 중에서 선택하여 사용하면 된다. 요소와 요소의 자식 요소는 목록 항목을 나타내는 요소이어야 한다. 요소는 왜 , 요소의 자식 요소여야만 하나? HTML 명세에서 정의된 규칙으로,.. 2023. 4. 7. Semantic HTML의 필요성 시멘틱 태그(Semantic Tag)는 사람이 이해하기 쉽도록 태그의 이름만 보고도 역할이나 위치를 알 수 있도록(=의미가 통하는, semantic) 만든 태그들이다. Semantic HTML Semantic HTML은 웹 페이지의 구조와 의미를 더 명확하게 표현하는 데 도움이 되는 HTML 마크업 방식이다. 이를 사용하면 웹 페이지가 보다 이해하기 쉽고, 접근성이 향상되며, 검색 엔진 최적화(SEO)에도 도움이 된다. ex) 웹 페이지의 제목 This is a top level heading // Non Semantic This is a top level heading // Semantic 제목은 웹페이지에서 가장 중요한 역할을 한다. Semantic HTML을 사용하지 않고, 제목을 단순히 스타일링하.. 2023. 4. 6. React의 state와 props React는 상태(state)와 속성(props)이라는 두 가지 개념을 중심으로 구성된 JavaScript 라이브러리다. props 와 state 는 React 에서 데이터를 다룰 때 사용하는 개념이다. State(상태) React 컴포넌트에서 state는 컴포넌트 내부에서 관리되는 값으로서 변경 가능하다. 이 값은 컴포넌트가 렌더링되는 동안 변할 수 있으며, 변경될 때마다 컴포넌트가 다시 렌더링된다. 즉, React에서 state는 컴포넌트 내에서 관리되는 상태 데이터이며, 컴포넌트 내부에서 변경할 수 있고, 컴포넌트의 렌더링 결과를 결정한다. State 사용 방법 1. State 초기화하기 import React, { Component } from 'react'; class Counter extend.. 2023. 4. 5. 이전 1 2 3 4 ··· 13 다음 728x90 반응형 LIST
