react20 [React] 서버리스 아키텍처와 클라우드 컴퓨팅 - IaaS, PaaS, BaaS, FaaS 📌 서버리스 란? (Serverless)서버리스는 이름에서 알 수 있듯이, 개발자가 서버를 직접 관리하지 않아도 되는 컴퓨팅 모델입니다.실제로 서버는 존재하지만, 클라우드 서비스 제공업체가 모든 서버 관련 작업(설치, 유지보수, 스케일링 등)을 처리해 줍니다.따라서 개발자는 비즈니스 로직에 집중할 수 있습니다.📌 클라우드 컴퓨팅 모델IaaS (Infrastructure as a Service) PaaS (Platform as a Service) BaaS (Backend as a Service) FaaS (Function as a Service)🔎 IaaS (Infrastructure as a Service)IaaS는 개발자가 직접 서버를 설정하고 관리하는 클라우드 서비스이 서비스는 기본적인 IT.. 2024. 10. 10. [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] 리액트에서 Tailwind CSS 사용하기 📌 테일윈드 란? (Tailwind CSS)Tailwind는 유틸리티 우선(Utility-First) CSS 프레임워크입니다.여기서 "유틸리티 클래스"란, 버튼이나 모달 같은 요소를 구성하는 것이 아니라,빨간색 글자 색상이나 XL 사이즈 글자 크기처럼 각각의 CSS 속성과 값을 의미합니다. 즉, "유틸리티 우선"이라는 것은 Bootstrap처럼 미리 정의된 스타일을 사용하는 것이 아니라,사용자가 원하는 대로 각 속성 값을 적용할 수 있다는 뜻입니다.Bootstrap은 미리 정의된 클래스명만 사용할 수 있지만,Tailwind는 대괄호([])를 사용하여 사용자 정의 클래스명을 직접 지정할 수 있습니다.예를 들어, bg-[color]와 같이 사용할 수 있습니다. Tailwind에서 정의된 클래스를 사용하면,.. 2024. 9. 20. [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. [React] 리액트 Children Props(props.children 사용) 📌 Children Props리액트 모든 컴포넌트에서 children props를 사용할 수 있습니다. children props란 컴포넌트의 여는 태그와 닫는 태그 사이의 내용입니다. 사용예시이 태그에서 Hello world! 문자열이 Welcome 컴포넌트의 children props로 전달이 되어 접근할 수 있습니다.function App() { return Hello world!}function Welcome(props) { return {props.children};}📌 합성(Composition)과 props.children 🔎 children 이란?props.children은 React 컴포넌트의 특별한 props입니다.컴포넌트가 다른 컴포넌트를 포함할 때, 그 안에 들어가는 내용을.. 2024. 9. 3. [React] 리액트 훅 - 커스텀 훅(Custom Hook) 📌 사용자 정의 훅(커스텀 훅)React에서 커스텀 훅(Custom Hook)은 상태 로직(stateful logic)을 재 사용할 수 있도록 하는 기능이다. 이는 여러 컴포넌트에서 공통적으로 사용되는 상태 로직을 추출하여 하나의 함수로 만들어 사용할 수 있도록 한다. 커스텀 훅은 보통 use라는 접두사를 사용하여 함수의 이름을 정의하며, React의 기본 내장 훅(useState, useEffect 등)을 이용하여 구현된다. JSX 코드나 렌더링과 관련된 코드를 포함해서는 안 되며, 컴포넌트 내부나 외부에서 호출하여 사용한다. 커스텀 훅을 사용하면 코드의 중복을 줄이고, 컴포넌트의 재사용성과 유지보수성을 높일 수 있다.예를 들어, API 호출, 폼 데이터 관리, 타이머/애니메이션 등의 다양한 기능을 .. 2024. 9. 2. 이전 1 2 3 다음 728x90 반응형
