728x90 반응형 📌 Front End/└ React36 [React] 리액트 UI 컴포넌트 라이브러리 - Material UI, Ant Design, Chakra UI, Blueprint JS, Blueprint UI 📌 UI 컴포넌트 라이브러리버튼, 입력 필드, 체크박스 같은 화면 구성 요소를 모아둔 재사용 가능한 도구 모음개발자는 이 라이브러리를 사용해, 미리 만들어진 UI 컴포넌트로 화면을 쉽게 구성할 수 있습니다.Material UI (MUI)Ant DesignChakra UIBlueprint JSBlueprint UI📌 Material UI (MUI)Google의 Material Design을 기반으로 한 직관적이고 깔끔한 UI를 제공간단한 커스터마이징과 접근성 지원Google의 디자인 가이드라인(Material Design) 따름 MUI: The React component library you always wantedMUI provides a simple, customizable, and access.. 2024. 11. 26. [React] Next.js PM2 배포 가이드(서버 자동 재시작) - 리눅스, 윈도우 설정차이점 📌 PM2 란? PM2는 Node.js 애플리케이션을 백그라운드에서 안정적으로 관리하는 프로세스 매니저입니다.Next.js 서버를 PM2로 실행하면, 애플리케이션이 예기치 않게 종료되더라도 자동으로 재시작되며, 서버 로그 관리와 실시간 모니터링이 가능합니다. Next.js 프로젝트를 먼저 빌드(npm run build)한 후, PM2로 서버를 시작합니다. 안정성 : 서버가 중단되면 자동 재시작하여 안정적백그라운드 실행 : 터미널을 닫아도 서버가 계속 작동로그 관리 : 일반 로그와 오류 로그를 관리자동 재시작 : 애플리케이션이 크래시되더라도 자동으로 복구// ▶ ⚙️package.json "scripts": { "dev": "npx next dev", "build": "npx next b.. 2024. 11. 11. [React] Next.js 다국어(next-i18next) ES모듈 사용 시 에러 해결 방법 - CommonJS 🎯 GoalNext.js에서 next-i18next를 사용할 때, ES 모듈 관련 에러 해결⚠️ 문제 현상프로젝트 서버를 실행한 후 http://localhost:3000 으로 접속을 해보면react-i18next:: You will need to pass in an i18next instance by using initReactI18next 다음과 같은 에러가 발생합니다.react-i18next:: You will need to pass in an i18next instance by using initReactI18next🔑 에러 원인 next-i18next가 CommonJS 방식으로 작성되었기 때문에,ES 모듈 환경에서 사용하면 충돌이 발생하기 때문이다. ES 모듈 환경에서 require()를 사.. 2024. 10. 15. [React] Next.js로 React와 TypeScript 환경 설정하기 📌 Next.js + React + TypeScriptNext.js : React 기반 프레임워크React : UI를 구성하는 라이브러리TypeScript : 정적 타입을 추가하여 JavaScript의 기능을 향상시키는 언어 Next.js가 모든 개발, 빌드, 배포 과정을 통합적으로 관리합니다.즉, Next.js가 설치된 환경에서는 모든 작업을 수행할 수 있습니다.📌 Vite + React + TypeScript (기존 사용 방식)Vite : 빠른 개발 서버와 빌드를 지원하는 도구React : UI를 구성하는 라이브러리TypeScript : 정적 타입 추가 Vite가 개발 서버와 빌드를 처리하지만, 실제 배포는 별도로 진행해야 합니다.따라서 Vite를 사용할 경우, 배포 과정은 추가적인 설정이 필요합.. 2024. 10. 11. [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] 리액트에서 Nivo Chart 데이터 시각화 📌 니보차트 란? (Nivo Chart)Nivo Chart는 React에서 차트를 쉽게 구현할 수 있도록 도와주는 차트 라이브러리입니다.React의 컴포넌트 기반 구조에 맞게 차트를 적용할 수 있어서,React 스타일로 차트를 만들 수 있습니다. ❓ 차트가 필요한 이유차트는 2개 이상의 숫자 데이터를 시각적으로 표현하는 데 사용됩니다.글자로 된 데이터는 쉽게 설명할 수 있지만,숫자 데이터는 그 자체로 이해하기 어려울 때가 많습니다.차트를 사용하면 복잡한 숫자 데이터를 한눈에 파악할 수 있어,웹사이트나 애플리케이션에서 매우 유용합니다.🔎 차트를 만드는 3가지 방법 1. 순수 HTML자바스크립트가 비활성화된 브라우저에서도 차트를 표시할 수 있습니다.자바스크립트를 사용하지 않고 HTML만으로 간단한 차트를.. 2024. 10. 6. [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. 이전 1 2 3 4 다음 728x90 반응형
