![]()
시나리오 구버전 (DSM 6.2) 의 Synology 서버와 새로 구입한 신버전 (DSM 7.2) 의 Synology 서버가 있다. 구버전 서버에는 직원들과 같이 공유한 공유폴더가 네트워크 하드로 연결되어 있다.새로 구입한 신버전에 모든 데이타를 옮기고 직원들도 새로 구입한 신버전 Synology 을 이용할려고 한다. 이때 사용할 수 있는 방법이 "공유 폴더 동기화" 이다. 양방향 동기화는 아니고, 단방향 동기화다. 즉 구버전은 계속 이용하면서 구버전 파일의 변경사항이 계속해서 신버전 서버에 반영되고 신버전의 변경 내용은 구버전에 반영 안된다. 우선 설정 방법은 구버전에서 제어판 > 공유 폴더 동기화를 선택한다.버전에 따른 "공유 폴더 동기화" 기능 위치가 변경되었다. DSM 6.2 제어판 모양 D..
![]()
Synology에서 제공하는 rsync 기능은 원격지에 있는 다른 서버와 데이터를 동기화하거나 백업할 때 사용하는 강력한 도구입니다. Linux/Unix 환경에서 널리 사용되는 rsync 명령어를 Synology NAS에서도 사용할 수 있도록 지원하며, 효율적이고 유연한 파일 전송 및 백업을 가능하게 합니다.Synology rsync 란?rsync는 파일 및 디렉터리를 네트워크를 통해 효율적으로 복사 또는 동기화하는 명령어 기반 유틸리티입니다.Synology NAS는 이 기능을 내장하여 다른 Synology NAS, Linux 서버, 또는 rsync를 지원하는 어떤 장치와도 연동할 수 있습니다.차등 백업 방식으로 동작하므로, 변경된 부분만 전송되어 네트워크 자원을 아끼고 속도도 빠릅니다.주요 활용 사례원..
npm init -y 명령어에서 -y는 "yes"의 줄임말로, npm init 명령어를 실행할 때 나오는 여러 질문에 대해 모두 기본값으로 자동 응답해준다는 의미입니다. npm init을 입력하면 다음과 같은 질문이 하나씩 나옵니다:package name:version:description:entry point:test command:git repository:keywords:author:license:보통 이 정보를 입력하고 나서야 package.json 파일이 생성됩니다.그런데 -y 옵션을 붙이면, 이 질문을 생략하고 기본값으로 자동 설정된 package.json 파일을 즉시 생성합니다.npm init -y실행 후 자동으로 다음과 같은 내용이 포함된 package.json 파일이 생성됩니다:{ "n..
![]()
Synology NAS는 리눅스 기반 OS(DiskStation Manager, DSM)를 사용해서 백엔드 서버로도 충분히 활용 가능함.특히 소규모 웹서비스나 내부 도구용으로 아주 유용.Synology를 백엔드 서버로 구성하는 대표적인 방법들임. 1. Web Station + PHP + Database 조합구성 요소:Web Station: 웹서버 관리 툴 (Apache/Nginx 선택 가능)PHP: PHP 패키지 설치 가능MariaDB / MySQL / PostgreSQL: DB 설치phpMyAdmin: DB 관리 GUI사용 방법:패키지 센터에서 Web Station, PHP, MariaDB, phpMyAdmin 설치Web Station에서 가상 호스트 설정/web 폴더에 프로젝트 업로드php 파일 실행..
Express.js를 이용하여 간단한 REST API 서버를 구축하는 예제.이 예제는 사용자 정보를 저장하고 관리하는 API입니다.데이터베이스 없이 메모리(Array)에 저장하는 방식으로 기본 구조를 이해하기.1단계: 프로젝트 초기화 및 Express 설치mkdir express-rest-apicd express-rest-apinpm init -ynpm install express2단계: 기본 서버 구성 (index.js)const express = require('express');const app = express();const port = 3000;app.use(express.json()); // JSON 요청 본문 파싱// 사용자 데이터를 저장할 배열let users = [];// 사용자 전체 조..
Express.js는 Node.js 환경에서 작동하는 웹 애플리케이션 프레임워크입니다.빠르고 간결하며 유연한 구조를 제공하여, 서버 사이드 애플리케이션을 효율적으로 개발할 수 있게 도와줍니다.특히 RESTful API나 웹사이트의 백엔드 서버를 만드는 데 많이 사용됩니다.주요 특징1. 간결한 라우팅 시스템Express는 URL 경로와 HTTP 메서드(GET, POST, PUT 등)에 따라 요청을 처리하는 라우터 기능을 제공합니다.app.get('/hello', (req, res) => { res.send('Hello, world!');});2. 미들웨어(Middleware) 구조요청과 응답 사이에 기능을 삽입하는 방식으로, 로그인 인증, 로깅, 데이터 파싱, 에러 처리 등을 쉽게 추가할 수 있습니다.a..
MEAN 스택은 백엔드와 프론트엔드를 함께 구성할 수 있는 풀스택 자바스크립트 프레임워크입니다. 여기서 핵심은 모든 구성요소가 JavaScript 기반이라는 점입니다. 각각의 구성 요소를 살펴보면 다음과 같습니다.MEAN 스택 구성요소MongoDB (Database)NoSQL 데이터베이스입니다.JSON과 유사한 BSON 형식의 문서(document)로 데이터를 저장합니다.스키마가 유연하고 확장성이 뛰어나며, Node.js와의 연동이 간편합니다.Express.js (Backend Web Framework)Node.js 위에서 작동하는 웹 애플리케이션 프레임워크입니다.라우팅, 미들웨어, 요청/응답 처리 등을 단순하게 구성할 수 있도록 도와줍니다.REST API 서버를 구축할 때 자주 사용됩니다.Angular..
백엔드 서버를 LEMP 스택(Linux + Nginx + MySQL + PHP/Python) 으로 구성하는 것은 매우 효율적인 선택임.LEMP 스택 구성 요소 개요구성 요소설명Linux서버 운영체제 (Ubuntu, Debian, CentOS 등)Nginx고성능 웹 서버, 정적 파일 처리 및 리버스 프록시 역할MySQL관계형 데이터베이스 시스템PHP/Python동적 웹 애플리케이션의 서버 사이드 언어시스템 구성 예시 (Ubuntu 기준)1. Linux (Ubuntu 22.04 이상 권장)보안 업데이트 및 패키지 관리를 쉽게 할 수 있고, 커뮤니티 지원이 뛰어남2. Nginx 설치sudo apt updatesudo apt install nginxsudo systemctl enable nginxsudo sys..
WSGI(Web Server Gateway Interface)는 Python 웹 애플리케이션과 웹 서버 사이의 표준 인터페이스입니다.웹 서버(예: Nginx, Apache)는 클라이언트 요청을 받고, WSGI를 통해 해당 요청을 Python 애플리케이션에 전달합니다.애플리케이션은 요청을 처리한 후, 다시 WSGI를 통해 응답을 서버로 돌려보냅니다.1. 왜 WSGI가 중요한가?Python에는 다양한 웹 프레임워크(Flask, Django 등)가 있고, 웹 서버도 여러 종류가 있습니다. 이 둘 사이의 호환성을 유지하려면 공통의 약속이 필요합니다. WSGI는 이 약속, 즉 "프로토콜" 역할을 합니다.2. 구성 요소① 웹 서버 (예: Nginx, Apache, Gunicorn, uWSGI 등)실제 클라이언트 요..
백엔드 서버에 LAMP 스택(Linux, Apache, MySQL, PHP)을 구축하는 방법을 Ubuntu 서버를 기준으로 단계별로 설명함 1단계: 시스템 업데이트sudo apt updatesudo apt upgrade -y2단계: Apache 설치sudo apt install apache2 -y 확인웹 브라우저에서 서버 IP 입력: http://your-server-ip=> "Apache2 Ubuntu Default Page"가 보이면 성공3단계: MySQL 설치sudo apt install mysql-server -y 보안 설정 (필수)sudo mysql_secure_installation질문들 나오는데 대부분은 기본값(Enter) + root 비밀번호 설정.4단계: PHP 설치sudo apt in..
백엔드 서버를 구축하는 방법은 목적, 규모, 기술 스택, 예산 등에 따라 다양하게 구축할 수 있음. 1. 전통적인 웹 서버 + 데이터베이스 조합예시: LAMP, LEMP, MEAN 스택LAMP: Linux + Apache + MySQL + PHPLEMP: Linux + Nginx + MySQL + PHP/PythonMEAN: MongoDB + Express.js + Angular + Node.jsMERN: React로 바꾸면 MERN특징:유연하고 커스터마이징 가능개발자 친화적소규모~중규모 서비스에 적합2. Framework 기반 백엔드 개발예시: Laravel, Django, Express.js, NestJS, Spring BootLaravel (PHP)Django (Python)Express.js/Ne..
![]()
Anthropic API (Claude) 는 비공개 API 키를 이용해서 호출해야 하기 때문에 브라우저(프론트엔드)에서 호출이 금지되어 있다. 따라서 백엔드 서버가 반드시 필요하다. Test 개발에서는 Proxy Server 를 이용하는데, package.json 파일에 다음을 추가한다. "proxy": "https://api.anthropic.com" App.jsimport React, { useState } from 'react';import axios from 'axios';import './App.css';function App() { const [apiKey, setApiKey] = useState(''); const [message, setMessage] = useState(''); ..
![]()
미국 기상청 날씨 API 실시간 데이타 Claude 에서 이용하기API : https://api.weather.gov/alerts/active/area/NY 1. Install Claude Desktop 우선 데스크톱 Claude를 설치해야함.https://claude.ai/download 2. Install uvcurl -LsSf https://astral.sh/uv/install.sh | sh 3. 프로젝트 초기화uv init weathercd weather 4. 가상환경 설정 (Python)uv venvsource .venv/bin/activate 5. 패키지 설치하기uv add "mcp[cli]" httpx 6. 코드작성touch weather.py 7. 에디터 열기 (with cursor)cur..
Laravel Pint (vendor/bin/pint) 설명Laravel Pint는 Laravel에서 공식적으로 제공하는 자동 코드 포매터(Auto Code Formatter) 입니다.PHP 코드 스타일을 자동으로 정리해주며, Laravel 및 PHP 커뮤니티에서 널리 사용되는 PSR-12 및 Laravel 코드 스타일을 준수합니다.Pint는 Laravel 팀에서 개발한 PHP 코드 스타일 교정 도구로, PHP-CS-Fixer를 기반으로 만들어졌습니다.기능 및 목적PHP 코드의 스타일을 자동으로 수정하여 일관된 코딩 스타일을 유지하도록 도와줍니다.PSR-12 및 Laravel 코딩 스타일 규칙을 기반으로 코드를 정리합니다.들여쓰기, 공백, 괄호, 배열 구문 등 코드의 형식을 일관되게 정리합니다.설정이 간..
에러발생..npm error could not determine executable to run npm error A complete log of this run can be found in: /Users/xxx/.npm/_logs/xxx-xx-17T05_26_44_563Z-debug-0.log tailwindcss 추가하고npm install -D tailwindcss postcss autoprefixer 초기화 진행시..npx tailwindcss init -p 다음과 같은 에러가 발생한다.npm error could not determine executable to runnpm error A complete log of this run can be found in: /Users/xxx/.npm/_l..
Ubuntu에서 Docker 에 open-webui 올리기docker run -d \ --network=host \ -v open-webui:/app/backend/data \ -e OLLAMA_BASE_URL=http://127.0.0.1:11434 \ -e PORT=4000 \ --name open-webui \ --restart always \ ghcr.io/open-webui/open-webui:main --network=host의 의미:포트 바인딩 불필요기본적으로 Docker 컨테이너는 내부 포트를 호스트의 포트에 매핑해야 한다(-p 옵션 사용).하지만 --network=host를 사용하면, 컨테이너의 모든 네트워크 요청이 호스트의 네트워크와 동일한 환경에서 실행되므로 포트 매핑이 ..
리버스 프록시 (Reverse Proxy)란?리버스 프록시는 클라이언트(사용자)와 서버(백엔드) 사이에서 요청을 중계하는 서버를 말하는데 사용자가 웹사이트에 접속하면, 리버스 프록시가 먼저 요청을 받고 내부 서버로 전달한 뒤, 응답을 받아 다시 사용자에게 전달하는 방식을 말함.보통 Nginx, Apache, HAProxy 같은 소프트웨어가 리버스 프록시 역할을 수행함. 시나리오 1 ::1. 사용자가 www.naver.com 를 요청한다고 가정함.2. DNS 서버가 네이버 서버가 모여있는 데이타 센터로 보내 버림.3. 데이타 센터에서 제일 먼저 맞이하는 서버가 리버스 프록시 서버임.4. www.naver.com 의 웹서버 내부 IP가 192.168.1.100 인 경우 사용자의 요청을 이쪽으로 보내 버..
Node 에서는 함수의 종류별 또는 기능별로 별도 파일에 작성해서 필요한 기능을 불러와 사용할 수 있도록 만들었졌다. Node 는 NPM 을 이용해서 필요한 패키지를 설치할 수 있다.이러한 패키지는 필요한 기능을 모듈별로 만들어서 관리한다. 그럼 어떻게 작성하고 불러올 수 있을까 ?기본형식다음과 같은 함수를 만들었고 파일명을 math.js 로 저장했다. function add(a, b) { return a + b;}console.log(add(1,2));$ node math.js>>3잘 실행된다. 불러오기어떻게 불러올 수 있을까? 다음과 같다. 기본형식이다. 작성법module.exports = 함수명(); 불러오기require(파일명); // math.jsmodule.exports = function ..
PostCSS는 CSS를 변환하는 JavaScript 기반의 도구로, 플러그인 시스템을 통해 CSS를 처리하고 변형할 수 있도록 설계된 빌드 도구입니다. 단순한 CSS 전처리기가 아니라, 플러그인 기반의 유연한 CSS 처리 엔진이라는 점이 큰 특징입니다. PostCSS는 기본적으로 CSS를 읽고 변환한 후 다시 출력하는 엔진이며, 다양한 플러그인을 조합하여 기능을 확장할 수 있습니다. PostCSS 주요 기능1. 자동 접두사 추가 (Autoprefixer)/* 입력 */.foo { display: flex;}/* 출력 (Autoprefixer 적용) */.foo { display: -webkit-flex; display: -ms-flexbox; display: flex;}Autoprefixer ..
/src ├── /composables │ ├── useCommon.js │ ├── useExtra.js │ ├── useUser.js │ ├── useProduct.js ├── /components │ ├── MyComponent.vue {{ message }} 인사하기 작별 인사 사용자: {{ userName }} 이름 변경 상품 목록 {{ product.name }} 상품 추가 같은 이름의 함수 처리방법 (충돌방지)1. 이름 변경 // 별칭을 사용하여 함수 이름 변경 const { greet: commonGreet } = useCommon(); const { greet: ..
🔥 Vue 2에서는 Mixins 사용이 유용하지만, Vue 3에서는 Composition API (setup())를 추천! ✅ Mixins 장점✔ 여러 컴포넌트에서 동일한 기능을 쉽게 재사용 가능✔ 라이프사이클 훅, 데이터, 메서드까지 포함 가능 ❌ Mixins 단점✔ 데이터 및 메서드 충돌 가능 (우선순위 문제 발생)✔ 코드의 출처가 명확하지 않아 유지보수 어려움✔ Vue 3에서는 Composition API가 더 선호됨 Mixins는 Vue.js에서 코드의 재사용성을 높이기 위해 사용되는 기능이다. 여러 컴포넌트에서 공통적으로 사용되는 로직(예: 데이터, 메서드, 라이프사이클 훅 등)을 하나의 mixin 파일로 정의하고, 이를 필요한 컴포넌트에서 mixins 옵션을 통해 포함할 수 있다. 공통 ..
기본형태function MyForm() { const [name, setName] = useState(""); const handleSubmit = (event) => { event.preventDefault(); alert(`The name you entered was: ${name}`) } return ( Enter your name: setName(e.target.value)} /> )} 멀티 데이타 처리function MyForm() { const [inputs, setInputs] = useState({}); const handleChange = (event) => { const name = e..
map() 배열은..map 으로 loop 를 돈다. { cars.map( (car) => ) }
1. if () {} 2. &&{ cars.length && { cars.length } } 3. condition ? A : B (참이면 A, 거짓이면 B)
React Components 는 항상 HTML 문서를 반환한다. 이때 JSX 문서 형식을 이용한다. 클릭과 같은 이벤트와 CSS 도 같이 넣을 수 있다. 하나의 완성된 HTML 문서라고 생각하면 된다. 이제 레고에서 하나의 블록을 만들었다고 생각하자. 원하는 모양의 html 문서를 조합하면 된다. 조합된 html 문서는 보였다 안보였다 하면서 화면을 변경한다. React 에서도 JavaScript 와 비슷하게 적용한다. JavaScript Eventonclick="shoot()" React EventonClick={shoot}
시나리오 1. useState를 통해서 변수에 값을 저장하고 변경할 수 있었다. 2. 변수가 언제 변경되는지 알 수 있을까?3. 이때 필요한 것이 useEffect 이다. 4. 변수가 변경될 때마다 useEffect 는 동작한다. (fetch, timer 에서도 감지한다.) 변화에 대한 감지를 다음과 같이 구분할 수 있다. 1. 모든 변화에 대해서 감지2. 특정 변수에 대해서만 감지3. 처음 한번만 감지 사용형식useEffect(, ) # 모든 변화에 대해서 감지함.import { useState, useEffect } from "react";const [count, setCount] = useState(0);useEffect(()=>{ console.log('감지');}); setCount(count..
설정 파일 열기sudo vi /etc/ssh/sshd_config Port 22 주석 제거 및 수정Include /etc/ssh/sshd_config.d/*.conf#Port 22#AddressFamily any#ListenAddress 0.0.0.0#ListenAddress :: 서비스 다시 시작sudo service ssh restart 방화벽 추가sudo ufw deny 22sudo ufw allow 1234
![]()
개발PC에서 이메일 인증을 통한 회원가입시 메일 발송과 회원가입 링크를 확인해 보기 위해서 간단한 smpt 서비스 제공 https://mailpit.axllent.org/ Mailpit - email & SMTP testing toolMailpit - email & SMTP testing tool with API for developers Mailpit is a small, fast, low memory, zero-dependency, multi-platform email testing tool & API for developers. It acts as an SMTP server, provides a modern web interface to view & test captured emmailpit.ax..
도커 컨테이너 내부에서 호스트 머신 서비스에 접근해야 할때 이 옵션은 Docker 컨테이너 내부에서 호스트 머신에 접근할 수 있게 해주는 중요한 네트워킹 설정입니다.1. `host.docker.internal`은 Docker가 제공하는 특별한 DNS 이름으로, 컨테이너에서 호스트 머신을 참조할 때 사용됩니다.2. `host-gateway`는 호스트 머신의 게이트웨이 IP 주소를 자동으로 할당합니다.실제 사용 예시:- 컨테이너 내부에서 실행되는 애플리케이션이 호스트 머신에서 실행 중인 다른 서비스(예: 데이터베이스)에 접근해야 할 때- 호스트에서 실행되는 API나 서비스를 컨테이너 내부에서 호출해야 할 때이 설정이 없다면, 컨테이너는 기본적으로 격리된 환경이기 때문에 호스트 머신의 서비스에 접근하기 어려..
![]()
DeepSeek 를 로컬에 다운받아서 구동해보기 필수요구사항- Ollama- deepseek-r1- docker- openwebui 1. Ollama 다운로드https://ollama.com/ 에 접속 ollama 프로그램 다운로드 후 설치 2. deepseek-r1 를 다운받는다.https://ollama.com/search 터미널 창에서 자신의 컴퓨터 사양에 맞는 모델 크기를 터미널에서 다운로드 받는다.ollama run deepseek-r13. docker 에서 openwebui 컨테이너를 실행시킨다.docker run -d \ --name openwebui \ -p 8080:8080 \ -v open-webui:/app/backend/data \ --restart always \ ..
