이미지 업로드 기능을 구현하고싶을때
이 모듈을 사용하면 된다
이 이미지 저장 할건지
서비스 특징에 따라 다르다
input 태그 통해 이미지 선택 시
바로 업로드 진행 할거고
업로드 된걸 다시 클라이언트에게 알릴거다
게시글 저장때는 DB에 이미지 데이터를 직접 넣는 대신
이미지 경로만 저장할거고 이미지는 서버 디스크에 저장 될거다
라우트.. 전에 컨트롤러 부터 만들자
controllers/post.js | |
![]() |
이거는 ![]() 얘랑 ![]() 얘 불러옴 |
![]() |
afterUploadImage 에선 요청한 파일이 뭔지 콘솔창에 띄우고 json형식으로 url에 /img/요청한파일.파일명 해서 담는것 까지 딱 컨트롤러가 하는 역활만 함. |
![]() |
uploadPost 에선 쿼리를 실행해 post에 담잖아 요청한 유저의 내용, 사진, 유저아이디 를 그리고 hashtag.. 게시글 내용에서 해시태그를 정규표현식(/#[^\s#]*/g)을 추출해 낸다 그다음 result에 방금 해시태그를 매핑 할건데 findOrCreate 메서드를 쓰면 DB에 해시태그 있어? 그람 가져와 없어? 그람 만들고 가져와 임. 마지막으로 post.addHashtags(result.map(r => [r]); 해시태그 모델들을 저 메서드로 연결함 |
![]() |
에러처리. . |
routes/post.js | |
![]() |
파일 접근 하려니깐 fs 쓴거고 나머진 다 아는거고.. |
![]() |
이제 아까 만든것들을 불러 와야지 |
![]() |
시도해 uploads 근데 폴더가 없음? 그람 만들어서 시도해 |
![]() |
|
![]() |
multer 패키지는 사진을 디스크게 저장한다
근데 서버에 문제 생기면 이미지제공 불가거나 손상될수 있음
그래서~ 이런건 클라우드 스토리지 같은 정적 파일 제공 서비스를 사용할 필요가 있다
(multer-s3, multer-google-storage 같은거 쓰면 됨)
게시글 작성까지 추가 됬으니
이젠.. 메인 페이지 로딩시
메인 페이지와 게시글이 같이 로딩되게 하자
controller/page.js | |
![]() |
|
![]() |
|
![]() |
계속 해왔듯 이제 라우터 만들어 연결 해야함
routes/page.js | |
![]() |
만든 컨트롤러 불러오고 |
![]() |
불러와서 연결하고 |
팔로잉 기능과 해시태그 검색 기능 구현
팔로잉 기능과 해시태그 검색 기능을 위해
user 라우터와 컨트롤러를 만들자
controllers/user.js | |
![]() |
|
![]() |
req.user.id 가 followerId req.params.id가 followingId req.params.id 는 라우터에서 PSOT /user/:id/follow 시 /:id 부분이 될거 팔로우한 유저를 DB에서 조회시 시퀄에서 추가한 addFollowing 메서드로 현재 로그인한 유져와 관계를 지정 함 팔로잉 관계가 생겼음으로 req.user에도 팔로워와 팔로잉 목록을 저장(불러올땐 같이 불러올게 됨) req.user 바꾸려면 deserializeUser을 손대야함. |
![]() |
에러처리 |
routes/user.js | |
![]() |
파일들 불러오고 |
![]() |
POST /user/:id/follow 라우터 다 :id 부분은 위 컨트롤러에서 보면 req.params.id 가 들어감 |
req.user 바꾸려면 deserializeUser을 손대야한 다고 했지?
passport/index.js | |
![]() |
![]() |
왼쪽거를 오른쪽 거처럼... 세션 저장 아이디로 유저 정보 조회 할 때 팔로잉 목록과 팔로워 목록 둘다 조회함 include 에서 계속 attributes를 지정하고 있는데 이는 실수로 비번 조회를 방지하기 위함임 |
deserializeUser 캐싱?
- 라우터 실행 전 deserializeUser 먼저 실행됨.
모든 요청 들어올때 마다 매번 유저정보를 조회하게 되는데
서비스 규모 커질수록 더 많은 요청이 들어오게 되고
그로인해 DB에 가해지는 부담도 커지는건 당연함
그래서! 유저 정보가 자주 바뀌는거 아니면 캐싱 해두는편이 좋다
단, 캐싱 유지되는 동안은 팔로워와 팔로잉 정보가 갱신 되진 않다는 단점
캐싱 시간은 서비스 정책 따라 조절해야함
(실 서비스에선 메모리에 캐싱하기 보다는 레디스 같은 DB에 유저 정보 캐싱함)
팔로인 숫자 / 팔로우 버튼 표시 만들기
controllers/page.js | |
![]() |
Hashtag 만 추가 해주고 |
![]() |
쿼리스트링으로 해시태그명을 받고 그 값이 없으면 redirect('/')메인 페이지로 보내고 DB에서 해당 해시태그 있으면 시퀄에서 제공 getPosts 메서드로 모든 게시글을 가져옴 (가져올때 작성자 정보를 합침) 조회 후 메인 페이지 랜더링하면서 전체 게시글 대신 조회된 게시글만 twits에 넣어 렌더링 함 |
routes/page.js | |
![]() |
방금만든 renderHashtag 넣어준다음 |
![]() |
로그인 한 경우는 req.user가 존재하므로 팔로잉/팔로워 수와 팔로워 아이디 리스트 를 넣는다 팔로워 아이디 리스트를 넣는 이유? 팔로워 아이디 리스트에 게시글 작성자의 아이디가 존재하지 않으면 팔로우 버튼를 보여줘야 하니까 |
![]() |
GET /hashtag 라우터에 만든 컨트롤러 연결. |
이게 다 됬으면 이제
routs/post.js와 routes/user.js를
app.js에 연결해야 한다
app.js | |
![]() |
라우터 등록은 뭐이제는 자동이지.. 불러오고 |
![]() |
미들웨어로 만들고 |
![]() |
업로드한 이미지 제공할 라우터도 express.static미들웨어로 uploads폴더와 연 |
그럼 서버를 켜서.....
아~싸 에러다
또 에러다~ㅋㅋ
https://whaledowny.tistory.com/55
SequelizeEagerLoadingError: User is not associated to Post!
에러다 또 에러.. 시퀄라이즈 뭐 로딩 에러 이러는데 User is not associated to Post! 이러는걸 봐서.. 사용자가 Post에 연결이 안됬다 그르네?? 로그인 했는디에ㅔㅔㅔ? 코드상 빨간줄은 읎었음 콘솔창에
whaledowny.tistory.com
고침..
이건 또 뭐얔ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
https://whaledowny.tistory.com/56
Unknown column 'Followers->Follow.followerId' in 'field list'
후... 이건 아마도 DB 테이블쪽 문제겠지 컬럼이 없다는건가?? DROP DATABASE 하고.. npx sequelize db:create 해줘서 다시 만들었봤다 육안으론 아무런 차이 없었고 안의 컬럼들도 큰 변화를 모르겠으나. .
whaledowny.tistory.com
고침... 휴 에러 처리반 오늘도 열일 하구만..
정상 작동까지 성공
다른 계정도 만들어 테스트 해보려는데 오잉?
지금의 코드는 공부하는거 그니깐 연습용? 이랄까..
보안같은건 전문 서적 찾아보며 작업 해야 하는구나..?
지금 이건 웹 서비스 보안 관련 공부가 아닌
nodejs로 웹 서비스 구현 해보는것 뿐이니깐...?
흠. . . . . . 일단은 뭐.. 알았음..
'Back-End Frameworks > Node.js' 카테고리의 다른 글
22) nodejs_ 실시간 데이터를 주고받는 웹 소켓 통신 (0) | 2023.09.15 |
---|---|
< SNS 만들기 실습 최종 정리 > (0) | 2023.07.26 |
20)Nodejs_간이 SNS 서비스 만들기_(4) 카카오 로그인 구현, (0) | 2023.07.25 |
19)Nodejs_간이 SNS 서비스 만들기_(3) passport 모듈로 로그인 구현 (0) | 2023.07.24 |
18)Nodejs_간이 SNS 서비스 만들기_(2)_DB 설계 및 셋팅 (0) | 2023.07.24 |