본문 바로가기

FE

 (15)
[ Vue.js ] 프로젝트 구성 프로젝트 생성 및 로그인 폼 UI 구성  - 새 프로젝트 생성 -vue create vue3-formDefault ([Vue 3] babel, eslint) 선택cd vue3-formnpm run serve   App.vue기존 내용을 모두 지우고, vbc+tab 기본적인 템플릿 생성간단한 로그인 화면을 만들거고 ID: PW: 로그인 이렇게 작성하면기본적인 로그인UI가 출력된다(스타일은 생략)이제 입력한 값을 데이터로 받아오게 만들자 제출되는것까지 확인이 되었다.   여기서 이 데이터들을 서버로 보내줘야하는데 이때 필요한것이 axios이다. GitHub - axios/axios: Promise based HTTP clien..
[ Vue.js ] 싱글 파일 컴포넌트 싱글파일 컴포넌트 화면의 특정 영역에 대한 HTML, CSS, JS 코드를 한 파일에서 관리하는 방법뷰 CLI로 프로젝트를 생성하고 나면 App.vue라는 파일을 확인할 수 있다.이처럼 vue확장자를 가진 파일을 모두 싱글파일 컴포넌트라고 한다.  동작 흐름index.html (화면 출력) > Main.js > App.vue > 컴포넌트 index.html div태그안에서 Vue CLI로 빌드된 결과물이 나타나는것  Main.js// 뷰 라이브러리를 들고옴import { createApp } from "vue";// 뷰 파일을 들고옴import App from "./App.vue";createApp(App).mount("#app");여기서 App.vue를 임포트하고있..
[ Vue 3 ] Template Syntax Template Syntax뷰로 화면을 조작하는 방법을 의미크게 데이터 바인딩과 디렉티브로 나뉨    데이터 바인딩뷰 인스턴스에서 정의한 속성들을 화면에 표시하는 방법가장 기본적인 데이터 바인딩 방식은 콧수염괄호 {{ }} 이다     클래스 바인딩 데이터 바인딩 예제이건 일반적인 html 문법이고  Vue의 데이터바인딩을 사용해서 코드 작성을 해보자 클래스 바인딩 데이터 바인딩 예제화면에 출력되는건 동일하나,뷰에 선언된 데이터를 가지고 화면에 있는 태그의 애트리뷰트를 동적으로 조작할 수 있게된것이다.  id도 데이터바인딩이 가능하다 사용방법은 위와 동일 클래스 바인딩 데이터 바인딩 예제 아이디 바인딩 반값습니다.이렇게 사용한다v-bind는 축약어 : 만 사용해서 코드작성을 ..
[ Vue 3 ] Component, Event Emit Component 컴포넌트는 화면의 영역을 구분하여 개발할 수 있는 뷰의 기능이다. 컴포넌트 기반으로 화면을 개발하게 되면 코드의 재사용성이 올라가고 빠르게 화면을 제작할 수 있다.어떻게 컴포넌트를 등록하고 쪼개는지에 대해 알아보자    컴포넌트 이름 : 컴포넌트 내용 이런 문법형태로 작성하면 컴포넌트가 등록된것 등록된 컴포넌트를 HTML에서 호출해주면 된다. Root라는 컴포넌트 밑에 AppHeader가 바로 등록되는것을 볼 수 있다.다음에 컴포넌트가 하나씩 등록될때 마다 이 밑으로 바로 연결된다.  컴포넌트 통신 방식 컴포넌트간에 어떻게 메시지를 주고받을건지 그 방법을 정의하는것이 컴포넌트 통신    props속성 컴포넌트간 데이터를 전달할 수 있는 컴포넌트 통신 방법상위 컴포넌트에서 하위 컴포..
[ Vue 3 ] Instance, Methods, Directive(v-for) InstanceVue로 화면을 개발하기 위해 필수적으로 생성해야 하는 기본 단위 옵션 속성  시작할때 생성했던 index.html을 다시한번 보면{{message}}모든 Vue 앱은 createApp 함수를 사용하여 새로운 애플리케이션 인스턴스를 생성하는 것으로 시작한다.인스턴스를 만들어서 그 인스턴스를 유효하게 다룰 수 있는 화면의 영역을 지정해줘야 한다.>> HTML태그를 의미하고, 위의 코드에서는 div태그를 감싸는 body태그로 보통 작성한다.  화면의 영역중에 어느 부분에다가 Vue의 인스턴스를 적용할지 하는 부분이 바로 mount 하는 부분이다앱 인스턴스는 .mount() 메서드가 호출될때까지 아무것도 렌더링하지 않는다.'컨테이너'가 될 실제 DOM 엘리먼트 또는 셀렉터 문자열을 인자로 필요한..
[ Vue 3 ] Reactivity Reactivity reactivity.html 생성 data 라고 하는 변수를 선언, 객체화 하고 객체의 속성이 a 그리고 a에 10이라는 값을 집어넣었다.  위에는 가장 기본적인 js코드를 작성한 상태이고,JavaScript API를 사용해볼텐데Proxy를 사용해보자  Proxy대리인, 대리 라는 뜻 redefine fundamental operations for that object 자바스크립트에서 프록시 객체는 대상객체를 감싸서, 속성 조회, 할당, 열거 및 함수 호출 등의 여러 기본동장을 가로채특별한 다른동작을 가미시키는 대리자 역할을 한다.get, set, has 등 메서드를 사용할 수 있다  new Proxy 선언하고, data라는 타겟값을 집어넣는다첫번째 인자에 data, 위에서 선언한 객..
[ Vue 3 ] 시작, 개발환경 설정( Vue CLI ) Vue.js  간단한 화면 UI개발부터 라우팅, SSR 등의 애플리케이션 레벨의 개발을 지원하는 프레임워크  SSR ( 서버사이드렌더링 )서버에서 페이지를 그려 클라이언트로 보낸 후 화면에 표시하는 기법사용목적: 검색엔진 최적화, 빠른 페이지 렌더링       Vue 2 와 Vue 3의 차이점라이브러리 내부 로직 재작성주요 개발 도구들 변경 예) 뷰 개발자 도구, VSCode 플러그인, Vite기반 프로젝트 생성 등컴포지션 API, Teleport 등 새로운 문법 지원리액티비티 시스템 기반 API 변경공식문서 변경   Vue 3의 코드 작성 방식 옵션API와 컴포지션API 방식으로 나뉘고컴포지션API는 setup이라는 API를 이용해서 ref로 API를 선언했을때 값들이 메시지 형태로 선언이 됨컴포지션과..

티스토리툴바