나의블로그

개요해당 카카오테크 블로그를 통해 무한스크롤을 많이 구현하는 것 같다.따라서 이 글은 저 블로그 코드가 어떻게 동작하는지에 대해 설명하고, 다음 글에선 난 어떤 방식으로 Intersection observer을 다룰건지에 대해 포스팅한다.tanstack-query의 useInfiniteQuery, intersection observer, 저 블로그글에 대해 접해본 사람이 본다면 좋을 것 같다. IntersectionObserser APIlet options = { root: document.querySelector("#scrollArea"), rootMargin: "0px", threshold: 1.0,};let observer = new IntersectionObserver(callback, op..

https://www.acmicpc.net/problem/13723 풀이양의 정수 X,Y이므로 부호에 따른 조건과 정수꼴로 나타내지는 조건(특정한 수로 나누는 것과 같은 조건)이 필요함을 추측할 수 있다1/N! = (X + Y)/XY양변에 N!XY를 곱해주자 XY = N!(X+Y)어떤 특정한 두 수를 곱하는 것으로 생각해볼 수도 있고 X와 Y의 관계로 나타내 볼 수 있다후자가 더 쉬워보이므로 후자를 해본다N!X + N!Y - XY = 0N!X + Y(N!-X) = 0N!X = Y(X-N!)N!X/(X-N!) = Y양의 정수만을 다루므로 해당 과정이 성립한다.X > N!이므로 X를 N!+k으로 생각할 수 있다. (k는 양의 정수(식을 정리해보자.X = N! + k 라면 Y = N!(N!+k)/k 이다.X는..

레포 링크 WSS기존 웹소켓 + Securehttp와 https 관계와 유사하다. 비대칭 공개키 인프라로 통신을 보호한다.서비스 이용자는 public key로 정보를 암호화한다.서비스 제공자는 private key를 소유한다. private key를 이용해 암호화한 정보를 해독한다. Self-sign 인증서개발자 또는 업체에서 자체적으로 서명한 TSL/SSL 인증서일반적으론 안전하지 않다고 여겨진다.openssl genrsa -out key.pem 2048openssl req -new -key key.pem -out csr.pemopenssl x509 -req -in csr.pem -signkey key.pem -out cert.pem터미널에 해당 커맨드를 입력한다.1. 2048 bit의 private ..

레포 링크 서론곧 sw마에스트로에서 험난한 기획평가가 끝나 개발을 시작할 예정이다.프로젝트에 실시간 통신 기술이 사용될 예정이라 미리 맛보고 싶었다.그래. 이름 들어본 web-socket으로 가자 웹소켓TCP/IP를 통해 서버와 브라우저간 양방향 연결을 유지한 채로 패킷 데이터를 교환하는 프로토콜브라우저와 서버간의 통신을 "웹"소켓이라고 한다.ws:// 프로토콜과 TSL layer을 거쳐 송신자 데이터가 암호화되는 wss:// 프로토콜로 나뉜다. https://처럼 후자가 권장된다.web socket은 hand shake 단계에서 클라이언트는 req를 보내 서버로부터 res를 받은 뒤 data를 송수신하는 과정으로 이루어진다. socket.io해당 라이브러리 없이도 ws를 통해 web socket 기능을..

문제https://www.acmicpc.net/problem/1633 풀이1000C30은 매우 큰 수이다. 게다가 적절한 30명을 구했다 해도 30C15는 상당히 큰 수이다. 따라서 브루트 포싱은 통하지 않는다.새로운 플레이어가 후보로 들어왔다고 하자. 현재 백은 x명, 흑은 y명이 선출했다.후보가 백이 된다면 백은 x+1, 흑은 y명이 될테고, 후보가 흑이 된다면 백은 x, 흑은 y+1명이 될 것이다.새로운 점수는 (백 x명, 흑 y명으로 구성 했을 때 점수) + 후보의 백 능력치 or (백 x명, 흑 y명으로 구성했을 때 점수) + 후보의 흑 능력치후보의 능력치와 관계없이 백 x명, 흑 y명으로 구성했을 때 점수는 최대가 되는 것이 최적이다. 그렇게 새로운 후보가 들어와도 결과적으로 적절한 팀을 구성..

문제https://www.acmicpc.net/problem/11834 풀이짝수와 홀수가 반복되는 것을 하나로 묶고 각각의 그룹을 레이어라 하자.레이어1: 1레이어2: 2 4레이어3: 5 7 9...문제의 정의대로 각 레이어에 공차가 2인 등차 수열이 들어있다.레이어 i와 i+1의 관계를 알아보자.레이어 i의 시작을 s(i), 레이어 i+1의 시작을 s(i+1)라고 하자.해당 관계가 성립한다.s(i) + 2*(i-1) + 1 = s(i) + 2i - 1 = s(i+1)따라서 s(i+1) - s(i) = 2i - 1그럼 각 레이어의 시작을 구할 수 있다.s(1) = 1s(i) = s(1) + (1 + 3 + 5 + ... + 2(i-1)-1) = 1 + (i-1)^2N이 어떤 레이어 L에 속하는지 알려면,..

1. 저장소 아키텍쳐우린 백/프론트모두 js(ts)로 개발할 예정이다. 따라서 멘토님이 모노레포 아키텍쳐를 추천해주셨다.멀티레포 아키텍쳐는 변경사항이 배포돼야 다른 저장소에서 접근 가능하다.하지만, 모노레포는 변화가 실시간으로 반영된다. 이것은 양날의 검이다. 만약 버그가 있는 채 또는 구현 도중 pull을 한다면 동작이 안될 것이다. 그리고 별도로 공부하고 고민한 결과 모노레포만의 장점들이 존재한다.1. 모든 서비스에서 적용되는 공용코드들을 여러번 생성할 필요가 없다.2. 관리엔드포인트가 하나로 줄어든다.3. 생각보다 프로젝트 생성 후 배포까지 고려해야할 사항들(ci/cd, 환경 구축 등)이 많은데, 이 작업을 줄일 수 있다.게다가, 소규모협업이고 팀원 모두가 백, 프론트를 넘어들 예정이라 긍정적인 생..

폭포수 모델요구사항 분석 -> 설계 -> 구현 -> 검증제조쪽에서 많이 사용하나1. 가치를 측정하기 까지 시간이 오래걸리며2. 시간을 많이 소비해 완벽한 문서화가 필요3. 분리된 책임 및 의사소통 한계따라서 빠른 템포의 소프트웨어 시장에 맞지 않는 경우가 생길 수도 있음소프트웨어 개발은 무엇을 어떻게 만들지 잘 알지 못하고 고객이 무엇을 원하는지 정확히 알지 못함  애자일: 빠르고 날렵한(지향점)1. 공정과 도구 2. 포괄적 문서 3. 계약 협상 4. 계획에 충실 반복적으로 빠르게! 스크럼일을 출시 가능한 작은 단위 목록으로 작성INVEST 사용자 스토리를 토대로개발 시 클라,서버,DB를 vertial 하게 작은 단위로 쪼개기주기적인 계획, 배포, 회고의 스프린트 칸반명백한 역할 정의가 없이 필요시에 배..

문제 https://www.acmicpc.net/problem/31741 풀이 쉬운 문제 가정 2개만을 이용해 구간을 덮는 문제의 풀이 선분을 2개로 나눈다. a. 시작점이 S이하인 선분을 담는 배열 A b. 끝점이 E이상인 선분을 담는 배열 B A를 순회하며 B에서 이분 탐색으로 다음을 찾는다. 이분 탐색을 위해 B를 시작점을 기준으로 정렬한다. B의 시작점이 A의 끝점 이하인 선분 중 시작점이 제일 큰 선분 = B에서 시작점이 A 초과인 선분의 바로 전 인덱스 선분 찾기 이를 통해 오차의 최솟 값을 구할 수 있다. 이는 B를 순회하며 A에서 이분 탐색으로 A의 끝점이 B의 시작점 이상인 선분 중 끝점이 제일 작은 선분을 찾는 것으로도 풀 수 있다. 원래 문제로 돌아가기 추가적인 선분 분류를 만든다. ..

time based revalidation과 비교해 주문형 재검증은 강력한 캐시 재검증을 한다. 서버액션을 통해 revalidateTag('tag')를 한다면 라우터 캐시, 풀 라우트 캐시, 데이터캐시를 모두 재검증한다. 데이터캐시의 경우 태그에 대응하는 캐시를 PURGE해서 다음 fetch에는 CACHE MISS를 발생시킨다.