일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- tailwind
- 반공변성
- 태그된 유니온
- 투포인터
- 무한 스크롤
- Jest
- React
- useAppDispatch
- SSR
- 리터럴 타입
- 결정 알고리즘
- async/await
- RTK Query
- app router
- autosize
- TS
- 타입 좁히기
- map
- dfs
- CORS
- 호이스팅
- Cypress
- 공변성
- ESlint
- recoil
- webpack
- 인터섹션
- Promise
- 이분 검색
- CI/CD
- Today
- Total
목록전체 글 (510)
짧은코딩
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/elogKQ/btrBxb5jGgp/Ghxzk4zmIFW9s9Jj8KAcG0/img.png)
구현이란 머릿속에 있는 알고리즘을 소스코드로 바꾸는 과정이다. problem-thinking-solution 과정을 거쳐야 한다. -완전 탐색: 모든 경우의 수를 주저 없이 다 계산하는 해결 방법 -시뮬레이션: 문제에서 제시한 알고리즘을 한 단계씩 차례대로 직접 수행하는 문제 -int 자료형 데이터의 개수에 따른 메모리 사용량 리스트 중에 크기가 1,000만 이상인 리스트가 있다면 메모리 용량 제한으로 문제를 풀 수 없을 수 있다. 일반적인 기업 코딩 테스트 환경에서는 파이썬으로 제출한 코드가 1초에 2,000만번의 연상을 수행한다고 가정하면 크게 무리가 없다. 만약 시간 제한이 1초이고 데이터의 개수가 100만 개인 문제가 있으면 시간 복잡도는 O(NlogN) 이내로 풀어야한다. 실제로 N = 1,00..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cQcGLk/btrBr9m9uKY/vRsD9p5hT8qO27BiVeaww0/img.png)
스크립트를 분리해야 하는 이유 HTML 안에 스크립트를 작성하는 방식은 스트립트가 아주 간단할 때만 사용한다. 스크랩트가 길어지면 별개의 파일을 만들어 분리하는 것이 좋다. 스크립트를 별도의 파일에 작성하면 좋은점이 브라우저가 스크립트를 다운받아 캐시에 저장하기 때문이다. 이렇게하면 성능이 올라가는 장점이 있다. 이를 통해 트래픽이 절약되고 속도가 향상된다. 엄격 모드 자바스크립트는 오류를 어느정도 무시하고 넘어갈 수 있지만 이것이 나중엔 심각한 버그를 만들 수 있다. 하지만 엄격 모드는 실수를 에러로 변환해준다. "use strict"; 이 코드는 반드시 스크립트의 최상단에 있어야한다. 안그러면 활성화가 안될 수 있다. 그리고 엄격 모드를 한번 실행하고 나면 다시 취소할 방법은 없다. -브라우저 콘솔 ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/YEZY8/btrBnLf9ppC/cB8CNNBIa1htOvfEDZCeVk/img.png)
Table 부트스트랩 content의 Table에서 가져온 코드 # First Last Handle 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter 이걸 넣으면 이런 코드가 나오게된다. -class를 지우면 원래는 이렇게 나온다. -table-striped 이렇게 회색처럼 나온다. -table-hover 테이블에 마우스를 올리면 회색으로 바뀐다. Color .text-primary .text-secondary .text-success .text-danger .text-warning .text-info .text-light .text-dark .text-body .text-muted .text-white .text-black-50 .tex..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/qGVAN/btrBhlhYWNn/KbKfSAwNofgQ2pZWKphRTk/img.png)
https://getbootstrap.com/docs/5.1/getting-started/introduction/ Introduction Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page. getbootstrap.com hello world Grid 반응형 웹도 지원해준다. 보통은 md를 많이 사용한다. grid system hello hello hello .container하고 tab 누르면 이렇게 완성 12개의 column으로 구성되었다는 것이 부트스트랩의 기본 개념이다. 12개의 co..
classList - Methods -add(String) 지정한 클래스 값을 추가한다. 만약 추가하려는 클래스가 이미 존재한다면 무시. -remove(String) 지정한 클래스 값을 제거한다. 존재하지 않는 클래스라면? 에러 발생 X -contains(String) 지정한 클래스 값이 존재하는지 확인. true, false 값을 반환. -replace(old, new) old class를 new class로 대체 -item(Number) 인덱스 값을 활용하여 클래스 값을 반환
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/r3h2B/btrBk9taWEu/IID8NYcA4tpZo1LxE49RQK/img.png)
시맨틱(Semantic): 의미(뜻)를 시맨틱이라 부른다. 코드가 의미를 갖도록 시맨틱을 부여하여 코드를 작성해야 한다고 말한다. 함수 안에 코드를 간단하게 하여 뉘앙스의 범위를 잘 지키도록 해야한다. 좋아하는 음악은? -label for 사용법 태그는 for 속성을 사용해서 태그의 id 속성에 연계해서 사용, label의 for값과 input의 id값을 일치시키면 된다. const music = { createElement(id){ this.element = document.getElementById(id); }, get getAttributeValue(){ return this.element.value; }, set setAttributevalue(value){ this.element.value = ..
반응형 웹 1. 뷰포트(Viewport) 뷰포트는 사용자에게 보여지는 웹페이지 영역을 말한다. meta 태그에 뷰포트를 설정한다. -width=device-width: 너비를 기기의 스크린 너비로 설정한다. 즉 콘텐츠가 보여지는 영역이 뷰포트의 크기와 동일하다. -initial-scale=1.0: 페이지 로딩시 확대나 축소가 되지 않은 원래 크기를 사용하게 한다. 화면 회전방향 상관없이 기기독립적 픽셀과 css픽셀이 1:1이 되도록 한다. -minimun-scale: 줄일 수 있는 최소 크기(범위0~10) -maximum-scale: 늘릴 수 있는 최대 크기(범위 0~10) -user-scalable: yes/no, 사용자가 화면을 확대, 축소 할 수 있는지 지정 뷰포트 활용 원칙 -크기가 큰 fixed..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/QWnCD/btrBf7QciQf/8XO0jcNDklRIbrPktMTQa1/img.png)
이 문제를 for문과 while문을 사용해서 풀면 시간 초과가 발생할 수 있다. 그렇기에 반복되는 수열에 대해 먼저 파악을 해야 한다. # N, M, K를 공백을 기준으로 구분하여 입력 받기 n, m, k = map(int, input().split()) # N개의 수를 공백을 기준으로 구분하여 입력 받기 data = list(map(int, input().split())) data.sort() # 입력 받은 수들 정렬하기 first = data[n - 1] # 가장 큰 수 second = data[n - 2] # 두 번째로 큰 수 # 가장 큰 수가 더해지는 횟수 계산 count = int(m / (k + 1)) * k count += m % (k + 1) result = 0 result += (coun..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/KTTT1/btrBepRsPFk/0L7p71K9yeftH6kViZcAVk/img.png)
이 문제는 가장 큰 화폐 단위부터 돈을 거슬러 주면 된다. for coin in coin_types:#coin_types는 잔돈 동전의 모음 count += n#count는 받는 동전 수, n은 입력값 n %= coin 이렇게 하면 코드의 시간 복잡도는 O(K)이다. 이 알고리즘은 동전의 종류(coin_types)에만 영향을 받고 거슬러 줘야하는 금액의 크기와는 무관하다.
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/kzBo4/btrBbb6KPys/K80ZMKclwnR18lywOR9YCK/img.png)
시간 복잡도: 입력에 대해 알고리즘이 얼마나 오래 걸리는지, 필요한 연산의 횟수 공간 복잡도: 특정한 크기의 입력에 대해 알고리즘이 얼마나 많은 메모리르 차지하는지, 필요한 메모리의 양 효율적인 알고리즘을 사용하면 보통 시간 복잡도와 공간 복잡도는 일종의 거래 관계가 성립한다. 메모리를 많이 사용하는 대신 반복 연산을 생략하면서 계산 복잡도를 줄일 수 있다. -시간복잡도 만약 연산 횟수가 3N^3 + 5N^2 + 1,000,000이면 상수를 무시할 수 없다. 일반적 코딩 테스트에선 상수를 고려해야 하는 경우는 적지만 빅오 표기법이 항상 절대적인 것은 아니다. 일반적으로 코딩테스트에서 O(N^3)을 넘어가면 문제 풀이에 사용하기 어렵다. 그렇기에 알고리즘 문제 풀이 전에 조건을 먼저 확인하고 얼마나 효율적..