REACT. Netflix Clone 정리하기(2)

1. express?

서버를 쉽게 짤 수 있게 도와주는 라이브러리

const express = require("express");
const app = express();

app.listen(8800, () => {
  console.log("Backend server is running~!");
});

 

2. mongoose

const mongoose = require("mongoose");
const dotenv = require("dotenv");

dotenv.config();

main().catch((err) => console.log(err));

async function main() {
  await mongoose
    .connect(process.env.MONGO_URL)
    .then(() => console.log("db Connection Successfull!"))
    .catch((err) => console.log(err));
}

 

3. models / routes

models: 데이터베이스의 각 테이블에 해당하는 파일을 모은 폴더 

-> 우린 MongoDB를 사용해서 NoSQL이다

 

routes: 서버 요청이 들어올 때 path에 따라 controller로 이어줌

 

4. models 예시

const mongoose = require("mongoose");

const ListSchema = new mongoose.Schema(
  {
    title: { type: String, required: true, unique: true },
    type: { type: String },
    genre: { type: String },
    content: { type: Array },
  },
  { timestamps: true }
);

module.exports = mongoose.model("List", ListSchema);

 

5. 사용자 인증하기

5-1. routes

<< 라우팅 방식 >>

app.get( PATH(경로), HANDLER )
app.post( PATH(경로), HANDLER )

 

const router = require("express").Router();
const User = require("../models/User");

// REGISTER
router.post("/register", async (req, res) => {
  const newUser = new User({
    username: req.body.username,
    email: req.body.email,
    password: req.body.password,
  });
  
  try {
    const user = await newUser.save();
    
    res.status(200).json(user);
  } catch (err) {
    res.status(500).json(err);
  }
});

module.exports = router;

1) express연결

2) user 스키마 연결

3) usesrname, email, password를 받아서

4) newUser에 저장하기

5) 오류가 없으면 status(200).json(user) // 오류가 있으면 status(500).json(err)

6) export 하기

 

5-2. 연결

app.use("경로", ______) : 특정 경로의 요청이 있을 때 실행한다

app.use("/api/auth", authRoute);

 

const authRoute = require("./routes/auth");

async function main() {
  await mongoose
    .connect(process.env.MONGO_URL)
    .then(() => console.log("db Connection Successfull!"))
    .catch((err) => console.log(err));

  app.use(express.json());
  app.use("/api/auth", authRoute);
}

1) routes/auth 연결

2) app.use 사용해서 연결

 

6. 로그인하기

router.post("/login", async (req, res) => {
  try {
    const user = await User.findOne({ email: req.body.email });
    !user && res.status(401).json("Wrong password or username!");

    // decrypt( <-> encrypt)
    const bytes = CryptoJS.AES.decrypt(user.password, process.env.SECRET_KEY);
    const originalPassword = bytes.toString(CryptoJS.enc.Utf8);

    originalPassword !== req.body.password &&
      res.status(401).json("Wrong password or username!");

    const { password, ...info } = user._doc;

    res.status(200).json(info);
  } catch (err) {
    res.status(500).json(err);
  }
});

 

7. JWT(Json Web Token) : 아직 많이 어려움 ㅜㅜ

유저를 인증하고 식별하기 위한 토큰(Token) 기반 인증

- 토큰은 세션과는 달리 서버가 아닌 클라이언트에 저장되기 때문에 서버의 부담을 덜 수 있다

1. 클라이언트 사용자가 아이디, 패스워드를 통해 웹서비스 인증
2. 서버에서 서명된 (Signed) JWT를 생성하여 클라이언트에 응답으로 돌려주기
3. 클라이언트가 서버에 데이터를 추가적으로 요구할 때 JWT를 HTTP Headers에 첨수
4. 서버에서 클라이언트로부터 온 JWT 검증

감사합니다 정상우님...!

링크

JWT(JSON Web Token)의 개념부터 구현까지 알아보기

 

const jwt = require("jsonwebtoken");

catch {
const accessToken = jwt.sign(
  { id: user._id, isAdmin: user.isAdmin },
  process.env.SECRET_KEY,
  { expiresIn: "5d" }
);

const { password, ...info } = user._doc;

res.status(200).json({ ...info, accessToken });
}

 

8. axios 사용해서 데이터 가져오기

const [lists, setLists] = useState([]);
const [genre, setGenre] = useState(null);

useEffect(() => {
  const getRandomLists = async () => {
    try {
      const res = await axios.get(`lists${type ? "?type=" + type : ""}${ genre ? "&genre=" + genre : ""}`);
      setLists(res.data);
    } catch (err) {
      console.log(err);
    }
  };
  getRandomLists();
}, [type, genre]);