전체 글 (47) 썸네일형 리스트형 주석 단축키 간편한 주석 단축키를 알아보자. 대부분의 에디터에서 주석단축키를 지원할 것이다. 블록을 지정하고 단축키를 누르면 원하는 코드를 주석 처리 할 수 있다. Ctrl+/ 사용하면 해당 줄의 코드를 한 줄짜리 주석으로 처리할 수 있다 Ctrl+Shift+/ 여러줄의 주석 처리 Mac 의 경우 Ctrl 대신 Cmd를, Shift대신 Option를 사용하면 된다. * VS코드에서 Ctrl+Shift+/ 가 안먹는 경우가 있어서 수정한다. 이 경우 Shift + Alt + A 단축키를 사용하면 될 듯하다. 클라이언트 사이드, 서버사이드 클라이언트 사이드 어플리케이션을 실행하는 장소가 클라이언트쪽이라는 의미. 여기서말하는 클라이언트쪽은 홈페이지에 방문하는 이용자. 이용자측의 컴퓨터나 스마트폰 등에 들어있는 브라우저가 프로그램을 실행. 예를들어, 자바스크립트나 CSS는 웹 서버에서 결과가 브라우저에 반영되어 브라우저쪽에서 처리를 할 때 동작하기 때문에 클라이언트 사이드의 언어라고 할 수 있다. 서버사이드 반대로 서버사이드는 클라이언트사이드가 사용자측이라는것과는 반대로 어플리케이션의 제공쪽이 프로그램을 실행한다. 이 경우 인터넷 상에 있는 웹 서버가 처리를 한다. 예를 들어, 클라이언트 측에서 가지고 있는 정보가 들어있는 데이터베이스를 참조해야할 경우 서버사이드에서 실행된다. 서버사이드의 언어로서는 PHP, Python , Perl, Rub.. 4.Composition API기본 (Vue Router) Vue router란? -웹 페이지의 라우팅을 제어하는 Vue공식 플러그인. SPA 를 구축 할 수 있음. 여기서 라우팅이란, URL로 표시하는 페이지를 연결하는것. URL이 입력되었을 때 이 디렉토리의 이 페이지를 표시한다 라는 룰을 정해놓은것. 한 번 사용해보자 우선 설치는 npm install vue-router@4 입력 /src/router/index.js src폴더 안에 router폴더를 만들고 그안에 index.js라는 파일생성 import { createRouter } from ‘vue-router’; 입력 여기서 createRouter의 옵션을 사용하는데 첫번째로 history, 두번째로는 routes 어레이를 사용한다. 각 항목에 대해서는 path : URL의 경로. name : 경로에 .. 3.Composition API기본(Watch , WatchEffect) Vue3 공식사이트에는 watchEffect와 비교한 watch의 메리트를 다음과 같이 서술하고 있다. -효율적인 실행 -watch의 재실행 조건의 명문화 -watch상태에 대한 변경 전후의 값 모두 액세스 뭔말이고.. 개인적으로 조사해보고 알아낸 바에 따르면 , 공식사이트의 말과 크게 달라지지않지만 세 가지로 정리 해보았다. 차이! 1. 감시 대상을 정의하는 방법 2.watch는 변경전과 변경후의 값을 얻을 수있다. 3.초기 실행 타이밍 차례대로 알아봅시다. 1. 감시 대상을 정의하는 방법 watch는 감시할 객체를 첫번째 인수로 지정함. watchEffect는 함수 안에서 사용되고 있는 리액티브 오브젝트가 감시대상. *리액티브 오브젝트란 reactive() , ref() 에 의해 정의된 오브젝트. 예.. Watch ? Vue Watch 란? 먼저 공식홈페이지에서의 설명. 특정데이터소스를 감시, 다른 콜백함수 내에서 부작용을 적용할 필요가 있음. ( lazy ) 감시하고 있는감시하고있는 데이터소스가 변경될 때에만 콜백함수가 실행됨. 뭔말이고 쉽게 말하자면, 특정 data(데이터)나 computed(계산속성)의 상태를 감시하고, 변화가 있을 때 미리 등록해 둔 처리를 자동적으로 실행해 주는 구조. 더 쉽게 설명하자면, 감시하고싶은 대상이 있는데 그 감시 대상에 무언가 변화가 일어나면, 등록한 처리를 자동으로 해주는것. 잡설) 공부하면서 느낀 watch는 예를 들어보자면, 학교에 내가 좋아하는 남자애가 있는데 다른반이야, 그 애의 일거수일투족 관심을 가지고있지만, 다른 반이기 때문에 그렇질 못해. 그래서 그 아이와 같은 반.. 2.Composition API기본 (setup, ref, reactive) 기존 버전(vue2)에서는 data() , Methods에는 함수를 , Computed에는 계산 속성이 들어갔다. 그밖에 라이프사이클 Hook이나 Watch등 많은 부분으로 로직이 분류되었다. 그에 따라 코드가 뒤죽박죽 되어 가독성이 떨어지는 단점이 생기곤 했다. 3버전으로 들어서며 모든 코드를 독립적으로 정의하는게 가능해졌다. setup() 을 사용하게되었다! 우리의 공식사이트에서 말한 정의는.. [ setup컴포넌트옵션 ] : 컴포넌트가 작성되기 전에 props가 해결되면 실행되고, CompositionAPI의 엔트리포인트로서 기능한다. 주의: 컴포넌트의 인스턴스를 참조하지 않기 때문에 setup안에는 this사용하는것을 피해야한다. props와 context를 인자로 받는 함수 (뭔말이고) 쉽게 말.. 왜? Composition API 인가? (1) Vue3 로 넘어오면서 바뀐 가장 큰 특징 Composition API의 사용! 왜? 사용하게 되었을까. 쉽게 말해, 가독성 유지보수 동일한 논리적 관심사와 관련있는 코드를 함께 배치 이 2가지다. 복잡하게 설명하자면, Vue컴포넌트를 사용하면 기능과 결합된 인터페이스의 반복 가능한 부분을 재사용 가능한 코드로 뽑아 쓸 수 있다. 이것만으로도 유지 보수, 유연성면에서 응용 프로그램을 상당히 향상시킬수 있다. 하지만! 컴포넌트의 규모가 커질수록 논리적관심사(관련된 코드)의 리스트도 커지게 된다. 그렇게되면 컴포넌트를 읽기어려워지고 이해하기 어려워지게 된다. 이것은 논리적관심사가 색에 따라 그룹화되어있는 컴포넌트를 나타내는 예. 이렇게 분리되면, 복잡한 컴포넌트를 이해하고 유지하는것을 어렵게 만든다. 단일 .. 이전 1 ··· 3 4 5 6 다음
