공부

[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..

[자료구조] 연결리스트(Linked List)란?

개요 Linked List란 모든 노드들이 자신의 값과 나의 다음 값을 pointing하는 자료구조이다. 왜 사용하는가? 해당 자료구조를 왜 사용하는지 간단한 예시를 들겠다. 예를 들어, 이러한 모양의 배열이 있는데 현재 나는 4와 6 사이에 5라는 값을 넣고 싶다. 이럴땐 어떻게 해야할까? 사진 2와 같이 6과 8을 오른쪽으로 밀어서 공간을 확보한다. 공간을 확보한 후 5를 insert 한다. 얼핏 보면 이게 당연한 것처럼 느껴질 수 있다. 하지만 해당 방법은 굉장히 비효율적이다. 이러한 번거로움을 해결하기 위한 자료구조가 Linked List 즉 연결리스트이다. Linked List의 구조 Linked List는 하나의 메모리 공간(Node)에 데이터와 포인터를 저장한다. 그렇다면 이 자료구조를 사용..

[자료구조] C언어 Pointer에 대하여

개요 알고리즘은 선행 지식으로 자료구조에 대한 이해를 필요로 한다. 자료구조의 경우엔 포인터에 대한 사전 지식이 있다면 이해하기 좋다. 본 글에서는 C언어의 포인터 변수에 대한 아주 기초적인 내용을 다룬다. Pointer란? C언어에서 포인터는 '메모리의 주소를 저장하는 변수' 이다. '&' operator는 어떤 변수의 주소를 받아올 수 있다. '*' operator는 참조한 값을 다시 역으로 따라간다. 포인터는 기본적으로 4byte를 할당받는다. 이렇게 설명하면 어려울 수 있으니 예제코드와 함께 설명하겠다. #include int main() { char a = 'A'; char* pointer = &a; printf("%c %p\n", a, pointer); printf("%p %p\n", &a, ..