공부하는 비오

사진을 추가하고 글을 작성하여, 게시글을 작성하는 코드를 만들어보자. 폼전송방법은 크게 두가지가 있다. 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

morgan이 있으면 오류를 처리하거나 설치는 npm i morgan 으로 morgan 설정 기본 폴더에 불러온다. const morga = require('morgan'); app.use(morgan('dev')); 설정이 끝난 후 클라이언트에서 작업하면, 클라이언트에서 받아온 요청이 콘솔에 표시되어있다.

Node 2021. 1. 2. 11:53

이제 계속해서 로그인은 되어있지만, 새로고침을 하면 로그인이 풀린다. 로그인이 안풀리게하기 위해서 클라이언트 사이드에서 설정을해보자. (제대로하려면 서버사이드 설정을 해야한다. 이건 추후에...) GET /user 요청시 서버라우터 프론트 서버쪽 설정 index.js에서 useEffect를 사용해 게시글목록을 불러오면서 사용자 정보도 불러온다. redux와 saga에서 설정하기. 즉 사이트 처음 접속 및 새로고침 시 Get /user요청을 하도록 만든다. 새로고침 후 state에 유저정보가 있다. 그런데 필요한 정보들(작성한 게시글, 팔로우, 팔로워)는 없고, 패스워드가 있다. 처음 로그인했을때랑 같은 현상이다. 추가적으로 정보를 넣고 빼서 데이터를 처리해주자. model에 attributes를 사용해준..

Node/Express 2021. 1. 1. 18:37

덧글 쓰기를 설정해보자. dispatch 덧글을 쓰고 제출하면, 3가지 인자를 action으로 전달한다. saga 사가에서 주소를 동적으로 설정해준다.(/post/${data.postId}/comment) routes 서버에서도 똑같이 동적으로 요청을 받아야한다. 주소부분에서 동적으로 바뀌는 부분을 파라미터라고 부른다. 파라미터설정은 :을 사용한다. /:postId/comment URI에서 :postId는 '1' 이런 형태의 문자이다. 그러므로 params로 postId를 가져올 때 다시 숫자로 바꿔주어야한다. if(!post)를 사용하는 이유는, 혹시나 존재하지 않는 게시글에 덧글을 달면 안되니까이다. 이게 무슨소린가 싶지만, 말도 안되는 일이 일어나지 못하도록 백엔드에서 철저하게 검사해주어야한다. 사..

Node/Express 2021. 1. 1. 15:35

커스텀 미들웨어 혹시나 브라우저에서 로그인한 사람이 로그아웃을 시도할 수도 있다. 혹은 로그인한 사람이 회원가입을 시도할 수 있다. 이럴 때, 로그인 했을 경우는 위와같은 시도를 하지 못하도록 미들웨어로 설정할 수 있다. routes 폴더에 middlewares.js 파일을 만든다. 아래와 같이 커스텀 미들웨어를 생성한다. isAuthenticated는 HTTP Header에 있는 속성으로, req안에 있다. (req는 프론트에서 보낸 요청으로 HTTP가 포함되어있다.) isLoggedIn // 로그인 되어있을 경우 다음 미들웨어로 넘어가고, 로그인이 안되어있으면 401 에러로 처리한다. isNotLoggedIn // 로그인이 되어있지 않을 경우 다음미들웨어로 넘어가고, 로그인이 되어있으면 401에러로 ..

Node/Express 2021. 1. 1. 15:10

일단 쿠키와 세션이 왜 필요한지를 살펴보자. 쿠키 로그인을 하고난 후, 브라우저와 서버에서 같은 유저정보를 가지고 있어야한다. 로그인 후, 포스트를 작성하거나 덧글을 작성할 때, 유저정보와 함께 서버로 요청해야하기 때문이다. 그러므로 로그인을 할 때, 누가 로그인 했는지를 브라우저에 보내주어야 한다. 실제정보를 보내주면, 비밀번호가 그대로 노출되므로 보안에 취약하다. 그러므로 실제정보대신 암호화한 토큰을 브라우저로 보내준다. 이 토큰은 브라우저에 저장되는데, 이를 쿠키고 부른다. 브라우저에서는 이 후 요청을 보낼 때, 쿠키와 함께 요청한다. (쿠키를 자동으로 요청헤더에 추가하여 요청) 하지만 보통 로그인을 할 때는 쿠키를 사용하지 않는다. 브라우저에서 접근이 가능하고 변조가 가능하기 때문. 로그인과 같이..

Node/Express 2020. 12. 26. 23:34