![]()
미국 기상청 날씨 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)
