본문 바로가기

분류 전체보기

 (81)
백엔드 데이터 요청 로직 개선 사례 공유 백엔드 이슈를 처리하는 과정에서 데이터 요청 로직을 수정하게 되었고,그 과정에서 발견한 개선 포인트와 실제 적용한 개선 내용을 공유드립니다.1. 불필요한 컬럼 조회 제거 (Attributes 명시)기존 문제기존 코드에서는 필요한 컬럼만 선택하지 않고, 연관된 모델 전체 컬럼을 조회하고 있었습니다.이로 인해 JOIN 대상에 content와 같은 대용량 컬럼이 포함되어 성능 저하 가능성이 있었습니다.개선 내용각 include 구문에 attributes 옵션을 명시하여 실제로 필요한 컬럼만 조회하도록 수정했습니다.개선 효과JOIN 시 사용되는 메모리 사용량 감소(특히 content와 같은 대용량 컬럼이 JOIN 대상에 포함되지 않도록 제한)DB ↔ 서버, 서버 ↔ 프론트엔드 간 전송되는 데이터 크기 감소전체 ..
Typography 프리셋 구조 개선 정리 1. 현재 구조Typography 프리셋을 함수형 컴포넌트로 정의하고, 내부에서 공통 Typography 컴포넌트에 스타일 props를 주입하는 방식.const Typography = ({ children, ...props }) => ( {children} );const StyledTypography = styled.div` font-family: 'SUIT', sans-serif; margin: 0; font-size: ${({ $fontSize }) => $fontSize}; ...`;// 프리셋export const Medium2Body2 = (props) => ( );현재 구조의 특징구조함수형 컴포넌트가 스타일 프리셋 역할을 함공통 Typography에 props를 주입하는 형..
React Portal 정리 1. 무엇인가?React Portal은 React 컴포넌트를 기존 부모 DOM 계층이 아닌, DOM 트리의 임의의 위치(예: 루트나 특정 엘리먼트)에 렌더링할 수 있게 해주는 기능입니다.즉, 계층 구조와 무관하게 원하는 위치에 컴포넌트를 그릴 수 있습니다.2. 왜 사용하는가?Portal은 부모 DOM 계층의 스타일/레이아웃/기능 한계를 극복하기 위해 사용합니다.레이아웃/스타일링 이슈 해결(예: 모달, 드롭다운, 툴팁 등)→ 부모 요소의 overflow: hidden, z-index, position: relative 등 스타일 속성 영향을 받지 않고, 원하는 레이어(예: 화면 맨 위)에 노출 가능접근성 개선→ 모달 등을 DOM 트리 최상단에 렌더링함으로써, 스크린리더나 키보드 네비게이션 등 보조기기가 올..
[Algorithm][LeetCode 3477][Easy] Fruits Into Baskets II 문제 설명두 개의 배열 fruits, baskets가 주어집니다.fruits[i]: i번째 과일의 수량baskets[j]: j번째 바구니의 용량다음 조건에 따라 과일을 왼쪽에서 오른쪽 방향으로 바구니에 담습니다.각 과일은 자신보다 크거나 같은 용량을 가진 바구니 중 가장 왼쪽에 있는 바구니에 들어갈 수 있습니다.각 바구니에는 한 종류의 과일만 담을 수 있습니다.들어갈 수 있는 바구니가 없다면, 해당 과일은 남겨집니다.반환값: 바구니에 들어가지 못한 과일의 개수 예시// 예시 1입력: fruits = [4, 2, 5], baskets = [3, 5, 4]설명:- fruits[0] = 4 → baskets[1] = 5에 배치- fruits[1] = 2 → baskets[0] = 3에 배치- fruits[2..
[Algorithm][LeetCode 3442][Easy] Maximum Difference Between Even and Odd Frequency I 문자열에서 홀수/짝수 빈도 차이 최대값 구하기 - JavaScript이번 글에서는 문자열 내 각 문자의 빈도를 분석하여, 홀수 빈도를 가진 문자와 짝수 빈도를 가진 문자 사이의 빈도 차이 중 가장 큰 값을 구하는 문제를 다룹니다.문제 설명주어진 문자열 s에서 다음 조건을 만족하는 차이 diff = a1 - a2의 최대값을 구합니다.a1: 홀수 빈도를 가진 문자a2: 짝수 빈도를 가진 문자제약 조건:3 ≤ s.length ≤ 100s는 소문자 알파벳으로만 구성홀수 및 짝수 빈도를 갖는 문자가 각각 최소 1개 이상 존재함예시// 예시 1입력: s = "aaaaabbc"'a' → 5 (홀수), 'b' → 2 (짝수)결과: 5 - 2 = 3// 예시 2입력: s = "abcabcab"'a' → 3 (홀수), '..
[Algorithm][LeetCode 2434][Medium] Using a Robot to Print the Lexicographically Smallest String 문제 설명문자열 s가 주어지고, 로봇은 비어 있는 문자열 t를 들고 있습니다.다음 두 가지 작업 중 하나를 반복할 수 있습니다:s의 첫 번째 문자를 제거해서 t의 끝에 붙입니다.t의 마지막 문자를 제거해서 종이에 적습니다.이 과정을 s와 t가 모두 비어질 때까지 반복하고, 종이에 적힌 최종 문자열이 사전순으로 가장 작아야 합니다.접근 방식스택: t는 후입선출 구조이므로 스택으로 모델링그리디: 매 순간 t의 마지막 문자가 앞으로 나올 문자보다 작거나 같으면 즉시 pop1. 현재 위치 이후에 가장 작은 문자 구하기현재 위치 이후에 가장 작은 문자를 알 수 있어야 그리디하게 판단할 수 있습니다.이를 위해 문자열 s를 뒤에서부터 스캔하여 minSuffix 배열을 만들어줍니다.// s[i:]에서 가장 작은 문자를..
[Algorithm][LeetCode 2929][Medium] Distribute Candies Among Children II 문제두 양의 정수 n과 limit이 주어졌을 때,세 명의 아이에게 사탕을 나누어 주는 방법의 총 수를 반환하시오. 단, 어떤 아이도 limit개를 초과해서 받을 수 없다.예시 1:Input: n = 5, limit = 2Output: 3설명: (1, 2, 2), (2, 1, 2), (2, 2, 1) 의 3가지 방법 존재예시 2:Input: n = 3, limit = 3Output: 10설명: (0,0,3), (0,1,2), (0,2,1), (0,3,0), (1,0,2), (1,1,1), (1,2,0), (2,0,1), (2,1,0), (3,0,0)제약 사항1 ≤ n ≤ 1061 ≤ limit ≤ 106풀이1. 브루트포스 접근법a, b의 값을 고정하면 c는 n - a - b로 자동 결정됩니다.하지만 lim..
[Problem Solving][git revert] 현업 Git 브랜치 전략: A 작업 일시 중단 후 B 작업 우선 배포 현업에서 개발 배포까지 완료된 A 작업을 잠시 중지하고, B 작업을 먼저 배포해달라는 요청을 받았습니다.이 상황에서 제가 문제를 해결한 방법을 정리해 공유드립니다.1. 브랜치 운영 구조main: 운영 배포 브랜치dev: 개발 서버 배포용 브랜치detail: 기능 개발 브랜치 (A, B 작업 진행)2. 기존 작업 흐름detail 브랜치에서 A 작업 수행A 작업을 dev 브랜치로 머지 → 개발 서버 배포QA 후 main에 머지하여 운영 배포3. 운영팀 요청A 작업을 운영에서 제외하고, B 작업을 먼저 반영해달라A 작업은 나중에 다시 적용할 예정4. 해결을 위한 선택지항목git revertgit reset기능커밋을 취소하는 반대 커밋 생성커밋 자체를 제거히스토리유지됨 (되돌리는 커밋이 추가됨)잘라냄 (되돌린 ..

티스토리툴바