분류 전체보기 (55) 썸네일형 리스트형 nodejs cors 알아보자 (도메인간 교차통신허용) frontend ,backend 구성해서 어플리케이션 만들 때 개발진행상황에서 front단에서 backend단 http통신이 필요할 때 보안상 타 서버이므로 통신이 실패한다. 이럴 때 cors 라이브러리를 사용해서 교차 통신이 가능하게 지원해 준다. cors 모듈이 없으므로 설치하자. npmp i --save cors cors 설정 파일경로 : app.js var createError = require('http-errors'); var express = require('express'); var path = require('path'); var cookieParser = require('cookie-parser'); var logger = require('morgan'); var db = require.. vuejs 게시판 만들기 #5 (axios 사용해서 데이터를 가져오자) axios는 javascript http통신 라이브러리 입니다. 게시판 만들기를 진행한다고 하면 backend URL에 접근해서 데이터를 가지고 올 때 사용합니다. axios 설정하기 파일경로 : /src/main.js import Vue from 'vue' import App from './App.vue' import axios from 'axios'; //axios 호출 import router from './routes'; //설정 라우터 호출 Vue.config.productionTip = true; new Vue({ render: h => h(App) ,router //뷰에 설정 }).$mount('#app') axios 모듈을 설치 후 호출할 수 있습니다. 아래와 같은 에러메세지 확인 모듈이 .. nodejs mysql 연결 후 DB 데이터 호출 mysql 연결을 알아봤다. 서버 localhost:3000/api/board URL 접근 시 mysql 연결해서 데이터를 확인하자 먼저 mysql 테이블을 생성하자. CREATE TABLE `tb_board` ( `num` int(10) NOT NULL AUTO_INCREMENT, `board_code` varchar(20) DEFAULT NULL, `subject` varchar(300) DEFAULT NULL, `cont` text, `id` varchar(50) DEFAULT NULL, `filename` varchar(200) DEFAULT NULL, `ori_filename` varchar(200) DEFAULT NULL, `filesize` int(10) DEFAULT NULL, `regda.. nodejs mysql 연결 최초 접근 시 mysql connection을 설정해서 확인을 해보자 경로 : app.js var createError = require('http-errors'); var express = require('express'); var path = require('path'); var cookieParser = require('cookie-parser'); var logger = require('morgan'); var mysql = require('mysql'); //추가 var indexRouter = require('./routes/index'); var usersRouter = require('./routes/users'); var app = express(); // view engine setup.. nodejs router에 대해 알아보자 router는 설정한 경로를 찾아가서 해당 하는 모듈을 실행을 시킨다. 가령 html에서 A.html, B.html파일이 있다고 생각해 보자. A.html에서 B.html로 이동하고 싶으면 A.html에서 B 화면으로 이동 작성하고 해당 영역을 클릭하면 B.html 화면으로 이동한다. nodejs는 각각의 url에 따른 다른 모듈을 접근할 때에 router 설정이 필요하다. router 설정방법 (nodejs express 프로젝트로 생성) 경로 : app.js var createError = require('http-errors'); var express = require('express'); var path = require('path'); var cookieParser = require('cooki.. nodemon (소스 수정 시 서버 재시작 없이 반영) nodejs 진행하면 소스 수정 시 서버 재시작을 해야한다. 개발 진행 시 수정할 때 마다 재시작을 하면 여간 불편한게 아니다. 그 대안으로 nodemon(소스 수정 시 재시작 없이 반영) 모듈이 있다. 모듈을 설치해보자 npm i --save-dev nodemon 설치 완료!! nodejs 서버를 설치한 nodemon으로 실행 nodemon ./bin/www 실행되면 소스 수정 없이 바로 반영된다. 실행 명령어를 패키지 스크립트에 등록하자 경로 : package.json (scripts: dev) 추가 { "name": "back", "version": "0.0.0", "private": true, "scripts": { "start": "node ./bin/www" ,"dev": "nodemon ./.. vuejs 게시판 만들기 #4 (router 사용하기) npm으로 vue-router 모듈을 설치 npm i --save vue-router 게시판 리스트 컴포턴트 생성 src/components/board/List.vue 게시판 리스트 src/routes 폴더 생성 후 index.js 파일 생성 import Vue from 'vue'; import Router from 'vue-router'; import HelloWorld from '@/components/HelloWorld'; //메인 컴포넌트 호출 import List from '@/components/board/List'; //게시판 리스트 컴포넌트 호출 Vue.use(Router); //vue 라우터 사용 export default new Router({ //라우터 연결 routes:[ { pat.. vuejs 게시판 만들기 #3 (레이아웃 만들기) 홈페이지 기본 레이아웃을 만들어보자 1. 헤더 컴포넌트를 만들기 경로 : src/components/common/Header.vue 메뉴1 메뉴2 메뉴3 메뉴4 2. 콘텐츠 영역은 프로젝트 생성 시 존재하는 HelloWorld.vue 파일 사용 경로 : src/components//HelloWorld.vue 3. 풋터 컴포넌트를 만들기 경로 : src/components/common/Footer.vue copyRight fyzh99.tistory.com 4. App.vue 파일수정 경로 : src/App.vue 웹 브라우져에서 화면을 실행시켜 확인해 보장 이전 1 2 3 4 5 6 7 다음
