전체 글
-
[BOJ / C++] 2343번 : 기타 레슨Study (etc)/Problem Solving 2026. 1. 6. 17:09
문제 링크https://www.acmicpc.net/problem/2343문제강토는 자신의 기타 강의 동영상을 블루레이로 만들어 판매하려고 한다. 블루레이에는 총 N개의 강의가 들어가는데, 블루레이를 녹화할 때, 강의의 순서가 바뀌면 안 된다. 순서가 뒤바뀌는 경우에는 강의의 흐름이 끊겨, 학생들이 대혼란에 빠질 수 있기 때문이다. 즉, i번 강의와 j번 강의를 같은 블루레이에 녹화하려면 i와 j 사이의 모든 강의도 같은 블루레이에 녹화해야 한다.강토는 이 블루레이가 얼마나 팔릴지 아직 알 수 없기 때문에, 블루레이의 개수를 가급적 줄이려고 한다. 오랜 고민 끝에 강토는 M개의 블루레이에 모든 기타 강의 동영상을 녹화하기로 했다. 이때, 블루레이의 크기(녹화 가능한 길이)를 최소로 하려고 한다. 단, M..
-
[TanStack Query] useInfiniteQuery를 활용한 무한스크롤Study (etc)/Troubleshooting 2025. 12. 5. 18:16
이 트러블슈팅은 롤페 프로젝트에서 수행되었습니다. GitHub - Team-Exiters/Roll-Pe_FEContribute to Team-Exiters/Roll-Pe_FE development by creating an account on GitHub.github.com 문제 상황 개요❓ 문제 상황'초대 받은 롤페' 페이지와 '내 롤페' 페이지에서 수많은 롤페 리스트를 그대로 제공해 사용성이 저하됨 위 이미지는 '초대 받은 롤페' 페이지와 '내 롤페' 페이지의 Figma 디자인이다.백엔드 팀원들이 기존 MVP 개발 과정에서는 UI만 확인하고 페이지네이션이 없는 전체 리스트 제공만 구현했었고, 따라서 기존 MVP에서는 20개든 40개든 모든 리스트를 한 번에 불러와 제공하고 있었다. 이는 롤페 데이터..
-
[Storybook] Claude Code를 활용해 Storybook을 만들어보자Study (etc)/Troubleshooting 2025. 11. 27. 01:46
이 트러블슈팅은 롤페 프로젝트에서 수행되었습니다. GitHub - Team-Exiters/Roll-Pe_FEContribute to Team-Exiters/Roll-Pe_FE development by creating an account on GitHub.github.com 문제 상황 개요❓ 문제 상황'롤페' 프로젝트 전역에서 사용되는 공통 레이아웃 컴포넌트들의 바리에이션이 많아 명확한 파악이 어려움 이전 LCP 개선(포스팅 링크)에 이어 계속해서 사이드 프로젝트 '롤페'의 리팩토링을 이어나가고 있다.롤페에는 버튼, 모달 등 서비스 전역에서 쓰이는 공통 레이아웃 컴포넌트들이 그렇게 많지는 않다. 하지만, 그들의 바리에이션이 많다.버튼의 경우를 예로 들면, onClickHandler가 필요한 요소로 감싸..
-
[FE] CDD (컴포넌트 주도 개발) feat. Atomic DesignWeb Programming 2025. 11. 26. 20:59
들어가며최근 한 프로젝트를 리팩토링하며 Storybook을 통해 컴포넌트들을 문서화하는 작업을 수행하고 있다.Storybook은 각 컴포넌트를 애플리케이션과 독립된 환경에서 렌더링해 보고 테스트를 수행해볼 수 있는 그런 컴포넌트의 문서화를 도와주는 도구인데, CDD를 위한 도구라는 표현이 왕왕 나올 정도로 CDD를 전제로 설계된 도구라고 한다. 그래서 Storybook을 쓰는데 CDD를 모르면 될까? 싶어서 심도있게 여러 자료들을 살펴보고 내가 배운 것을 정리해두려 한다. CDD (Component-Driven Development; 컴포넌트 주도 개발)컴포넌트 주도 개발론에 대해서는 아래 링크에서 자세하게 소개하고 있다. Component Driven User InterfacesHow modulari..
-
[Next.js] 온보딩 페이지의 LCP를 개선해보자.Study (etc)/Troubleshooting 2025. 11. 11. 22:51
이 트러블슈팅은 롤페 프로젝트에서 수행되었습니다. GitHub - Team-Exiters/Roll-Pe_FEContribute to Team-Exiters/Roll-Pe_FE development by creating an account on GitHub.github.com 문제 상황 개요❓ 문제 상황'롤페' 프로젝트의 온보딩 페이지 LCP가 dev 실행 기준 40.8초로 매우 많은 시간이 소요됨 멋쟁이사자처럼 부트캠프 플러스 5기 수료 후 열심히 구직 활동을 하며 건들여 볼 것이 없을까 싶어 예전 프로젝트들을 뒤져보던 중, 올해 초에 수행했던 사이드 프로젝트인 롤페 프로젝트의 lighthouse 감사를 수행해보았다. 접근성과 권장사항, SEO에 있어서는 매우 높은 평가를 받았지만, 성능 면에서 조금 부..
-
[4주차] 유니온 파인드 (Union-Find)Study (etc)/멋사FEPL05 알고리즘 스터디 2025. 10. 17. 01:13
4주차에서 다뤄야 할 내용 중 최소 스패닝 트리가 있는데, 최소 스패닝 트리를 위해서는 크루스칼 알고리즘을, 크루스칼 알고리즘을 알기 위해서는 유니온 파인드를 알아야 한다. 그래서 유니온 파인드를 먼저 포스팅해보려고 한다. 유니온 파인드 (Union-Find)유니온 파인드는 분리 집합(Disjoint Set) 또는 서로소 집합(Disjoint Set Union; DSU) 및 Union-Find 자료구조라고 한다.그렇다면 이 유니온 파인드라는 녀석은 무엇일까? 실생활에서의 예시를 들어보자. 탄지로, 젠이츠, 네즈코, 이노스케 네 사람은 처음에는 모르는 사이다. (그렇다고 치자고)그런데 탄지로가 모험을 하면서 친구들을 만들게 된다. 탄지로는 네즈코, 젠이츠, 이노스케와 친구 관계를 맺게 되었고, 직접적으로 ..
-
[BOJ / C++ / Pyton3] 2042번 : 구간합 구하기Study (etc)/Problem Solving 2025. 10. 15. 00:32
문제 링크https://www.acmicpc.net/problem/2042 2 초256 MB120606326051666226.465%문제어떤 N개의 수가 주어져 있다. 그런데 중간에 수의 변경이 빈번히 일어나고 그 중간에 어떤 부분의 합을 구하려 한다. 만약에 1,2,3,4,5 라는 수가 있고, 3번째 수를 6으로 바꾸고 2번째부터 5번째까지 합을 구하라고 한다면 17을 출력하면 되는 것이다. 그리고 그 상태에서 다섯 번째 수를 2로 바꾸고 3번째부터 5번째까지 합을 구하라고 한다면 12가 될 것이다.입력첫째 줄에 수의 개수 N(1 ≤ N ≤ 1,000,000)과 M(1 ≤ M ≤ 10,000), K(1 ≤ K ≤ 10,000) 가 주어진다. M은 수의 변경이 일어나는 횟수이고, K는 구간의 합을 구하는..
-
[4주차] 세그먼트 트리 (Segment tree)Study (etc)/멋사FEPL05 알고리즘 스터디 2025. 10. 14. 20:01
이번 주차에서는 자료구조를 응용하고 그래프 심화 알고리즘을 다룬다.하나하나가 다뤄야 할 양이 방대해서... 공부 내용 정리는 한 가지씩 해보려고 한다.오늘 다룰 내용은 세그먼트 트리 (Segment tree)다. 구간합(Prefix sum)을 구한다. (근데 값의 갱신이 있는...) 1차원 배열에서 구간합을 구한다고 생각해보자.널리 알려진 구간합을 구하는 알고리즘이 있으니 어렵지 않게 구할 수 있다. 원본 배열을 A, 이를 바탕으로 만드는 구간합 배열을 S라고 할 때 1 ~ i 구간의 구간합 배열 S는 아래와 같이 구할 수 있다.S[i] = S[i - 1] + A[i] 그리고 i ~ j 사이의 구간합을 구할 때에는S[j] - S[i - 1] 위 처럼 구한다는 사실은 너무나도 널리 알려져있다. 이 방식으..