vite6 [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] 리액트에서 Tailwind CSS 사용하기 📌 테일윈드 란? (Tailwind CSS)Tailwind는 유틸리티 우선(Utility-First) CSS 프레임워크입니다.여기서 "유틸리티 클래스"란, 버튼이나 모달 같은 요소를 구성하는 것이 아니라,빨간색 글자 색상이나 XL 사이즈 글자 크기처럼 각각의 CSS 속성과 값을 의미합니다. 즉, "유틸리티 우선"이라는 것은 Bootstrap처럼 미리 정의된 스타일을 사용하는 것이 아니라,사용자가 원하는 대로 각 속성 값을 적용할 수 있다는 뜻입니다.Bootstrap은 미리 정의된 클래스명만 사용할 수 있지만,Tailwind는 대괄호([])를 사용하여 사용자 정의 클래스명을 직접 지정할 수 있습니다.예를 들어, bg-[color]와 같이 사용할 수 있습니다. Tailwind에서 정의된 클래스를 사용하면,.. 2024. 9. 20. [React] React Vite TypeScript 개발환경 세팅하기 (Vite 설정 파일 - root: "./" 변경) 👉 선행작업이 필요합니다.이에 대한 방법은 아래 링크를 참고해 주시기 바랍니다.https://creative103.tistory.com/214 [React] Vite 를 이용한 React + Typescript 실행환경 세팅하기비트(Vite)란?Vite는 웹 개발을 위한 빠르고 간단한 빌드 도구입니다. Vue.js의 창시자인 Evan You가 개발하였으며, 이후 React, Svelte 등 다양한 프레임워크와 라이브러리에서 사용할 수 있도록creative103.tistory.com🗂️ 새 작업공간 폴더 생성🗂️ 기존 파일 - 복사해서 가져오기"📁components" 폴더 (main.tsx)"📜index.html" 파일"📜vite.config.ts" 파일"📜tsconfig.json" 파.. 2024. 8. 17. [React] React Vite TypeScript 개발환경 세팅하기 👉 선행작업이 필요합니다.이에 대한 방법은 아래 링크를 참고해 주시기 바랍니다.https://creative103.tistory.com/214 [React] Vite 를 이용한 React + Typescript 실행환경 세팅하기비트(Vite)란?Vite는 웹 개발을 위한 빠르고 간단한 빌드 도구입니다. Vue.js의 창시자인 Evan You가 개발하였으며, 이후 React, Svelte 등 다양한 프레임워크와 라이브러리에서 사용할 수 있도록creative103.tistory.com🗂️ 새 작업공간 폴더 생성🗂️ 기존 파일 - 복사해서 가져오기"📁components" 폴더 (index.html, main.tsx)"📜vite.config.ts" 파일"📜tsconfig.json" 파일"📜pa.. 2024. 8. 14. [React] Vite 를 이용한 React + Typescript 실행환경 세팅하기 비트(Vite)란?Vite는 웹 개발을 위한 빠르고 간단한 빌드 도구입니다. Vue.js의 창시자인 Evan You가 개발하였으며, 이후 React, Svelte 등 다양한 프레임워크와 라이브러리에서 사용할 수 있도록 확장되었습니다. 📌 Vite의 장점장점설명빠른 시작 속도기존 번들러에 비해 개발 서버 시작 속도가 매우 빠릅니다.개발 생산성HMR(핫 모듈 교체)를 통해 변경된 파일을 다시 로드하여 애플리케이션을 즉시 업데이트합니다.모던 개발 경험최신 JavaScript 기능과 ES 모듈을 기본적으로 지원합니다.작은 번들 크기Rollup을 통해 최적화된 생산 빌드를 생성하여 작은 번들 크기를 유지합니다. 📌 Vite 지원하는 템플릿JavaScriptTypeScriptvanillavanilla-tsvue.. 2024. 8. 14. 이전 1 다음 728x90 반응형
