본문 바로가기

전체 글109

[자료구조] sparse table 치토스 선배 강의 듣고 씀. 희소 테이블(sparse table) 희소 테이블(sparse table)은 배열 내 구간의 쿼리를 빠르게 수행할 수 있는 자료구조이다. 배열 arr[0, ..., N-1]이 아래와 같이 있다고 가정하고, i ~ j 구간에 대한 쿼리의 결과(예를 들어 구간 합)를 function(i, j)라고 두면 우선 sparse table 배열 d[i][0]에는 function(i, i) = arr[i]가 들어간다. 그 후 d[i][k]에는 function(i, i + 2^k - 1)이 들어간다. 이를 표로 그리면 아래처럼 된다. 즉 d[1][3]에는 1번 원소부터 시작해서 2^3 = 8개 원소의 합이 저장되어 있다. 만약 2~7 구간의 합을 구하고 싶다면, 이는 2~5 구간의 합 + 6.. 2020. 10. 9.
[알고리즘] Lazy Propagation 선배 강의 듣고 씀. 세그먼트 트리에서 업데이트는 O(logN)의 시간 복잡도를 가진다. 그런데 업데이트가 노드 하나하나가 아니라 구간으로 주어질 때, 그걸 일일이 업데이트를 해주면 느릴 수 있다. 그래서 구간 업데이트가 들어올 때마다 그걸 바로 적용해주지 않고, 업데이트가 있다는 내용을 따로 저장해놓고 나중에(lazy) 해당 노드를 방문할 때 처리한 후 자식 노드로 업데이트를 전파(propagation)해주는 방식이 lazy propagation이다. 이런 세그먼트 트리가 있을 때, 2~7 구간에 업데이트를 준다고 가정해보자. 일반적으로는 8, 9, 10, 23, 24, 12번 노드에 접근해서 위 부모 노드들까지 값을 업데이트시켜줄 것이다. 이런 식으로 하면 만약 업데이트되는 구간이 더 길어질 경우 시.. 2020. 10. 6.
[픽셀아트] 0926 Galaxy 도트 원본. 찍어놓고 나니까 애니메이션이 좀 들어가면 좋을 것 같았다. 근데 이동같은 간단한 건 그냥 프레임 애니메이션으로 넣는다 쳐도, 캐릭터 회전같은 건 도트로 하면 분명 깨질 것 같았다. 게다가 행성마다 다 이동 애니메이션 넣고 하면 엄청 꼬일 것 같았다. r-4bb1t.github.io/r4bb1t-playground/ 리액트 행성 돌아가는건 도트고 컴포넌트들 이동이나 밝기 변화는 CSS 애니메이션으로 넣었다! 생각보다 오래 걸렸다.캐릭터가 무중력에서 떠있는 느낌을 주고싶어서 회전이랑 상하 이동을 넣었는데 맘에 든다. 행성이라는 느낌을 주고 싶어서 리액트, C++, 유니티 로고들을 동글동글하게 넣었다. 리액트 로고가 행성으로 만들기에는 제일 적당했는데, 저 공전 궤도(?)들을 어떻게 그려야 할지가.. 2020. 9. 26.
[Motion] KUCC 인트로 영상 굵은 선 버전 얇은 선 버전 애프터 이펙트로 작업해봤다. 로고 디자인은 @희수형님. 로고 너무 귀여워서 이것저것 만들어보는데 재밌다. 선 굵기를 어떻게 할지 고민을 했었는데 그냥 둘 다 갖고 가기로 했다. 2020. 9. 10.
[테마] 핑크색이랑 보라색이 들어간 알고리즘 PPT 테마 이런 간단한 PPT를 만들 수 있는 테마이다. 작년에 동아리에서 알고리즘 세션을 진행할 때 만들어서 테마 이름은 알고리즘이다. 폰트는 나눔스퀘어! PPT에 쓰기 제일 무난하고 예쁘다. 2020. 9. 5.
[포스터] KUCC 20-2 리크루팅 사용 폰트 | 나눔스퀘어 처음에는 일러스트레이터로 처음부터 작업하려고 했는데 내가 일러를 잘 못 다뤄서... 스케치업으로 동아리방 구조를 만들고 투시를 빼서 아이소메트릭으로 만든 후 포토샵 패스로 선을 따서 작업했다. 2020. 9. 5.
[인증] JWT로 로그인 인증 1. 쿠키에 저장하기 로그인에 JWT를 사용할 경우, 아래와 같은 시나리오를 생각할 수 있다. 클라이언트에서 ID, Password로 로그인 요청을 보내면 서버에서 확인 후 토큰을 발급한다. 이 토큰이 "이 클라이언트가 로그인에 성공했음을 증명함" 증명서같은 역할을 하는 것이다. 그 이후에 클라이언트에서 요청을 할 때는 요청 헤더에 발급받은 토큰을 붙여서 보내면 서버에서는 해당 토큰이 유효한지만 검사하면 정보를 확인할 수 있다. 클라이언트에서 요청을 보낼 때 헤더에 토큰을 넣어서 보내려면, 토큰을 가지고 있어야 한다. 그러니까 어딘가에 저장해놓아야 한다는 뜻이다. 브라우저 메모리(react에서는 state)에 저장하면 한 번 렌더링될 때마다 다시 로그인을 해야 한다. local storage에 저장해놓으면, 따로 지우기 전까.. 2020. 8. 28.
[JWT] JSON Web Token JWT(JSON Web Token)은 JSON 객체로 정보를 암호화해 전달해준다. 구조 | Header, Payload, Signature의 세 부분으로 이루어져 있고 .으로 구분된 xxxxx.yyyyy.zzzzz의 형식이다. - Header { "alg": "HS256", "typ": "JWT" } 토큰의 타입 (일반적으로 JWT)과 JWT가 토큰에 서명할 때 사용하는 알고리즘(RS256, HS256)의 종류로 이루어져 있다. RS256은 SHA-256 함수를 이용한 RSA 암호화 방식을 의미한다. 즉 공개 키 암호화이다. HS256은 비밀 키 암호화이다. - Payload key-value의 한 쌍을 claim이라고 하는데, Payload에는 이런 claim들이 들어있다. Registered clai.. 2020. 8. 19.
[CSS] 스크롤바 커스텀하기 스크롤바 커스텀을 적용하고 싶은 CSS에 아래를 추가해주면 된다. ::-webkit-scrollbar { //width: 스크롤바 너비; } ::-webkit-scrollbar-track { //스크롤 영역 스타일 } ::-webkit-scrollbar-thumb { //스크롤 막대 스타일 } 예시 | ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: #eeeeee; } ::-webkit-scrollbar-thumb { background: linear-gradient(#c2e59c, #64b3f4); } 이런 식으로 그라디언트를 넣어줄 수도 있다. ::-webkit-scrollbar { width: 10px; } :.. 2020. 8. 5.
[GCP] 구글 클라우드 DNS에 도메인 연결하기 원래는 AWS Router53에서 구매하려고 했는데 원하는 도메인이 없어서 네임칩에서 도메인을 구입했다. 구글 클라우드에 기존에 만들어 놓은 인스턴스가 있어서 여기에 도메인을 연결하려고 한다. 우선 구글 클라우드 콘솔에서 Cloud DNS에 접속한다. 영역 만들기를 클릭한다. 각 필드를 적당히 입력해준다. 이렇게 네임서버 주소가 나온다. 레코드 모음 항목 추가를 누르고 A 레코드를 추가해주고, 연결될 서버 인스턴스 IP 주소를 입력해준다. 기존 도메인 구입처에서 네임서버를 위의 구글 네임서버 주소로 바꾸어 준다. 네임칩의 경우는 관리 패널에서 바꿀 수 있다. 이제 r4bb1t.dev로 들어가면 기존 인스턴스로 연결된다. DNS 설정 전에는 서버 IP 주소를 찾을 수 없다고 뜬다. DNS 설정 후에는 연결.. 2020. 7. 20.
[리액트] 이미지 업로더 - 서버에 이미지 Post로 보내기 https://r4bb1t.tistory.com/29를 이용해 클라이언트에서 서버에 이미지를 업로드하면 그 이미지를 표시해주는 업로더를 만들어보자. 클라이언트 | import React, { useState} from "react"; import * as S from "./styles"; import axios from "axios"; import AddAPhotoIcon from "@material-ui/icons/AddPhotoAlternate"; function ImageUploader() { const [imageUrl, setImageUrl] = useState("디폴트 이미지 주소"); const setFile = (e) => {}; return ( setFile(e)} /> ); } expo.. 2020. 7. 20.
[리액트] 드래그 앤 드롭, 리사이징 리스트 만들기 개요 | 드래그 앤 드롭으로 순서 변경 및 리사이징까지 가능한 리스트를 만들어보았다. 코드 예시는 맨 밑에 있다. 모듈 설치 | 우선 React DnD 모듈을 사용하기로 했다. 더보기 $yarn add react-dnd react-dnd-html5-backend immutable 드래그 앤 드롭을 원활하게 사용하기 위해 react-dnd 모듈을, Card들을 배열로 관리하기 용이하게 immutable 모듈을 설치해준다. 컴포넌트 만들기 | - Table Table이라는 전체 총괄 컴포넌트 안에 Card 컴포넌트 여러 개가 있고, 카드의 위치 변경이나 리사이즈 등 변화는 전부 Table에서 관리한다. Card에 props로 주는 정보는 카드의 id, 카드의 내용 (children), 카드의 크기(heigh.. 2020. 6. 2.

티스토리툴바