Blog Content

HTML 디자인을 vue에 맞게 뜯어서 작업을 하고 있다. 디자인 작업을 하는데 헷갈려서 내가 이해한대로 정리했다. 잘못된 부분이 있으면 수정하겠습니다! - menu가 있고 클릭했을때 body 부분만 바꿔줘야 할 경우 router 기능을 사용한다. - router 을 기능을 사용하는데 body에 보여지는 내용은 component 로 만들어진다. - vue는 component를 조합해서 구성된다.

front 개발을 새로 시작하려고 세팅을 했다. 1. node js 설치 ( https://nodejs.org/ko/ ) 2. visual studio code 설치 ( https://code.visualstudio.com/download ) 3. Node.js command prompt 실행 3-1. npm install -g @vue/cli 입력 설치 진행 3-2. vue.js 를 설치한다.- vue create 폴더이름- 입력하면 vue 2, vue 3 중에 선택하는게 나오는데 나는 vue3로 했다. 설치가 끝나면 visual studio code 실행해서 설치한 폴더를 열기 한다. 다음 터미널에서 '새 터미널'을 선택한다. vue js 를 실행하려면 이전엔 npm run dev 명령어를 입력했는데..

node js 로 api 서버를 만들었다. 이제 exe 파일을 만들어서 서버에서 실행해서 동작하는지 보려고 한다. 설치하기 1. npm install -g pkg2. pkg 시작_파일이름 --targets node10-win-x64 ( 리눅스이면 pkg 시작_파일이름 --targets linux ) 해당 폴더에 보면 파일이 있다. 실행하고 postman 에서 실행해봤다 잘된다

Vue cli ?command line interface 의 약자이며명령어를 입력하면 cli가 자동으로 결과물을 생성해준다. cli를 사용하면프로젝트 생성 및 프로젝트 관리가 편리하다플러그인 추가, 삭제가 가능하고, GUI로 되어 있어 편하다 node.js를 설치 했으면커멘트창에 명령어를 입력해서 cli를 설치 한다. 윈도우에서는 : npm install -g yam @vue/cli맥에서는 : sudo npm install -g yam @vue/cli 설치가 끝나면 cli를 실행한다. 이어서 명령어를 입력한다. 커멘드창에 : vue ui 입력한다. 실행하고 조금만 기다리면 실행된다.

quasar 설치를 했으면 이제 실행을 해봐야 한다. vusial studio code를 처음 사용하는 사람들을 위해서 quasar로 프로젝트를 만드는 방법 부터 설명한다. 이후에는 페이지를 추가하고 UI 컨트롤을 추가해보자 1. visual studio code 프로그램을 실행후 quasar 프로젝트를 만든다. 터미널 > 새 터미널 클릭하면 아래 터미널에서 명령어를 입력 할 수 있는데 글씨가 아무것도 안나온다면 엔터키 한번 눌러주면 나온다. 명령어 : quasar create ui_quasar ( quasar create 만들폴더명 ) 2. 아래 화면에서 입력하고 선택하는 화면이 나오는데 모르면 엔터키를 눌러서 넘긴다. 엔터키 막 누르지 말고... 아래 화면에서 프로젝트에 필요한 내용을 선택하는데 나오..

Quasar Framework를 사용해서 Vue.js 에 관련하여 공부를 하려고 한다. Quasar Framework 공식 사이트에 들어가보면 알겠지만 Vue.js 기반으로 보안, UI등 많은 기능들을 제공한다.코드 작업 한번으로 여러가지 플렛폼에 한번에 적용된다. 그리고 무료다! 링크 : Quasar Framework 내가 설치한 개발환경이다. Visual Studio Code : 개발 코딩 작업할 프로그램설치 : code.visualstudio.com 아래 설명대로 진행하다가 안된다고 해서 확인했는데 설치가 덜되어서 문제가 생겼다. 이럴경에는 간단하게 https://nodejs.org/ko/ 이곳에 가서 node.js 를 설치해주면 된다. 1. Visual Studio Code에서 quasar 설치V..

Visual Studio 2017에서 Vue 프로젝트 생성이 가능하다. Vue.js Pack 2017 설치 (링크 : Vue.js Pack 2017)node.js 설치 (링크 : node.js)Vue Devtools 설치 (링크 : Vue Devtools) 모두 설치 한다. 설치가 모두 끝났으면... Visual Studio 2017을 실행하고 프로젝트를 생성한다.Vue.js Pack 2017 설치가 잘 됐으면 새 프로젝트 > JavaScript > 기본 Vue.js 웹 응용 프로그램이 보인다. 프로젝트 생성이 되고 F5 눌러서 디버깅 모드로 실행했다.node.js 가 실행이 되고... 결과 화면

vue.js 환경 설정 관련해서 봤는데 설치 어떤거 해야 하나 봤는데 책이나 예제를 봐도 거의 개발툴이 다 다른데...나는 vusial studio 2017이 설치가 되어 있어 일단 이걸로 되는지 해봤다. visual studio 2017을 실행해서 기본 프로젝트를 만들었다. 안쓰는건 다 삭제하고... WebForm1.aspx랑 main.js 파일을 추가 했다. 이렇게 하고 코딩을 해봤다...아무것도 모른다...그냥 이렇게 하면 되요~해서 따라했다... WebForm1.aspx 12345678910111213141516 {{ godffs }} Colored by Color Scriptercs main.js 1234567var app = new Vue({ el: '#app', data: { godffs: ..

난 이게 뭔지도 몰랐다... 그냥 넘어가려고 했지만 궁금해서 검색해 봤는데 vue.js 의 등장 배경에 대해서 읽고 보니 관심이 생겼다. 그래서 좀더 찾아봤는데 다들 쉽다고 블로그에 글을 올렸다... 이게 뭐야? 내가 보기엔 아닌데...ㅡ_ㅡ;; vue.js 로 컴퓨터랑 대화를 나눠 봐야겠다...

이제 화면에서 입력한 데이터를 MongoDB에 저장하는 방법입니다. 먼저 현재 DB에 저장된 내용을 화면에 보여지게 하기 위해 디자인을 수정합니다. input.html DOCTYPE html> List NAME 이제 서버에서 input.html에 데이터를 보내주는 코드를 작성합니다. 이전에 새로 만들어준 server.js 파일을 수정합니다. connect를 사용해서 데이터를 가지고 오는데요. 아래 블로그에 정리된 내용을 가지고 왔습니다. http://uiandwe.tistory.com/entry/nodejs-mongojs-를-이용한-웹페이지-출력 server.js var connect = require('connect'); var fs = require('fs'); var ejs = require('ej..

DB를 연결 MongoDB 사이트에 접속하셔서 다운 받습니다. http://www.mongodb.org/downloads 다운 받은 zip 파일을 압축 풀어줍니다. 저는 압축 푼 경로는 ex) D:\MongoDB 입니다. 압축을 푼 다음 제가 추가한 프로젝트에 MongoDB Data를 저장할 수 있게 폴더를 만들고 할꺼에요. 저장소를 만들어 줍니다. 프로젝트 경로는 F:\NodeJS\TestMemo 폴더 인데요 여기서 Document 폴더 안에 MongoDB 폴더를 만들었습니다. MongoDB 폴더에서 데이터를 관리해주려고 합니다. 옵션을 줍니다. . MongoDB 저장소 지정하기 압축 푼 MongoDB 폴더 안에 bin 폴더에 들어간 다음에 아래와 같이 입력합니다. 서버가 실행이 되었습니다. 지금 열린..

디자인을 하도록 하겠습니다. 그 전에...app.js 파일을 실행을 하면 서버가 실행이 되고 화면에 글씨가 나왔는데요... 이 페이지를 찾아서 디자인 하도록 하겠습니다. app.js 소스를 보니...화면에 보여지는 페이지는 모두 view 폴더이고...화면에 보여지는 엔진이...jade?? 이네요... express 프레임워크에서는 Jade, Ejs 등을 지원한다고 합니다. Jade 설명은 생략 하겠습니다. 궁금하신 분들은 여기로...설명이 참 잘 되어있습니다. Jade란? jade로 하기에는 아직 많이 부족하니깐 html로 진행하겠습니다. 저는 visual studio 2012 개발 툴로 작업하겠습니다. 프로젝트 구성된 폴더 경로에서 views 폴더 안에 html 이지를 만들어주세요. input.html..

제 PC 개발 환경입니다. 운영체제 : Windows7 64bit ( 운영체제 중에서 맥, 우분투가 있지만 저는 윈도우에서 진행하겠습니다. ) http://www.nodejs.org/ 사이트에 접속하셔서 nodejs를 설치해주세요. 설치를 하셨으면 테스트를 해봐야겠죠. 명령프롬프트 창을 열어줍니다. 스크린샷 보시고 따라서 입력해보세요. 명령프롬프트 창에서 console.log('입력') 입력한 결과가 나오면 설치가 잘 된거에요. 그럼 이제 프레임워크를 설치 해야합니다. 가장많은 사람들이 사용하고 있는 Express 프레임워크를 설치 할거에요. 공식 사이트 입니다. http://expressjs.com/ 이곳에 들어가시면 프레임워크 사용방법 설명이 잘 되어 있습니다. (천천히 보도록 하겠습니다.) 다시 명..

새로운? 트렌드로 실시간 웹, 빅데이터 관련해서 많은 이슈들이 나오고 있습니다. 이중 제가 접근 가능한...실시간 웹에 대해서 공부를 하려고 합니다. 책을 사서 봐도 모르겠고...질문을 하자니 어디다가 해야할지도 모르겠고...카페를 들어가도 내가 원하는게 없어 답답한 마음에 전부 외계어...;;모르겠어요. 작년 말부터 알고 진행하고 있었는데... 인터넷 검색만 하다보니 공부는 안하고 계속 눈팅만 하다보니 시간만 가네요... 답답한 마음에 강좌를 쓰면서 ( 내가 직접 한다!! ) 잘못된 점 또는 다른 방법을 제시 해주셨으면 하는 마음에 Node.js 강좌를 작성하려고 합니다. node.js 사용하기 위한 개발 툴들은 많은데요...정말 필요할때는 사용하겠지만 저는 최대한 안쓸꺼에요. (귀찮아서 그런거 아니에..