0.들어가며
사실.. 비전공자 입장에서 새로운 언어를 위해 세팅하는것도 번거로워서 아주 큰 마음을 먹고 시작하게 되었다. 오늘은 그간 html과 js파일 연결을 기억하고 있는지, 기본 파일 구성은 어떻게 되는지 확인하고 싶다는 목표가 있다. 마지막에는 작게나마 동작되는 웹앱을 만들었으면 하는 바램.
[목표]
-1회차: 리액트 세팅 및 기본 파일 만들기
-2회차: 버튼 제작 및 스타일 시트 활용방법
-3회차: 만들고 싶은 프로젝트 구상하기
...
[들어가기 앞서]
-코딩 수준: ...
-사용하는 툴: VS (visual code)
디자이너가 개발을 해야할까? 알고 싶어서 해보는 Vue.js 설치하기 (1)
2021/04/25
1.프로그레스 웹앱이란? (PWA)
PWA이라 줄여서 부르기도 하며, 한마디로 모바일 앱과 웹 기술을 결합한 내용이다. 데스크탑 PC를 언제 켜봤는지 아득해질만큼, 요즘은 모든 업무를 PC보다는 모바일로 처리한다. 앱을 제작해본 사람은 알겠지만, 앱을 다운로드까지 이끌어 내기란 정말 어렵다. 그에 반해 웹은 웹 URL링크만 있다면, 자유롭게 서비스를 넘나들 수 있고, 서비스에 대한 사용자의 접근성이 높아진다. 그리고 네이티브와 달리 안드로이드 개발 능력과, IOS 개발 능력이 별도로 필요하지 않다.
설치방법 — Vue.js
Vue.js - 프로그레시브 자바스크립트 프레임워크
kr.vuejs.org
2.Vue.js 다운받기
홈페이지도 한글로 되어 있어서 위의 Vue.js의 홈페이지에 가면 시작하는 방법이 친절하게 나와있다. 위에서부터 조금만 스크롤을 내리면 Vue.js를 받을수 있는 스크립트가 제공되어 있다. 주기적으로 최신버전을 제공해주는 모양이다. 제공하는 버전에도 1)학습용: 버그나 오류에 대해서 하나하나 알림해줌 2)배포용: 알림없이 배포하는 프로덕션용 이 두가지로 되어 있다. 나는 초보자니까 1)학습용을 사용해보기로 마음 먹음.
1)Script를 사용하여 받기
기본 html 문서를 하나 열어서 head사이에 vue.js에서 제공한 script 태그를 추가해준다. script태그는 사이트에서 제공해주는 버전을 넣으면 된다. 한 줄을 추가하는것 만으로 사용가능하다니, 감동.
<!DOCTYPE html>
<html lang="ko">
<head> <meta charset="UTF-8">
<title>1.vue.js 맥에서 설치하기</title>
</head>
<body>
<!-- vue.js 시작-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="js/index.js"></script>
<!-- vue.js 끝-->
</body>
</html>
2)크롬으로 파일을 열어서 콘솔 확인
위의 html파일을 저장하고 크롬으로 가져가서 파일을 연다. 아직 body안에 아무것도 작성하지 않아서 빈공간이다. 하지만 개발자도구 > 콘솔을 열면 좌측에 잘 연결되었다고 내용이 나온다. 자세히 읽어보면 '너는 개발 모드로 뷰를 실행하고 있어'라고 적혀있다. vue를 사용할 수 있는 모드가 되었다는 안내가 나오면 완성이 되었다. 뚜둔.
2.파일 만들기
홈페이지에 보단 시작하기 바로 다음으로 간단한 예제를 안내하고 있다. vue.js의 이름에서 알수 있듯이 html문서에 js를 붙여가며 작동 시키는 방식이라, 1)index.html문서에 js문서를 붙여서 렌더링 해야한다.
-컴퓨터 내의 폴더구조
웹사이트를 만들 때처럼 기본은 index.html과 css스타일 시트, js파일을 만들어 주었다. js는 vue.js를 쓰고, css스타일은 부트스트랩을 사용할 예정이다.
-index.html안에서의 파일 구조
js 파일을 연결시키기 위해서 스크립트 태그안에 새롭게 만든 js 파일을 연결시켜 주었다. 이름은 작업하는 사람이 관리하기 편하게 적어주면 된다. 나는 편의상 index.js라고 이름 붙였다.
<script src="js/index.js"></script>
-작업하고 있는 파일
대부분 부트스트랩을 사용할거지만, 일부는 커스텀할것 같아 (디자이너니까..) css시트를 하나 추가해주었다. 상단의 탭처럼 나는 index.html과 index.js와 stylesheet-global.css로 세개로 작업할것이다.
3.선언적 렌더링하기
- js파일 안에서 app이라는 새로운 객체를 만든다. 해석하자면 이 객체는 app이라는 이름을 가지고 있고, html파일에서 해당 객체를 부르고 싶다면 html파일 안에서 #app이라고 적으면 자동으로 내용이 불러와진다. 이 app이 가지고 있는 데이터중에서 message라는 데이터는 string(일반 텍스트)형태로 '안녕하세요 Vue!'라는 내용을 가지고 있다.
-여기서 내가 자유롭게 설정할수 있는 부분은 app과, #app, 그리고 데이터 안에 들어갈 message와 message안의 '안녕하세요 Vue!'라는 내용이다. ''는 js에서 스트링(일반 문자열)임을 나타낸다.
var app = new Vue({
el: '#app',
data: {
message: '안녕하세요 Vue!'
}
})
- html 파일에서 div id를 사용하여 위에서 만든 내용을 불러온다.
a.#app만 치면 div id 이하 내용을 칠 필요없이 자동으로 div 코드를 자동으로 써준다.
b.div코드 안에서 div id는 위의 js파일에서 설정한 app으로 불러오고 안에 필요한 데이터인 {{message}}을 불러온다.
<body>
<div id="app">
{{ message }}
</div>
<!-- vue.js 시작-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="js/index.js"></script>
<!-- vue.js 끝-->
</body>
4.활용하기- 불러와서 리스트로 만들기
기초 문법을 활용하여 html에서 간단하게 js의 데이터들을 가져올 수 있다. 아래의 js 파일에서 새롭게 id가 app1을 생성해주었다.
-js에서 새로운 변수로 app1만들기
app1은 html 파일에서 #app1만 입력하면 새롭게 div를 생성할 수 있다. 안의 데이터를 여러가지를 입력할 수 있도록 하였는데 임의로 'todo'라는 이름의 데이터를 추가하였다. todo의 데이터안에는 3개의 list가 있는데 각 내용을 스트링('')으로 입력해주었다. 이때 html에서 사용해야하는 값은 'todos'라는 값과 'text'라는 값이니 꼭 html에서도 이대로 정확하게 기입해줘야한다.
var app1 = new Vue({
el: '#app-1',
data: {
todos: [
{ text: 'JavaScript 배우기' },
{ text: 'Vue 배우기' },
{ text: '무언가 멋진 것을 만들기' }
]
}
})
-html에서 js파일의 app1불러오고, 원하는 데이터 적어주기
리스트 아이템을 <li></li>으로 사용하고 'v-for' 디렉티브는 배열의 데이터를 바인딩하여 Todo 목록을 표시하는데 사용할 수있다. js파일에서 정의한 todos안에 todo가 들어가고 그 중에서도 text의 값을 리스트 (li)로 정렬해준다. ol태그를 사용했으니 리스트 앞마다 순서가 매겨진다.
<div id="app-1">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
-크롬에서 확인하기
두 파일을 저장하고 크롬에서 파일을 불러오면 아래와 같이 자동으로 1, 2, 3 숫자가 매겨진걸 볼 수 있다.
(*ol은 순서를 매기는 odered list이니, ol태그를 제외한다면 일반 li로 순번을 매겨지지 않고 나열되어 나온다)
5.잡담
일단 플러터나 리액트보다 설치가 간단하여, 설치에 많은 시간을 들이지 않는 점이 좋았다. 다음에는 목표로 잡은만큼 버튼을 사용하고, 스타일을 자유롭게 변경할수 있도록 공부해봐야겠다. 그럼 오늘은 여기까지!
'괴발개발' 카테고리의 다른 글
| Vue.js instance study- 뷰 인스턴스 이해하기 (0) | 2021.08.06 |
|---|---|
| Vue.js reactivity study- 뷰 리액티비티 스터디 (0) | 2021.07.11 |
| Vue.js 기본셋팅 - 프로그램, 확장 플러그인 설치 (vetur, google amterial icon, live server, ESLint, Prettier, Auto close tag, atom keymap) (0) | 2021.07.10 |
| Vue.js로 todolist만들기-(2) 클릭 이벤트 및 todo, done, all 분류 (0) | 2021.05.22 |
| Vue.js로 todolist만들기-(1) vue cli 설치, node.js설치, bootstrap연결하고 기본 구조 만들기 (0) | 2021.05.15 |