프론트엔드랑 백이랑 나눠서 관리
프엔은 vue
비동기로 api 호출
vue를 기반으로 js로 한다구.
외부모듈을 불러와서 사용할 수 있음
npm 외부모듈 사용
외부모듈을 받아오는 저장소
사내보안이 강한 회사는 노드 자체의 보관함을 사용하는게 아니고 삼호중공업 자체 레지스트리를 이용해야함
https://hiway.hhigroup.kr/#/guide
ctrl + shift+ p -> 명령어 커맨드
ctrl + p -> 파일 검색
vscode확장팩 설치 안될 땐 구글에서 다운받고 저기 ... 에 들어가서
vsix에서설치 입력하긔~
run with liveserve -> ㅎ현재 만들어진 프로그램의 라이브 서버를 열어준다며/
'use strict'
// const constMessage = { name : 'ghdrldehf', age : 1 }
// let letMessage = "letMessage"
// letMessage= "changeMessage"
// constMessage.name = "둘리"
// console.log(letMessage)
// console.log(constMessage)
function addNum(a,b){
return a + b
}
console.log(addNum(1,2))
const addNum3 = (a,b) =>{
return a+ b+b
}
console.log(addNum3(1,2))
//함수를 개발하다가 함수의 파라미터에 대한 디폴트 값을 주고 싶을 땐 ES6에선 값을 고정해주면 된다 ex ) b=20
// 백틱
console.log(`"큰따움표" '작은따움표'`)
console.log(`"큰따움표"
'작은따움표'`)
const first = "고길동"
const last = "둘리"
console.log(last + first)
console.log(`성 : ${last} 이름 : ${first}`)
const obj = {
name: 'west',
age : 10,
memo:'hello',
}
const{ name, age } = obj
//import를 통해서 가지고 오고 싶은 값만 가지고 올 수 잇다며..
//이것이 바로 구조분해할당입니다.
console.log(name)
console.log(age)
const testArray = [
{ name : '김서영',age : 20 },
{ name : '고길동',age : 40 },
{ name : '둘리',age : 100 },
]
for(const test of testArray){
//testarrya의 배열의 갯수만큼 반복문 돌리는거임
console.log('이름:' +test.name)
console.log('나이:' +test.age)
}
vue js 프레임워크
view에서 어떤 이벤트가 발생하면 dom listners에서 캐치해서 모델로 보내줌
싱글 파일 컴포넌트
빌드 도구를 사용하는 대부분의 Vue 프로젝트에서는 HTML과 유사한 싱글 파일 컴포넌트(Single-File Component: SFC, *.vue 파일)라는 파일 형식을 사용하여 Vue 컴포넌트를 작성 합니다.
이름에서 알 수 있듯이 컴포넌트의 논리(Javascript), 템플릿(HTML), 스타일(CSS)을 하나의 파일에 캡슐화 합니다.
캡슐화를 통해서 하나의 파일로 관리한다.
view의 기본주고는 cdm으로 할꺼임
https://v3-docs.vuejs-korea.org/guide/introduction.html
Options API
Options API를 사용항 옵션의 data, methods 및 mounted 같은 객체를 사용하여 컴포넌트의 로직을 정의합니다. 옵션으로 정의된 속성은 컴포넌트 인스턴스를 가리키는 함수 내부의 this에 노출 됩니다.
나중에 협업할 땐 옵션으로 할껀지 컴포지션으로 할껀지 선택
컴포지션이 재활용성이 좋고 react랑 유사함
Composition API
Composition API를 사용하는 경우, import 해서 가져온 API 함수들을 사용하여 컴포넌트의 로직을 정의합니다. SFC에서 Composition API는 일반적으로
<script src="vue@3.3.4.js"></script>
<div id="app">{{ message }}
{{ htmlMessage }}
<!-- 리액트랑 똑같이 div에다가 담으면 댑니다. -->
<div v-html ="htmlMessage">
</div>
<span v-bind:title="tooltip">마우스 호버 어쩌고</span>
<!-- <span :title="tooltip">마우스 호버 어쩌고</span> -->
<!-- 축양형 -->
<div v-bind="objectAttrs">여러 속성을 동적으로 바인딩하긔</div>
<input v-model = "message">
<p>{{message.split('').reverse().join() }}</p>
<p :class="obejOfClass">경고등입니다.</p>
<p style="font-size: 50px;">인라인 스타일 바인딩</p>
<p :style="{color:activeColor,'font-size': activeSize}">인라인 스타일 바인딩</p>
</div>
<script>
const { createApp, ref } = Vue
//
createApp({
setup() {
const message = ref('Hello future!')
const tooltip =`이 페이지는 ${new Date()}에 로드되었습니다.`
const htmlMessage = '<h1 style="color:blue">hi</h1>'
const objectAttrs = {
id : 'container',
class: 'wrapper'
}
const isActive = false
const obejOfClass={
active : true,
danger : true
}
const activeColor = "blue"
const activeSize = '100px'
const classString = 'active danger'
return {
message,
htmlMessage,
tooltip,
objectAttrs,
isActive,
obejOfClass,
classString,
activeColor,
activeSize
}
}
}).mount('#app')
</script>
<style>
.active{
font-size: 50px;
}
.danger{
color: red;
}
</style>
