짧은코딩

해결법 이 문제는 원하는 숫자 x의 가장 첫번째 위치와 마지막 위치를 구해서 빼면 되는 문제이다. -bisect 라이브러리 from bisect import bisect_left, bisect_right bisect_right(ary, x) bisect_left(ary, x) ary는 집합, x는 원하는 값 이렇게 작성하면 된다. 예를 들어 bisect_right는 정렬된 순서를 유지하면서 리스트 a에 데이터 x를 삽입할 가장 오른쪽 인덱스를 찾아준다. 시작 복잡도는 O(logN)이다. 교재 코드 from bisect import bisect_left, bisect_right n, x = map(int, input().split()) ary = list(map(int, input().split())) a..

input 리액트에서 input이 들어가면 웬만하면 컴포넌트로 빼는 것이 좋다. 안그러면 리렌더링이 너무 빈번하게 일어난다. toast 만약 어떤 것을 하다가 에러가 발생하면 사용자들에게 알려주기 위해서 toast를 사용한다. toast.error(error.response?.data, { position: 'bottom-center' }); 이 코드를 axios의 catch에 넣으면 된다. Route 첫번째 코드는 파라미터가 있는 주소이고 두번째는 아니다. 이렇게 하면 무조건 slack가 된다. 따라서 파라미터가 있는 주소를 밑에 적어줘야 한다. NavLink 그냥 Link와 비슷하다. 다른 점은 activeClassName을 줄 수 있다. 그래서 만약에 지금 주소와 링크의 주소가 같으면 activeC..

https://www.acmicpc.net/problem/10825 10825번: 국영수 첫째 줄에 도현이네 반의 학생의 수 N (1 ≤ N ≤ 100,000)이 주어진다. 둘째 줄부터 한 줄에 하나씩 각 학생의 이름, 국어, 영어, 수학 점수가 공백으로 구분해 주어진다. 점수는 1보다 크거나 같고, 1 www.acmicpc.net 해결법 이 문제를 처음 보고 너무 복잡하게 생각했다. 곰곰히 생각을 하다가 "이 지문에 나온 정렬 조건을 반대로 실행하면 어떨까?" 생각이 들었다. 그래서 구글링을 했고 파이썬에 다중 정렬을 봤다. 이 문법을 자주 사용했지만 매번 잊어버렸고 정식 이름을 알게된건 이번이 처음이다. 그레서 잘 기억해야 겠다고 생각했다. -다중 정렬 ary = sorted(ary, key = la..

Internert Protocol Suite Internert Protocol Suite는 프로토콜의 집합이다. 이를 TCP/IP 4계층 모델이나 OSI 7계층 모델로 설명한다. TCP/IP(Transmission Control Protocol/Internet Protocol) 4계층은 프로토콜의 네트워킹 범위에 따라 네 개의 추상화 계층으로 구성된다. 계층 구조 위에서 설명했듯이 TCP/IP 4계층 모델과 OSI 7계층 모델이 있다. OSI 7계층은 애플리케이션을 3개로 쪼개고, 네트워크 계층을 2개로 쪼갠 것이 다르다. 그리고 인터넷 계층을 네트워크 계층이라고 부르는 것도 다르다. 이 계층들은 특정 계층이 변경되어도 다른 계층에 영향을 받지 않는다. 이 사진은 각 계층을 대표하는 스택을 정리한 그림이..

패킷 교환 방식 -데이터 패킷 교환 방식 데이터를 전송하기 전 논리적 연결이 되어 있지 않고 패킷이 독립적으로 간다. 패킷을 수신한 라우터는 최적의 경로로 패킷을 전송하는데 분할된 여러 패킷은 서로 다른 경로로 전송될 수도 있다.(비연결 지향형) => 이 말은 송신 측에서 전송한 순서와 도착한 순서가 다를 수도 있다. 그리고 경로 설정을 여러 번 할 수 있다. -가상회선 패킷 교환 방식 데이터를 전송하기 전 논리적 연결이 설정된다.(연결 지향형) 각 패킷에 가상회선 식별 번호(VIC)가 포함되고 패킷이 전송한 순서대로 도착한다. 가상회선 방식은 경로 설정을 한 번만 한다. TCP(Transmission Control Protocol) TCP는 인터넷상에서 데이터를 메시지 형태로 보내기 위해 IP와 함께 ..

공통된 레이아웃을 사용할 때 공통된 레이아웃을 사용하기 위해서는 2가지 방법이 있다. 방법 1 -workspace test Sleact MenuScroll Chats {children} 이렇게 {children}을 레이아웃 부분에 넣는다. -컴포넌트 const Channel = () => { return ( {/* div 태그가 Workspace의 children이 된다. 즉 다른 컴포넌트 안에 넣은 jsx는 childre이 된다. */} 로그인하신 것을 축하드려요! ); }; 이렇게 각 컴포넌트에 가서 Workspace를 감싸면 div가 children 역할을 하게 된다. 방법2 공통 레이아웃인 Workspace 파일에 하면된다. const Channel = loadable(() => import('@..

https://www.acmicpc.net/problem/18352 18352번: 특정 거리의 도시 찾기 첫째 줄에 도시의 개수 N, 도로의 개수 M, 거리 정보 K, 출발 도시의 번호 X가 주어진다. (2 ≤ N ≤ 300,000, 1 ≤ M ≤ 1,000,000, 1 ≤ K ≤ 300,000, 1 ≤ X ≤ N) 둘째 줄부터 M개의 줄에 걸쳐서 두 개 www.acmicpc.net 해결법 -다익스트라(91% 정도에서 틀림) 사실 처음 보고 이 문제는 무조건 다익스트라로 풀어야겠다고 생각했다. 하지만 왜인지 91%에서 계속 틀렸다. -bfs(이게 정답) 1. distance에 모든 노드의 값을 -1로 저장하고 시작 노드만 0으로 바꿔준다. 2. queue를 만들고 시작 노드 번호를 담는다. 3. 연결되어..

gravatar gravatar은 유저의 이미지가 없을 때 랜덤한 이미지가 나오게 해주는 것이다. 예를 들어 깃허브에 가면 이런 이미지가 나온다. 이런 것들을 gravatar를 이용해서 구현할 수 있다. @types의 유무 npm으로 설치할 때 types를 붙어야할지 말지 모르는 상황이 있다. 상황에 따라서 에러가 발생할 수 있기 때문에 잘 알고 설치를 해야한다. 그럴 경우에는 공식 문서에 가서 확인해보면 된다. https://www.npmjs.com/package/@types/gravatar @types/gravatar TypeScript definitions for gravatar. Latest version: 1.8.3, last published: a year ago. Start using @ty..

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..