Learning

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..

인프런 "웹 프론트엔드를 위한 자바스크립트 첫 걸음" 강의를 듣고 학습한 내용을 정리했습니다. 강의 내용 자바스크립트 자바스크립트란? 웹페이지를 동적으로 만들어주기 위한 프로그래밍 언어 동적인 웹페이지란? 키보드의 입력이나 마우스클릭 같은 이벤트에 반응하고, 파일을 업로드와 같은 다양한 기능이 있는 웹페이지 모던 자바스크립트란? 자바스크립트의 버전은 ES 뒤에 숫자를 사용해 나타내는데, 모던 자바스크립트는 자바스크립트 ES6과 그 이후의 버전들을 모두 포함한 자바스크립트이다. 자바스크립트의 동작 자바스크립트 엔진이 들어있는 모든 곳에서 동작한다. 대표적으로는 크롬 브라우저의 V8 엔진이 있다. 이런 사람들에게 추천 프로그래밍을 처음 접하는 분들 프론트엔드 개발자를 희망하는 분들 자바스크립트 기초를 빠르고..

서론 2024.01.25 - [Study/ETC] - github page로 웹 사이트 만들기 github page로 웹 사이트 만들기 github repository에 올린 프로젝트를 페이지로 배포해 보자. github page란? https://docs.github.com/ko/pages/getting-started-with-github-pages/about-github-pages GitHub Pages 정보 - GitHub Docs GitHub Pages을(를) 사용하여 사용자, imhihi.tistory.com 이전에 github repo를 페이지로 만들어 배포했다. Setting에서 branch를 None에서 master로 바꾸면, master 브랜치가 자동으로 배포된다. 해당 설정을 완료하면 ..

📌 svg-tutorial 으로 학습한 내용을 정리했습니다. SVG Tutorial - Learn how to code images in HTML with SVG Learn the fundamentals of Scalable Vector Graphics (SVG) from the basics up to advanced concepts like animation and interactivity. svg-tutorial.com 2차 베지에 곡선으로 다양한 경로를 그릴 수 있다. 곡선에 끝 점을 설정하는 것 뿐만 아니라 제어점도 설정해야 한다. 제어점은 선이 구부러지기는 하지만, 닿지 않는 보이지 않는 좌표이다. 표정 여기서 제어점은 이미지 하단 중앙(0, 100)에 위치한다. 제어점이 반드시 두 끝점의 동일..

📌 svg-tutorial 으로 학습한 내용을 정리했습니다. SVG Tutorial - Learn how to code images in HTML with SVG Learn the fundamentals of Scalable Vector Graphics (SVG) from the basics up to advanced concepts like animation and interactivity. svg-tutorial.com 그라데이션으로 채우기와 3D 효과를 줄 수 있다. 크리스마스 장식 업그레이드 크리스마스 장식품을 업그레이드 하자. 기본 원을 그라데이션으로 채우민 미묘한 3D 효과를 추가할 수 있다. defs섹션에서 radialGradient를 정의한다. CSS와는 다른 구문이지만 비슷한 기능을 한다..