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 피봇이라 부른다. -> 같은 의미 - 배열이 주어지면 요소를 피벗 포인트로 지정하여 배열 속 요소를 ..
- Total
- Today
- Yesterday
- fs모듈 넥스트
- tilde caret
- float 레이아웃
- 타입스크립트 장점
- 형제 요소 선택자
- ~ ^
- 원티드 FE 프리온보딩 챌린지
- Prittier
- 틸드와 캐럿
- 항해99프론트후기
- 항해99프론트
- 항해99추천비추천
- 프리렌더링확인법
- 원티드 3월 프론트엔드 챌린지
- 원티드 프리온보딩 FE 챌린지
- text input pattern
- getServerSideProps
- grid flex
- D 플래그
- reactAPI
- getStaticPaths
- 원티드 프리온보딩 프론트엔드 챌린지 3일차
- nvm 설치순서
- aspect-ratio
- nvm경로 오류
- is()
- 프리온보딩 프론트엔드 챌린지 3월
- 부트캠프항해
- 타입스크립트 DT
- && 셸 명령어
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 | 29 | 30 |