[Node.js] Swagger 사용하기 2 - 코드 분리, components 사용
2021. 12. 22. 15:33
Node.js
저번에 Swagger 사용하기 1에서 간단한 로그인 기능을 만들어 봄 ( DB 사용 X ) 회원가입 기능을 추가하면서 코드를 분리하고 components를 사용해 봄 회원가입 기능 추가 이런 식으로 하면 서버를 다시 시작했을 때, 새로 가입한 user 정보들은 날아가긴 하지만 swagger 사용이 주 목적임으로 최대한 간단하게 함 // 회원가입 기능을 추가한 routes/user.js var router = require('express').Router(); var users = [ {id: 'chb2005', pw: '1234', nickname: 'changbum'}, {id: 'alex123', pw: 'a789'..
[Node.js] Swagger 사용하기
2021. 12. 14. 21:00
Node.js
Swagger 란? API 명세를 도와주는 도구 (협업을 할 때 유용) API 명세 : 프론트엔드와 백엔드 사이에서 어떤 방식으로 데이터를 주고 받을지에 대해 명세하는 것 사용 방법 간단한 로그인 기능을 담당하는 서버가 있다고 가정 /user/nickname으로 requestBody에 id와 pw을 담아 request했을때 그에 일치하는 id와 pw가 존재하면 nickname을 response하는 기능 // routes/user.js var router = require('express').Router(); var users = [ {id: 'chb2005', pw: '1234', nickname: 'changbum'}, {id: 'alex123', pw: 'a789', nickname: 'alex'},..
[Node.js + Vue.js] 게시판 만들기 5. 이미지 업로드 기능 추가
2021. 12. 13. 18:12
Node.js
이전까지 진행 상황 [Node.js + Vue.js] 게시판 만들기 1. 설계 & 결과 [Node.js + Vue.js] 게시판 만들기 2. Vue.js를 사용한 Front Server 구현 [Node.js + Vue.js] 게시판 만들기 3. Node.js를 사용한 Back Server 구현 [Node.js + Vue.js] 게시판 만들기 4. 검색 기능 추가 추가 기능 정리 Vue의 FormData와 Node.js의 multer을 사용한 이미지 업로드 기능 글 작성 시 이미지 추가 할 수 있게함 (여러개 가능) 추가한 이미지 미리보기 게시판에서 글 선택시 글 내용과 함께 업로드한 이미지들 나오게 함 업로드한 이미지는 로컬 파일에 저장하고 불러옴 추가 코드 Front -> Write.vue templa..
[Node.js + Vue.js] 게시판 만들기 4. 검색 기능 추가
2021. 12. 11. 18:31
Node.js
이전까지 진행 상황 [Node.js + Vue.js] 게시판 만들기 1. 설계 & 결과 [Node.js + Vue.js] 게시판 만들기 2. Vue.js를 사용한 Front Server 구현 [Node.js + Vue.js] 게시판 만들기 3. Node.js를 사용한 Back Server 구현 추가 기능 정리 메인화면에 검색기능 추가 제목검색, 작성자검색 가능하고 키워드를 포함하는 게시물 모두 불러옴 게시글 클릭시 해당 게시글 페이지로 이동 검색결과가 총 몇개인지 표시 게시판 페이지에서 구현했었던 10개씩 불러오는 기능은 구현하지 않음 ( 한 페이지에 모두 나타남 ) 추가 코드 Front -> Main.vue template 부분 추가코드 검색 검색결과 : {{searchcnt}} 개 게시판 작성자 제목..
[Node.js + Vue.js] 게시판 만들기 3. Node.js를 사용한 Back Server 구현
2021. 12. 11. 16:20
Node.js
프로젝트 구조 사용 모듈 express npm i express axios npm i axios cors npm i cors mysql2 npm i mysql2 sequelize, sequelize-cli 설치 방법 : https://chb2005.tistory.com/33 구현 코드 설명 app.js var express = require('express'); var cors = require('cors'); var app = express(); app.use(cors({ // cors설정을 해줘야 front서버와 통신 가능 origin: 'http://127.0.0.1:8080', credentials:true, })); app.use(express.json()); app.use(express.url..
[Node.js + Vue.js] 게시판 만들기 2. Vue.js를 사용한 Front Server 구현
2021. 12. 11. 14:34
Node.js
디자인적인 부분에 대한 설명은 따로 하지 않음 프로젝트 구조 사용 모듈 Vue(Vue-Cli) 설치 방법 : https://chb2005.tistory.com/20 Vuetify 설치 방법 : https://chb2005.tistory.com/21 axios npm i axios vue-router npm i vue-router@3.5.3 구현 코드 설명 App.vue 별 내용은 없고 vue-router을 이용해 페이지 라우팅 main.js import Vue from 'vue' import App from './App.vue' import vuetify from './plugins/vuetify' import VueRouter from 'vue-router' Vue.config.productionTip..
[Node.js + Vue.js] 게시판 만들기 1. 설계 & 결과
2021. 12. 10. 21:49
Node.js
프로젝트 전체 코드 ( 추가되는 기능 포함 ) https://github.com/Changbum97/Vue-Node-Board GitHub - Changbum97/Vue-Node-Board Contribute to Changbum97/Vue-Node-Board development by creating an account on GitHub. github.com 설계 구현할 기능 Front Server, Back Server 구분 ( 서버 2개 필요 ) 게시판 1, 2, 3 생성 메인화면에선 게시판 1, 2, 3으로 이동할 수 있음 게시판에 들어가면 각 게시판에 해당하는 글 리스트 조회 가능 글 작성 기능 글을 클릭하면 그 글의 내용을 볼 수 있고, 수정, 삭제 가능 페이징 기능 구현 이전페이지, 다음페이..