공부하는 비오

사진을 추가하고 글을 작성하여, 게시글을 작성하는 코드를 만들어보자. 폼전송방법은 크게 두가지가 있다. 1. 글쓰고 이미지 업로드를 누르면 바로 서버로 정보가 전달된다. 예를들면 멀티파서형식으로 { content: '안녕', image: 01010011110 } 이런식의 데이터가 서버에 저장된다. 백엔드를 간단하게 구축할 수 있지만, 한번에 올려주는 것이기 때문에 이미지 미리보기를 처리하기가 애매하다. 또한 컨텐츠를 업로드하고나서야 이미지리사이징, 머신작업을 할 수 있으므로, 업로드 시간이 오래걸린다. 2. 이미지를 서버로 보내고, 프론트에서 파일명을 받아오고, 한번더 서버로 보낸다. 첫번째 보낼땐 이미지만 데이터로 보낸다. ex. image: 0101000111010 그 후 백엔드에서 브라우저로 파일명..

Node/Express 2021. 1. 5. 13:50

직접 폴더를 만들어줘도 되지만, 폴더가 생성되도록 코드를 짤수도 있다. 파일시스템을 조작 할 수 있는 모델인 fs를 사용한다. accessSync(폴더명)을 사용한다. 폴더명이 없을 시 오류처리되므로, try catch를 사용하여 폴더를 생성할 수 있다. 폴더생성 코드는 fs.mkdirSync(폴더명); 서버를 재실행해보자. 폴더를 생성한다는 로그가 뜬다. 그리고 uploads 폴더가 자동으로 생성된것을 확인할 수 있다.

Node/Express 2021. 1. 5. 00:58

파일이나 이미지를 서버로 보내기 위해서는 form data의 형태로 보내줘야한다. express에 내장된 미들웨어인 body parser로는 처리할 수 없으므로, 이를 처리해줄 미들웨어 multer를 설치한다. multer는 app에다가 장착할 수도 있지만, 보통은 라우터마다 적용시켜준다. 폼마다 데이터를 전송하는 형식이 다르기 때문이다. multer 설정 이미지 업로드 요청을 처리할 라우터에 multer 설정을 하자. 우선은 multer를 불러온다. multer({ storage: 저장할 장소({ destination(req, file, done) { 저장할 공간 }, filename(req, file, done) { 저장할 파일 이름} }), limits: 파일 용량 제한 }); 일단은 저장위치를 하..

Node/Express 2021. 1. 5. 00:36

Form 요소의 속성 중 encType이라는 속성이 있다. 이 속성은 POST 요청 할 때, 데이터를 어떤 형태로 인코딩할 것인지를 설정한다. 속성 데이터 형태 설명 application/x-www-form-urlencoded 문자 (default) 모든 문자들을 서버로 보내기 전 인코딩. 폼 데이터는 URL-Encode가 됨. multipart/form-data 파일 모든 문자를 인코딩하지 않음. 파일이나 이미지를 서버로 전송할 때 사용. 기본값으로 서버로 데이터를 넘기면 파일의 경로명만 전송되고 파일의 내용은 전송되지 않으므로, 파일을 업로드할때는 multipart/form-data를 사용해야한다. 출저 - http://www.tcpschool.com/html-tag-attrs/form-enctype..

HTML & CSS 2021. 1. 3. 23:54

팔로우 언팔로우 기능 dispatch saga route 팔로워랑 팔로윙 숫자 계산을 해주기 위해 유저아이디만 응답.(데이터절약) reducer 프로필 눌러서 팔로우 리스트 가져오기 유저아이디만 프론트에 보내줬으므로, 팔로우 리스트가 필요한 페이지에서 DB에서 팔로우리스트를 받아오자. dispatch saga route reducer

Sequelize 2021. 1. 3. 00:35

삭제하기 모델.destroy({조건}); UserId를 넣어서 내가 쓴 게시글일때만 삭제할 수 있도록 설정 수정하기 모델.update({수정할 데이터}, {조건}); user의 정보중 닉네임정보만 수정하는 것이기 때문에 patch로 요청한다.

Sequelize 2021. 1. 2. 15:51

sequelize에서 쉽게 설정할 수 있도록 관계 메서드를 제공한다. 관계설정을 했을 경우, sequelize에서 다음과 같은 메서드를 제공한다. add: 현재모델.add관계설정모델 (관계설정모델 추가) remove: 현재모델.remove관계설정모델 (관계설정모델 제거) set: 현재모델.set관계설정모델 (관계설정모델 수정) 그리고 설정관계가 일대일인지, 일대다나 다대다인지에 따라, 관계설정모델의 단복수가 바뀐다. 일대다의 경우 관계설정모델s가 된다. 위와 같이 관계설정을 했을 경우, Post-User는 일대일관계이므로, Post.addUser 라는 메서드가 생성된다. Post-Comment는 일대다관계이므로, Post.addComments 메서드가 생성된다. 관계메서드를 사용할 때는 항상 await ..

Sequelize 2021. 1. 2. 15:04

페이지네이션 만들기 앞서 피드를 구현할 때, infinite scrolling 방식으로 게시글을 가져오도록 만들었다. 서버를 만들었으니 더미데이터말고 실제 서버에서 게시글을 가져오도록 할텐데, 게시글을 순차적으로 가져오도록 하는 설정이 필요하다. 이 기능은 시퀄라이즈에서 제공해주는 기능인 limit과 offset 방법으로 설정가능하다. Post.findAll({ //모든 포스트를 가져옴. limit: 숫자, // 한번에 (숫자)개 가져오기. offset: 숫자 // (숫자 + 1) ~ (숫자 + 11) 까지의 게시글을 가져옴. order: [['createdAt', 'DESC']] // 최신 게시글부터 가져옴 (ASC: 오름차순, DESC:내림차순) }); 하지만 offset 방식에는 치명적인 단점이 있..

Sequelize 2021. 1. 2. 14:43