전체 글
-
[CSS] CSS pre-processor(전처리기) - Sass(SCSS)Web/CSS 2021. 2. 25. 17:04
1️⃣ CSS의 한계? CSS를 통해서 홈페이지를 꾸미던 중 한 가지 문제가 발생하였는데, 바로 CSS의 양이 한도 끝도 없이 많아지는 것이었다. 이 문제를 해결하기 위해서 열심히 찾아보던 중 CSS 전처리기(Pre-Processor)에 대해서 접하게 되었다. 💡 CSS 전처리기(Pre-Processor)란? CSS 문서 작성에 도움을 주는 도구로, 작업을 하며 발생하는 다양한 문제들을 programmatically 한 방식으로 해결해주는 도구이다. 2️⃣ CSS 전처리기 종류? CSS 전처리기에는 다양한 모듈이 존재하는데 가장 많이 사용되는 전처리기에는 Sass, Less, Stylus 3가지가 있다. 3️⃣ CSS 전처리기 사용을 하면 뭐가 좋을까? Sass를 사용하기에 앞서, 이 전처리기를 사용하게..
-
[React] state (상태)Frontend/React 2021. 2. 12. 02:21
state를 설명하기에 앞서, 생성자에 대해서 알아보겠습니다. 생성자 (contructor)? 생성자는 클래스의 인스턴스가 생성되면 가장 먼저 실행되는 메서드입니다. '생성자'라는 이름에 걸맞게 클래스의 다른 어떤 메서드보다 먼저 실행되며, 주로 인스턴스의 초기 설정에 대한 로직을 생성자에 작성합니다. super(props)는 항상 최상단에 위치해야 한다. super는 React에서 React.Component를 가리킵니다. 중요한 것은 super(props) 선언 후에 constructor에서 this 키워드를 사용해야 한다는 것입니다. import React, { Component } from 'react'; class App extends Component{ constructor(props){ su..
-
[Algorithm] 다이나믹 프로그래밍 (Dynamic Programming)Algorithm 2021. 2. 7. 14:31
다이나믹 프로그래밍 다이나믹 프로그래밍은 메모리를 적절히 사용하여 수행 시간의 효율성을 비약적으로 향상시키는 방법입니다. 이미 계산된 결과는 별도의 메모리 영역에 저장하여 필요할 때 꺼내서 사용하도록 합니다. 다이나믹 프로그래밍의 구현은 탑다운(Top-down), 보텀업(Bottom-up) 방식으로 구성됩니다. 다이나믹 프로그래밍은 동적 (실행되는 도중에를 의미한다) 계획법이라고도 부릅니다. 다이나믹 프로그래밍을 이용해서 문제를 해결할 때, 사용하는 배열 이름을 캐시(cahse), 메모(memo), 테이블(table), DP 혹은 D라고 설정합니다. 다이나믹 프로그래밍의 조건 1. 최적 부분 구조(Optimal Substructure) 큰 문제를 작은 문제로 나눌 수 있으며 작은 문제의 답을 모아서 큰 ..
-
[Algorithm] 이진 탐색 (Binary Search)Algorithm 2021. 2. 7. 13:48
이진 탐색과 순차 탐색 일단, 이진 탐색과 순차 탐색을 비교해봅시다. 종류 설명 이진 탐색 정렬되어 있는 리스트에서 탐색 범위를 절반씩 좁혀가며 데이터를 탐색하는 방법 이진 탐색은 시작점, 끝점, 중간점을 이용하여 탐색 범위를 설정 순차 탐색 리스트 안에 있는 특정한 데이터를 찾기 위해 앞에서부터 데이터를 하나씩 확인하는 방법 이진 탐색은 이처럼 탐색 범위를 좁혀 나가기 때문에 순차 탐색보다 더 적은 시간 복잡도를 가질 수 있습니다. 이진 탐색 동작 예시 아래와 같이, 이미 정렬된 10개의 데이터 중에서 값이 4인 원소를 찾는 예시를 확인해보겠습니다. [Step 1] 시작점 : 0, 중간점 : 8, 끝점 : 18 (소수점 이하는 제거)로 지정할 수 있습니다. 찾고자 하는 값보다 중간점의 위치의 값이 크다..
-
[Algorithm] 정렬 알고리즘(퀵)Algorithm 2021. 2. 6. 23:57
퀵 정렬(Quick) : 기준 데이터를 설정하고 그 기준보다 큰 데이터와 작은 데이터의 위치를 바꾸는 방법이다. 퀵 정렬의 특징 가장 많이 사용된다. 대부분의 프로그래밍 언어의 정렬 라이브러리의 근간이 된다. 가장 기본적인 퀵 정렬은 첫 번째 데이터를 기준 데이터(Pivot)로 설정한다. 퀵 정렬 동작 예시 Step 0 : 현재 피벗의 값은 '5'이다. 왼쪽에서부터 '5'보다 큰 데이터를 선택하므로 '9'가 선택되고, 오른쪽에서부터 '5'보다 작은 데이터를 선택하므로 '4'가 선택된다. 이제 이 두 데이터의 위치를 서로 변경한다. Step 1 : 현재 피벗의 값은 '5'이다. 왼쪽에서부터 '5'보다 큰 데이터를 선택하므로 '7'이 선택되고, 오른쪽에서부터 '5'보다 작은 데이터를 선택하므로 '0'이 선택..
-
[Algorithm] 정렬 알고리즘 (삽입 정렬)Algorithm 2021. 2. 5. 22:01
삽입 정렬 처리되지 않은 데이터를 하나씩 골라 적절한 위치에 삽입한다. 삽입 정렬 과정 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'의 왼쪽..
-
[Algorithm] 정렬 알고리즘 (선택 정렬)Algorithm 2021. 2. 5. 20:14
1. 정렬 알고리즘? 데이터를 특정한 기준에 따라 순서대로 나열하는 것을 말한다. 일반적으로 문제 상황에 따라서 적절한 정렬 알고리즘이 공식처럼 사용된다. 데이터의 개수가 적을 때 데이터의 개수가 많으면서 범위가 한정되어 있을 때 이미 데이터가 정렬되어 있을 때 선택 정렬 처리되지 않은 데이터 중에서 가장 작은 데이터를 선택해 맨 앞에 있는 데이터와 바꾸는 것을 반복한다. 선택 정렬 과정 Step 0 : 정렬할 데이터를 준비한다. Step 1 : 처리되지 않은 데이터 중 가장 작은 '1' 을 선택해 가장 앞의 '5' 와 바꾼다. Step 2: 처리되지 않은 데이터 중 가장 작은 '2' 를 선택해 가장 앞의 '5' 와 바꾼다. Step 3: 처리되지 않은 데이터 중 가장 작은 '3' 을 선택해 가장 앞의 ..
-
[Git] Readme 작성법Git 2021. 2. 2. 23:13
1. 제목 : 제목을 정할 때는 '#'을 이용해서 강조해준다. #의 개수가 많을수록 더 작은 크기의 text를 반환한다. 위의 코드를 출력하게 되면 아래와 같이 나타난다. 2. 코드 블럭 : code block을 만들 때는 ` 를 사용하여 만들 수 있다. ``` ( ` 3개 )와 ```( ` 3개 ) 사이에 code block 시키고 싶은 text를 입력해주면 된다. 위의 코드를 출력하게 되면 아래와 같이 나타난다. 만약 문법이 있는 언어를 코드 블록에 넣고 싶다면 시작 부분 ``` 뒤에 해당하는 언어를 표시해주면 된다. 예를 들어, python 문법을 사용하고 싶다고 가정해보자. 그 경우는 아래와 같다. 위의 코드를 출력하게 되면 아래와 같이 나타난다. 3. blockquote(인용문) : 인용문을 사..