열심히 일한 당신 떠나라 열심히 일한 당신 떠나라

오늘은 백엔드 환경을 설정하고, FastAPI를 사용하여 간단한 API 엔드포인트를 만들어 봅시다. 이 API 엔드포인트는 클라이언트에서 전송된 주문 데이터를 받는 역할을 합니다. FastAPI는 Python으로 작성된 웹 프레임워크로, 빠르고 쉽게 API를 구축할 수 있습니다.1. Python 및 FastAPI 설치FastAPI를 사용하려면 Python이 필요합니다. Python 3.8 이상이 설치되어 있는지 확인한 후, FastAPI와 Uvicorn(ASGI 서버)을 설치합니다.# FastAPI와 Uvicorn 설치pip install fastapipip install "uvicorn[standard]"2. FastAPI 프로젝트 구조 설정프로젝트를 위해 간단한 폴더 구조를 설정합니다. FastAPI..

오늘은 Vue 라우터를 설정하여 페이지 간의 네비게이션을 가능하게 만들고, 앱에 주문 페이지와 주문 확인 페이지를 추가해보겠습니다. 라우터는 SPA(Single Page Application)에서 중요한 요소로, 사용자가 앱에서 페이지를 이동하는 것처럼 보이게 하면서도 실제로는 같은 HTML 페이지 안에서 컴포넌트만 전환하는 방식으로 작동합니다.1. 라우터 설정 파일 만들기index.js 파일에 기본 라우터 설정을 작성합니다.OrderForm: 기본 경로(/)에서 주문 폼을 보여줍니다.OrderConfirmation: 주문 확인 페이지(/confirmation)로 이동하면 주문이 완료되었음을 알리는 화면을 보여줍니다.import { createRouter, createWebHistory } from "v..

오늘은 Vue의 가장 중요한 개념 중 하나인 컴포넌트를 배우고, 첫 주문 폼을 만들어 보겠습니다. Vue 컴포넌트는 재사용 가능한 작은 UI 조각으로, 앱의 다양한 부분에서 사용할 수 있습니다. 주문 폼 컴포넌트를 만들어 고객이 제품을 선택하고 주문을 할 수 있는 화면을 구성해 봅시다.1. 컴포넌트 개념 이해하기컴포넌트는 Vue 애플리케이션의 작은 단위로, 특정한 UI와 로직을 독립적으로 관리할 수 있게 합니다. Vue 컴포넌트는 보통 .vue 파일로 저장되며, 이 파일은 HTML, JavaScript, CSS로 이루어져 있습니다.2. 주문 폼 컴포넌트 생성하기src 폴더 안에 새로운 폴더를 만들어 컴포넌트를 관리할 수 있습니다. components 폴더를 생성해 주세요.mkdir src/componen..

오늘은 웹 주문 시스템 프로젝트의 첫 단계로 개발 환경을 설정하고 Vue.js를 초기화하는 과정을 진행합니다. Vue.js는 사용자 인터페이스를 만들기 위해 널리 사용되는 프론트엔드 프레임워크로, 이 프로젝트에서 클라이언트 측 UI를 구축하는 데 활용됩니다.1. Node.js 및 npm 설치Vue.js 프로젝트를 시작하기 위해서는 Node.js와 npm(Node Package Manager)이 필요합니다. 둘 다 이미 설치되어 있지 않다면, 아래의 단계를 따라 설치하세요.Node.js 공식 사이트에 접속하여 LTS(Long Term Support) 버전을 다운로드합니다.설치 파일을 실행하고 지시에 따라 Node.js를 설치합니다.설치가 완료되면 터미널(또는 명령 프롬프트)을 열고 아래 명령어로 설치 여부..

이번 프로젝트에서는 고등학생들도 쉽게 따라 할 수 있도록 웹 주문 시스템을 만드는 과정을 21일 동안 다룹니다. 학생들은 프론트엔드(Vue.js)와 백엔드(FastAPI)를 분리하여 클라이언트-서버 구조의 웹 애플리케이션을 구축하는 경험을 할 수 있습니다. 이 프로젝트를 통해 학생들은 기본적인 웹 개발 지식뿐만 아니라, 데이터베이스와 API 사용법, 그리고 UI/UX 개선 방법까지 폭넓은 내용을 배울 수 있습니다.1. 프로젝트 목표웹 주문 시스템 구축: 손님이 클라이언트 페이지에서 주문을 하면 가게 주인이 서버에서 이를 확인하고 처리할 수 있는 시스템을 구축합니다.기초 웹 개발 역량 강화: 프론트엔드(Vue.js)와 백엔드(FastAPI) 기본을 익히고, 이를 통합하는 방법을 배웁니다.프로젝트 기반 학습..

Day 0: 프로젝트 개요프로젝트 목표, 사용할 도구들 (Vue.js, FastAPI), 그리고 시리즈의 구성 소개.1주차: 기본 주문 시스템 설정Day 1: 개발 환경 설정과 Vue.js 초기화 (npm create vue@latest 사용).Day 2: Vue 컴포넌트 기초 – 간단한 주문 폼 생성.Day 3: Vue 라우팅 기초 설정으로 페이지 간 네비게이션 구현.Day 4: FastAPI 서버 설정 – 기본 API 엔드포인트 만들기.Day 5: Vue와 FastAPI 연결 – 주문 데이터를 서버로 전송하기.Day 6: 서버에 간단하게 주문 데이터를 임시 저장 (메모리 저장).Day 7: 1주차 리뷰와 문제 해결하기.2주차: 기능 추가Day 8: 주문 폼 개선 – 수량, 주문 메모 등 추가 입력 항..

https://openai.com/index/introducing-canvas/ Canvas란 무엇인가?Canvas는 기존의 채팅 기반 인터페이스를 넘어서, 문서 작성과 코딩 프로젝트를 더 직관적으로 작업할 수 있게 만든 새로운 인터페이스입니다. GPT-4o를 기반으로 하며, 사용자는 별도의 창에서 ChatGPT와 함께 프로젝트를 진행할 수 있습니다. 이곳에서 텍스트와 코드를 직접 수정하고 피드백을 받을 수 있습니다.캔버스의 주요 기능문서 작업 기능: 문서의 길이를 조정하거나, 읽기 수준을 변경하고, 문법과 표현을 다듬는 기능 등이 포함되어 있습니다. 예를 들어 '읽기 수준 변경'을 통해 유아 수준부터 대학 수준까지 읽기 난이도를 설정할 수 있습니다.코드 작업 기능: 코드를 검토하고 버그를 수정하며, 필..

한국에는 아름다운 자연 속에서 역사를 간직하고 있는 불교 산지 승원이 많이 있습니다. 이번에는 어린이들이 방문해볼 만한 7개의 불교 산지 승원에 대해 소개해 드리겠습니다. 이곳에서 아이들은 한국 전통문화와 자연을 체험하며 배울 수 있는 소중한 기회를 가질 수 있습니다.한국의 세계유산(산사, 한국의 산지 승원 2018년)링크: https://www.heritage.go.kr/heri/html/HtmlPage.do?pg=/unesco/Heritage/Heritage_13.jsp&pageNo=5_2_2_0대한불교조계종에서 제공한 자료를 인공지능과 함께 정리한 자료입니다. 링크: http://www.koreansansa.net/ktp/sansa/sansa_020501.do### 1. 통도사 **위치**: 경상남..