본문 바로가기

분류 전체보기

 (157)
webpack으로 scss 쓰기 먼저 client 폴더 안에 scss폴더를 만들고 styles.scss를 만들어준다. 여기에 아무코드나 입력해준다. 아직 까지는 웹팩이 scss를 구형의 css파일로 변환해주는 능력이 없다. 따라서 webpack.config.js 파일을 다음과 같이 수정해준다. const path = require("path"); module.exports = { entry: "./src/client/js/main.js", mode: "development", output: { filename: "main.js", path: path.resolve(__dirname, "assets", "js"), }, module: { rules: [ { test: /\.js$/, use: { loader: "babel-loader",..
webpack 백엔드에서 썼는 babel과 비슷한 친구이다. 최신의 코드를 작성하고 이를 babel을 통해서 약간은 구형이지만 안정적인 코드로 변환하여 서버가 이해할 수 있게 하는 것이다. 프론트에서는 webpack을 사용한다. react, vue, next 등등은 모두 웹팩을 기저에 깔고 있기 때문에 알아야 한다고 한다. 1. 웹팩 설치 npm 을 통해서 설치한다. 이때 webpack과 wbpack-cli 를 같이 설치해준다. 2. webpack.config.js 파일 생성 configuration 파일을 생성하여 기본 설정을 해주어야 한다. 코드는 다음과 같다. const path = require("path"); module.exports = { entry: "./src/client/js/main.js", mod..
프로필에 영상 리스트 보여주기 이제 특정 유저의 프로필에 들어갔을때, 해당 유저가 올린 영상을 보여주는 작업을 할 것이다. 일단 현재의 코드는 다음과 같다. export const see = async (req, res) => { const { id } = req.params; const user = await User.findById(id); if (!user) { return res.status(404).render("404", { pageTitle: "유저가 존재하지 않음." }); } return res.render("users/profile", { pageTitle: user.name, user }); } 지금은 id를 통해 유저를 찾고 있는데, 추가로 id를 owner로 가진 영상을 찾을 수 있다. export const ..
ref와 populate 이전에 Video모델에 내용을 추가할때, 다음과 같은 코드를 작성 했었다. owner: { type: mongoose.Schema.Types.ObjectId, required: true, ref: "User" }, 이때 ref는 어떤 다른 모델과 연결 될 것인가에 대한 참조를 써둔 값이라고 했다. 지금 현재 내 videoController의 watch 컨트롤러(영상을 보여주는 페이지를 렌더링 해주는 컨트롤러) 는 다음과 같다. export const watch = async (req, res) => { const id = req.params.id; const video = await Video.findById(id); const owner = await User.findById(video.owner); ..
Video와 User 모델 연결 & 영상 보여주기 Video와 User을 연결해야 어떤 영상이 어떤 사람것인지 알 수 있고, 프로필에서 어떤 영상을 올렸는지 나열할 수 있게 된다. 따라서 내가 할 것은 user에는 해당 유저가 업로드한 모든 영상의 'id'를 저장해 줄 것이고, video에는 해당 영상을 올린 유저의 'id'를 저장 할 것이다. 1. videoSchema const videoSchema = new mongoose.Schema({ title: { type: String, required: true, trim: true }, fileUrl: { type: String, required: true }, description: { type: String, required: true, trim: true }, createdAt: { type: D..
유저 프로필 페이지 이 페이지는 유튜브의 채널 같이 모든 사용자들이 특정 유저의 프로필을 볼 수 있게 할 예정이다. 어떤 유저가 무슨 영상을 올렸고, 언제 올렸는지 등등의 정보를 담을 것이다. 그러기 위해서는 내가 가진 Video모델과 User모델을 연결 시켜주어야 한다. 그래야 누가 어떤 영상을 올렸는지 구분할 수 있을거다. 1. pug에서 anchor로 링크 생성 일단 홈페이지에서 로그인된 상태라면 유저의 '내 프로필'을 들어갈 수 있게 하는 링크를 만들어야 한다. 간단하니까 코드는 넣지 않겠다. 2. 라우터를 생성해주어 컨트롤러와 연결 userRouter.get("/:id", see); 그냥 페이지를 렌더링 해주는 것이므로, post요청은 필요 없다(고 생각했다). 3. 컨트롤러를 만들어줌 export const se..
영상 파일 업로드 이제 동영상을 올려본다. 일단 upload.pug에 영상을 업로드 할 수 있는 input을 만들어준다. lable(for="video") 영상 파일 input(type="file",accept="video/*",required,id="video",name="video") 그리고 영상을 올리기 위한 multer 미들웨어를 하나 만들어준다. export const videoUpload = multer({ dest: "uploads/videos/", limits: { fileSize: 10000000, } }) 이때 fileSize는 말그대로 올리는 파일의 최대 크기이고, 바이트 단위이다. 10000000은 10메가 바이트 이다. 이제 videoRouter에서 postUpload가 호출되기 전에 미들웨어로서 ..
파일 업로드 영상 파일을 업로드 하기 이전에 일단 유저의 프로필 사진을 업로드 하는 것을 구현한다. 이전에 user 객체 안에 avatarUrl 이라는 변수가 있었다. 이는 깃허브에서 제공한 것이고 유저의 프로필 사진의 url을 저장해둔 것이다. 일단 파일을 업로드하기 위해 유저의 프로필 수정 페이지에 파일 업로드 input을 만들어주었다. input(type="file", id="avatar",name="avatar",accept="image/*") 이는 이미지 형식의 파일을(.jpg .jpeg .png 등..) 모두 받을 수 있는 input이된다. 이제 파일을 받기 위해 multer 라는 미들웨어를 사용하는데 이는 npm 을 통해서 다운로드 받고 사용한다. multer은 우리가 form으로 보낸 파일을 받아서 업..

티스토리툴바