일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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
- 태그된 유니온
- 리터럴 타입
- 타입 좁히기
- app router
- Cypress
- Promise
- CORS
- useAppDispatch
- 호이스팅
- 인터섹션
- map
- 반공변성
- async/await
- webpack
- autosize
- 투포인터
- SSR
- TS
- 이분 검색
- dfs
- recoil
- React
- ESlint
- 공변성
- Jest
- 무한 스크롤
- RTK Query
- 결정 알고리즘
- CI/CD
- Today
- Total
목록전체 글 (510)
짧은코딩
정렬 정렬이란 데이터를 특정한 기준에 따라서 순서대로 나열하는 것을 말한다. 정렬 알고리즘으로 데이터를 정렬하면 이진 탐색이 가능하다. 정렬 중에서 많이 사용하는 것은 선택, 삽입, 퀵, 계수 정렬 등이 있다. 파이썬에서는 리스트의 원소를 뒤집는 메서드를 제공하고 이 것은 O(N) 복잡도로 간단하게 수행된다. 선택 정렬 데이터가 무작위로 여러 개 있을 때, 가장 작은 데이터를 선택해 맨 앞에 있는 데이터와 바꾸고, 그 다음 작은 데이터를 선택해 앞에서 두 번째 데이터와 바꾸는 과정을 반복하는 것이 선택 정렬이다. 이렇게 데이터가 있으면 처음엔 0이 선택되어 맨 앞의 7과 자리가 바뀌게된다. 그 다음엔 제일 작은 1이 선택되어 5와 자리를 바꾼다. 이런식으로 하다보면 정렬이 가능하다. 이 과정에서 가장 작..
-API 호출을 위한 사이트 https://jsonplaceholder.typicode.com/ JSONPlaceholder - Free Fake REST API {JSON} Placeholder Free fake API for testing and prototyping. Powered by JSON Server + LowDB. Tested with XV. As of Oct 2021, serving ~1.7 billion requests each month. jsonplaceholder.typicode.com 여기에는 어떤 API 서비스로 자원을 가져다가 쓸 수 있는지 리스팅을 해놨다. 이중에서 comments를 사용했다. comments의 내용에서 이런 것을 활용해 데이터를 가공했다. -App.js i..
Lifecycle 탄생: 화면에 나타나는 것(Mount), ex) 초기화 작업 변화: 업데이트, 리렌더(Update), ex) 예외 처리 작업 죽음: 화면에서 사라짐(UnMount), ex) 메모리 정리 작업 리엑트는 각 주기마다 사용할 수 있는 메소드를 가지고있다. Mount: ComponentDidMount, 컴포넌트가 생기는 순간에 사용 Update: ComponentDidUpdate, 컴포넌트가 변화하는 순간에 사용 Unmount: ComponentWillUnmount, 컴포넌트가 화면에서 사라지기 이전에 사용 -React Hooks 원래 State, Effect, Ref 등은 class형 컴포넌트에서만 사용가능 하고 함수형 컴포넌트에서 못 사용하는데 use를 붙여서 낚아채서 사용한다. 하지만 c..
from collections import deque n, m = map(int, input().split()) ary = [] for i in range(n): ary.append(list(map(int, input()))) #상하좌우 dx = [-1, 1, 0, 0] dy = [0, 0, -1, 1] def bfs(x, y): q = deque() q.append((x, y)) while q: x, y = q.popleft() #상하좌우 방문 for i in range(4): nx = x + dx[i] ny = y + dy[i] #범위 벗어나면 continue if nx = n or ny = m: continue #괴물 만나면 continue if ary[nx]..
import { useRef, useState } from "react"; const DiaryItem = ({ onEdit, onRemove, author, content, created_date, emotion, id, }) => { // isEdit가 false면 평소, true면 수정하는 상태 const [isEdit, setIsEdit] = useState(false); const toggleIsEdit = () => setIsEdit(!isEdit); // 기본값 content로 해야 원래 값에서 수정 가능 const [localContent, setLocalContent] = useState(content); const localContentInput = useRef(); const hand..
-App.js import { 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 onCreate = (author, content, emotion) => { const created_date = new Date().getTime(); const newItem = { author, content, emotion, created_date, id: dataId.curre..
App DiaryEditor DiaryList 리엑트는 이런 트리 구조로 이루어져 있다. 0번 레벨: App 1번 레벨: DiaryEditor, DiaryList 이렇게 있고 같은 레벨끼리는 데이터를 주고 받을 수 없다. React는 단방향으로 데이터가 흐른다, 즉 위에서 아래로만 흐른다. 이벤트가 발생하면 위로 올라가는 흐름이 나오고 데이터를 추가하면 아래로 내려가는 흐름이 나온다. -App.js import { useRef, useState } from "react"; import "./App.css"; import DiaryEditor from "./DiaryEditor"; import DiaryList from "./DiaryList"; const App = () => { const [data, ..
최단 경로 탐색 목적지가 분명하다. -과정 O: open 앞으로 갈 지점 C: close 현재 지점 F score: G + H, F가 짧은거 선택 G score: 처음 노드부터 자기 노드까지 거리 H score: 앞으로 갈 목적지까지 예상 거리, 1->6은 직접 못간다. 그래서 직선 거리를 구한다, 대충 눈대중으로 구함 parent node로 추적해서 경로 찾는다. 가장 짧은 3을 선택 이렇게 하다 보면 최종적으로 이렇게 나온다. 그러면 C의 마지막부터 parent node를 따라가서 출발지가 나오면 그게 최종 경로이다.
원시적인 매칭 이렇게 하나씩 맞춰보는 것 -원시적인 매칭이 비효율적인 예 오토마타를 이용한 매칭 -ababaca를 체크하는 오토마타 순서 대로 맞게 들어오면 단계가 올라간다. 이것을 만드는 것이 어렵다. 위 그림을 S/W 구현 라빈-카프 알고리즘 문자열 패턴을 수치로 바꾸어 문자열의 비교를 수치 비교로 대신한다. -수치화 여기서는 문자가 5개라 5진수를 사용한다. 그리고 문자를 인덱스 번호처럼 대응 시킨다. 그리고 5진수라 5^n이렇게 해준다. n은 1씩 감소한다. -수치화를 이용한 매칭의 예 eeaab를 찾는데 eeaab를 수치화하면 3001이다. 따라서 앞부터 수치화해서 3001가 나오는 것을 찾는다. a2부터는 a1의 값에서 a1의 맨 앞 수를 빼고 추가되는 것을 더해주면 된다. 그리고 차수가 높아..
-App.js import "./App.css"; import DiaryEditor from "./DiaryEditor"; import DiaryList from "./DiaryList"; const dummyList = [ { id: 1, author: "이정환", content: "하이 1", emotion: 5, created_date: new Date().getTime(), }, { id: 2, author: "홍길동", content: "하이 1", emotion: 5, created_date: new Date().getTime(), }, { id: 3, author: "아무개", content: "하이 1", emotion: 5, created_date: new Date().getTime(),..