Per ardua ad astra.

컴포넌트와 컴포넌트 비교 (React Router)들어가며리액트 라우터(React Router)에서 @@ 컴포넌트와 @@ 컴포넌트의 차이점에 대해 정리해본다.  컴포넌트개념리액트 라우터에서 제공하는 가장 기본적인 링크(Link) 컴포넌트특정 경로로 이동할 수 있는 내비게이션 링크를 생성한다.HTML의 @@ 태그와 유사하지만, 페이지 새로고침 없이 SPA(Single Page Application) 내에서 라우팅을 처리한다. 특징페이지를 새로 고침하지 않고, 클라이언트 측 라우팅을 수행한다.단순한 라우팅에 적합하다.선택된 상태에 따른 스타일링 기능은 없다. 사용 예시 코드import { Link } from "react-router-dom";function App() { return ( ..

리덕스(Redux), 리덕스 툴킷(Redux Toolkit)들어가며리액트(React.js)의 전역 상태 관리 라이브러리 중의 하나인 리덕스(Redux)와 리덕스 툴킷(Redux Toolkit)에 대해 정리해본다.  리덕스(Redux)개념자바스크립트 애플리케이션에서 상태 관리를 위해 사용되는 상태 컨테이너애플리케이션의 상태를 중앙에서 관리함으로써 상태 변화를 쉽게 추적하고, 디버깅을 단순화하며, 다양한 컴포넌트 간에 상태를 공유하는 것을 쉽게 해준다.리덕스를 사용하기 위해서는 아래의 명령을 실행하여 관련 패키지를 설치해준다.$ yarn add redux # npm install redux$ yarn add react-redux # npm install react-redux  리덕스..

모든 웹 브라우저에서 공통된 HTML 요소 스타일이 보여지도록 설정하는 방법 (normalize.css)들어가며모든 웹 브라우저에서 공통된 HTML 요소 스타일이 보여지도록 설정하는 방법에 대해 정리해본다. 방법normalize.css 사용하기normalize.css@normalize.css@는 다양한 브라우저에서 HTML 요소의 스타일을 일관되게 보이도록 만들어주는 CSS 파일이다.웹 브라우저마다 기본 스타일이 다르게 적용되기 때문에, 웹 페이지가 각각 다른 브라우저에서 다르게 보일 수 있다.이러한 불일치를 해결하기 위해 @normalize.css@는 각 브라우저의 기본 스타일을 초기화하거나 표준화하여, 웹 페이지가 어디서든 일관되게 보이도록 해준다.@normalize.css@는 모든 기본 스타일을 제..

Recharts 라이브러리들어가며리액트(React) 기반의 데이터 시각화 라이브러리인 Recharts에 대해 정리해본다. Recharts개념리액트(React) 기반의 데이터 시각화 라이브러리다양한 차트를 쉽게 생성하고 데이터를 시각적으로 표현할 수 있도록 도와준다.선언형 방식으로 리액트와 잘 맞으며, 그래프를 구성하는 데 필요한 여러 컴포넌트를 제공해 직관적으로 차트를 구성할 수 있도록 도와준다. 특징리액트 컴포넌트를 사용하여 차트를 구성하므로, 리액트의 상태(State)와 속성을 활용해 동적으로 차트를 업데이트할 수 있다.Recharts는 내부적으로 D3.js 라이브러리를 활용하여 차트를 렌더링한다.D3.js의 강력하고 다양한 기능을 리액트 컴포넌트 형태로 간편하게 사용할 수 있다.차트를 구성하는 요소..

Render들어가며애플리케이션 배포 및 호스팅 플랫폼 중 하나인 Render에 대해 정리해본다. Render개념클라우드 기반의 애플리케이션 배포 및 호스팅 플랫폼개발자들이 웹 애플리케이션, API, 정적 사이트 등을 손쉽게 배포하고 관리할 수 있도록 지원한다.복잡한 인프라 설정 없이도 자동으로 애플리케이션을 빌드하고 배포하며, 확장성과 안정성을 제공한다.스타트업이나 소규모 팀이 빠르게 애플리케이션을 배포하고 관리하는 데 유용하며, 복잡한 인프라 관리에 대한 부담을 줄여준다.Render는 데이터베이스, 백그라운드 작업 등 다양한 백엔드 서비스를 지원하여 풀스택 애플리케이션을 만드는 데에 적합하다. Cloud Application Platform | RenderOn Render, you can build, ..

Mockaroo들어가며가상 데이터를 생성해주는 도구인 Mockaroo에 대해 정리해본다. Mockaroo개념개발자와 데이터 분석가를 위해 현실적인 가상 데이터를 생성해주는 온라인 도구CSV, JSON, SQL, Excel 등 다양한 형식으로 최대 1,000개의 행을 무료로 생성할 수 있다. 주요 기능이름, 주소, 이메일 등 다양한 필드 타입을 제공하여 사용자 정의 데이터 생성이 가능하다.필드 이름, 데이터 타입, 옵션 등을 설정하여 원하는 데이터 구조를 만들 수 있다. CSV, JSON, SQL, Excel 등 여러 형식으로 데이터를 다운로드할 수 있다.가상 API를 설계하여 실제 API와의 상호 작용을 하게 할 수 있다. 사용 방법아래의 공식 홈페이지에 접속하여 필드 이름(Field Name)과 타입(..

테마 토글 기능 설정하기 (with shadcn/ui)들어가며Next.js를 이용하여 테마 토글 기능을 설정하는 방법을 정리해본다.이 게시글의 내용은 타입스크립트(TypeScript)와 shadcn UI 컴포넌트 라이브러리를 바탕으로 작성되었다. 방법① 색상 템플릿 코드를 전역 스타일시트 파일(@globals.css@)에 넣기아래의 사이트에서 자신에게 맞는 라이트/다크 모드 색상 템플릿을 선택한 후, 색상 코드를 복사한다. shadcn/uiBeautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.ui.shadcn.com 그리고 전역 스타일시트 파일(@/app/..

sr-only 클래스들어가며테일윈드(Tailwind) CSS에서 사용할 수 있는 @sr-only@ 클래스에 대해 정리해본다. sr-only 클래스개념시각장애인을 위한 스크린 리더(Screen Reader) 전용 클래스이 클래스를 사용하면 해당 요소가 화면에는 보이지 않지만, 스크린 리더를 사용하는 사용자에게는 읽힐 수 있도록 설정된다.시각장애인이 페이지를 탐색할 때 추가적인 정보를 제공할 수 있다. 사용하는 경우의미를 명확히 하기 위해 보조 텍스트를 추가할 때예를 들어, 아이콘 버튼에 추가 설명을 덧붙일 때접근성을 개선하기 위해 추가적인 텍스트가 필요하지만, 일반 사용자에게는 불필요한 정보를 숨기고 싶을 때 사용 예제 Settings CSS 스타일.sr-only { position: absolut..

미디어 쿼리(Media Query) 장치 화면 너비 브레이크포인트 정리들어가며CSS의 미디어 쿼리(Media Query)를 이용하여 반응형 디자인(Responsive Design)을 만들 수 있다.이때 사용할 수 있는 장치(Device)의 화면 너비 브레이크포인트(Breakpoint)에 대해 정리해본다. 장치 화면 너비 브레이크포인트Portrait 모드는 세로 화면, Landscape 모드는 가로 화면을 의미한다.장치브레이크포인트비고모바일320pxPortrait 모드예) iPhone 5, iPhone SE480pxLandscape 모드태블릿768pxPortrait 모드예) iPad태블릿 / 컴퓨터1024pxLandscape 모드컴퓨터1200px 이상Desktop, Laptop예제 코드/* 모바일 Port..

PropsWithChildren들어가며리액트(React.ts)에서 사용할 수 있는 @PropsWithChildren@ 타입에 대해 정리해본다.이 타입은 리액트와 타입스크립트를 함께 사용할 때 사용할 수 있다. PropsWithChildren개념타입스크립트(TypeScript)에서 리액트 컴포넌트에 자식 요소(@children@)를 허용하고자 할 때 사용하는 유틸리티 타입보통 컴포넌트에 전달되는 기본 @props@ 외에도 자식 요소를 포함할 수 있을 때 유용하게 사용된다.@PropsWithChildren@ 타입은 컴포넌트가 자식 요소를 가질 수 있도록 명시하며, @children@을 명시적으로 정의하지 않고도 사용할 수 있도록 해준다. 사용 예제import { PropsWithChildren } from ..

const Component vs. function Component들어가며리액트(React.js)에서 @const Component@ 형태의 화살표 함수 방식과 @function Component@ 형태의 함수 선언 방식으로 컴포넌트를 선언할 수 있다.위의 두 가지 방법에 대한 차이점을 정리해본다. ① 화살표 함수 방식const MyComponent = () => { return( .. )} 화살표 함수(Arrow Function)로 작성할 수 있으며, 짧은 코드로 작성할 수 있다는 장점이 있다.예를 들어, 한 줄로 반환하는 경우, @return@ 키워드를 생략할 수 있다.const MyComponent = () => ( ... ) 컴포넌트 선언과 동시에 @export default..

.gitignore 파일에 환경 설정 파일(.env) 등록하는 방법들어가며@.gitignore@ 파일에 환경 설정 파일(@.env@)을 등록하는 방법을 정리해본다. 방법@.gitignore@ 파일에 @.env@ 추가하기.gitignore@.gitignore@ 파일이 없을 경우 새로 생성해주고, 그 안에 @.env@을 추가해준다.# 환경 설정 파일.env (참고) @.gitignore@ 파일에 추가해도 무시되지 않을 경우만약 이미 @.env@ 파일이 Git에 의해 추적 중일 경우, @.gitignore@ 파일에 @.env@를 추가해도 무시되지 않는다.따라서 아래의 명령을 실행하여 Git 캐시에서 @.env@ 파일 추적 캐시를 제거해준다.$ git rm --cached .env

React Share 라이브러리들어가며React Share 라이브러리에 대해 정리해본다. React Share개념리액트 애플리케이션에서 다양한 소셜 미디어 공유 버튼을 쉽게 추가할 수 있도록 해주는 라이브러리여러 소셜 미디어 플랫폼에 링크를 공유할 수 있는 버튼을 제공하며, 간단한 설정을 통해 버튼을 커스터마이징할 수 있다. 주요 특징간단하게 설치할 수 있다.필요한 소셜 미디어 공유 버튼을 컴포넌트로 불러와 사용할 수 있다.버튼의 크기, 모양, 스타일을 쉽게 커스터마이징할 수 있으며, SVG 아이콘을 사용하여 스타일을 자유롭게 변경할 수 있다.다양한 소셜 미디어 플랫폼을 지원한다.Facebook, X(Twitter), LinkedIn, Pinterest, Telegram, WhatsApp, Line, R..