✍🏻v-if 기존 Javascirpt문법과 비슷하다. true기 때문에 확인이 가능하며 false로 바꾸면 아래와 같이 렌더링조차 안 되는 걸 확인할 수 있다. Javascript와 비슷하게 else와 else-if도 사용가능하다. button을 클릭하였을 때 type의 값을 넣어주고 그 값이 참일 때 그에 해당하는 h2태그의 값을 보여준다. 여러개...

✍🏻 Class와 Style 바인딩 1. 객체 바인딩 클래스를 동적으로 바인딩 하기위해선 :class(v-bind:class)를 사용할 수 있습니다. isActive가 기존에 true로 저장되었고 button 클릭 시 false로 변하면서 아래와 같이 class에 active라는 클래스가 제거된다. 반대로 hasError의 경우에는 false로 저장되었...

✍🏻 Computed computed 템플릿 문법{{ }}은 간단히 사용하면 매우 편리하다. 하지만 템플릿 표현식 내 코드가 길어지면 가독성이 매우 떨어진다. 예를들어 아래와 같을 때 이렇게 강의가 있을 때 템플릿 문법은 길어지게 된다. 이를 여러곳에서 반복적으로 사용해야할 때 비효율적이다. 이럴때 사용하는 것이 계산된 속성(computed proper...

✍🏻반응형(Reactivity) 1. Reactivity JavaScript 객체에서 반응형 상태를 생성하기 위해서는 reactive()함수를 사용할 수 있습니다. 클릭하면 카운터 되는 걸 볼 수 있다. state가 아닌 state.count로 출력하는 이유는 state객체가 가지고 있는 속성이기 때문에 .을 이용해 count를 접근해야 한다. 메서드...

✍🏻텍스트 보간법 데이터 바인딩의 가장 기본형태는 {{ 데이터 }}(이중 중괄호, 콧수염 괄호)를 사용하는 것이다. 이중 중괄호를 사용하면 해당 문법은 컴포넌트 인스턴스의 message값으로 대체된다. message 속성이 변경될 때 마다 갱신(반응)된다. 🔉 v-once 만약 한 번만 렌더링을 하고 데이터가 변경돼도 갱신하지 않으려면 v-once라...

✍🏻 setup() setup()함수는 Composition API 사용을 위한 진입점 역할을 한다. setup()함수 안에 반응형 상태나 메소드 이러한 것들을 선언하고 객체로 반환(return)하면 ``에 노출 할 수 있다. 이렇게 counter로 선언하고 return으로 반환하여 template에 출력할 수 있다. return을 하지 않으면 사용할 ...

Composition API Composition API 성격에 따라서 반응형 API(Reactivity API). 라이프 사이클 훅(Lifecycle Hooks), 종속성 주입(Dependency Injection)으로 나눌 수 있다. https://vuejs.org/api/ <- 공식 홈페이지에 확인 할 수 있다. 1. 반응형 API(Reactiv...

1. Options API?, Composition API? 쉽게 말해 Options API는 Vue2에서 사용된 API이며 Composition API는 Vue3에서 사양되는 API다. Vue3에서도 Options API를 사용할 수 있지만 Composition API가 단점을 보안했기 때문에 Composition API를 사용하는게 좋다. - Vue3에...

구조 vite.config.js 비트의 환경설정 파일이다. 비트 명령어를 사용할 때 해당 파일을 참고한다. alias의 설정은 파일 시스템의 경로의 별칭을 만들 때 사용한다. 별칭이 없을 경우 상대 경로로 불러와야한다. alias가 있다면 별칭을 이용하여 불러 올

Vue? > User Interface 개발을 위한 자바스크립트 프레임워크 선언적 렌더링(Declarative Rendering) : Vue는 템플릿 구문 {{ 데이터 }}을 활용하여 데이터를 선언적으로 출력 할 수 있도록 한다. 반응성(Reactivity) : Vue는 JavaScript 상태 변경을 자동으로 추적하고 변경이 발생하면 DOM을 효율적으로 ...

1. VScode 확장프로그램 1. Korea Languge Pack > 랭귀지변경 2. indent-rainbow > 코드의 가독성을 높여주는 프로그램 3. Auto Rename Tag > 태그 변경 시 자동으로 변경 4. CSS Peek ![](https://velog.velcdn.com/images/l__chwon/post

동기(Synchronous) 결과를 기다리는 것, 기다리고 업무를 수행 업무가 단순하지만 비효율적이다. 순차적으로 코드를 실행하는 것 (한 작업이 끝날 때 까지 다음 작업을 기다리는 것. 앞선 작업이 끝날 때 까지 뒤에 작업들이 대기하는 것을 Blocking이라고 한다. 비동기(Asynchronous) 결과를 기다리지 않는 것, 기다리지 않고 업무를 수...

DOM(Document Object Model) 문서 객체 모델 > 각 브라우저 문서 안에는 웹문서를 해석할 수 있는 렌더링 엔진이 있다. html로 작성된 문서를 한줄 한줄 해석하며 해석이 끝나면 문서를 객체화하여 javascript로 접근할 수 있도록 함 문서를 객체화 했다고하여 DOM이라고 한다. javascript로 html를 제어할 수 있도록 웹문...

2024년은 20권 이상 읽을 수 있도록 한번 도전! 최종수정 : 2024.04.18 소설 전지적 독자 시점 PART 1: 1 | 싱숑 지음 완독 : 2024.01.29 ~ 2024.02.01 > 유명한 웹소설이다. 현재 네이버 웹툰에서 연재되고 있는데 완결까지 너무 긴 시간이 될 거 같아 소설로 처음부터 읽고 있다. 아직까지 웹툰에서 봤던 내용들이 머...

1. CSS 그라데이션 참고 사이트(https://fastfive-new.co.kr/) 2.css background 고정 참고 사이트(https://sockstaz.com/) 3.video visual 설정 참고 사이트(https://www.hd-infracore.com/kr) 4.패턴 배경 참고 사이트(http://r

1. 대화상자 1) prompt 사용자에 대한 값을 입력 받을 수 있다. 2) alert 경고창 3) confirm 사용자에게 '확인', '취소'를 받을 수 있다. 2. 태그 선택 ![](https://velog.velcdn.com/images/l__chwon/post/3bd50

input 자동완성에 사용되는 background와 font의 색상을 변경할 수 있다.