분류 전체보기235 [Spring Boot] 스프링부트 Select a wizard에 jsp 검색 해결 방법 🎯 Goal스프링부트 Select a wizard에 jsp 파일 생성 해결할 수 있다.⚠️ 문제 현상파일을 추가하는 기능인 "Select a Wizard"에서 JSP가 나타나지 않을 때가 있습니다.💊 해결 방법1) 'Help' ▶ 'Eclipse Marketplace' 클릭 2) 'Work with' ▶ 'Install New Software' 설치 3) 스프링부트 재 시작 📝 조치 결과설치 후 스프링부트를 재 시작하면 JSP를 생성 해결된 모습을 확인할 수 있다. 2024. 9. 27. [React] Chakra UI 주요 컴포넌트, Chakra UI 요소 📌 Chakra UI 주요 컴포넌트Chakra UI는 React 기반의 UI 라이브러리로, 간단한 코드만으로 세련된 UI를 쉽게 구현할 수 있습니다.특히 레이아웃과 UI 요소를 위한 다양한 컴포넌트를 제공하여복잡한 페이지 구조를 간편하게 만들 수 있습니다.Chakra UI의 주요 레이아웃 컴포넌트와 자주 사용하는 UI 요소들을 살펴보겠습니다. 🔎 리액트 속성 정의Chakra UI 컴포넌트 옵션을 작성할 때, 아래 두 가지 방식을 사용할 수 있습니다. a=" " : 기본적인 HTML 속성 문법 a={} : React에서 사용되는 JSX 문법 📌 레이아웃 관련 주요 컴포넌트컴포넌트명설명Flex & Spacer유연한 레이아웃을 구성하는 Flex와요소 간의 간격을 균일하게 조정하는 Spacer를.. 2024. 9. 25. [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. 이전 1 2 3 4 ··· 27 다음 728x90 반응형
