[4] JavaScript

-VUE-

 

과거 : HTML이 주인공, JS 보조

현재 : JS가 주인공, HTML = viewer

 

- JS중심으로 바라보게 되면

> JS안에있는 데이터가 변경이된다. -> HTML에 반영 -> 동적으로 화면 갱신

 

 

 

- 서버사이드 중심 개발인  Vue, React, Angular 인기가 많은 이유?

>(서버사이드중심) asp/jsp/php에서 왜 옮겨갔을까?

>> 경제적인 변화/ 환경의 변화 / 경쟁력

>>>적은 개발자 -> 많은 서비스 -> 분업 - 전문 프론트/ 백엔드

>>>>백엔드 = 인프라 - 클라우드, 오케스트레이션, MSA - 신입이 진입하기에 장벽이 너무 높다. (경험치를 쌓는것이 쉽지않다)

>>>>프론트 - 웹디자이너 - 웹퍼블리셔 - 주어진 페이지 결과 (과거)

어플리케이션 - 설계가 필요하고 - 백엔드/프론트 사이에서 커뮤니케이션 기술적인 내용 이해( 풀스택이다 )

 

[Web Application vs Web Page]

- Application이라는건 무엇인가? :  특정한 업무를 수행할 수 있는 프로그램

- 고유의 메모리 사용

- 라이프 사이클 존재

- 구조와 흐름을 가지고 있다.

- 외부와 통신

-----------------------------------

- Application 개발 -> 플랫폼을 이용 -> Web플랫 -> HTML5를 사용하게 됐는데 플랫폼으로 봐야한다. (모바일)

- HTML5 : JS중심 + 수많은 API(기능)

> HTML5는 모바일용 플랫폼이였다

 

<HTML5 - GeoLocation>

> 지도API서비스 ( 위치정보 등을 찾아냄 )

 

[JS의 한계]

- 약한 타입

- 패키지나 네임스페이스 없음

- 객체지향 처리의 어려움

- 브라우저 지원 한계 그래서 Angular, Vue가 나온것

-----------------------------------

 

[React의 모토, Vue의 모토]

- React의 모토 : 우린 라이브러리를 지향한다. (완성이 되어있는것 = 원하는 기능을 제공)

- Vue의 모토 : 프레임 워크 

- 이것을 이용해서 개발이 가능해졌다 보니 방법론이 필요 그 방법론이 바로 프레임워크

> React 프레임워크 - Next.js

> Vue 프레임워크 - Nuxt.js

 

- VS Code 확장 프로그램

1. Vue Snippets > HTML 템플릿 만들때처럼 코드풀을 만들때 유용하다.

2. Vue3 Official

 

[ Vue ]

- Options, Composition : Vue2, Vue3의 차이가 난다.

- npm install vue@latest 를 사용해서 실행할 수도 있는데 포트를 3000번 포트를 사용한다.

- Vite = port:5173

- App.vue - 화면 

 

- ex) <div data-xxx> 은 사용자정의 데이터 속성

- data- 뒤에 오는 xxxx 부분은 개발자가 자유롭게 지정할 수 있는 값입니다. 이를 통해 HTML 코드에 중요한 데이터를 임베드하면서도, CSS나 브라우저의 기본적인 동작에는 영향을 주지 않습니다.

 

- 컴포넌트 기반 개발 (CBD)

> 재사용 가능한 컴포넌트 개발

- Atomic design pattern

> 다 따로따로 만들어서 조합, 버튼은 버튼대로만들고, 부품은 부품대로 만들고

>> 화면쪽이 재사용성이 가장 떨어져서 > bull shit.이다 개뻥임

>>> 시간계산안했고, 화면단위에서 재사용을하겠다? -> 어불성설

 

[ Component ]

> 화면

> 독립적인 단위

 

 

- 보고있는 웹페이지를 구분해서 만들겠다 ( 재사용보다는 변화에 대응하는것이 빠르다 )

- bottom up

- top down

- 쪼갤때의 대상 > 페이지를 바꿔도 그대로 사용할것 같다 하는 부분

- 첫번째 기준 : 

 

[v-text]- 데이터 바인딩을 통해 해당요소의 텍스트 내용을 동적으로 업데이트

- {{}} : XSS공격의 위험을 방지하기 위해 Vue는 이 내용을 HTML 인코딩해서 표시한다.

- " 쌍따옴표가 없을때 브레이스를 사용한다.

<h2 v-text="str"></h2>

            <h2>{{ str }}</h2>

            <h2 v-html="str"></h2>

 

[v-for]

- 반드시 키를 지정해야한다.

> 왜? : 식별용, 새로운 값으로 바꿔치기 할 때 문제가 될거다

- key를 쓰기 적당하지 않을떄는 가짜키를 사용한다. 

- key속성값은 우리눈에는 차이가 없지만 갱신할 때 문제가 생긴다.

- 부여하기 적당하지 않을때?  

 

<v-if, v-show>

[v-if]

- DOM을 만들지 않는다 ( HTML태그를 만들지 않는다)

[v-show]

- v-if와 비슷하지만 다르다.

- DOM을 만들긴 하지만 (css의 display) 화면엔 안보이는것

 

[computed]

const saleProducts = computed( ()=> arr.filter(p => p.sale===true))

- 상태가 맞아야 한다.

- 상태가 변경되면 saleProduct도 변경된다.

- computed는 안에서 사용되는 값이 바뀌면 새로계산해준다.

- 캐싱(값이 안바뀌면 홀드 ) 

- 메모리제이션

- 최적화기법중 하나

- 매번 새로 계산하지 않고 값이 바뀌었을 때만 새로 계산한다.

 

 

 

- vue/react/angular > 원하는게 뭐냐

> 데이터 변경 -> 화면 변경 > 배열 > 직접 html로 변환 > DOM추가/처리

> 너는 데이터처리해(JS) -> 나는 나머지를 처리할게 : vue => view

 

- JS의 this는 this이기도 하지만 that이기도 하다.

 

[ref]

- value를 써야한다.

- 원시자료형을 사용할 때

[reactive]

- 객체를 다룰때 사용

- value를 쓰지 않는다.

>선택해서 쓰면된다.

 

[proxy]

- 원본을 감싸고 있다 (대리자)