전체 글247 [Spring Boot] 스프링부트 WAR 빌드, Tomcat 서버 WAR 배포 및 도메인 설정 📌 스프링부트 도메인 사용 배포 스프링부트에서 도메인(DNS)을 사용하려면,JAR 빌드 방식이 아닌 WAR 빌드 방식으로 배포해야 합니다.WAR 파일은 웹 애플리케이션 아카이브로, Tomcat과 같은 서블릿 컨테이너에 배포하기에 적합합니다.도메인 설정을 하려면 반드시 WAR로 빌드해야 합니다.JAR는 간편하지만 도메인 연결에 한계가 있으며, WAR는 웹 서버와 통합하여 도메인 설정이 가능합니다. 🔎 JAR, WAR 차이 JAR 파일 스프링 부트 애플리케이션을 독립적으로 실행내장 톰캣 서버 사용도메인 설정이 어렵고, 주로 개발 및 테스트에 적합 WAR 파일 전통적인 웹 애플리케이션 배포 형식외부 웹 서버(Nginx, Apache 등)에서 실행여러 도메인을 쉽게 관리하고 설정할 수 있음📌 Maven을 .. 2024. 10. 16. [Web] 웹 개발 리소스 모음 - 색상, 디자인, 애니메이션, SVG, 파비콘, ASCII, 캡처 도구 📌 웹 개발 리소스 모음 프론트엔드 개발에 필요한 다양한 웹 디자인 및 개발 리소스를 한 곳에 모았습니다. 색상, 디자인, 애니메이션, SVG, 파비콘, ASCII 아트, 캡처 도구 등각 카테고리는 프론트엔드 개발 과정에서 유용한 자료와 도구를 제공합니다. 디자인 및 색상 도구 애니메이션 도구 SVG 도구 파비콘 도구 ASCII Art 도구 웹페이지 캡처 도구 🎨 디자인 및 색상 🌈 색상 팔레트Adobe Color Wheel (색상 휠)Coolors (색상 생성기)Adobe Color Contrast Analyzer (대비 분석기)Material Design Colors (구글 머티리얼 색상)FFFuel (색상 팔레트)Khroma (색상 조화 툴)MyColor.space (색상 선택기)De.. 2024. 10. 16. [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. 이전 1 2 3 4 ··· 28 다음 728x90 반응형
