💕
후원
본문 바로가기

분류 전체보기113

[리액트] Scroll indicator 만들기 코드 | import React, { useState, useEffect } from "react"; import * as S from "./styles"; function ScrollTracker() { const pageHeight = document.body.scrollHeight - document.body.clientHeight; const [scrollY, setScrollY] = useState(0); useEffect(() => { const onScroll = () => { const s = window.pageYOffset; setScrollY(s); }; window.addEventListener("scroll", onScroll, true); onScroll(); return () .. 2020. 10. 31.
[리액트] 토스트 메세지 만들기 game-jam-2020.kucc.co.kr/의 참가 신청 버튼을 누르면 '신청이 마감되었습니다.' 라는 토스트 메세지가 뜨도록 만들었다. 일단 토스트 컴포넌트에서 고려해야 할 것들을 먼저 생각했다. 버튼을 누르면 보이기 일정 시간이 지나면 숨겨지기 보이고 숨겨질 때 애니메이션 넣기 토스트 컴포넌트 자체에 isActive (지금 메세지가 보이고 있는지) 라는 state를 넣으려고 했는데, 버튼으로 조작해야 하고, 이 페이지에서 토스트 메세지는 여기에서만 쓰니까 일단 페이지에 state를 만들었다. const [isActive, setIsActive] = useState(false); {setIsActive(true);}}> 참가 신청 토스트 컴포넌트에는 페이지에서 만들어준 state랑 state 세팅 함.. 2020. 10. 26.
[VS Code] prettier extention이 갑자기 적용이 안 될 때 prettier가 적용이 안 되는 문제가 생겼다. 데스크탑에도, 노트북에도 비슷한 시기에 같은 문제가 생겨서 알아보았는데 업데이트 이후에 그런 것 같아 방법을 찾아보았다. settings (윈도우 기준 Ctrl + ,)에 들어가서 formatter를 검색해 들어간다. 이렇게 null로 되어있는 부분을 esbenp.prettier-vscode로 변경한다. 잘 된다. 2020. 10. 23.
[알고리즘] 좌표 압축 치토스 선배 강의 듣고 씀. 좌표 압축 좌표의 범위가 막 ≤ 1,000,000,000으로 큰 경우가 있다. 이런 경우에 arr[1000000000] 같은 배열을 선언하면 당연히 터져버린다. [BOJ] 가로 블록 쌓기 문제 같은 경우 0 ≤ Wi + Di ≤ 2,000,000,000로 좌표 자체의 범위는 크지만, 들어오는 블록의 개수는 100,000개다. 즉 좌표로서 들어오는 수의 종류는 최대 200,000개 라는 뜻이다. 200,000개는 배열로 만들 수 있다. 만약 들어오는 좌표의 종류가 {1, 23434, 9495444, 124, 8, 249833876, 23434}이라면 이를 순서대로 정렬하고 {1, 8, 124, 23434, 23434, 9495444, 249833876}, 중복을 제거해 {1, .. 2020. 10. 9.
[자료구조] 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.

티스토리툴바