본문 바로가기
728x90
반응형

분류 전체보기267

[React] 리액트 SSR 렌더링 및 빌드 배포 가이드 - React Vite 프로젝트 SSR 📌 SSR(Server Side Rendering)SSR은 서버에 페이지에 대한 요청을 하고,서버로부터 HTML, JS, CSS 파일 및 데이터를 전달받아 렌더링하는 방식입니다.즉, 서버에서 렌더링을 수행하는 방법입니다. 🔎 SSR 과정 요약사용자가 접속합니다.서버에서 React를 실행합니다.서버에서 HTML 코드를 생성하여 완성된 과  🗄️ Express 서버 설정 (server.js)'📜server.js' 새 파일 생성Express 서버를 설정하고,클라이언트 요청에 대해 서버에서 생성된 HTML을 제공 root(최상위) 경로에 'server.js' 새 파일을 만든 후, 아래와 같이 코드를 작성합니다.이 코드는 Express라는 도구를 사용하여 웹 서버를 설정하는 내용입니다. 서버는 📁.. 2024. 10. 4.
[React] 리액트 CSR 렌더링 및 빌드 배포 가이드 - React Vite 프로젝트 CSR 📌 CSR(Client Side Rendering) CSR은 클라이언트 측에서 UI를 그리는 방식으로,처음에는 서버에서 빈 HTML 파일을 브라우저에 전달합니다.이후 자바스크립트가 실행되면서 클라이언트에서 UI가 렌더링됩니다.React와 같은 라이브러리는 자바스크립트가 실행되기 전까지 화면을 렌더링할 수 없기 때문에사용자는 처음에 잠시 동안 빈 화면을 보게 됩니다. 🔎 CSR 과정 요약사용자가 브라우저를 통해 서버에 접속합니다.서버는 자바스크립트 코드가 연결된 빈 HTML 파일을 브라우저로 전달합니다.브라우저는 자바스크립트 파일을 다운로드한 후 실행합니다.React 코드가 실행되면서 UI가 화면에 렌더링되고, 사용자에게 최종 화면이 보여집니다.  🔎 CSR로 React 앱 번들링개발 중에는 Vite.. 2024. 10. 4.
[React] 웹 렌더링 방식(CSR, SSR, SSG) 📌 웹 렌더링 이란?웹 렌더링은 서버에서 받은 데이터를 브라우저 화면에 표시하는 과정입니다.즉, 사용자가 웹사이트를 볼 수 있도록 페이지를 그리는 과정을 의미합니다.렌더링 방식에 따라 웹 페이지의로딩 속도, 검색 엔진 최적화(SEO), 사용자 경험(UX)이 달라질 수 있습니다. React는 기본적으로 CSR(클라이언트 사이드 렌더링) 방식을 사용하지만,여러 가지 렌더링 방법이 있으며 각 방법마다 장단점이 있습니다.🔎 렌더링 방식 비교 CSR (클라이언트 사이드 렌더링) 초기 로딩 시 서버에서 빈 HTML과 JavaScript 파일을 받아오고,  브라우저에서 JavaScript가 실행되어 콘텐츠를 동적으로 생성장점 : 페이지 전환이 빠르고 사용자 경험이 부드럽습니다.단점 : 초기 로딩 속도가 느리고 S.. 2024. 10. 2.
[React] Chakra UI 테마(Theme) - 사용자 정의 스타일 📌 Chakra UI 테마(Theme)디자인 시스템을 고려할 때, 웹 페이지에서 기본적으로 사용되는 색상이 있습니다.반복적으로 사용되는 색상은 변수화하여 관리할 필요가 있습니다. Chakra UI는 API를 통해 간편하게 사용자 정의가 가능하며, 테마 변경이 쉽습니다.재사용 가능한 UI 구성 요소를 빠르게 구축할 수 있도록 돕는 도구 키트로, React 위에 구축되어 있습니다.이 시스템은 테마 엔진을 사용하여 스타일을 지정합니다.📌 Chakra UI 테마 카테고리Chakra UI를 사용할 때 기본적으로 알아야 할 핵심 요소들입니다.이들을 통해 일관되고 유연한 디자인 시스템을 구축할 수 있습니다.아래와 같이 정해진 카테고리명을 사용합니다.카테고리설명components기본 컴포넌트의 디자인 / 속성 데이.. 2024. 9. 29.
[React] Chakra UI 이벤트 컴포넌트, Chakra UI 훅 - Accordion, Tabs, Modal, Drawer, Popover, useDisclosure 훅 📌 Chakra UI 이벤트 컴포넌트와 훅아코디언(Accordion), 탭(Tabs), 팝업(Modal), 사이드바(Drawer), 말풍선(Popover) 등과 같은  다양한 사용자 인터페이스 컴포넌트를 제공합니다. 이러한 컴포넌트는 사용자가 웹 애플리케이션을 더욱 편리하게 사용할 수 있도록 하며,  시각적인 효과를 통해 사용자 경험을 개선합니다. Chakra UI는 useDisclosure라는 커스텀 훅을 제공합니다. 이 훅은 Modal, Drawer, Popover 등의 컴포넌트에서  열림(Open), 닫힘(Close), 토글(Toggle) 상태를 간편하게 관리할 수 있습니다.📌 이벤트 관련 주요 컴포넌트와 훅분류내용아코디언(Accordion)여러 섹션을 접고 펼 수 있는 UI 컴포넌트탭(Tabs.. 2024. 9. 29.
[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.
728x90
반응형

티스토리툴바