전체 글

Barrel Pattern(배럴 패턴) 이해하기: 소프트웨어 설계에서의 최적화 기법🧐 TL;DR- 배럴 패턴은 여러 개의 모듈을 하나의 파일(index.ts 또는 index.js)에 재정의해 단일 진입점으로 관리하는 패턴이다.- 복잡한 import 경로를 간결하게 만들어 가독성과 유지보수성을 향상시킨다.- 프론트엔드(React, Vue)와 백엔드(Node.js, NestJS) 모두에서 활용되며, 특히 컴포넌트나 유틸리티 모듈을 그룹화할 때 유용하다.- 주의할 점: 순환 참조나 불필요한 모듈 로딩 문제가 발생할 수 있으므로, 모듈 구조와 성능을 고려해 선택적으로 적용해야 한다.소프트웨어 개발에서는 코드의 유지보수성과 성능을 고려한 패턴이 필수적입니다. 그중에서도 Barrel Pattern(배럴 패턴) 은..

🧐 TL;DR- 단일 책임 원칙(SRP): 한 컴포넌트(또는 함수)는 한 가지 역할만 해야 한다- SRP 위반 시 문제점: UI, 상태 관리, 비즈니스 로직이 섞이면 유지보수 어렵고, 재사용성이 낮아진다- SRP를 적용하면 리액트 코드가 더 깔끔해지고 유지보수가 쉬워진다!리액트에서 단일 책임 원칙(Single Responsibility Principle, SRP)을 적용하면 컴포넌트의 유지보수성, 재사용성, 테스트 용이성을 크게 향상시킬 수 있습니다. 이 글에서는 SRP의 개념과 리액트에서 이를 적용하는 방법을 실제 코드 예제와 함께 알아보겠습니다.1. 단일 책임 원칙(SRP)이란?단일 책임 원칙(SRP)은 로버트 C. 마틴이 제안한 SOLID 원칙 중 하나로, 클래스나 모듈은 하나의 변경 이유만 가져..

Git Sparse Checkout: 필요한 파일만 선택적으로 가져오기 Git을 사용하다 보면, 전체 저장소를 클론(Clone)하는 것이 부담스러울 때가 있습니다. 특히 대형 저장소의 경우, 모든 파일을 받아야 하는 것이 비효율적일 수 있죠. 이럴 때 유용한 기능이 Git Sparse Checkout 입니다.이 글에서는 Git Sparse Checkout이 무엇인지, 어떻게 설정하는지, 그리고 실무에서 어떻게 활용할 수 있는지를 정리해 보겠습니다.1. Git Sparse Checkout이란?Git Sparse Checkout은 저장소의 특정 디렉터리나 파일만 로컬로 가져오는 기능입니다.즉, 전체 프로젝트를 클론 하지 않고 필요한 부분만 가져올 수 있어 디스크 공간과 네트워크 사용량을 절약할 수 있습니다...

[Create React App(CRA) 지원 종료: 무엇이 달라지나?]🧐 TL;DR- React 팀은 CRA 지원을 종료했으며, 신규 프로젝트에서는 사용하지 않는 것이 좋다.- CRA는 느린 빌드 속도, 유지보수 부족, 최신 대안(Vite, Next.js) 대비 성능 저하 등의 이유로 점점 뒤처졌다.- 새로운 프로젝트를 시작하려면 Vite(빠른 개발 속도) 또는 Next.js(SSR 지원)를 고려해야 한다.- 기존 CRA 프로젝트는 Vite 또는 Next.js로 마이그레이션하거나 Webpack 설정을 직접 관리해야 한다.- 앞으로 React 개발의 표준은 Vite와 Next.js가 될 것이므로, 이에 맞춘 개발 환경을 구축하는 것이 중요하다.1. 개요React 공식 블로그는 2025년 2월 14일, ..

틸드(tilde, ~) 연산자1. 개념틸드(~)는 비트 NOT(Bitwise NOT) 연산자로, 숫자의 모든 비트를 반전(invert)시킨 값을 반환한다.2. 동작 방식숫자의 2진수 비트 표현을 반전한다. (0 → 1, 1 → 0)반전된 값은 2의 보수(컴퓨터에서 음수를 표현하는 방식)로 해석된다.5 → 0000 0101~5 → 1111 1010 (이진수 음수 표현: -6)indexOf("banana") → 1~1 → -2 (Truthy, 값이 존재함)indexOf("orange") → -1~-1 → 0 (Falsy, 값이 없음)3. 활용틸드(~) 연산자는 비트 연산자이므로 정수 연산만 수행할 수 있는데, 이를 이용해 소수점 이하를 강제로 버리는 효과를 만들 수 있다.✅ 소수점 버리기console..

깃헙으로 팀 프로젝트를 효율적으로 진행하기 위해 Issue와 Pull Request를 주로 사용한다.무작정 사용하지 말고 템플릿으로 깔끔하게 관리해 보자Issue, 이슈작업 시작 전, Issue를 생성한다. 하나의 Issue는 하나의 기능 단위이다.작업에 맞는 템플릿을 선택하여 작성한다.이슈 템플릿 생성하기1. 레포지토리 - Settings2. General > Features > Issues > Set up templates3. 템플릿 선택 Custom template > Preview and edit4. 연필 아이콘을 눌러 편집템플릿 이름, 설명, 내용을 입력한다.5. 템플릿 작성 후 Propose changes 버튼을 클릭하여 등록(커밋)한다. 사용한 이슈 템플릿 예시Template nameIssu..

오늘의 문제외발뛰기(ID: JUMPGAME)https://algospot.com/judge/problem/read/JUMPGAME algospot.com :: JUMPGAME외발 뛰기 문제 정보 문제 땅따먹기를 하다 질린 재하와 영훈이는 땅따먹기의 변종인 새로운 게임을 하기로 했습니다. 이 게임은 그림과 같이 n*n 크기의 격자에 각 1부터 9 사이의 정수를 쓴 상algospot.com나의 풀이import syssys.stdin = open('input.txt', 'r')def solve(si, sj, a): global tmp tmp[si][sj] = a dij = ((1, 0), (0, 1)) x = board[si][sj] for di, dj in dij: n..

오늘의 문제백준 5904. moo 게임https://www.acmicpc.net/problem/5904나의 풀이import syssys.stdin = open('input.txt', 'r')# 총 수열 길이, 가운데 수열 길이, 구하려는 순서def solve(total_length, mid_length, N): if N 3k = 0while total_length 오늘의 회고- 분할 정복에 대해 이해하고 관련 문제들을 풀어봤다.- 문제를 2개 이상의 큰 부분 문제들로 나누는 기준을 찾는 것이 중요하다.

문제 https://www.algospot.com/judge/problem/read/QUADTREE algospot.com :: QUADTREE 쿼드 트리 뒤집기 문제 정보 문제 대량의 좌표 데이터를 메모리 안에 압축해 저장하기 위해 사용하는 여러 기법 중 쿼드 트리(quad tree)란 것이 있습니다. 주어진 공간을 항상 4개로 분할해 재귀적 www.algospot.com 문제 분석 및 알고리즘 설계 "x"라고 표현된 곳은 4분면으로 표현된다. 4분면: 왼쪽 위(lt), 오른쪽 위(rt), 왼쪽 아래(lb), 오른쪽 아래(rb) 상하반전을 하면 다음과 같이 변한다. x + 왼쪽 아래(lb), 오른쪽 아래(rb), 왼쪽 위(lt), 오른쪽 위(rt) 단, 상하 반전 시 가장 안쪽부터 바깥쪽까지 적용해야 ..