[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으로 이동할 수 있음 게시판에 들어가면 각 게시판에 해당하는 글 리스트 조회 가능 글 작성 기능 글을 클릭하면 그 글의 내용을 볼 수 있고, 수정, 삭제 가능 페이징 기능 구현 이전페이지, 다음페이..
[Git] Github에 작업중인 프로젝트 push하기
2021. 12. 9. 19:12
Git
[Git] Github에 Repository 생성 및 프로젝트 업로드 여기서 Local Project를 Github에 업로드 하는 방법을 정리했음 프로젝트가 더 진행되면 중간에 push를 해줘야 함 방법 Git cmd 창에서 다음 순서로 입력하면 됨 git add . git commit -m "커밋메시지" git push -u origin master git add . : git에 하위 디렉토리, 파일들 모두 추가 git commit -m "커밋메세지" : 커밋 git push -u origin master : origin의 master branch에 push 이미 github에 연결된 프로젝트이기 때문에 다른 설정들은 따로 안해줘도 됨
[Vue.js] 페이지 동적라우팅
2021. 12. 8. 22:12
Vue.js
동적라우팅 이란? 일정한 패턴의 주소를 하나의 컴포넌트에 연결하는 방식 동적라우팅이 필요한 이유 전혀 다른 2개의 페이지를 만들때는, 2개의 페이지를 각각 만들면 됨 하지만 비슷한 페이지 2개를 만들때, 굳이 따로 만들 필요가 없음 이때, 동적라우팅을 사용하면 페이지 하나로 조금 다른 2개 이상의 페이지를 만들어 낼 수 있음 전에 Vue 페이지 라우팅 여기서는 거의 같은 page 2개를 따로 만들었었는데, 하나의 page만 만들어 2개의 page를 출력하는 예제 params속성, query속성을 참고하면 좋을듯 예제 App.vue 1페이지로 2페이지로 main.js import Vue from 'vue' import App from './App.vue' import vuetify from './plugi..
[Node.js] Sequelize 사용하기
2021. 12. 8. 18:40
Node.js
Sequelize 란? Node.js에서 DB와 연결할 때, 쿼리를 몰라도 좀 더 편하게 사용할 수 있도록 도와주는 모듈 전에 했던 MySQL과 연결 예제을 Sequelize를 사용해 진행 MySQL이 아닌 다른 DB를 사용할 때도 Sequelize 사용 가능 사용 방법 'npm i sequelize'를 통해 sequelize 모듈 설치 (mysql2 모듈은 설치 완료됬다고 가정) 'npm i -D sequelize-cli'를 통해 sequelize-cli 모듈 설치 ( -D : 개발용) 'npx sequelize init'을 통해 sequelize 구조 생성 아래의 폴더들이 자동으로 생성됨 새로 생성 된 config 폴더의 config.json 파일에 들어가서..
[Node.js] DB(MySQL)과 연결하기
2021. 12. 3. 21:36
Node.js
DB생성 및 TABLE 생성 https://chb2005.tistory.com/31를 참고해서 다음과 같이 DB와 TABLE을 생성 DB이름 : test TABLE이름 : student Field : name, age, height Node.js에서 DB와 연결하기 'npm i mysql2'를 통해 mysql2 모듈 설치 다음의 코드를 통해 위에서 생성한 test와 연결 var mysql = require('mysql2'); var conn = mysql.createConnection({ database: 'test', user: 'root', password: '자신이 지정한 비밀번호' }); 데이터 삽입 var query = "INSERT INTO student (name, age, height) V..
[MySQL] MySQL 접속방법(window/mac) + 명령어 모음
2021. 12. 3. 20:01
Database
MySQL 접속 방법 (window) MySQL이 설치된 폴더를 찾음 bin 폴더를 찾고 주소 복사 ( C:\Program Files\MySQL\MySQL Server 5.7\bin ) cmd 실행 후 복사한 주소로 이동 ( cd C:\Program Files\MySQL\MySQL Server 5.7\bin 입력 ) 'mysql -u root -p' 입력 후 패스워드 입력하면 다음과 같이 진입 성공 MySQL 접속 방법 (mac) Terminal 접속 cd /usr/local/mysql/bin ./mysql -u root -p 입력 후 패스워드 입력하면 다음과 같이 진입 성공 MySQL Command Line Client 또는 MySQL Workbench 등의 프로그램으로도 접속 가능 명령어 정리 DB ..