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

오늘은 백엔드 환경을 설정하고, 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를 설치합니다.설치가 완료되면 터미널(또는 명령 프롬프트)을 열고 아래 명령어로 설치 여부..