반응형 전체 글94 tailwindcss 적용 tailwind 설치모듈 설치/src/main/resources/static 경로에 tailwindcss@3 설치npm install -D tailwindcss@3npx tailwindcss init설정 파일 생성 /src/main/resources/static 경로에 tailwind.confing.js 파일 생성 /** @type {import('tailwindcss').Config} */ export default { // content 부분에 tailwind가 적용될 경로 입력 content: ["../templates/*.{html,js}"], theme: { extend: {}, }, plugins: [], }기본 CSS 파일 생성/src/main/resourc.. 2025. 3. 4. logback RollingFileAppender 설정 logback 설정 %d{yyyyMMdd HH:mm:ss.SSS} [%thread] %-3level %logger{5} - %msg %n ${LOGS_ABSOLUTE_PATH}/logFile.log ${LOGS_ABSOLUTE_PATH}/logfile.%d{yyyy-MM-dd}.log 30 3GB %-4relative [%thread] %-5level %logger{35} - %msg%n --> Working Directory 설정working Directory 설정을 해주지 않으면 바탕화면에 log 파일이 생성되서 working directory.. 2025. 2. 24. 도커 Nginx 로드 밸런싱 설정 들어가며 오늘날 웹 애플리케이션은 확장성과 가용성이 핵심입니다.특히 다중 서버 환경에서 트래픽을 효율적으로 분산하기 위해 로드 밸런싱이 필수입니다.Nginx는 강력한 로드 밸런싱 기능을 제공하며, 이를 도커 컨테이너 환경에서 손쉽게 설정할 수 있습니다.Nginx를 도커 컨테이너로 실행하고, 로드 밸런싱 설정을 통해 트래픽을 여러 백엔드 서버로 분산하는 방법을 단계별로 살펴보겠습니다. 1. Nginx 로드 밸런싱이란?Nginx는 클라이언트 요청을 다중 백엔드 서버로 분산하여 트래픽을 효율적으로 처리합니다.이를 통해 다음과 같은 이점을 얻을 수 있습니다:고가용성: 하나의 서버가 다운되더라도 서비스 지속 가능.확장성: 다중 서버를 통해 트래픽 분산.유연성: 다양한 로드 밸런싱 방식 지원 (라운드 로빈, 최소 .. 2025. 1. 17. Nginx와 Tomcat 연동하기 설정 파일docker-compose.yml 파일 작성version: '3'services: web-server: image: nginx container_name: nginx ports: - "80:80" networks: - network web-application-server: image: tomcat container_name: tomcat ports: - "8080:8080" networks: - networknetworks: network: driver: bridgeNginx 파일 설정upstream tomcat { server tomcat:8080;}server { listen 80; listen .. 2024. 11. 5. Connection Pool을 사용해 Database 연결하기 소스 코드// 1. 라이브러리 임포트const mysql = require("mysql");const dotenv = require("dotenv");const path = require("path");// 2. .env 파일에서 데이터베이스 정보 획득dotenv.config({ path: path.resolve("env/database.env") });// 3. config 객체 설정const config = { host: process.env.db_host, port: process.env.db_port, user: process.env.db_user, password: process.env.db_password, database: process.env.db_database,};// 4. 커.. 2024. 7. 24. CORS 설정하기 미들웨어로 모든 경로 CORS 설정express의 미들웨어를 사용하여 응답으로 Access-Control-Allow-Origin에는 요청하는 사이트의 Origin 'http:localhsot:5173'을 설절하여 줍니다.Access-Cotrol-Allow-Headers에는 리소스에 접근 시 허용할 사용자 지정 헤더를 설정하여 줍니다.// 어플리케이션 레벨 미들웨어app.use((req, res, next) => { res.setHeader("Access-Control-Allow-Origin", process.env.cors); res.setHeader("Access-Control-Allow-Headers", "Content-Type"); next();}); 2024. 7. 22. dotenv 사용해서 환경변수 설정하기 dotenvdotenv는 .env파일에서 process.env의 환경변수를 설정할 수 있는 라이브러리입니다.설치노드 패키지 매니저를 이용해서 dotenv를 설치해줍니다.npm install dotenv폴더 구성env폴더를 생성한 후 env/development.env, env/production.env 파일을 생성합니다.각각의 파일 안에는 env=dev, env=prd라는 내용이 적혀있습니다.dotenv 설정설치한 dotenv 라이브러리를 불러온 후 dotenv의 config 메서드로 NODE_ENV의 값에 따라 development.env, production.env파일로 환경변수를 설정하도록 해줍니다.let dotenv = require('dotenv');dotenv.config({path: path.. 2024. 7. 11. 모달 대신 SweetAlert2 사용해보기 미리보기 사용이유react-modal 라이브러리를 사용해서 모달을 구현한다면 CSS와 컴포넌트도 구현해야 합니다.sweetaler2라이브러리를 사용하면 모달과 비슷한 효과를 내면서 간단하게 구현할수 있기때문에 사용했습니다.참고사이트sweetalert2 홈페이지 SweetAlert2SweetAlert2 - a beautiful, responsive, customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxessweetalert2.github.io사용방법설치npm install sweetalert2importimport Swal from "sweetalert2";유효성 검사 함수 구현반환값으로 성공여부와 유효하지 않은 값을 입.. 2024. 7. 4. 리액트 모달 생성하기 미리보기모달(Modal)사용자 관심을 얻기 위해 사용하는 화면으로 다른 화면 위로 띄워 표현하는 화면이다.모달은 어디에 쓰여질까?모달은 사용자의 이목을 끌 수 있는 다양한 곳에서 사용이 가능하다.예를 들어 사용자가 어떤 동작을 실행 했을때 동작이 제대로 실행되었는지 알려주는 알림 형태,어떤 동작을 실행할 것인지 묻는 확인 형태, 사용자의 입력을 받도록 할 수 있게 하는 입력 형태로 사용이 가능하다.부트 스트랩 모달알림 형태확인 형태입력형태리액트에서 모달 사용하기react-modal 설치리액트에서 모달을 편하게 만들어주는 라이브러리인 react-modal을 설치한다.npm install react-modalindex.html 설정react-modal을 사용하기 위해 index.html에 부모 역할을 하는 .. 2024. 6. 26. 로그인 컴포넌트 기능 구현하기 로그인 컴포넌트 기능 구현미리보기 소스 코드더보기login.jsximport { useState } from "react";import "./Login.css";import { useNavigate } from "react-router-dom";const Login = () => { const nav = useNavigate(); const [formData, setFormData] = useState({ id: "", password: "" }); const onChangeForm = (e) => { const { name, value } = e.target; setFormData({ ...formData, [name]: value }); }; const onSubmitForm =.. 2024. 6. 11. 회원가입 컴포넌트 기능 구현하기 미리보기 회원가입 기능 구현로그인 기능을 구현하기 전에 회원가입 기능을 먼저 구현하겠습니다.소스코드더보기 import { useState } from "react";import "./Signup.css";import { useNavigate } from "react-router-dom";const Signup = () => { const nav = useNavigate(); // 상태 확인 변수 const [formData, setFormData] = useState({ id: "", password: "", password_confirm: "", }); // 이벤트 변화 확인 함수 const onChangeForm = (e) => { const { name, val.. 2024. 6. 11. 로그인, 회원가입 컴포넌트 라우팅 설정 미리보기 react-router-dom 설치아래의 명령어로 react-router-dom 을 설치해주면 됩니다.npm install react-router-domBrowerRouter 추가라우터를 추가할 컴포넌트에 BrowerRouter 컴포넌트로 감싸줍니다.저는 main.jsx 파일안 App 컴포넌트를 BrowserRouter로 감싸줬습니다.import "./index.css";import React from "react";import ReactDOM from "react-dom/client";import App from "./App.jsx";import { BrowserRouter } from "react-router-dom";ReactDOM.createRoot(document.getElementB.. 2024. 6. 8. 이전 1 2 3 4 ··· 8 다음 반응형
