💻 API 서버 통신 json? > json은 테스트를 하거나 프로토타이핑을 해야할 때 REST API 서버를 빠르게 생성해주는 프론트엔드 개발자를 위한 라이브러리다. 명령어로 쉽게 API 서버를 생성 할 수 있다. json다운로드 💡 REST API? API의 리소스 즉 URL이 HTTP 메서드와 함께 표현되도록 정한 API 규격을 말한다. pa...

💻 History 모드 > Router 이스턴스를 생성할 때 history 옵션을 사용하면 다양한 history mode 중에서 선택할 수 있다. Hash - createWebHashHistory() History - createWebHistory() Memory - createMemoryHistory() 1-1. Hash 모드 > Vue Router를...

💻 Vue Router2 동적 라우트 > 주어진 패턴을 가진 라우트를 동일한 컴포넌트에 매핑해야하는 경우가 자주 있다. 예를 들어 * 사용자 목록(User List) * 는 /users와 같은 경로에 매핑되면 되지만 * 사용자 상세(User Detail) * 는 * 사용자 식별자 별로 같은 컴포넌트에 매핑 * 되어야 한다. 이럴때 Vue Router에...

💻Vue Router > 뷰 라우터는 Vue.js를 이용하여 싱글 페이지 애플리케이션(SPA)을 구현할 때 사용하는 Vue.js의 공식 라우터다. Vue Router 공식문서 💡 라우터(Router)란? > 라우터는 일반적으로 네트워크간에 데이터를 전송하는 장치를 말한다. 뷰에서 말하는 라우터는 쉽게 말해서 URL에 따라 어떤 페이지를 보여줄지 매핑해...

💻 동적 컴포넌트(Dynamic Component) > 컴포넌트를 동적으로 변경하고 싶을 때 v-bind:is 속성을 사용해서 변경할 수 있다. 동적 컴포넌트는 탭 인터페이스와 같이 컴포넌트간에 동적으로 전환해야 할 때 유용하다. 위 예시에서 :is 속성에 전달된 값은 다음 중 하나를 포함할 수 있다. 등록된 컴포넌트의 문자열 이름 string 실제 가...

💻 > `은 Single-File-Component 내에서 Composition API를 사용하기 위한 * syntactic-sugar(문법적 설탕) * 입니다. SFC와 CompositionAPI를 사용하는 경우 을 사용하는 것을 권장한다. 왜냐면 일반 ` 구문보다 많은 장점을 제공해준다. 간결한 문법으로 사용구(boilerplate)를 줄일 수 있다...

💻 Template Refs > Vue의 선언적 렌더링 모델은 대부분의 직접적인 DOM의 작업을 대신 수행한다. 하지만 때론 기본 DOM요소에 직접 접근해야 하는 경우가 있을 수 있다. 이때 ref 특수 속성을 사용해서 쉽게 접근할 수 있다. ref는 특수 속성이다. 이 ref특수 속성을 통해 마운트된 DOM 요소 또는 자식 컴포넌트에 대한 참조를 얻을...

💻 Lifecycle Hooks > 다음은 인스턴스 수명 주기에 대한 다이어그램이다. 지금 진행 중인 모든 것을 완전히 이해할 필요는 없지만 더 많이 배우고 구축함에 따라 유용한 참고 자료가 된다. 자세한 내용은 Vue.js 생명주기 훅을 참고하자 1. Lifecycle Hooks 단계 > Lifecycle Hooks은 크게 4단계로 나눠진다. Crea...

💻 Provide > 하위 컴포넌트 항목에 데이터를 제공하려면 provider 역할을 하는 상위 컴포넌트 setup() 함수 내부에 쓸 수 있다. provide() 함수는 두 개의 파라미터를 받는다. 첫 번째 파라미터는 주입 키:문자열 또는 Symbol이 될 수 있다. 주입 키는 하위 컴포넌트에서 주입된 값을 조회하는데 사용된다. 두 번째 파라미터는 제...

💻 Slots > HTML 요소와 마찬가지로 우리가 만든 컴포넌트에 콘텐츠를 전달할 수 있으면 유용하다. ``컴포넌트를 만든 후 콘텐츠를 전달해보자. -> Style 위에 정의한 컴포넌트를 부모 컴포넌트에 사용해보자 slot 요소는 부모 컴포넌트에서 제공하는 콘텐츠를 나타내는 슬롯 콘텐츠다. 그리고 슬롯은 텍스트 뿐만아니라 HTML요소, 컴포넌트 등 ...

