일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
- 폰트적용하기
- 타입좁히기
- 티스토리꾸미기
- 개발콘텐츠
- 성능최적화
- 리액트
- 공통컴포넌트
- utilty type
- javascript
- Chart.js
- 커스텀
- const 단언문
- 2022
- TSDoc
- React.js
- typescript
- vue.js
- 반복줄이기
- 제네릭
- CSS
- NonNullable
- click and drag
- React Native
- react
- reactjs
- returnType
- 타입스크립트
- 누구나 자료구조와 알고리즘
- 레이아웃쪼개기
- JS console
- Today
- Total
목록Development (384)
몽땅뚝딱 개발자
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/mB2q1/btsv8U9h0Bp/PcS8yJHI6h0k0EyyWJWSbk/img.png)
![](http://i1.daumcdn.net/thumb/R150x0/?fname=https://blog.kakaocdn.net/dn/mB2q1/btsv8U9h0Bp/PcS8yJHI6h0k0EyyWJWSbk/img.png)
대부분의 프로그래밍 언어는 해시 테이블이라는 자료 구조를 포함하는데 빠른 읽기라는 엄청난 능력이 있다. 해시 테이블은 쌍으로 이뤄진 값들의 리스트로 키를 사용하여 값을 찾는다. 해시 테이블은 프로그래밍 언어에서 서로 다른 이름으로 불린다. 해시, 맵, 해시 맵, 딕셔너리, 연관 배열 등이다. 딱 한 단계만 걸리므로 평균적으로 효율성이 O(1)이다. 룩업 시 단방향(one-directional)이다. 해시 함수를 만드는 대표적인 방법으로는 나누기, 곱하기가 있다. 1.1. 곱하기 시의 문제 곱하기 시 만약 키 값이 동일할 경우 문제가 생긴다. 알파벳 순서대로 숫자로 변환하여 해싱하고(A는 1, B는 2..) 문자열을 특정 숫자로 변환한다고 쳤을 때, BAD는 2 x 1 x 4로 8이라는 키 값을 가진다. ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/b0kCYq/btsv0p3Eybg/nK1HNnKqrCOuzpEhwUmNAk/img.png)
![](http://i1.daumcdn.net/thumb/R150x0/?fname=https://blog.kakaocdn.net/dn/b0kCYq/btsv0p3Eybg/nK1HNnKqrCOuzpEhwUmNAk/img.png)
지금까지는 최악의 시나리오만 생각하여 빅오를 추론했다. 하지마 최악의 시나리오 외에 고려할 사항들이 있다. 정렬의 종류에는 버블 정렬, 삽입 정렬, 선택 정렬이 있는데 최악의 시나리오만을 고려했을 때 선택 정렬이 가장 나은 방법이라고 생각할 수 있다. 하지만 평균 시나리오도 중요하게 고려해야 한다. 삽입 정렬 선택 정렬 정의 임의로 첫번째 인덱스의 값을 삭제한 뒤 임시 변수에 담아놓고 왼쪽에 있는 값을 비교하여 임시 변수에 있는 값보다 크면 값을 오른쪽으로 시프트하고 공백에 임시 변수에 있는 값을 담는다. 최소값을 찾은 뒤 다음 인덱스와 교환한다. 최악의 시나리오 N²단계 N² / 2단계 평균 시나리오 N² / 2단계 N² / 2단계 최선의 시나리오 약 N단계 N² / 2단계 거의 정렬된 데이터를 다룰거..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/QvJYW/btswbEdA2dA/Qx3Z2vpQ2xDj4lDqKLOVhk/img.png)
![](http://i1.daumcdn.net/thumb/R150x0/?fname=https://blog.kakaocdn.net/dn/QvJYW/btswbEdA2dA/Qx3Z2vpQ2xDj4lDqKLOVhk/img.png)
빅 오는 알고리즘을 서로 비교하고 주어진 상황에 알맞은 알고리즘을 결정하게 해주는 도구이지만 유일한 도구는 아니다. 빅 오 표기법에서는 한 알고리즘이 다른 알고리즘보다 훨씬 빠른 경우에도 두 경쟁 알고리즘을 똑같은 방식으로 표기하기도 한다. 선택 정렬(selection sort) 1.1. 선택 정렬(selection sort)이란? 1단계. 값을 왼쪽 → 오른쪽으로 확인하며 어떤 값이 최솟값인지 결정한다. 2단계. 최솟값이 정해졌다면 가장 패스스루를 처음 시작했을 때의 값과 교환한다. 두번째 패스스루는 인덱스 1부터 시작하게 된다. 매 패스스루는 1, 2단계를 반복하며 배열 끝에서 시작하는 패스스루에 도달할 때 까지 반복한다. 1.2. 선택 정렬의 효율성 export const selectionSort ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/xw5OR/btsv0uDW1Uh/xk2Ls2ioJuJyNFqxic44A1/img.png)
![](http://i1.daumcdn.net/thumb/R150x0/?fname=https://blog.kakaocdn.net/dn/xw5OR/btsv0uDW1Uh/xk2Ls2ioJuJyNFqxic44A1/img.png)
버블 정렬(Bubble sort) 1.1. 버블 정렬 알고리즘 이런 배열이 주어졌을 때 버블 정렬 알고리즘이 어떻게 동작하는지 보자. [2, 1, 3, 5] 1. 배열내에서 연속된 두 항목을 가리킨다. 처음에는 배열의 첫 원소부터 시작한다. [2, 1, 3, 5] 2. 두 항목의 순서가 바뀌어있으면 두 항목을 교환하며, 순서가 올바르다면 아무것도 하지 않는다. [1, 2, 3, 5] 3. 포인터를 오른쪽으로 한 셀씩 옮긴다. [1, 2, 3, 5] 4. 배열의 끝까지 이 단계를 반복한다. 이를 패스스루(pass-through)라 한다. 끝나면 다시 처음 두 값으로 옮겨서 1~3단계를 다시 실행함으로써 새로운 패스스루를 실행한다. 교환이 일어나지 않는 패스스루가 생길 때 까지 패스스루를 반복한다. 1.2...
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/lQLy0/btswbzQUoz2/RkVJ9W4ryKwDakFbyFa5p0/img.png)
![](http://i1.daumcdn.net/thumb/R150x0/?fname=https://blog.kakaocdn.net/dn/lQLy0/btswbzQUoz2/RkVJ9W4ryKwDakFbyFa5p0/img.png)
어떤 알고리즘을 "22단계의 알고리즘", "400단계의 알고리즘"이라고 표시할 수는 없다. 선형 검색의 효율성을 정량화하는 보다 효과적인 방법은 배열에 N개의 원소가 있을 때 선형 검색에 N단계가 필요하다고 표현하는 것이다. 그래서 수학적 개념을 차용하여 이러한 개념을 형식화한 표현을 빅 오 표기법이라 부른다. 이 표기법을 사용하여 주어진 알고리즘의 효율성을 쉽게 분류하고 이해시킬 수 있다. 선형 검색에는 배열의 원소 수만큼의 단계가 필요하다. O(N) "빅 오 N"이라고 발음하며 "차수 N"이라고도 부른다. "알고리즘에 N단계가 필요하다"라는 뜻이다. 이 O(N)인 알고리즘을 선형 시간을 갖는 알고리즘이라고도 부른다. N이 얼마든 항상 상수 단계만 필요하기떄문에 상수 시간(constant time)을..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/k3QUC/btsv7yZXmgC/H1O5yODBVkX1g6oJb7C9uK/img.png)
![](http://i1.daumcdn.net/thumb/R150x0/?fname=https://blog.kakaocdn.net/dn/k3QUC/btsv7yZXmgC/H1O5yODBVkX1g6oJb7C9uK/img.png)
올바른 자료구조의 선택은 중요하다. 알고리즘은 어려운 단어같지만 단순히 "어떤 과제를 완수하는 명령어 집합"이라고 생각하면 된다. 정렬된 배열 정렬된 배열(ordered array)는 전형적인 배열과 거의 같지만 차이점은 값이 순서대로 있어야 한다는 점이다. 전형적인 배열 [17, 37, 5, 202, 80] 정렬된 배열 [3, 17, 75, 80, 202] 1.1. 삽입 값을 정렬된 배열에 삽입하는 경우 전형적인 배열과 비교하면 덜 효율적이다. 1.2. 검색 1.2.1. 선형검색 원하는 값을 찾을 때 까지 왼쪽에서 오른쪽으로 한 번에 한 셀씩 확인하는 방법을 "선형 검색"이라고 한다. 선형 검색은 알고리즘 중 하나이다. 🔎 선형 검색에서 두 배열의 차이점 정렬된 배열 전형적인 배열 값이 배열에 들어있지..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cgl8JS/btsv8N3lbZI/A6vDnVDRuTmlheTOWCam9k/img.png)
![](http://i1.daumcdn.net/thumb/R150x0/?fname=https://blog.kakaocdn.net/dn/cgl8JS/btsv8N3lbZI/A6vDnVDRuTmlheTOWCam9k/img.png)
기본개념 [자료구조연산] 읽기: 자료 구조 내 특정 위치를 찾아보는 것 (인덱스 찾기) 검색: 자료 구조 내 특정 값을 찾는 것 삽입: 자료 구조에 새로운 값을 추가 삭제: 자료 구조에서 값을 제거하는 것 [속도측정] 연산이 얼마가 빠른가를 측정할 때는 시간관점이 아닌 "얼마나 많은 단계가 필요한지"를 논해야한다. 시간은 연산을 실행하는 하드웨어에 따라 항상 바뀌므로 시간을 기준으로 속도를 측정하면 안된다. 단계 수 측정이 연산 속도를 분석하는 핵심 비결이다. 배열 사과 바나나 오이 대추 포도 [읽기] 자료 구조 내 특정 위치를 찾아보는 것이다. (=인덱스 찾기) 컴퓨터는 모든 메모리 주소에 한번에 갈수 있다. 배열을 할당할 때 어떤 메모리 주소에서 시작하는지도 기록해 둔다. 그래서 배열의 첫번째 원소를..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/Lm2fS/btsq0xklW2g/ST0DMzAYsvlY3kj27lLKyk/img.gif)
![](http://i1.daumcdn.net/thumb/R150x0/?fname=https://blog.kakaocdn.net/dn/Lm2fS/btsq0xklW2g/ST0DMzAYsvlY3kj27lLKyk/img.gif)
Swiper로 개발할 때 가로형에 슬라이드가 1개인 것만 구현해봤었는데 이번 개발건에 세로형+여러 슬라이드 구성이 필요했다. 이번에는 예전과 달리 "공통"이라는 키워드에 맞춰 개발하려고 노력했고 그것을 기록하는 글..✏️ vue-awesome-swiper를 사용했다. $ npm i vue-awesome-swiper 📄 공통컴포넌트 prop으로 넘어온 isVertical(=세로여부) 값에 따라 style이 나뉘어진다. 공통적으로 사용하려면 콘텐츠 영역은 분리돼야 할 것 같아 영역은 으로 따로 받아서 구현했고, 콘텐츠 영역의 width, height를 받아서 슬라이드 배너의 너비와 높이를 계산했다. 다음은 script 부분이다. isVertical을 prop으로 받아 세로형, 가로형으로 바로 변경할 수 있도..
보호되어 있는 글입니다.
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cX5ZDZ/btsgJZYwo07/JZkqCPMJCUGT4uTgsqbi2K/img.jpg)
![](http://i1.daumcdn.net/thumb/R150x0/?fname=https://blog.kakaocdn.net/dn/cX5ZDZ/btsgJZYwo07/JZkqCPMJCUGT4uTgsqbi2K/img.jpg)
예를 들어 file.txt 하나를 수정하고 커밋하고 세번을 반복한다고 생각해보자. ◽️ 1단계: HEAD 이동 $ git reset --soft HEAD~ 1. reset 명령은 HEAD를 이동시킨다. checkout처럼 HEAD가 가리키는 브랜치를 바꾸지는 않는다. HEAD는 계속 현재 브랜치를 가리키고 있고 현재 브랜치가 가리키는 커밋을 바꾼다. 2. reset 명령은 가장 최근의 git commit 명령을 되돌린다. git commit 명령을 실행하면 1) Git은 새로운 커밋을 생성하고 2) HEAD가 가리키는 브랜치가 새로운 커밋을 가리키도록 업데이트한다. reset 명령 뒤에 HEAD~ (HEAD의 부모 커밋)을 주면 Index나 워킹 디렉토리는 그대로 두고 브랜치가 가리키는 커밋만 이전으로 ..