전체 글245 [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. [CMD] 특정 포트 강제 종료방법 1) 'CMD' ▶ '관리자 권한으로 실행' 클릭 2) netstat -ano 입력강제종료하고 싶은 포트번호가 8080이면, 우측 PID값 24840 기억한다. 3) taskkill /f /pid PID번호taskkill /f /pid 24840 입력하면 해당 8080포트 종료된다. 2024. 10. 7. [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. [React] Chakra UI 테마(Theme) - 사용자 정의 스타일 📌 Chakra UI 테마(Theme)디자인 시스템을 고려할 때, 웹 페이지에서 기본적으로 사용되는 색상이 있습니다.반복적으로 사용되는 색상은 변수화하여 관리할 필요가 있습니다. Chakra UI는 API를 통해 간편하게 사용자 정의가 가능하며, 테마 변경이 쉽습니다.재사용 가능한 UI 구성 요소를 빠르게 구축할 수 있도록 돕는 도구 키트로, React 위에 구축되어 있습니다.이 시스템은 테마 엔진을 사용하여 스타일을 지정합니다.📌 Chakra UI 테마 카테고리Chakra UI를 사용할 때 기본적으로 알아야 할 핵심 요소들입니다.이들을 통해 일관되고 유연한 디자인 시스템을 구축할 수 있습니다.아래와 같이 정해진 카테고리명을 사용합니다.카테고리설명components기본 컴포넌트의 디자인 / 속성 데이.. 2024. 9. 29. 이전 1 2 3 4 ··· 28 다음 728x90 반응형
