Vue.js

vue 모바일웹 설정 (Feat. wonya)

모바일 시장이 커지면서 웹과 같이 운영하는 방식이 크게 3가지로 분류 되어 있는데요. 1. 네이티브앱 - play store 에 올라온 앱 2. 모바일웹 - 브라우저에서 모바일 버젼을 지원해 주는것 3. 하이브리드앱 - play store 에 올라온앱이지만 내부는 모바일웹인 것 여기서 나는 모바일웹 방식을 오늘 해볼 생각이다. 모바일웹에도 다양한 기법이 있는데요. URL 을 직접적으로 다르게 해서 화면을 다르게 보여주는것 예를 들어 네이버가 있겠네요. https://www.naver.com/ https://m.naver.com/ 그렇지만, 오늘은 같은 도메인으로 vue에서 모바일, 웹을 구분하는 방법을 해보겠습니다. 먼저 완성본을 보자 전제조건은 node + vue 셋팅(vue node 연동 이라 검색하..

Vue.js 사용 (Feat. wonya)

오늘은 보자 라이브러리방식의 vue.js 를 알아보자. 1. 선언적 렌더링 일단 xxx.html 파일을 하나 만들고 html 파일에 바로 cdn 방식으로 다운받아 사용할 수 있습니다. {{ message }} 위와 같은 test.html 을 만들고 난후 브라우저로 해당 파일을 열어보면 ◀ 왼쪽과 같이 {{message}} 대신에 Hello Vue.js 라는 문구로 치환된게 확인됩니다. Vue.js 에서는 이를 'DOM에 데이터를 렌더링' 한다라고 합니다. 요기서 이제 F12 를 눌러서 console 텝을 누르다음에 app.message = "바보야" 라고 입력하면 위에 Hello Vue.js! 라는 문구가 바보야라 변경된걸 확인 가능 자 실습시간~ 밑에▼ "안녕하세요 Vue!" 문구를 "나는 바보다" 로..

node.js express 프레임워크 Hello World (Feat. wonya)

이번시간에는 java에 spring 프레임워크 처럼 node.js 에서는 express 라는 프레임워크가 가장 유명한데요. 이것을 이용해서 Hello world 를 띠워보겠습니다. 1. express 설치 2. express 실행하여 프로젝트 생성 경고가 뜨는데 뷰엔진을 멀로할지 고르라는것 같은데 vue.js 쓸거니 일단 무시해보자 3. 시키는데로 해보기 이번에도 jade 경고도 뜨고 하는데 별 상관 없을 것 같은 느낌이다. 서버를 실행해 보았다. 4. 잘 뜨네~ 5. Express -> Hello World 로 바꿔보기(번외) 이게 express 가 생성해주는 기본 구조인데 - bin : 실행 설정(port) - node_modules : 라이브러리 폴더 - routes : 서버단 역할 - views ..

node.js 설치 (Feat. wonya)

node.js 홈페이지 접속 다운로드하기(공짜) https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2. 그냥 다음 다음 확인 누르시면 끝~ (cmd 확인) 위처럼 버젼 정보가 잘 나오면 설치가 끝난거에요~

node.js + vue.js 들어가기에 앞서...

저는 spring 개발자이구요. node.js + vue.js 공부하고 싶어서 이렇게 글로 남겨보려 해요. Front : vue.js Back : node.js(express) 개발 환경 : window10 IDE : visual studio code 로드 맵 -> nodejs HelloWorld 띠우기 -> vue.js HelloWorld 띠우기 -> node.js vue.js 연동 -> index 원하는데로 만들어보기