unity의 컴포넌트 패넌(+MonoBehaviour)

1. 클래스의 상속 한계 부모 클래스에서 자식 클래스에 공통적으로 필요한 기능을 구현 그러나 나중에 구현할 자식 클래스에 무엇이 필요한지 처음부터 정확하게 추측하기 어려움 부모 클래스의 기존 기능이 나중에 구현한 자식 클래스의 기능과 오히려 충돌 가능 또 상속에만 의존하면 기획자가 새로운 오브젝트를 만들 때 매번 프로그래머에게 부탁해야하는 문제 2. 컴포넌트 패턴 미리 만들어진 부품을 조립하여 완성된 오브젝트를 만드는 방식 미리 만들어진 부품은 컴포넌트이고 컴포넌트는 저마다의 대표적인 기능을 가짐 기본적으로 게임 오브젝트는 속이 빈 껍데기이며 개발자는 빈 게임 오브젝트에 컴포넌트를 조립하여 기능을 추가 동물을 만들고 싶다면 게임에 등장할 모든 동물을 사전에 기획할 수 없으므로 동물에 사용할 다양한 종류의..

• format_list_bulleted Unity&C#
• · 2024. 11. 21.
• textsms

리액트 기본 배우기 -합성과 상속-

1. 합성(composition) 여러개의 컴포넌트를 합쳐서 새로운 컴포넌트를 만드는 것 여기서 A라는 컴포넌트와 B라는 컴포넌트가 반복적으로 나타남 이 페이지 자체도 하나의 리액트 컴포넌트 그래서 이 페이지는 컴포넌트 A와 컴포넌트 B를 합쳐서 페이지 컴포넌트를 만든 것이기 때문에 합성 컴포넌트를 사용했다고 볼 수 있다. 리액트로 개발을 하다보면 이처럼 여러개의 컴포넌트를 합쳐서 새로운 컴포넌트를 만드는 일이 많다 합성이라고 무작정 그냥 컴포넌트들을 붙이는 것이 아니고 어떻게 조합할 것인가에 대한 고민이 필요하며 이에 따라 합성의 사용기법이 나뉜다 2. containment 하위 컴포넌트를 포함하는 형태의 합성 방법 사이드바나 다이얼로그같은 박스 형태의 컴포넌트는 자신의 하위 컴포넌트를 미리 알 수 없..

• format_list_bulleted React
• · 2023. 1. 15.
• textsms

리액트 기본 배우기 -state를 공유하는 방법-

1. shared state 말 그대로 공유된 state 자식 컴포넌트들이 가장 가까운 공통된 부모 컴포넌트의 state를 공유해서 사용한다 shared state는 어떤 컴포넌트의 state에 있는 데이터를 여러개의 하위 컴포넌트에서 공통적으로 사용하는 경우 가장 위에 있는 컴포넌트는 부모 컴포넌트이고, 아래 화살표로 연결된 2개의 컴포넌트는 자식 컴포넌트 부모 컴포넌트는 value라는 값을 가지고 있다. 왼쪽 아래에 있는 컴포넌트 A는 값에 2를 곱해서 표시하고, 오른쪽 아래의 B는 값에 3을 곱해서 표시한다. 이런 경우에 자식 컴포넌트들이 각각 값을 갖고 있을 필요는 없다. 그냥 부모 컴포넌트의 state의 값에 각각 2와 3을 곱해서 표시하면 그만이다 위 그림도 마찬가지로 3개의 컴포넌트가 있다 ..

• format_list_bulleted React
• · 2023. 1. 14.
• textsms

리액트 기본 배우기 -리스트 & 키 -

1. 리스트와 키 컴퓨터 프로그래밍에서 "같은 아이템을 순서대로 모아놓은 것이 리스트" 리스트를 위해 사용하는 자료구조가 바로 배열(array) 배열은 자바스크립트의 변수나 객체를 하나의 변수로 묶어놓은 것 const numbers = [1,2,3,4,5]; key는 열쇠라는 뜻 열쇠는 모두 다 모양이 다른 고유한 형태 이와 같은 맥락으로 컴퓨터 프로그래밍에서는 key는 각 객체나 아이템을 구분할 수 있는 고유한 값 리액트에서는 이런 배열과 키를 사용해서 반복되는 다수의 엘리먼트를 쉽게 렌더링 할 수 있다. 2. 여러 개의 컴포넌트 렌더링 아래 그림에서 A,B 컴포넌트가 반복적으로 나오고 있다. 당연하지만 같은 컴포넌트를 화면에 반복적으로 나타내야 할 경우에, 코드 상에 하나씩 직접 넣는 것은 같은 코드..

• format_list_bulleted React
• · 2023. 1. 14.
• textsms

리액트 기본 배우기 -컴포넌트에 대하여-

1. 컴포넌트 기반의 구조 리액트에서는 모든 페이지가 컴포넌트로 구성되어 있고, 하나의 컴포넌트는 또 다른 여러 개의 컴포넌트의 조합으로 구성될 수 있다. 이러한 컴포넌트들을 마치 레고 블록을 조립하듯이 끼워 맞춰서 새로운 컴포넌트를 만들 수 있다 에어비앤비 웹사이트 화면을 캡쳐하고 컴포넌트를 간단히 표시한 것이다. A, B로 표시된 부분이 리액트 컴포넌트이다. 이러한 컴포넌트를 여러 번 반복적으로 사용해서 하나의 페이지를 구성하고 있다. 이처럼 리액트는 작은 컴포넌트들이 모여서 하나의 컴포넌트를 구성하고, 이러한 컴포넌트들이 모여서 전체 페이지를 구성한다. 이렇게 하나의 컴포넌트를 반복적으로 사용함으로써 전체 코드의 양이 줄어 자연스레 개발 시간과 유지 보수 비용도 줄일 수 있다. 2. 리액트 컴포넌트..

• format_list_bulleted React
• · 2023. 1. 10.
• textsms

react 기본 익히기 -JSX에 대하여-

1. JSX A syntax extension to JavaScript "자바스크립트의 확장 문법" 자바스크립트의 문법을 확장시킨 것 JavaScript와 XML/HTML을 합친 것 JSX의 X는 extension의 X로 볼 수도 있지만 실제로는 JavaScript and XML의 앞 글자를 따서 JSX라고 부르는 것 1-1) 예시 다음은 간단한 JSX 코드 대입연산자 =의 오른쪽에 특이하게 HTML코드가 나온다 HTML의 태그를 사용해 Hello, world!라는 문자열을 값으로 갖고 있다 const element = Hello, world!; 결과적으로 자바스크립트 코드와 HTML 코드가 결합되어 있는 JSX 코드가 된다. 이 코드가 하는 역할은 태그로 둘러싸인 문자열을 element라는 변수에 저장..

• format_list_bulleted React
• · 2023. 1. 9.
• textsms