😎 공부하는 징징알파카는 처음이지?

=> Mern stack Ecommerce App Lets Build And Deploy Mern Stack Project full-stack development ☘️ Login API 서버가 로그인을 완료한 클라이언트에게 발급해주는 긴 문자열 사용자의 인증/인가 정보가 담겨있음 npm install jsonwebtoken 💚 controllers/authController.js import JWT from "jsonwebtoken"; import { comparePassword, hashPassword } from "../helpers/authHelper.js"; import User from "../models/User.js"; // POST REGISTER export const registerC..

=> Mern stack Ecommerce App Lets Build And Deploy Mern Stack Project full-stack development ☘️ MongoDB Setup 💚 config/db.js import mongoose from "mongoose"; import colors from "colors"; const connectDB = async () => { try { const conn = await mongoose.connect(process.env.MONGODB_URI); console.log( `Connected To Mongodb Database ${conn.connection.host}`.bgMagenta.white ); } catch (error) { consol..

=> Mern stack Ecommerce App Lets Build And Deploy Mern Stack Project full-stack development ☘️ Project Setup 💚 버전 확인 💚 npm init -y 💚 npm i express colors nodemon dotenv ☘️ Server Setup 💚 초기 server.js const express = require("express"); // rest object const app = express(); // rest api app.get("/", (req, res) => { res.send({ message: "Welcome to ecommerce app", }); }); // PORT const PORT = proces..

🎀 Router 객체 사용하기 🌈 index 와 user 분리하기 🌈 routes/user.js const express = require("express"); const router = express.Router(); // GET / 라우터 router.get("/", (req, res) => { res.send("Hello, Express"); }); module.exports = router; 🌈 routes/user.js const express = require("express"); const router = express.Router(); // GET / user 라우터 router.get("/", (req, res) => { res.send("Hello, User"); }); module.e..

🎀 다양한 미들웨어 🌈 dotenv : .env 파일을 읽어서 process.env로 만든다 🌈 morgan : 로그 출력 ex) combined, common, short, tiny // dev [HTTP 메서드] [주소] [HTTP 상태 코드] [응답 속도]-[응답 바이트] 🌈 static : 정적인 파일들을 제공하는 라우터 역할 : 함수의 인수로 정적 파일들이 담겨 있는 폴더를 지정한다 🌈 body-parser : 요청의 본문에 있는 데이터를 해석해서 req.body 객체로 만들어주는 미들웨어 : 폼 데이터나 AJAX 데이터 처리 // 요청의 본문이 버퍼 데이터 일 때 app.use(bodyParser.raw()); // 텍스트 데이터일 때 해석 app.use(bodyParser.text()); /..

🎀 express 모듈로 서버 구축하기 🌈 app.js // express : http 모듈 내장되어서 서버의 역할 const express = require("express"); const app = express(); require("dotenv").config(); // 서버가 실행될 포트 // app.set("키, 값") : 데이터 저장 app.set("port", process.env.PORT || 3000); // app.get("주소, 라우터") : 주소에 대한 GET 요청이 올 때 어떤 동작 할지 적기 app.get("/", (req, res) => { res.send("Hello express"); }); // HTTP 웹 서버와 동일 app.listen(app.get("port"), (..

(코드는 저작권상 공유 안됩니당!!) 🥑 히스토리 컴포넌트 디바이스 리스트 조회 -> 디바이스, 날짜 선택 -> 디바이스 데이터 조회 -> 차트 출력 🥑 바이스 제어 컴포넌트 디바이스 리스트 조회 -> 디바이스 선택 -> 펌프 동작 -> 펌프 중지 🍔 동작 요청 프로세스 클라이언트 -> API 서버 -> MQTT 브로커 -> 디바이스 : 클라이언트에서 디바이스 선택 후 REST API 로 동작/정지 요청 : 요청을 받은 API 서버에서 MQTT 브로커를 통해 명령 메시지 발행 : 메시지를 받은 디바이스가 명령을 수행 🥑 React 프로젝트 배포 React 프로젝트 배포 계획 -> React 프로젝트 빌드 (webpack 설치, 설정 파일, build 추가) -> React 프로젝트 빌드 결과물 확인 )p..

(코드는 저작권상 공유 안됩니당!!) 🥑 프론트엔드 설계 프로젝트 기획 : 디자인과 개발의 기준 설정 웹/앱 설계 : 디자인과 개발을 위한 구체적인 설계 디자인 : 기획/설계 기반 디자인 작업 및 리소스 제작 개발 : 기능 구현 및 배포/운영 환경 구축 🍔프로젝트 협업 툴 : 소통 및 기록을 위한 다양한 툴 : 화면, 흐름, 특정 포인트에서 기능과 정책을 보다 쉽게 전달 EX) 피그마, Adobe XD, 스케치, 미로, 노션 🥑 레이아웃 설계 : 그림이나 글을 제한된 공간에 효과적으로 정리하고 배치 : 렌더링되는 컴포넌트 레이어를 배치 : MUI 라이브러리에서 제공하는 기본 컴포넌트를 최대한 활용 히스토리 컴포넌트 : 디바이스 조회 후 드롭다운 메뉴 생성 : 날짜 선택 상태 관리 🥑 컴포넌트 설계 디바이..