판매 엑셀은 있는데 화면, API, 데이터베이스가 따로 있어 한 주소로 확인하지 못하는 문제를 다룹니다. Vite, FastAPI, PostgreSQL, nginx를 폴더별로 나누고, 바이브 코딩으로 받은 코드를 행 수와 고객 화면으로 확인합니다.
3명 이 수강하고 있어요.
난이도 초급
수강기한 무제한
판매 프로젝트를 frontend와 backend로 나누고 Vite 화면을 연다
엑셀 판매 기록을 PostgreSQL에 넣고 행 수로 확인한다
React 화면이 FastAPI를 부르도록 CORS를 연다
고객 목록과 등록 창을 서버 데이터와 맞춘다
Docker Compose와 nginx로 화면과 API를 함께 띄운다
판매 엑셀은 있는데 화면, API, 데이터베이스가 서로 다른 곳에 있으면 한 주소로 확인하기 어렵습니다. 이 강의는 Vite로 연 React 화면과 FastAPI, PostgreSQL, nginx를 한 프로젝트로 잇습니다. 코드는 바이브 코딩으로 받고, 폴더 위치와 실행 결과로 맞는지 확인합니다.
이런 사람에게 맞습니다
화면 코드와 서버 코드를 각각 받아 놓고 한 주소로 붙이지 못하는 사람에게 맞습니다. 엑셀 판매 기록을 데이터베이스와 조회 화면으로 옮기고 싶은 사람에게 맞습니다. 바이브 코딩으로 파일을 받았는데 어느 폴더에 넣을지 모르는 사람에게 맞습니다. 터미널에서 명령 한 줄을 실행해 본 적이 있으면 수업을 따라갈 수 있습니다.
수업에서 보는 기준
역할만 지시하고 결과로 확인합니다. 화면은 api, query, pages, components로 나눕니다. api는 요청, query는 목록 갱신, pages는 화면, components는 표와 모달입니다. API는 web, service, repository로 나눕니다. schema는 JSON이고 model은 테이블입니다. 맞는지는 적재된 행 수, Swagger의 응답, 등록 뒤에 다시 받아 온 고객 목록, 떠 있는 컨테이너로 봅니다.
프로젝트와 데이터
sales_project를 frontend와 backend로 나누고 Node.js와 Vite로 React 화면을 엽니다. Docker Desktop에서 컨테이너가 어디에 놓이는지 봅니다. 고객, 제품, 제품분류, 프로모션, 채널, 판매 테이블의 관계를 정하고 docker-compose.yml로 PostgreSQL을 준비합니다. 엑셀을 읽어 테이블에 넣은 뒤 행 수로 적재를 확인합니다. GET, POST, PUT, DELETE가 하는 일을 나누고, 화면 주소와 API 주소를 CORS로 잇습니다.
화면과 API
package.json과 node_modules의 차이를 보고, FastAPI에서 schema와 model을 나눕니다. 고객과 제품은 등록과 수정이 되고, 판매는 조회로 둡니다. Swagger에서 요청 결과를 확인합니다. 받은 화면 코드를 폴더에 넣고 고객 목록과 등록 창이 서버 데이터와 맞는지 봅니다. 등록 뒤에는 목록을 다시 받아 옵니다.
Docker와 nginx
backend Dockerfile, frontend, nginx, .env, docker-compose.yml이 맡는 역할을 맞춥니다. PostgreSQL 이미지와 데이터 볼륨을 두고 docker compose up으로 데이터베이스 컨테이너를 띄웁니다. nginx.conf에서 화면 파일과 /api 경로를 나눕니다. Python 패키지는 requirements.txt에 넣어 이미지에 담습니다. backend, nginx, db-init 컨테이너가 떠 있는지 확인합니다.
자주 묻는 질문
실습 코드는 어디서 받나요? ChatGPT에 폴더 역할을 지시해서 받습니다. 수업에서는 그 파일을 어느 폴더에 두고, 행 수와 화면과 컨테이너로 맞는지 확인합니다.
React와 FastAPI를 따로 끝낸 뒤에 들어야 하나요? 화면과 서버를 폴더로 나누고 붙이는 과정을 수업에서 진행합니다. 터미널 명령과 Node.js, Docker Desktop이 있으면 됩니다.
Docker는 꼭 쓰나요? 데이터베이스와 서버를 컨테이너로 띄웁니다. Docker Desktop을 설치해 두고 수업을 보면 됩니다.
듣기 전에
실습은 Node.js, Docker Desktop, Python이 있는 컴퓨터에서 진행합니다. 화면은 Vite와 React, 서버는 FastAPI, 데이터는 PostgreSQL입니다. 영상은 강의실에서 진행한 수업을 올린 것입니다.
수업의 순서
프로젝트 폴더, 판매 테이블, 엑셀 적재, API 연결, 화면 구성, Docker Compose, nginx 순서로 진행한 수업입니다. 마지막에는 화면과 API가 한 주소에서 동작하는 것까지 확인합니다.
짧은 제목 줄 일곱 개를 각각 선택한 뒤 제목으로 바꾸세요. 이런 사람에게 맞습니다, 수업에서 보는 기준, 프로젝트와 데이터, 화면과 API, Docker와 nginx, 자주 묻는 질문, 듣기 전에, 수업의 순서입니다.
학습 대상은
누구일까요?
화면 코드와 서버 코드를 각각 받아 놓고, 한 주소로 붙이지 못하는 사람
엑셀 판매 기록은 있는데 데이터베이스와 조회 화면으로 옮기지 못한 사람
바이브 코딩으로 파일을 받았는데 어느 폴더에 넣을지 모르는 사람
선수 지식,
필요할까요?
터미널에서 명령 한 줄을 실행해 본 적이 있으면 됩니다.
Node.js와 Docker Desktop을 설치해 둡니다.
실습 코드는 ChatGPT에 지시해서 받습니다.
전체
7개
해당 강의에서 제공:
지식공유자님의 다른 강의를 만나보세요!
같은 분야의 다른 강의를 만나보세요!
무료
