Full Stack Youtube Clone (5시간 무료 튜토리얼)

안녕 친구들, 나는 Safak이야. 저는 풀스택 웹 개발자이며 오픈 소스 웹 프로젝트를 내 개발 블로그에서 공유하고 YouTube 채널에서 해당 자습서를 공유하고 있습니다. 지금까지 3개의 풀 스택 프로젝트를 공유했으며 5시간 분량의 "풀 스택 비디오 공유 앱"튜토리얼을 무료로 공유하고 싶습니다. 재생 목록을 찾을 수 있습니다.

어떤 기술이 사용됩니까?

백엔드:

Node.js 익스프레스 프레임워크


데이터 베이스:

몽고DB, 파이어베이스


인증:

JWT, 쿠키, Firebase Google 인증


프런트 엔드 프레임워크:

후크가 있는 React.js


UI 라이브러리:

스타일이 지정된 구성요소


상태 관리 라이브러리:

리덕스


파일 저장:

Firebase 저장소

비디오 공유 앱의 디자인 부분

이 부분에서는 React.js 기능 구성 요소, 후크 및 Styled 구성 요소를 사용하여 YouTube와 같은 비디오 공유 앱을 디자인했습니다. 레이아웃의 경우 Flexbox를 선호했습니다.

이 앱에는 4페이지와 7개의 작은 구성 요소가 포함되어 있습니다.

소스

페이지

Home.jsx

Search.jsx

Video.jsx

SignIn.jsx

구성 요소

Card.jsx

Comments.jsx

Comment.jsx

Menu.jsx

Navbar.jsx

Recommendation.jsx

Upload.jsx

Youtube 클론의 전체 스택 부분

동영상의 이 부분에서는 MongoDB 연결이 있는 Node.js Express 서버를 사용하여 API를 만들었습니다. 그런 다음 CRUD 작업을 처리하기 위해 필요한 모델, 경로 및 컨트롤러를 생성했습니다.

뿌리

모델

User.model.js

Video.model.js

Comment.model.js

노선

auth.js

users.js

videos.js

comment.js

컨트롤러

auth.controller.js

user.controller.js

video.controller.js

comment.controller.js

알다시피 사용자 인증을 처리하기 위한 추가 경로와 컨트롤러가 있습니다. 보안을 제공하기 위해 인증 컨트롤러에서 쿠키와 함께 bcryptjs 및 JWT 라이브러리를 사용했습니다.

export const signin = async (req, res, next) => {
  try {
    const user = await User.findOne({ name: req.body.name });
    if (!user) return next(createError(404, "User not found!"));

    const isCorrect = await bcrypt.compare(req.body.password, user.password);

    if (!isCorrect) return next(createError(400, "Wrong Credentials!"));

    const token = jwt.sign({ id: user._id }, process.env.JWT);
    const { password, ...others } = user._doc;

    res
      .cookie("access_token", token, {
        httpOnly: true,
      })
      .status(200)
      .json(others);
  } catch (err) {
    next(err);
  }
};

마지막으로 애플리케이션을 동적으로 만들기 위해 API를 UI 디자인과 결합했습니다. 데이터를 가져오고 다른 API 요청을 하기 위해 axios를 사용했고 상태 관리를 처리하기 위해 redux-toolkit을 사용하는 것을 선호했습니다.

도움이 되었기를 바랍니다. 웹 개발에 대해 자세히 알아보고 실제 프로젝트로 실습하려면 내 채널 및 기타 게시물을 확인할 수 있습니다.


다른 Dev.to 게시물

🛍️
📺
🧑‍🤝‍🧑


라마 데브

🔥
⚡️ Lama Dev Facebook
👾