티스토리

holy_season vs code

검색하기

블로그 홈

holy_season vs code

holy-season.tistory.com/m

holy season 님의 블로그입니다.

구독자: 1

방명록 방문하기

반응형

주요 글 목록

도커 Nginx 로드 밸런싱 설정 들어가며 오늘날 웹 애플리케이션은 확장성과 가용성이 핵심입니다.특히 다중 서버 환경에서 트래픽을 효율적으로 분산하기 위해 로드 밸런싱이 필수입니다.Nginx는 강력한 로드 밸런싱 기능을 제공하며, 이를 도커 컨테이너 환경에서 손쉽게 설정할 수 있습니다.Nginx를 도커 컨테이너로 실행하고, 로드 밸런싱 설정을 통해 트래픽을 여러 백엔드 서버로 분산하는 방법을 단계별로 살펴보겠습니다. 1. Nginx 로드 밸런싱이란?Nginx는 클라이언트 요청을 다중 백엔드 서버로 분산하여 트래픽을 효율적으로 처리합니다.이를 통해 다음과 같은 이점을 얻을 수 있습니다:고가용성: 하나의 서버가 다운되더라도 서비스 지속 가능.확장성: 다중 서버를 통해 트래픽 분산.유연성: 다양한 로드 밸런싱 방식 지원 (라운드 로빈, 최소 .. 공감수 0 댓글수 0 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 .. 공감수 0 댓글수 0 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. 커.. 공감수 0 댓글수 0 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();}); 공감수 0 댓글수 0 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.. 공감수 0 댓글수 0 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";유효성 검사 함수 구현반환값으로 성공여부와 유효하지 않은 값을 입.. 공감수 0 댓글수 0 2024. 7. 4.
리액트 모달 생성하기 미리보기모달(Modal)사용자 관심을 얻기 위해 사용하는 화면으로 다른 화면 위로 띄워 표현하는 화면이다.모달은 어디에 쓰여질까?모달은 사용자의 이목을 끌 수 있는 다양한 곳에서 사용이 가능하다.예를 들어 사용자가 어떤 동작을 실행 했을때 동작이 제대로 실행되었는지 알려주는 알림 형태,어떤 동작을 실행할 것인지 묻는 확인 형태, 사용자의 입력을 받도록 할 수 있게 하는 입력 형태로 사용이 가능하다.부트 스트랩 모달알림 형태확인 형태입력형태리액트에서 모달 사용하기react-modal 설치리액트에서 모달을 편하게 만들어주는 라이브러리인 react-modal을 설치한다.npm install react-modalindex.html 설정react-modal을 사용하기 위해 index.html에 부모 역할을 하는 .. 공감수 0 댓글수 0 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 =.. 공감수 0 댓글수 1 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.. 공감수 0 댓글수 0 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.. 공감수 0 댓글수 0 2024. 6. 8.
회원가입 컴포넌트 생성하기 미리보기아이디, 비밀번호, 비밀번호 확인이 있는 회원가입 화면입니다. 회원가입 컴포넌트 생성회원가입 컴포넌트를 만들기 위해 Signup.jsx파일을 생성해줍니다.스타일을 해줄것이기 때문에 Signup.css파일을 불러와주고 Signup 함수를 생성해줍니다.다른 곳에서 사용할 수 있게 export default로 Signup 함수를 내보내줍니다.Signup 함수의 컴포넌트 내용으로는 폼 태그가 있고 폼의 내용으로 회원가입 헤더 태그와 아이디, 비밀번호, 비밀번호 확인으로 입력가능한 input 태그, 회원가입 및 뒤로가기 버튼 태그가 있습니다.import "./Signup.css";const Signup = () => { return ( 회원가입 .. 공감수 0 댓글수 1 2024. 6. 5.
로그인 컴포넌트 생성하기 미리보기로그인 컴포넌트 생성리액트에서 컴포넌트를 생성하려면 함수를 선언하고 반환값으로 html 태그를 반환해야합니다.컴포넌트를 생성하기 전에 먼저 index.css, App.css의 내용과 App.jsx의 App 메서드의 내용을 전부 지워주도록 하겠습니다. 다음으로 src폴더에 components라는 폴더를 생성하고 안에 Login.jsx라는 파일을 하나 생성합니다. 로그인을 하려면 ID, PASSWORD, 로그인 버튼이 필요하므로 form, input, button 태그를 이용하여 화면을 구성합니다.다른 파일에서도 Login 컴포넌트를 불러올 수 있게 Login 함수를 기본 모듈로 설정합니다.const Login = () => { return ( .. 공감수 0 댓글수 1 2024. 6. 4.
첫 리액트 프로젝트 생성하기 프론트엔드 개발 툴 설치리액트 프레임워크를 더 편하게 개발할 수 있도록 해주는 도구인 Vite를 설치하겠습니다.Node.js가 설치되어 있다면 아래의 명령어를 명령 프롬프트나 터미널에 입력해서 Vite를 설치해주시면 됩니다.npm install -g vite@latestVite를 이용해 리액트 프로젝트 생성하기첫 번째 리액트 프로젝트를 생성하기 위해서는 명령 프롬프트에 아래와 같은 명령어를 작성해서 프로젝트를 생성해야 합니다.npm create vite@latest명령어를 실행하면 프로젝트의 이름, 프레임워크, 언어를 선택하는 화면이 나옵니다.프로젝트 이름을 first-react-project, 프레임워크는 React, 언어는 JavaScript를 선택하시면 됩니다. 프로젝트 이름, 프레임워크, 언어 선.. 공감수 0 댓글수 0 2024. 5. 29.
안드로이드 WebView 전체 화면 설정 WebChromeClientwebChromeClient의 기본 설정에는 html의 비디오 태그를 전체화면 할 수 있는 기능이 없어서 WebChromeClient 클래스를 상속받은 새로운 클래스를 생성해야 한다. onShowCustomView, onHideCustomView 메서드를 오버라이드해 onShowCustomView에서는 전체화면이 되는 기능을 구현하고 onHideCustomView 에는 전체화면 종료시 화면이 바뀌도록 기능을 구현하면 된다. 코드 @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.acti.. 공감수 0 댓글수 0 2024. 5. 24.
Jupyter Notebook 컨테이너 생성 Jupyter Notebook 환경 구성개요웹을 이용해서 파이썬 프로그램이 가능하게 Jupyter Notebook 환경 구성Dockerfile 생성FROM ubuntu:22.04# update & upgradeRUN apt-get update -y && apt-get upgrade -yRUN mkdir -p /home/jupyter# install python & pipRUN apt-get install python3 -yRUN apt-get install python3-pip -y# export python & pipENV PATH=/usr/bin/python3:$PATHENV PATH=/usr/bin/pip3:$PATH# install jupyterRUN pip3 install jupyter# 작업 .. 공감수 0 댓글수 0 2024. 4. 29.
Dockerfile 스프링부트 실행 이미지 만들기 Dockerfile 생성 먼저 스프링부트 서버를 운영하기 위한 이미지를 빌드해야 한다. 기본적인 이미지는 ubuntu 22.04 버전을 사용하여 환경을 구성하였다. FROM ubuntu:22.04 # 디렉토리 생성 RUN mkdir -p /home/java RUN mkdir -p /home/server/jar # 작업 디렉토리 설정 WORKDIR /home/server/jar # java 복사 COPY /openjdk-8u342-b07 /home/java/ # jar 복사 COPY /jar/TEST.jar /home/server/jar/TEST.jar # 환경 변수 설정 ENV JAVA_HOME=/home/java ENV PATH=$JAVA_HOME/jre/bin:$PATH ENV CLASSPATH=$C.. 공감수 0 댓글수 0 2024. 4. 9.
tailwind CDN 설정 CDN 설정 html파일의 head부분에 tailwind CDN을 추가 예제 CDN을 추가하고 텍스트 크기를 font-size: 1.875rem; 30px line-height: 2.25rem; 36px, 볼드체, 밑줄로 나오도록 h1 클래스 설정 Hello world! 공감수 0 댓글수 0 2024. 4. 2.
FFMPEG CCTV RTSP 영상 HLS 프로토콜 변환 RTSP 영상을 HLS로 변환하는 이유 RTSP 영상을 웹 브라우저에 보여주기 위해서는 FFMPEG 프로그램을 사용해서 HLS(HTTP Live Streaming)으로의 변환이 필요하다. HLS 프로토콜로 변환해 인덱스 파일과 영상 조각들로 나누어서 웹 서버에 저장하면 사용자가 인덱스 파일을 다운 받고 인덱스 파일에 적힌 영상 목록을 순서대로 다운받곡 재생해 실시간 영상 재생이 가능하다. FFMPEG로 HLS 영상 변환 웹 서버에 올리기전 FFMPEG 프로그램을 이용해서 RTSP 프로토콜을 HLS프로토콜로 변환해야 한다. 밑에 명령어는 ffmpeg 프로그램의 명령어로 입력받은 rtsp 주소의 영상을 hls 프로토콜로 변환하는 명령어이다. RTSP 주소로 충청남도 천안시 교통정보 CCTV 를 사용하였다. .. 공감수 0 댓글수 0 2024. 3. 25.
유튜브 재생목록 음악 다운로드 프로그램의 목적 음악을 재생하는 프로그램을 테스트 하기 위해 mp3 파일 샘플들이 필요했다. 원래 mp3 파일을 youtube studio에서 다운받아 사용했었는데 youtube studio에 있는 노래들은 가사가 없는 노래가 대다수이고 인터넷에 있는 youtube음악 변환 사이트는 광고가 많고 한번 변환하는데 시간이 많이 걸려 가사 있는 노래를 얻기 위해 youtube 재생목록에 있는 음악들을 다운로드 하는 프로그램을 만들어 보기로 하였다. 검색을 해보니 pytube라는 파이썬 라이브러리를 사용하면 youtube음악을 쉽게 다운 받을 수 있는 거 같아 이 라이브러리를 사용해 보기로 하였다. 전체 코드 import os import datetime import requests import re from .. 공감수 0 댓글수 0 2024. 3. 22.
FFMPEG로 RTSP영상 MP4 인코딩하기 RTSP 영상 MP4 인코딩 tapo c320ws를 이용해 rtsp 영상을 mp4 형태로 인코딩하였다. tapo c320ws의 rtsp 주소는 rtsp://id:password@192.168.1.100:554/stream1이다. tapo c320ws 실외 보안 Wi-Fi 카메라 유연한 유무선 네트워킹, 3MP 초고해상도, 모션 감지, 야간 투시, 양방향 오디오 및 로컬 스토리지를 갖춘 실외 보안 Wi-Fi 카메라로 밤낮 상관없이 사용자를 보호합니다. www.tp-link.com FFMPEG 명령어 아래와 같은 명령어를 사용해 mp4로 변환하였다. ffmpeg -rtsp_transport tcp -i rtsp://id:password@192.168.1.100:554/stream1 -c:v copy -f m.. 공감수 0 댓글수 0 2024. 3. 11.
FFMPEG란? FFMPEG FFmpeg Converting video and audio has never been so easy. $ ffmpeg -i input.mp4 output.avi News January 3rd, 2024, native VVC decoder The libavcodec library now contains a native VVC (Versatile Video Coding) decoder, supporting a large subset of the codec's ffmpeg.org 디지털 음성 스트림과 영상 스트림을 다양한 종류의 형태로 기록하고 변환하는 컴퓨터 프로그램 비디오, 오디오, 이미지를 쉽게 인코딩 (Encoding), 디코딩 (Decoding), 먹싱 (Muxing), 디먹싱 (Dem.. 공감수 0 댓글수 0 2024. 3. 11.
온도, 습도 측정 프로그램 개요 집을 정리하는 도중 라즈베리파이 관련 장비를 모아둔 박스를 한번 들여다 보게 되었다. 여러가지 센서가 있었는데 dht11 센서가 눈에 띄었다. dht11센서는 온도, 습도를 측정할 수 있는 센서인데 이 센서를 이용하여 방안의 온도를 측정할 수 있는 프로그램을 만들면 좋을꺼 같아 만들게 되었다. 프로그램 방안의 온도, 습도를 1분마다 측정하는 프로그램 언어 python 데이터베이스 mysql 라이브러리 adafruit-dht pymysql apscheduler python-dotenv 데이터베이스 테이블 구조 데이터베이스 테이블의 속성으로 측정시간(measurement_time), 온도(temperature), 습도(humidity)를 설정하였다. 측정시간은 제약조건을 PRIMARY KEY로 설정하였.. 공감수 0 댓글수 1 2024. 1. 7.
Mysql 컨테이너 생성 docker-compose.yml 파일 생성 version: '3' services: mysql: image: mysql ports: - "13306:3306" environment: MYSQL_ROOT_PASSWORD: ${PASSWORD} command: - --character-set-server=utf8mb4 - --collation-server=utf8mb4_unicode_ci volumes: - mysql:/var/lib/mysql volumes: mysql: DBeaver 설정 allowPublicKeyRetrieval TRUE autoReconnect TRUE useSSl FALSE 참고 https://yoo-dev.tistory.com/54 [Docker] MySQL 컨테이너 띄우고 원격.. 공감수 0 댓글수 0 2023. 12. 28.
SVN-Connector 수동 설치 이클립스 SVN-Connector 설치 HELP > Install New Software 클릭 후 다음과 같은 URL을 Work with부분에 넣어주면 된다. https://osspit.org/eclipse/subversive-connectors/ 참고 https://velog.io/@joyoo1221/%EC%9D%B4%ED%81%B4%EB%A6%BD%EC%8A%A4-SVN-Connector 이클립스 SVN Connector 날 이틀간 고생시킨 SVN Connector 호호... (우선 나는 java 1.8 / eclipse 2020-06 / tomcat 8.5로 플젝 설정했다. 참고만 해주세요.) 이클립스에서 SVN을 사용하려면 요놈을 깔아줘야 하는데, 여기서 끝이 아니 velog.io 공감수 0 댓글수 0 2023. 12. 28.
스프링부트 자동 재시작 스프링부트 자동 재시작 application.properties 설정 spring.devtools.livereload.enabled=true spring.devtools.restart.enabled=true 공감수 0 댓글수 0 2023. 12. 18.
spring-boot jsonView 설정 스프링부트 jsonView 설정 Configuration 설정 package com.seongcheol.rtsp.config; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.view.json.MappingJackson2JsonView; @Configuration public class WebConfig { @Bean MappingJackson2JsonView jsonView() { return new MappingJackson2JsonView(); } } 공감수 0 댓글수 0 2023. 12. 18.
특정 브랜치로 레포지토리 클론 명령어 git clone -b 공감수 0 댓글수 0 2023. 11. 10.
Poetry Poetry? 파이썬에서 의존성 관리와 패키징을 위한 도구 설치 pip install poetry 사용방법 프로젝트 생성 poetry new 생성된 프로젝트 구조 기존 프로젝트 poetry 설정 poetry init 의존성 추가 poetry add pyproject.toml파일의 tool.poetry.dependencies에 flask 라이브러리 추가된다. [tool.poetry] name = "test-poetry" version = "0.1.0" description = "" authors = ["Shin_Seong_Cheol; "] readme = "README.md" [tool.poetry.dependencies] python = "^3.11" flask = "^3.0.0" [build-syste.. 공감수 0 댓글수 0 2023. 11. 9.
Pyside6 캘린더 위젯 특정 날짜 클릭 막기 코드 import sys from PySide6.QtWidgets import QApplication, QCalendarWidget from PySide6.QtCore import Qt, QDate def handle_date_selection(selected_date, calendar, disabled_date): if selected_date == disabled_date: # Prevent selecting the disabled date calendar.setSelectedDate(QDate.currentDate()) def main(): app = QApplication(sys.argv) calendar = QCalendarWidget() calendar.show() disabled_date =.. 공감수 0 댓글수 0 2023. 11. 6.
페이지네이션 계산 총 페이지 개수 = Math.ceil(전체 컨텐츠 개수 / 한 페이지에 보여줄 컨텐츠의 개수) 화면에 보여질 페이지 그룹 = Math.ceil(현재 페이지 번호 / 한 화면에 보여줄 페이지의 개수) 화면에 보여질 페이지의 첫번째 페이지 번호 = ((페이지 그룹 번호 - 1) * 한 화면에 보여줄 페이지의 개수) + 1 화면에 보여질 페이지의 마지막 페이지 번호 = 페이지 그룹 번호 * 한 화면에 보여줄 페이지의 개수 단, 페이지 그룹 번호 * 한 화면에 보여줄 페이지의 개수가 전체 페이지 개수보다 크다면 전체 페이지가 된다 참고 https://yonghwankim-dev.tistory.com/578 페이지네이션(Pagination) 구현을 위한 값 계산하기 페이지네이션(Pagination)이란 무엇.. 공감수 0 댓글수 0 2023. 11. 2.

반응형

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.