-
SVG 애니메이션 효과 버튼
React와 SVG 버튼으로 인터랙티브한 UI 만들기 React에서 인터랙티브한 버튼을 만드는 방법은 다양하지만, SVG를 활용하면 더 세밀하고 독특한 디자인을 만들 수 있습니다. react-svg-buttons 라이브러리는 이러한 SVG 버튼을 React 애플리케이션에서 쉽게 구현할 수 있게 도와주는 유용한 도구입니다. 1. react-svg-buttons란? react-svg-buttons는 React 컴포넌트로 SVG 그래픽을 이용해 아름답고 반응형인 버튼을 만들 수 있게 해주는 라이브러리입니다. 이 라이브러리는 SVG의 장점을 활용하여 확장 가능하고,…
-
nivo는 React와 D3.js를 기반으로 한 선언적 데이터 시각화 라이브러리
nivo는 React와 D3.js를 기반으로 한 선언적 데이터 시각화 라이브러리로, 서버 사이드 렌더링(SSR) 지원과 풍부한 커스터마이징 기능을 갖춘 “슈퍼차지드” 컴포넌트를 제공합니다. (GitHub, GitHub) 핵심 특징 지원하는 차트 유형Line, Bar, Pie, Scatterplot, Heatmap, Radar, TreeMap, Sunburst, Chord, Sankey, Stream, Calendar, Voronoi, Bump, Circle Packing, Choropleth, Swarmplot, Marimekko, Funnel, Radial Bar 등 20여 가지가 넘는 차트를 제공합니다. (nivo.rocks) 설치 방법 필요한…
-
hoc 란?
HOC(High-Order Component, 고차 컴포넌트)란 컴포넌트를 인자로 받아 새로운 컴포넌트를 반환하는 함수를 말합니다. 함수형 프로그래밍의 고차 함수(higher-order function) 개념을 React 컴포넌트에 적용한 패턴이죠. 1. HOC의 형태 2. 사용 예제 (1) 로딩 처리 HOC (2) 권한 검증 HOC 3. HOC의 장점 4. 주의할 점 5. HOC 대신 고려할 수 있는 패턴 훅이 도입된 이후로는 HOC보다 Custom Hook을…
-
SCSS 무엇인가?
SCSS(Sassy CSS)는 CSS의 확장 문법을 제공하는 스타일시트 언어인 Sass(Syntactically Awesome Style Sheets)의 “.scss” 문법을 가리킵니다. 한마디로, 기존 CSS 문법을 그대로 쓰되 그 위에 변수, 중첩, 믹스인, 함수, 상속 같은 프로그래밍적 기능을 추가해 줍니다. 주요 특징 변수(Variables) 중첩(Nesting) 믹스인(Mixins) & 함수(Functions) 상속(Extend/Inherit) 분할 관리(Partials & Import) SCSS 사용 흐름 Webpack, Gulp, Parcel 같은 빌드 도구나 Next.js,…
-
webpack 이란?
webpack은 최신 웹 애플리케이션 개발에서 널리 사용되는 모듈 번들러(module bundler) 입니다. 주요 역할 왜 필요한가요? 어떻게 동작하나요? webpack은 여러 소스 파일을 효율적으로 관리하고, 최적화된 번들 파일로 만들어주는 도구입니다. 대규모 프론트엔드 프로젝트에서 거의 필수적으로 사용됩니다.
-
vite
Vite는 모던 웹 개발을 위한 빠르고 효율적인 빌드 도구이자 개발 서버입니다. 주로 Vue.js 프로젝트에서 많이 사용되지만, React, Svelte 등 다른 프레임워크와도 잘 호환됩니다. Vite는 “빠른”을 의미하는 프랑스어 단어에서 유래하였으며, 개발 속도와 성능을 최우선으로 고려하여 설계되었습니다. Vite는 다음과 같은 주요 특징을 제공합니다: 1. 빠른 개발 서버 Vite는 **개발 중 실시간 핫 리로딩 (HMR, Hot Module Replacement)**을…
-
mongodb 데이터베이스 생성 및 계정 생성, 권한 부여
아래는 MongoDB에서 데이터베이스를 생성하고, 사용자 계정을 추가하며, 적절한 권한을 부여하는 방법에 대한 단계별 가이드입니다. 기본적으로 MongoDB는 사용자가 접속할 때 인증 없이 접속할 수 있도록 설정되어 있으나, 실제 운영 환경에서는 인증을 활성화하여 보안을 강화하는 것이 좋습니다. 1. MongoDB 셸 접속 MongoDB 서버가 실행 중이라면, 터미널 혹은 명령 프롬프트에서 아래와 같이 기본 mongosh (또는 이전 버전의 mongo…
-
AWS EC2 인스턴스 종류
AWS EC2 인스턴스는 다양한 유형의 애플리케이션 요구 사항을 충족하기 위해 여러 가지 인스턴스 패밀리(family)를 제공합니다. 각 인스턴스 종류는 CPU, 메모리, 스토리지, 네트워킹 등 특정 리소스에 최적화되어 있으며, 아래와 같이 주요 분류로 나눌 수 있습니다. 1. 범용(General Purpose) 인스턴스 • T 시리즈 (예: T3, T3a, T4g) •특징: 버스트 성능(Burstable Performance)을 제공하는 인스턴스로, 기본적인 작업량에는 낮은 비용으로…
-
노드 프로젝트 빌드 환경
1. 빌드 환경 빌드 작업의 특징 •CPU 집중적: TypeScript 컴파일이나 번들링 과정은 CPU 연산량이 많아 CPU 성능이 중요합니다. •메모리 사용: 파일 수나 모듈이 많다면 메모리 사용량도 늘어날 수 있습니다. 권장 사양 (예시) •인스턴스 유형: CPU 성능이 상대적으로 좋은 인스턴스 •예: c5.xlarge (4 vCPU, 8GB RAM) 또는 m5.xlarge • 빌드 서버 분리: •빌드 작업은 별도의 CI/CD…
-
React, Next 개발자가 알아야할 소프트웨어 및 기술
React와 Next.js 개발자가 알아야 할 주요 소프트웨어 및 기술을 소개합니다. 이 기술들은 프론트엔드 개발을 효율적으로 진행하는 데 필수적이고, 최신 웹 개발 환경에 적합한 도구들입니다. 1. 프론트엔드 개발 필수 소프트웨어 및 기술 1.1. 코드 편집기 및 IDE Visual Studio Code (VS Code) React 및 Next.js 개발에 가장 많이 사용되는 코드 편집기입니다. 다양한 플러그인과 확장 기능을 제공하여…