짧은코딩

mutate mutate는 서버에 요청 안보내고 데이터를 수정하는 것이다. 즉 서버 요청을 하지 않고 클라이언트 쪽에서 데이터를 조작할 수 있다. 그러다가 결국 마지막엔 서버에 데이터가 이렇게 바뀐게 맞나 점검을 하는데 이것이 mutate의 두번째 인자이고 shouldRevalidate라고 한다. 따라서 이 두번째 인자에 false를 넣어야 서버에 요청을 보내지 않는다. -예시 인스타에 좋아요를 누르면 하트의 색이 변하는데 이것은 서버에 가기 전에 하트의 색을 바꾸는 것이라 mutate를 사용했다. 이렇게 하면 사용자 입장에서는 빠르게 적용이 되는 것 처럼 느껴져서 좋다. 하지만 만약 서버에 전송이 실패하면 다시 좋아요를 취소시킨다. 이런 것을 OPTIMISIC UI라고 부른다. 낙관적인 UI라고 부른다..

로그인 페이지 실행 로직 코드만 보면서 어떻게 돌아갈건지 예측하는 것도 좋은 연습 방법이다. import useInput from '@hooks/useInput'; import { Success, Form, Error, Label, Input, LinkContainer, Button, Header } from '@pages/SignUp/styles'; import fetcher from '@utils/fetcher'; import axios from 'axios'; import React, { useCallback, useState } from 'react'; import { Link, Redirect } from 'react-router-dom'; import useSWR from 'swr'; cons..

CORS cors에 대해 알기 위해서는 먼저 sop에 대해 알아야 한다. sop(same-origin policy) sop는 동일 출처 정책으로도 부른다. 불러온 문서, 스트립트의 출처가 다르면 리소스와의 상호장용하는 것을 제한하는 중요한 보안 방식이다. sop는 해로울 수 있는 문서를 분리하여 공격받을 수 있는 경로를 줄여준다. -출처의 정의 두 URL의 프로토콜, 포트(명시한 경우), 호스트가 모두 같아야 동일한 출처이다. 예를 들어서 http://store.company.com/dir/page.html과 출처를 비교하면 이런 결과가 나온다. CORS(Cross-Origin Resource Sharing) CORS는 교차 출처 리소스 공유라고도 하며, 추가 HTTP를 헤더를 사용해 실행 중인 웹 애플..

Link import { Link } from 'react-router-dom'; 로그인 하러가기 이렇게 Link를 써야 SPA가 유지된다. swr swr은 원격데이터 fetch를 위한 커스텀 훅 npm 모듈이다. useSWR(Key, Fetch) Fetch 함수를 이용해 key라는 주소에서 가져오는 데이터를 전역적으로 관리할 수 있다. 즉 swr은 데이터를 가져오기 위한 리액트 훅이다. -swr 활용 방법 swr은 비동기랑 get 요청에 얽매이지 않고 fetherPost 이렇게 만들어서 post 요청도 사용할 수 있다. 결국 swr로 전역 데이터를 관리할 수 있다는게 중요하다. 즉 전역 스토리지 역할을 할 수 있다. swr을 잘 활용하려면 백엔드에서 오는 데이터를 그대로 사용하는 것이 아니라 fethe..

관계 DB에는 여러 테이블이 있고 테이블끼리 서로 관계가 정의되어 있고 관계화살표로 나타낼 수 있다. -1 : 1 관계 예를 들면 유저당 이메일은 한 개씩 있다. 이런 경우 1 : 1 관계이다. 1 : 1 관계는 테이블을 2개로 나눠서 테이블 구조 이해가 쉽다. -1 : N 관계 예를 들면 쇼핑몰에서 유저가 여러 개의 상품을 장바구니에 넣을 수 있다. 이런 경우 1 : N 관계가 된다. 하나도 넣지 않는 0개의 경우도 있으니 이런 경우에는 화살표를 통해 표현해야 한다. 한 개체가 다른 여러 개체를 포함하는 관계이다. -N : M 관계 예를 들면 학생과 강의의 관계를 보면 학생은 여러 강의를 들을 수 있고 강의도 여러 명의 학생이 포함될 수 있다. 이런 경우 N : M이 된다. N : M 관계는 테이블을 ..

