로니의 개발 이야기

state를 설명하기에 앞서, 생성자에 대해서 알아보겠습니다. 생성자 (contructor)? 생성자는 클래스의 인스턴스가 생성되면 가장 먼저 실행되는 메서드입니다. '생성자'라는 이름에 걸맞게 클래스의 다른 어떤 메서드보다 먼저 실행되며, 주로 인스턴스의 초기 설정에 대한 로직을 생성자에 작성합니다. super(props)는 항상 최상단에 위치해야 한다. super는 React에서 React.Component를 가리킵니다. 중요한 것은 super(props) 선언 후에 constructor에서 this 키워드를 사용해야 한다는 것입니다. import React, { Component } from 'react'; class App extends Component{ constructor(props){ su..

다이나믹 프로그래밍 다이나믹 프로그래밍은 메모리를 적절히 사용하여 수행 시간의 효율성을 비약적으로 향상시키는 방법입니다. 이미 계산된 결과는 별도의 메모리 영역에 저장하여 필요할 때 꺼내서 사용하도록 합니다. 다이나믹 프로그래밍의 구현은 탑다운(Top-down), 보텀업(Bottom-up) 방식으로 구성됩니다. 다이나믹 프로그래밍은 동적 (실행되는 도중에를 의미한다) 계획법이라고도 부릅니다. 다이나믹 프로그래밍을 이용해서 문제를 해결할 때, 사용하는 배열 이름을 캐시(cahse), 메모(memo), 테이블(table), DP 혹은 D라고 설정합니다. 다이나믹 프로그래밍의 조건 1. 최적 부분 구조(Optimal Substructure) 큰 문제를 작은 문제로 나눌 수 있으며 작은 문제의 답을 모아서 큰 ..

이진 탐색과 순차 탐색 일단, 이진 탐색과 순차 탐색을 비교해봅시다. 종류 설명 이진 탐색 정렬되어 있는 리스트에서 탐색 범위를 절반씩 좁혀가며 데이터를 탐색하는 방법 이진 탐색은 시작점, 끝점, 중간점을 이용하여 탐색 범위를 설정 순차 탐색 리스트 안에 있는 특정한 데이터를 찾기 위해 앞에서부터 데이터를 하나씩 확인하는 방법 이진 탐색은 이처럼 탐색 범위를 좁혀 나가기 때문에 순차 탐색보다 더 적은 시간 복잡도를 가질 수 있습니다. 이진 탐색 동작 예시 아래와 같이, 이미 정렬된 10개의 데이터 중에서 값이 4인 원소를 찾는 예시를 확인해보겠습니다. [Step 1] 시작점 : 0, 중간점 : 8, 끝점 : 18 (소수점 이하는 제거)로 지정할 수 있습니다. 찾고자 하는 값보다 중간점의 위치의 값이 크다..

퀵 정렬(Quick) : 기준 데이터를 설정하고 그 기준보다 큰 데이터와 작은 데이터의 위치를 바꾸는 방법이다. 퀵 정렬의 특징 가장 많이 사용된다. 대부분의 프로그래밍 언어의 정렬 라이브러리의 근간이 된다. 가장 기본적인 퀵 정렬은 첫 번째 데이터를 기준 데이터(Pivot)로 설정한다. 퀵 정렬 동작 예시 Step 0 : 현재 피벗의 값은 '5'이다. 왼쪽에서부터 '5'보다 큰 데이터를 선택하므로 '9'가 선택되고, 오른쪽에서부터 '5'보다 작은 데이터를 선택하므로 '4'가 선택된다. 이제 이 두 데이터의 위치를 서로 변경한다. Step 1 : 현재 피벗의 값은 '5'이다. 왼쪽에서부터 '5'보다 큰 데이터를 선택하므로 '7'이 선택되고, 오른쪽에서부터 '5'보다 작은 데이터를 선택하므로 '0'이 선택..

삽입 정렬 처리되지 않은 데이터를 하나씩 골라 적절한 위치에 삽입한다. 삽입 정렬 과정 Step 0 : 정렬할 데이터를 준비한다. Step 1 : 첫 번째 데이터 '5'가 정렬되어 있다고 판단, 두 번째 데이터인 '1'이 '5'의 왼쪽이나 오른쪽으로 들어갈지 결정한다. 결과적으로 '5'의 왼쪽으로 '1'이 들어가게 된다. Step 2 : 이어서 '4' 가 어디로 들어갈지 판단한다. '4'는 '5'의 왼쪽인 두번째 위치로 들어갈 것이다. Step 3 : 이어서 '3'이 어디로 들어갈지 판단한다. '3'은 '5'의 왼쪽으로 이동, '4'의 왼쪽으로 이동을 통해서 다음과 같이 위치할 것이다. Step 4 : 마지막으로 '2'가 어디로 들어갈지 판단한다. '2'는 3번의 이동을 통해서 다음과 같이 '3'의 왼쪽..

1. 정렬 알고리즘? 데이터를 특정한 기준에 따라 순서대로 나열하는 것을 말한다. 일반적으로 문제 상황에 따라서 적절한 정렬 알고리즘이 공식처럼 사용된다. 데이터의 개수가 적을 때 데이터의 개수가 많으면서 범위가 한정되어 있을 때 이미 데이터가 정렬되어 있을 때 선택 정렬 처리되지 않은 데이터 중에서 가장 작은 데이터를 선택해 맨 앞에 있는 데이터와 바꾸는 것을 반복한다. 선택 정렬 과정 Step 0 : 정렬할 데이터를 준비한다. Step 1 : 처리되지 않은 데이터 중 가장 작은 '1' 을 선택해 가장 앞의 '5' 와 바꾼다. Step 2: 처리되지 않은 데이터 중 가장 작은 '2' 를 선택해 가장 앞의 '5' 와 바꾼다. Step 3: 처리되지 않은 데이터 중 가장 작은 '3' 을 선택해 가장 앞의 ..

1. 제목 : 제목을 정할 때는 '#'을 이용해서 강조해준다. #의 개수가 많을수록 더 작은 크기의 text를 반환한다. 위의 코드를 출력하게 되면 아래와 같이 나타난다. 2. 코드 블럭 : code block을 만들 때는 ` 를 사용하여 만들 수 있다. ``` ( ` 3개 )와 ```( ` 3개 ) 사이에 code block 시키고 싶은 text를 입력해주면 된다. 위의 코드를 출력하게 되면 아래와 같이 나타난다. 만약 문법이 있는 언어를 코드 블록에 넣고 싶다면 시작 부분 ``` 뒤에 해당하는 언어를 표시해주면 된다. 예를 들어, python 문법을 사용하고 싶다고 가정해보자. 그 경우는 아래와 같다. 위의 코드를 출력하게 되면 아래와 같이 나타난다. 3. blockquote(인용문) : 인용문을 사..

1. DOM 요소에 접근 및 선택하기 document property DOM의 최상위 객체인 document 객체는 DOM을 정의하는 속성을 가진다. get method

1. CSS3 Grid의 등장 CSS Grid는 2차원의 레이아웃을 제공한다. CSS Grid는 예전부터 핵(Hack)으로 불렸던 다양한 레이아웃 대체 방식들을 해결 하기 위해 만들어진 CSS 모듈이다. CSS Grid를 사용하게 되면서 격자 구조의 레이아웃을 쉽게 구현할 수 있게 되었다. 또한 이 레이아웃 안에 배치하는 item들을 좀 더 쉽게 이동시킬 수 있는 자유로움이 생겼다. 2. CSS3 Grid의 사용 Grid Properties Grid는 2개의 개념으로 나뉘게 된다. 첫 번째는 Container, 두 번째는 Items이다. 이 두 가지에 적용하는 속성이 구분되어 있다는 것을 잘 알고 있어야 한다. Grid Containers properties 속성 의미 display 그리드 컨테이너(Co..

1. CSS3 Flexible Box의 등장 대부분의 웹 사이트는 전체 레이아웃이 수직 구성으로 ‘위-아래’로 스크롤하여 사용하게 된다. 레이아웃을 구성할 때 가장 많이 사용되는 요소들은 보통 블록(block) 개념으로 표시되고, 이는 수직으로 쌓이기 때문에 상대적으로 쉽게 구성할 수 있다. 하지만 수평 구조를 만들 때는 어떨까? 수평 구조를 만드는 속성이 명확하지 않았기 때문에 보통은 float 혹은 inline-block 등을 통해서 구성하곤 했다. 이 문제를 해결할 수 있는 명확한 속성의 등장이 바로 Flex(Flexible Box)이다. 우리는 이 Flex를 통해서 수평 구조를 자유롭게 구성할 수 있게된다. 2. CSS3 Flexible Box의 사용 Flex는 2개의 개념으로 나뉘게 된다. 첫 ..