일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- 결정 알고리즘
- async/await
- map
- 인터섹션
- 반공변성
- TS
- Promise
- 투포인터
- 공변성
- 호이스팅
- tailwind
- autosize
- webpack
- RTK Query
- dfs
- CI/CD
- recoil
- 리터럴 타입
- SSR
- app router
- 무한 스크롤
- ESlint
- CORS
- Cypress
- useAppDispatch
- Jest
- 타입 좁히기
- 태그된 유니온
- React
- 이분 검색
- Today
- Total
목록전체 글 (510)
짧은코딩
이진 탐색은 리스트 내에서 데이터를 매우 빠르게 탐색하는 알고리즘이다. 순차 탐색 순차 탐색이란 리스트 안에 있는 특정한 데이터를 찾기 위해 앞에서부터 데이터를 하나씩 차례대로 확인하는 방법이다. 보통 정렬되지 않은 리스트에서 데이터를 찾아야 할 때 사용한다. 리스트 내에 데이터가 아무리 많아도 시간만 충분하면 원하는 원소를 찾을 수 있다. 순차 탐색은 이름처럼 순차적으로 데이터를 탐색한다는 의미이다. 리스트의 데이터에 하나씩 방문하여 검사하여 구현도 간단하다. for문 한번으로 구현할 수 있어서 최악의 경우 시간 복잡도는 O(N)이다. 이진 탐색(반으로 쪼개면서 탐색하기) 이진 탐색은 데이터가 정렬되어 있어야지만 사용 가능하다. 이진 탐색은 범위를 절반씩 좁혀가며 탐색하는 특징이 있다. 이진 탐색은 시..
이전까지 한 최적화를 해도 모든 최적화가 되진 않는다. 특히 심각한 것은 댓글을 삭제하면 다른 댓글도 리렌더링된다. -DiaryItem.js import React, { useEffect, useRef, useState } from "react"; const DiaryItem = ({ onEdit, onRemove, author, content, created_date, emotion, id, }) => { useEffect(() => { console.log(`${id}번 째 아이템 렌더!`); }); // isEdit가 false면 평소, true면 수정하는 상태 const [isEdit, setIsEdit] = useState(false); const toggleIsEdit = () => setIs..
-DiaryEditor.js import React, { useEffect, useRef, useState } from "react"; const DiaryEditor = ({ onCreate }) => { useEffect(() => { console.log("DiaryEditor 렌더"); }); const authorInput = useRef(); const contentInput = useRef(); const [state, setState] = useState({ author: "", content: "", emotion: 1, }); const handleChangeState = (e) => { setState({ ...state, [e.target.name]: e.target.value, }..
-처음에 생각한 풀이 처음엔 max, min 메소드를 이용하면 될 것이라고 생각했지만 이거로는 충분하지 않았다. -풀이 n, k = map(int, input().split()) a = list(map(int, input().split())) b = list(map(int, input().split())) a.sort() #오름차순 b.sort(reverse=True) #내림차순 for i in range(k): if a[i] < b[i]: a[i], b[i] = b[i], a[i] else: break print(sum(a)) a를 오름차순, b를 내림차순으로 입력 받는다. 그리고 k만큼 반복하면서 비교한다. 만약 a가 b보다 작으면 두 집합의 원소를 바꾼다. a가 b보다 같거나 커지면 반복문을 종료한..
App에서 state로 count, text가 있다. 그리고 자식 컴포넌트에 CountView는 count를 받고 TextView는 text를 받는다고 한다. 그럼 count가 변경되었을 때, 모두 자식도 모두 리렌더 된다. 하지만 TextView는 리렌더 될 필요가 없다. => 자식 컴포넌트에게 업데이트 조건으로 각각 count와 text가 변경될 때만 업데이트 되도록 조건을 걸면된다. 이것을 할 수 있는 것이 React.memo이다. -리엑트 공식 문서 https://ko.reactjs.org/ React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 A JavaScript library for building user interfaces ko.reactjs.org 이 사이트를 잘..
-깃허브 https://github.com/5hyun/youtube-site GitHub - 5hyun/youtube-site Contribute to 5hyun/youtube-site development by creating an account on GitHub. github.com -깃허브로 연결한 사이트 https://5hyun.github.io/youtube-site/ Youtube Mobile subscribe 5hyun.github.io -코드를 만들 때 헷갈린점 1. 우선 드림 코딩님 처럼 색이나 여백 사이즈, 글자 크기 등을 지정하고 하는게 편한 것을 확실히 알았다. 2. 버튼에 대한 코드가 헷갈렸다. button, button:focus { border: none; cursor: poi..
Memoization 이미 계산 해 본 연산 결과를 기억 해 두었다가 동일한 계산을 시키면, 다시 연산하지 않고 기억했던 데이터를 반환 시키게 하는 방법 -Memoization이 리엑트의 어떤 부분에 적용되어야 하는지 App.js import { useEffect, useRef, useState } from "react"; import "./App.css"; import DiaryEditor from "./DiaryEditor"; import DiaryList from "./DiaryList"; const App = () => { const [data, setData] = useState([]); const dataId = useRef(0); const getData = async () => { cons..
React developer tools 리엑트 개발시에 생산성을 굉장히 늘려준다. 이것은 크롬의 확장 도구이다. https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi/related?hl=ko React Developer Tools Adds React debugging tools to the Chrome Developer Tools. Created from revision ca7a38ae4 on 5/12/2022. chrome.google.com 이 사이트에서 다운 설정 -> 도구 더보기 -> 확장 프로그램 -> 세부 정보 그리고 설정을 켜준다. 그 후 npm start를 하면 오른쪽 상..
이 문제는 최대 100,000개까지 입력이 가능하여 최악의 경우 O(NlogN)을 보장하는 알고리즘을 이용하거나 O(N)을 보장하는 계수 정렬을 이용하면 된다. -내 풀이 n = int(input()) def setting(data): return data[1] ary = [] for i in range(n): x = input().split() ary.append((x[0], int(x[1]))) ary.sort(key=setting) for i in ary: print(i[0], end=" ") -교재 풀이 n = int(input()) ary = [] for i in range(n): x = input().split() ary.append((x[0], int(x[1]))) ary = sorted(a..
퀵 정렬 퀵 정렬은 지금까지 배운 정렬 알고리즘 중에서 가장 많이 사용된다. 이 교재에는 없지만 병합 정렬도 퀵 정렬과 같이 빠르다. 퀵 정렬은 기준을 설정하고 큰 수와 작은 수를 교환한 후 리스트를 반으로 나누는 방식으로 동작한다. 퀵 정렬에서는 기준 숫자인 피벗이 사용된다. 리스트에서 피벗을 정한다. 피벗을 정하고 나면 왼쪽에서부터 피벗보다 큰 데이터를 찾고, 오른쪽에서부터 피벗보다 작은 데이터를 찾는다. 그 다음 큰 데이터와 작은 데이터의 위치를 교환한다. 이렇게 있을 때, 5를 피벗으로 정했다. 그러면 왼쪽에선 7이 피벗보다 크고, 오른쪽에선 4가 피벗보다 작다. 따라서 7과 4의 위치를 바꿔준다. 이러다보면 왼쪽 리스트는 모두 피벗보다 작고 오른쪽은 모두 피벗보다 큰 데이터가 위치한다. 이렇게 ..