https://www.acmicpc.net/problem/18406 18406번: 럭키 스트레이트 첫째 줄에 점수 N이 정수로 주어진다. (10 ≤ N ≤ 99,999,999) 단, 점수 N의 자릿수는 항상 짝수 형태로만 주어진다. www.acmicpc.net 해결법 이 문제는 숫자를 입력 받고 mid로 왼쪽 값과 오른쪽 값을 나눌 수 있다. 그리고 left, right에 값을 저장하고 left와 right가 같으면 LUCKY를 출력하고 다르면 READY를 출력한다. 코드 n = input() ary = [] for i in range(len(n)): ary.append(int(n[i])) left = 0 right = 0 mid = len(n) // 2 for i in range(mid): left +..

CPU는 메모리에 올라와 있는 명령어를 실행할 뿐이다. 메모리 계층 메모리는 레지스터, 캐시, 메모리, 저장장치로 구성된다. -레지스터 CPU 안에 있는 작은 메모리이다. 휘발성 속도: 빠름 기억 용량: 가장 적음 -캐시 L1, L2 캐시이다. 휘발성 속도: 빠름 기억 용량: 적음 -주기억장치 RAM을 가리킨다. 휘발성 속도: 보통 기억 용량: 보통 -보조기억장치 HDD, SSD를 말한다. 비휘발성 속도: 느림 기억 용량: 많음 캐시(cache) 캐시는 데이터를 미리 복사해두는 임시 저장소이다. 그리고 장치간의 속도 차이에 따른 병목 현상을 줄일 수 있다. 실제로 메모리와 CPU 사이의 속도 차이가 너무 커서 레지스터 계층을 이용해서 속도 차이를 해결한다. => 이렇게 계층과 계층 사이에 있는 것을 캐시..

내 풀이 from collections import deque n = int(input()) ary = list(map(int, input().split())) ary.sort() ary = deque(ary) answer = 0 while ary: max = ary.pop() - 1 while True: if ary: ary.popleft() max -= 1 if max == 0: answer += 1 break else: break print(answer) 일단 각 인원들의 공포도를 입력 받고 오름차순으로 정렬한다. 그리고 answer에 완성된 팀의 수를 저장한다. 내가 푼 풀이로는 가장 큰 수를 max에 저장하고 그 인원이 들어왔으니 -1을 해서 저장한다. 그리고 공포도가 낮은 인원을 max가 0이..

해결법 이 문제는 위상 정렬로 풀면 되는 문제이다. 위상 정렬로 구현은 잘 했지만 디테일한 해결법은 생각하지 못했다. 처음에 각 과목이 걸리는 시간을 저장한 리스트를 만든 다음에 현재 노드에서의 시간과 다음으로 할 과목의 시간을 더한 값을 리스트에 갱신하면서 해결하면 된다. 이때 copy 라이브러리에서 deepcopy 함수를 사용한다. 이것을 사용하지 않으면 얕은 복사가 이루어져서 값이 꼬이게 된다. 자세한건 코드에서 보면 될 것 같다. 코드 from collections import deque import copy n = int(input()) indegree = [0] * (n+1) graph = [[] for i in range(n+1)] weight = [0] * (n+1) for i in ran..

axios Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트이다. 서버에서는 네이티브 node.js의 http 모듈을 사용하고, 클라이언트(브라우저)에서는 XMLHttpRequests를 사용한다. 사용법 -back 서버에 보내는 주소 리스트 https://github.com/ZeroCho/sleact/blob/master/API.md GitHub - ZeroCho/sleact Contribute to ZeroCho/sleact development by creating an account on GitHub. github.com axios .post('http://localhost:3095/api/users', { email, nickname, password, }) //..