728x90 반응형 📌 Front End147 [React] 리액트에서 Chakra UI, Chakra Icons 사용하기 📌 차크라 란? (Chakra UI)Chakra UI는 React용 디자인 시스템을 제공하는 라이브러리로컴포넌트 기반 스타일링과 테마 설정을 통해 쉽게 스타일을 적용할 수 있습니다. 컴포넌트 기반 스타일링 다양한 기본 컴포넌트를 제공해, 이를 활용해 빠르게 스타일을 적용할 수 있습니다.테마 설정 테마 설정을 통해 전체적인 스타일 일관성을 유지하고, 쉽게 커스터마이징할 수 있습니다.반응형 디자인 기본적으로 반응형 디자인을 지원하여 다양한 디바이스 환경에 대응할 수 있습니다.접근성 웹 접근성을 고려한 컴포넌트를 제공하여, 접근성을 높일 수 있습니다.📌 Tailwind CSS vs Chakra UI 테일윈드(Tailwind CSS) 개별 스타일을 유틸리티 클래스를 통해 직접 정의하는 방식 차크라(Chak.. 2024. 9. 25. [React] Tailwind CSS 커스텀(Custom) 설정 - tailwind.config.js 옵션, Tailwind CSS 선택자(가상클래스, 가상요소, 미디어쿼리, 반응형) 📌 Tailwind CSS 커스터마이징 (tailwind.config.js)Tailwind는 기본적으로 제공되는 유틸리티 클래스를 사용해 빠르게 스타일링을 할 수 있지만,각 프로젝트의 필요에 따라 커스터마이징이 필요할 때가 있습니다.이를 위해 tailwind.config.js 파일을 활용하여 필요한 스타일을 쉽게 정의할 수 있습니다.📝 설정 파일(tailwind.config.js) 구조'📜tailwind.config.js' 파일은 Tailwind를 커스터마이징하는 핵심 파일입니다.여기에서 theme, variants, plugins, darkMode 등의 설정을 추가하여 프로젝트에 맞는 스타일을 정의합니다./* 📜 tailwind.config.ts *//** @type {import('tailwi.. 2024. 9. 23. [React] 리액트에서 Tailwind CSS 사용하기 📌 테일윈드 란? (Tailwind CSS)Tailwind는 유틸리티 우선(Utility-First) CSS 프레임워크입니다.여기서 "유틸리티 클래스"란, 버튼이나 모달 같은 요소를 구성하는 것이 아니라,빨간색 글자 색상이나 XL 사이즈 글자 크기처럼 각각의 CSS 속성과 값을 의미합니다. 즉, "유틸리티 우선"이라는 것은 Bootstrap처럼 미리 정의된 스타일을 사용하는 것이 아니라,사용자가 원하는 대로 각 속성 값을 적용할 수 있다는 뜻입니다.Bootstrap은 미리 정의된 클래스명만 사용할 수 있지만,Tailwind는 대괄호([])를 사용하여 사용자 정의 클래스명을 직접 지정할 수 있습니다.예를 들어, bg-[color]와 같이 사용할 수 있습니다. Tailwind에서 정의된 클래스를 사용하면,.. 2024. 9. 20. [React] 리액트에서 CSS 적용하는 여러가지 방식(Import, 인라인, CSS Module, Styled-Components) 📌 React에 CSS 적용하기 create-react-app으로 만든 React 프로젝트에서는 CSS를 사용하기 위해 따로 설정할 필요가 없습니다.기본적으로 CSS를 다룰 수 있도록 준비되어 있습니다. css-loader @import, url() 등 CSS 파일에서 다른 파일을 불러오거나 이미지를 사용할 수 있게 도와줌 style-loader 태그를 통해 CSS를 DOM에 적용 📌 React에서 CSS 처리방법Import (전역 방식)인라인(inline) 스타일CSS Module (클래스명이 고유한 해시값으로 변환) Styled-Components 라이브러리 🔎 Import (전역 방식)가장 기본적인 방법으로, 컴포넌트에서 CSS 파일을 직접 import하여 사용합니다.className 속성을.. 2024. 9. 20. [React] MobX 상태 관리, 비동기 작업, 이벤트 시스템(action, computed, runInAction, autorun, reaction, when) 📌 MobX 6 주요 개념MobX 6부터는 @observable, @action, @computed 와 같은 데코레이터 문법 대신makeObservable과 makeAutoObservable을 사용해상태와 메서드를 명시적으로 설정하는 것이 권장됩니다.📌 관찰 가능한 상태(Observable) / 상태 변경 메서드(Action) Observable 상태가 바뀌면 자동으로 감지하고, 이를 사용하는 컴포넌트를 자동으로 업데이트 Action 상태를 변경하는 메서드, 여러 변경을 그룹화하여 성능 개선 makeAutoObservable 클래스의 생성자에서 호출하면 모든 속성과 메서드를 자동으로 observable 및 @action으로 설정 makeObservable 클래스의 속성을 observable로 만들고.. 2024. 9. 13. [React] MobX 상태 관리 라이브러리 📌 MobX (전역 상태 관리) 상태 관리 라이브러리는 여러 컴포넌트 간의 상태를 쉽게 관리할 수 있도록 돕는 도구입니다.MobX는 전역적으로 상태를 관리할 수 있는 스토어(Store)를 제공하여,상태를 한 곳에서 관리하고 필요할 때 접근할 수 있게 합니다.이를 통해 컴포넌트 간에 상태를 계속 전달하지 않아도 되어 상태 관리가 간단해집니다. 📌 MobX 작동 원리MobX는 단방향 데이터 흐름을 기반으로 작동합니다.MobX에서의 상태 관리 과정은 다음과 같은 단계로 이루어집니다. Actions (액션) 상태를 변경하기 위한 함수 사용자가 어떤 동작을 취하면 그에 따라 상태를 변화시키는 역할 Observable State (관찰 가능한 상태) MobX에서 관리하는 데이터 이 데이터는 여러 컴포넌트에.. 2024. 9. 11. [React] 리액트 동적 라우팅(Dynamic Routing) - useLocation, useNavigate, useParams, useSearchParams 📌 동적 라우팅(Dynamic Routing)웹 애플리케이션에서 클라이언트의 요청에 따라 경로를 동적으로 처리하는 라우팅 방식입니다.사용자의 입력, 상태 변화, 또는 다양한 조건에 따라 서버가 어떤 페이지나 리소스를 제공할지 결정합니다.이는 사전에 경로가 고정된 정적 라우팅(Static Routing)과 다르게,실행 시점에 라우팅 규칙이 결정되는 특징이 있습니다. Path Parameter(경로 매개변수) URL에서 하나의 정보를 전달할 때 사용합니다. 특정 목록에서 상세 페이지로 이동할 때 /about/sohyun처럼 사용Query Parameter(쿼리 매개변수) URL에서 여러 정보를 전달할 때 사용합니다. 페이지네이션이나 필터링 기능을 구현할 때 /about?name=sohyun처럼 사용 .. 2024. 9. 6. [JavaScript] 자바스크립트 구조 분해 할당 📌 구조 분해 할당(Destructuring assignment)구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식이다. 개발을 하다 보면 함수에 객체나 배열을 전달해야 하는 경우가 생기곤 한다. 가끔은 객체나 배열에 저장된 데이터 전체가 아닌 일부만 필요한 경우가 생기기도 한다. 이럴 때 객체나 배열을 변수로 '분해’할 수 있게 해주는 특별한 문법인 구조 분해 할당(destructuring assignment) 을 사용할 수 있다.📌 배열 분해구조 분해 할당 [first, second, third] = numbers는 numbers 배열의 값을 별도의 변수 first, second 및 third로 추출합니다.// Example .. 2024. 9. 4. [React] 리액트 라우터 돔(React Router DOM) - BrowserRouter, Routes, Route, Outlet, Link, NavLink 📌 리액트 라우터 돔(React Router DOM)리액트 애플리케이션에서 페이지 간 이동(라우팅)을 쉽게 처리하기 위한 라이브러리입니다. 이 라이브러리를 사용하면 리액트 앱을 여러 페이지처럼 구성하고, 각 페이지의 URL 경로를 정의할 수 있습니다.📌 SPA(Single Page Application)SPA는 기존 웹사이트와 다르게 한 개의 HTML 페이지에서 모든 작업을 처리하는 방식입니다. 일반 웹사이트는 사용자가 새로운 페이지로 이동할 때마다 페이지 전체를 새로고침하지만, SPA는 필요한 부분만 업데이트합니다. 이렇게 하면 속도도 빠르고 트래픽도 절약할 수 있습니다.📌 React Router 주요 패키지react-router : 웹과 앱 모두에서 사용할 수 있는 기본 라우터 라이브러리reac.. 2024. 9. 4. 이전 1 2 3 4 5 6 ··· 17 다음 728x90 반응형
