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

오늘은 지난 주 동안 작성한 코드를 직접 실행하면서 발생할 수 있는 문제를 찾아 수정해보는 시간을 가집니다. 그리고, 주말 동안 실습해 볼 추가 과제와 토론 주제도 함께 제공합니다.1. 코드 실행 및 오류 해결코드를 실행하고, 발생하는 경고나 오류 메시지를 확인하며 문제를 해결해 봅니다. 예를 들어:서버와 클라이언트의 연결 확인: Vue와 FastAPI 간 데이터 전송이 원활하게 이루어지는지 테스트해 보세요.에러 처리: 올바르지 않은 데이터를 전송할 때 어떻게 처리하는지 확인해 보세요.라우팅 동작 확인: /confirmation 페이지와 같은 네비게이션이 제대로 이루어지는지 점검합니다.2. 추가 도전 과제 (선택 사항)이번 주 학습을 바탕으로 간단한 도전 과제를 통해 개념을 더 깊이 이해해 봅니다.주문 ..

오늘은 백엔드 환경을 설정하고, 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) 기본을 익히고, 이를 통합하는 방법을 배웁니다.프로젝트 기반 학습..