FrontEnd Vs BackEnd

frontend→ ยังไม่สามารถเซฟข้อมูลต่างๆได้ edit เก็บได้ แต่ไม่เหมือน database หลังบ้าน

JSX, HTML, CSS, JS → Compile / Transform (Vite(Node.js)) → HTML, CSS, JS → Web

backend→ node.js Express mongoDB

`Node.js` +      →  Save/Read data

`Express`        ←                       mongoDB

API                                       Database  

`Web Browser` +      →  HTTP/API       `Node JS`

`Vite React`         ←  Data           `Express`

`HTML CSS JS`                          `mongoDB`

MERN -> mongo express react node

backend responsibilities

• Save/Read data from database

• Authentication/Authorization

• Calculation and Computations

• Generate images

• Store uploaded files

• Etc .. (a lot more)

Why Node.js

• No neen to learn new language. Use JavaScript to create

• A lot of existing packages that can be download from npm

• Most open backend/fullstack positions on Blognone Job

• Easily scale to support heavy traffic

• Huge community

Node.js → JavaScript Runtime

• Node.js เป็นชุดเครื่องมือในการแปลคำสั่งของ JavaScript และ เป็น JavaScript Runtime Environment กล่าวคือ สามารถนำ JavaScript ไปรันใน Windows , Mac , Linux ได้

NPM

• npm init - Setup new node project — สร้างโปรเจคใหม่ -> output Package.json

• npm install - Install a package

  npm install -g

  npm install —save ใช้คำสั่งนี้เสร็จ มันลงไปอยู่ใน dependencies

  npm i -D devdependencies

• npm run - Run npm script

npm run start

npm run dev

• npm remove <package-name> // ลบเฉพาะภายในโปรเจค npm remove -g <package-name> // ลบภายในเครื่อง

• npm list หรือ npm ls // แสดงรายการแพ็กเกจเฉพาะภายในโปรเจค npm list -g // แสดงรายการแพ็กเกจทั้งหมดภายในเครื่อง npm -g list --depth=0 // แสดงรายการแพ็กเกจแบบชั้นเดียว

• npm update <package-name> // อัพเดทเฉพาะภายในโปรเจค npm update -g <package-name> // อัพเดททั้งหมดภายในเครื่อง

• npm cache clean

"name": "my_package",
"version": "1.0.0",
"dependencies": {
  "my_dep": "^1.0.0",
  "another_dep": "~2.2.0"
},
"devDependencies" : {
  "my_test_framework": "^3.1.0",
  "another_dev_dep": "1.0.0 - 1.2.0"
}
"scripts": {
    "dev": "react-scripts start",
    "start": "react-scripts start",
}

REPL READ-EVAL-PRINT-LOOP

• node index.js บลาๆ

setInterval(() => {}, 1000);


async function test(){

};

class Tot {

};

Core Module สิ่งที่ติดมากับ node ไม่ต้องลงเพิ่ม

const fs = require('fs'); //fs = file system
const os = require('os'); //os = operating system

const express = require('express');

const app = express();

app.get('/', (req, res) => {
	res.end('Hello World');
});

app.listen(8080, () => {
	console.log('Server listening on 8080');
});

ถ้าเอาให้เพื่อนไปใช้ จะใช้ express ยังไม่ได้ เพราะยังไม่ได้ install module express

"name": "my_package",
"version": "1.0.0",
"dependencies": {
  "express": "^4.18.2",
}

เลยมี dependencies เพื่อให้จำได้ว่าลงอะไรไปบ้าง

ตอนลงก็ npm install --save express

ปกติ node_module จะไม่เอาขึ้น git กัน เพราะหนัก เพิ่มไฟล์ .gitignore เลยจะมีแต่ package.json นั่นเอง

'.gitignore'

node_modules

package conflict กันได้มั้ย ตอบ ‘ได้’ npm ฉลาด จะลงให้ package a ver0.1 , ver0.2 จะลงทั้งคู่ไรงี้ ไม่สำคัญมากเท่าไหร่