공부 기록일지📚

TS + CRA 로 작업하면서 styled-component 를 쓰게됐다. CSS-in-JS 이기 때문에 props를 활용하기 좋다(조건부 스타일링). 하지만 하나의 컴포넌트에 props를 내려주는 식으로 진행하기 때문에 TS에서는 해당 props에 대한 정의가 필요하다. *CSS-in-JS는 스타일 정의를 CSS파일이 아닌 JS로 작성된 컴포넌트에 바로 삽입하는 스타일 기법 초기 세팅 yarn add styled-components @types/styled-components styled-normalize 📌 styled-normalize: 브라우저마다 다르게 보이는 css를 초기화 코드 분리 styled-components 를 사용할 때 테마/전역스타일 코드 분리 styled-components의 타..

오늘 푼 5가지 문제는 숫자, 문자열 데이터를 골라내서 가공하는 문제였다. [푼 문제 목록] 숨어있는 숫자의 덧셈 순서쌍의 개수 문자열안에 문자열 자릿수 더하기 모음 제거 각각의 요소를 조작해야 할 경우, 매개변수로 들어온 값이 string일 때에는 주로 배열로 변환해서 배열 내장 메서드를 활용한다. String.prototype.split() 문자열을 한 char 단위로 쪼개고싶을 때에는 .split("") 을 해주면 된다. split(구분자) 구분자가 공백이 될수도 있고 ""아무것도 없는 따옴표를 넣어주면 apple -> a,p,p,l,e로 쪼개준다. 새배열을 반환하는 것은 아니므로 변수에 담아줘야 한다. 내 경우는, 숫자로 들어온 매개변수 n값을 toString()을 통해 형변환 시켜준 뒤 ... ..

Vite는 '바이트'가 아닌 '비트'라고 발음한다고 합니다. 프랑스어로 '빠르다'라는 뜻이며 정말 빠른 개발을 할 수 있는 도구를 돕기 위해 만들어졌습니다. 자바스크립트는 module(모듈)이 없습니다. 처음 탄생했을 때 대형 어플리케이션을 만들 용도로 만들어진게 아니기 때문인데요. 모듈이 없기때문에 파일을 여러 개로 만들어서 개발할 수도 없었습니다. 하나의 파일에서 거대한 코드를 작성한다면 엉망진창이 될 겁니다. 이후, node가 만들어지고 서버에서 js를 사용할 수 있게 되면서 require 함수와 module.export를 쓰는 CommonJS 방식의 모듈이 만들어졌습니다. 당시 js문법에는 import와 같은 표준 모듈 문법이 없었다고 합니다. // CommonJS 방식 const path = r..

이전에 배웠던 정렬알고리즘 5개는 기본적으로 comparison sorts(비교 정렬)이다. 배열의 요소를 하나 하나 비교하면서 정렬했던 것이기 때문이다.(e.g. 두 요소의 크기를 비교해서 어느 위치로 옮기고 하는 작업) 아래는 기존에 배웠던 정렬 알고리즘의 평균 시간 복잡도(big O표현)이다. bubble sort - O(n^2) Insetion sort - O(n^2) selection sort - O(n^2) quick sort - O(n log (n)) merge sort - O(n log (n)) 결과를 보면 알 수 있겠지만 최대 효율이나도 n log n이 한계이다. 여기서 어떻게 더 발전할 수 있을까? -> 비교를 통해 정렬하는 sort 알고리즘 외에 다른 유형의 sort 알고리즘이 존재한..

Quick Sort (퀵 정렬) : 퀵 정렬은 합병 정렬과 같은 가정으로 작동한다. 재귀를 통해 해결하기 가장 쉬운 방식 중 하나다. 합병 정렬처럼 0또는 1개의 정렬된 요소를 배열로 쪼갠다. 피벗(pivot) 포인트라 부르는 단일 요소를 선택하여 수행한다. 예시로 첫번째에 위치하는 5를 피벗으로 골랐다면 5를 기준으로 왼쪽 오른쪽 섹션을 나누게 된다. 그리고 왼쪽 섹션에서 새로운 피벗을 고른다. 이 과정을 반복해준다. *피벗 포인트로 선택된 요소는 어찌됐든 정렬된 데이터가 된다.(e.g.)5를 선택했다면 5를 기준으로 작은 값 큰 값을 나누기 때문이다.) 1-1. Pivot Helper - 파티션 or 피봇이라 부른다. -> 같은 의미 - 배열이 주어지면 요소를 피벗 포인트로 지정하여 배열 속 요소를 ..

이전에 배웠던 3가지 기초 sorting 알고리즘은 소규모의 데이터(e.g.)20개의 요소가 담긴 배열..)에 적합하다. 큰 데이터를 정렬할 때에는 이전 기초 정렬알고리즘보다 더 효율적인 알고리즘이 존재한다. faster sorts 합병 정렬(merge), 퀵 정렬(quick), 지수 정렬(radix)에 대해서 배워보자 시간복잡도를 O(n^2)에서O(n log n)으로 바꿀 수 있다. Merge Sort (합병 정렬) - merging and sorting 의 조합, 정확히 말하자면 분할, 정렬, 합병 모두가 일어난다. 데이터 배열이 있다고 했을 때 해당 배열이 가장 작은 요소를 갖도록 분할(정렬된 배열이 0개나 1개 요소가 있는 배열이 될 때까지 분할)한다. 그리고 가장 작은 요소끼리 정렬하며 합친다...

Insertion sort (삽입 정렬) 삽입 정렬은 버블 정렬 및 선택 정렬과 꽤 비슷하다. 기초 sort 알고리즘으로 이 3가지가 묶임 몇 가지 주요 차이점이 있고, 사실상 삽입 정렬이 더 유리한 지점이 있다. 삽입 정렬이 잘 작동하는 상황이 존재한다는 소리 -> 거의 정렬된 데이터에 새로운 데이터가 들어올 때 상황 예시: 라이브 & 스트리밍 방식으로 들어온 데이터를 즉시 입력해야 하는 상황, 데이터가 들어와서 계속 재정렬하고 실행중인 정렬을 유지하여 최신 상태로 두어야 할 상황 2. 삽입 정렬의 동작 방식 이 정렬은 배열의 과반을 점차적으로 만들어 정렬을 구축하며, 과반은 항상 정렬되어 있다. 따라서 하나씩 이동하거나, 한 번에 가장 큰 요소를 찾거나 한 번에 가장 작은 요소를 찾는 대신 각 요소를..

Selection Sort (선택정렬) -버블 정렬과 비슷하지만, 큰 값을 배열 끝에 위치시키는 대신 작은 값을 한 번에 하나씩 위치에 배열한다. 버블 정렬과 마찬가지로 처음부터 끝까지 움직이지만, 실제 정렬된 데이터는 처음부터 누적되고 있다. 첫 요소와 모든 요소를 비교 후, 비교 대상 중 최솟값을 찾아 마지막 swap을 통해 첫 요소와 최소값인 요소의 자리를 바꾼다(만일 첫번째 요소가 비교를 전부 끝냈을 때 최솟값이라면 자리를 이동하지 않는다-> noSwap). 버블 정렬 만들기 tip 우선 최솟값을 담을 변수를 만들어준다. 최솟값의 초기값은 첫번째 요소의 값으로 설정할 수 있다. 저장하려는 변수 값은 최소값이 담긴 요소의 인덱스이다. 모든 단일 항복들에 대해 반복할 필요는 없다. 실제로 해야할 것은..