전체 글

[React] 프로퍼티에 필수, 기본값 지정 / 자식 프로퍼티 사용

필수 프로퍼티 특정 컴포넌트에 반드시 전달되어야 하는 프로퍼티가 있다면, 프로퍼티를 필수 프로퍼티로 지정하여 보낼 수 있다. 필수 프로퍼티는 특수 변수 isRequired를 사용하여 전달할 수 있다. 필수 프로퍼티 사용하기 먼저 App.js에서 object형 프로퍼티와 정수형 프로퍼티 2개를 넘겨 줄 것이다. App.js import Ex from './03/Ex'; import './App.css'; function App() { return ( ); } export default App; 여기서 우리는 requiredNumValue를 기본값으로 지정할 것이다. props는 기본적으로 문자형으로 전달된다. 때문에 prop-types를 사용하여 프로퍼티 자료형을 지정해줘야 한다는 것을 잊어선 안된다. i..

[자료구조] 트리(Tree) 기본

개요 트리는 노드들의 계층 관계를 표현한 집합체이다. 모양은 침엽수와 같은 나무를 거꾸로 매달아 놓은 것처럼 생겼는데 이제부터 사진들과 함께 알아 볼 것이다. 트리는 종류가 많은데, 해당 글에서는 트리의 정말 기본적인 내용만 다룰 것이다. 규칙 1. 최상위 레벨에 있는 노드는 루트라고 하며 진입 차수가 0이다. 루트 노드는 트리마다 하나밖에 존재하지 않는다. 2. 모든 노드는 0, 또는 n개의 자식 노드를 가진다. 3. 모든 노드는 하나 이상의 부모 노드를 가진다. 4. 트리는 level을 가진다. 가장 꼭대기에 있는 루트 노드는 레벨이 0이며 트리의 루트로부터 특정 vertax까지의 경로 길이로 결정된다. 5. 루트 노드로부터 특정 노드까지의 경로는 반드시 1개만 존재한다. 6. 만약 트리가 루트 뿐이..

[React] 다양한 자료형 프로퍼티 사용하기

시작 리액트에서 프로퍼티에 int형이나 boolean형의 값을 전달할 때는 큰따옴표를 사용할 수 없다. 그냥 큰따옴표에 값을 전달하면 문자형으로 인식이 되어 버린다. 때문에 자료형을 지정하여 프로퍼티를 전달할 수 있는 방법을 소개한다. import PropTypes from 'prop-types'; 먼저 해당 라이브러리를 import 해야한다. 해당 글에서는 ChildComponent라는 임의의 컴포넌트를 만들어 사용했다. 객체 구조 분해 할당식 사용 import React, { Component } from 'react'; import PropTypes from 'prop-types'; class ChildComponent extends Component { render() { const { numVa..

[React] 프로퍼티(props) 기본

개요 프로퍼티는 상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용한다. JS의 DOM트리 방식으로도 값을 전달할 수 있다. 프로퍼티값은 수정할 수 없다. 코드를 보면서 사용 방법을 알아보도록 하겠다. 예제 코드 우선 임의의 컴포넌트 하나를 생성한다. 본 글에서는 MyComponent라는 임의의 컴포넌트를 생성했다. 아래 코드는 클래스형 컴포넌트의 예시이다. 클래스형 컴포넌트와 함수형 컴포넌트를 모두 한 번씩 생성해 보면서 프로퍼티를 전달받을 것이다. import React, { Component } from 'react'; class MyComponent extends Component { render() { return ( ); } } export default MyComponent; 이렇게 컴포넌..

[React] 리액트 시작하기

준비 먼저 컴퓨터에 Node.js를 설치해야 한다. https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 해당 페이지에서 다운로드를 받을 수 있다. 위 링크로 들어가면 위와 같은 화면이 나올텐데 이 글을 작성한 날짜 기준으로 안정적, 신뢰도 높은 버전이 18.12.1이므로 18.12.1을 설치하는 것을 권장한다. 만약 프로젝트마다 여러 버전의 Node.js를 사용해야 한다면 NVM(Node Version Manager)를 설치하면 된다. https://github.com/coreybutler/nvm-windows/releases Releases · cor..

[자료구조] 스택과 큐를 이용하여 회문 판별 프로그램 만들기(C++)

https://mk-develop.tistory.com/5 [자료구조] 스택(Stack)이란? 개요 Stack 자료구조란 요소들이 후입선출(Last-In First-Out)되는 방식의 자료구조이다. 말 그대로 가장 늦게 들어온 요소가 가장 처음으로 나간다. 구조 스택은 기본적으로 사진 1과 같은 구조를 가 mk-develop.tistory.com https://mk-develop.tistory.com/6 [자료구조] 큐(Queue)란? 개요 큐(Queue)는 선입선출(First-In Firut-Out) 방식의 선형 자료구조이다. 모양은 사람들이 줄을 서있는 모습을 생각하면 이해가 편하다. 구조 큐는 위의 모양과 같은 구조를 가진다. enqueue : 아이템을 mk-develop.tistory.com 앞서..

[자료구조] 큐(Queue)란?

개요 큐(Queue)는 선입선출(First-In Firut-Out) 방식의 선형 자료구조이다. 모양은 사람들이 줄을 서있는 모습을 생각하면 이해가 편하다. 구조 큐는 위의 모양과 같은 구조를 가진다. enqueue : 아이템을 삽입한다. 아이템 삽입은 rear큐에서 이루어진다. dequeue : 데이터를 삭제한다. front큐에서 이루어진다. operation은 2가지가 있다. front operation은 모든 삭제가 발생하는 큐이다. rear operation은 삽입이 발생한다. 큐는 선형 큐와 원형 큐의 2가지 형태가 있다. 선형 큐 선형큐는 기본적으로 위의 사진으로 표현할 수 있다. 큐가 비어 있을 땐 front와 rear 포인터가 같은 공간을 가르킨다. 선형 큐에는 큰 문제점이 있는데, 이는 이..

[자료구조] 스택(Stack)이란?

개요 Stack 자료구조란 요소들이 후입선출(Last-In First-Out)되는 방식의 자료구조이다. 말 그대로 가장 늦게 들어온 요소가 가장 처음으로 나간다. 구조 스택은 기본적으로 사진 1과 같은 구조를 가진다. 아래에서부터 요소가 쌓이며 Top 포인터는 가장 위에 있는 요소를 가르킨다. operation으로는 대표적으로 Push와 Pop이 있다. Push operation은 스택에 아이템을 추가한다. 사진 2는 사진 1에서 5를 push했을 때의 예시 사진이다. Pop operation은 스택에서 아이템을 제거한다. 사진 3은 사진 2에서 5를 pop하는 예시이다. 사진 2와 3에서, Top 포인터가 가르키는 위치는 항상 스택의 맨 위 임을 알 수 있다. 어디에서 사용하는가? 위 사진은 VS co..