Non-Prop속성 (fallthrough 속성) > Non-Prop 속성은 props 또는 event에 명시적으로 선언되지 않은 속성 또는 이벤트다. 예를 들어 class, style, id와 같은 것들이 있다. 1. 속성 상속 > 컴포넌트가 단일 루트 요소로 구성되어 있으면 fallthough 속성은 루트 요소의 속성에 자동으로 추가된다. 예를들어 ...

💻 Events > props를 활용하여 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하고 자식 컴포넌트에서는 부모 컴포넌트로 데이터를 전달하거나 또는 트리거의 목적으로 이벤트를 발생 시킬 수 있다. 그리고 이벤트는 컴포넌트의 emit 메서드를 통하여 발생 시킬 수 있다. 상위 컴포넌트에서 하위 컴포넌트로 전달할 때 props로 전달이 가능하다. 그리...

💻Props > 블로그를 구축하는 경우 블로그 게시글을 나타내는 컴포넌트가 있다고 가정해보자 이때 모든 블로그 게시글의 UI나 레이아웃은 동일하지만 게시글의 제목, 내용과 같은 데이터는 각각 다르다. 그러면 컴포넌트에 각각 제목이나 내용과 같은 데이터를 전달해야 하는데 이때 props를 사용하여 컴포넌트로 데이터(속성)을 전달할 수 있다. Props 란...

💻Single File Component > Vue에서 Single File Component(SFC, .vue)는 Vue 컴포넌트의 템플릿(template), 로직(script), 스타일(style)을 하나의 파일로 캡슐화하는 특수파일 형식이다. 확장자는 .vue이다. 언어 블록 1. `` 각 *.vue파일은 한 번에 최대 하나의 top-level ...

💻Component 컴포넌트를 정의하는 방법은 Single-File Component(SFC)를 사용하는 방법과 문자열 템플릿(String template)으로 정의하는 방법이 있다. 1. Single-File Component(SFC) > 빌드 도구를 사용할 때 컴포넌트는 일반적으로 Single-File Component(SFC)로 정의할 수 있다. ...

✍🏻Bootstrap5 Bootstrap은 UI Framesork다. 사전에 정의된 CSS를 사용하여 최소한의 노력으로 쉽게 HTML Markup을 도와준다. 터미널을 통해 설치해준다. main.js에 import를 한다. Bootstrap와 같이 Vuerify를 활용해도 괜찮다. https://vuetifyjs.com/en/

✍🏻Watch 종종 반응형 상태가 변경 되었을 때를 감지하여 다른 작업(api, call 등)을 수행해야 하는 경우가 있다. 예를 들어 어떠한 상태가 변경 되었을 때 DOM을 변경하거나 비동기 작업을해서 다른 상태를 변경하는 것이다. Watch함수를 사용하여 반응형 상태가 변경될 때마다 특정 작업을 수행할 수 있다. 이렇게 값(Hello)로 수정하게되면...

✍🏻양방향 바인딩 v-model 프론트엔드에서 입력 양식을 처리할 때 입력 요소의 상태와 자바스크립트의 상태를 동기화해야 하는 경우가 많다. value를 바인딩하고 @input 이벤트로 text를 변경하는 것은 번거로울 수 있다. 그래서 Vue에서는 이러한 작업을 단순화 하도록 양방향 바인딩할 수 있는 v-model디렉티브를 제공한다. 현재 inputV...

✍🏻이벤트 처리 v-on 이벤트 처리는v-on디렉티브로 사용할 수 있다. 그리고 v-on이벤트는 자주 사용하기 때문에 @단축 표현으로 많이 사용된다. 이렇게 button을 클릭하고 input에 키를 눌렀을 때 evnet.key에 의해 어떤 키가 눌렸는지 console에 값이 찍히는 걸 확인할 수 있다. Vue에서는 이렇게 이벤트 이름 앞에 v-on(@)...

✍🏻 디렉티브(Directives) 디렉티브는 v-접두사가 있는 특수 속성이다. 직역으로 지시를 뜻한다. 즉 디렉티브는 기능상에서 중요한 역할인 컴포넌트에게 '작동을 해라'라고 지시하는 것이다. 🚨 v-text 엘리먼트의 textContent를 업데이트한다. 확인해보자. v-text는 html태그 또한 문자로 인식하여 출력한다. 🚨 v-cloc...