codepen에서 테스트를 하다 보면 저장이 필요합니다.
작성 후 다른 곳에 저장할 수 도 있지만 사이트에 저장해 놓고 필요할 때마다 테스트가 가능하기 때문에 너무 편리하게 상용가능합니다.
아래 작성 된 링크에서 사이트에 저장하는 방법이 작성되어 있습니다.
2024.03.06 - [dev/front-end] - Vue.js 개발 필요 사이트 codepen.io
Vue.js 개발 필요 사이트 codepen.io
Vue 개발을 위해 레퍼런스가 필요합니다. vueframework.com 사이트에 가시면 Vue 개발에 관하여 알수 있습니다. 다만 전부다 읽기 귀찮고 자동번역된거라 이해가 좀 어려울 수 도 있기 때문에 일반적으
st-d.tistory.com
다른 사람에게 사이트를 알려줄 수도 있고 사이트 공유하기 불편할 수도 있을 겁니다.
내부망에서 개발을 할 수 도 있고요
외부에 저장하기 위한 방법입니다.
Pen 화면에서 오른쪽아래에 보면 Export 버튼을 클릭합니다.
Export.zip 부분을 클릭하면 Export.zip 압축 파일로 다운로드가 됩니다.
압축을 풀어 확인을 하면 아래 그림과 같이 폴더 2개 확인이 됩니다.
두 폴더를 비교 프로그램을 사용하여 비교해 봤습니다.
확인해 보니 Pen에서 작성된 내용에서
css, js 파일은 동일할 걸 확인할 수 있습니다.
폴더 차이
src 폴더 : Pen에 작성된 내용이 입력되어 있습니다.
dist폴더 : html로 편환 된 소스를 확인할 수 있습니다.
아래는 dist html파일의 내용입니다.
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - test입니다</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<h1 id="app">html이야기</h1>
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.37/vue.global.prod.min.js' ></script>
<script src="./script.js"></script>
</body>
</html>
다운로드 한 vue 소스가 html에서 동작되는 걸 확인할 수 있습니다.
에러 발생 시 vue.js 링크가 잘못되어 동작이 제대로 되지 않을 수 있습니다.
vue.js 링크 확인이 필요합니다.
변경 전 처럼 되어 있으면 변경 후처럼 변경하시면 됩니다.
<!-- 변경 전 -->
<script src='https://unpkg.com/vue@next'>
<!-- 변경 후 -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.37/vue.global.prod.min.js' ></script>
오늘 작성한 내용을 생각해 보면 vue배포가 어찌 될지 감이 오는데 제가 생각하는 게 맞는지는 확인을 해봐야 알겠습니다.
'dev > front-end' 카테고리의 다른 글
| input 숫자만 입력(mask) (0) | 2024.05.12 |
|---|---|
| input, textarea 클릭 시 자동 드래그, 자동 선택 (0) | 2024.05.12 |
| Vue.js 개발 필요 사이트 codepen.io (2) | 2024.03.06 |
| Vue. 설치, Vue 서버 실행, Vue 개발시작 (0) | 2024.03.05 |
| react 웹서버 시작, react 시작, react 처음 개발 (0) | 2024.03.05 |
