profile
하고 싶은 공부만 하는 개발 블로그

[Vue] 이벤트 및 수식어

연결된 메소드 한번만 실행@submit이벤트 동작은Button의 타입이 "submit"인 버튼을 누르면이벤트 버블링에 의해 동작하고,\+추가로 기본 form 동장방지 ( 새로고침, 제출 )를 위해 prevent 수식어를 달아 준다.각각 1, 2, 3, 4 별로자식, 부

5일 전
·
0개의 댓글

[ Vue ] 프로젝트 설정 ( axios, env... )

axios create instance 문서 : https://github.com/axios/axiosVUE CLI 2버전 때 까지는.env 파일을 소스코드에서 사용 하기 위해서webpack의 DefinePlugin같은 것들을 사용했음DefinePlugin 문

5일 전
·
0개의 댓글
post-thumbnail

[메모장] vue 공부 하다가..

간단한 회원가입 폼 예제..axios의 return은 promise객체 이므로..then이나 async await를 이용해 받을 수 있음여기 예제는 중간 vuex의 actions를 생략하고바로 method에서 api 함수를 호출했기 때문에methods안의 functio

5일 전
·
0개의 댓글
post-thumbnail

[ vue-router ] history mode

리다이렉트 및 없는 경로 처리적절한 서버 구성 없이 단일 페이지 클라이언트 측 앱이기 때문에 사용자가 http://oursite.com/user/id브라우저에서 직접 액세스하면 404 오류가 발생한다.서버에서는 해당 URL이 클라이언트에서 관리가 되기 때문에

5일 전
·
0개의 댓글

코드 스플리팅 (code splitting)

코드 스플리팅이란?우리가 js로 개발하게 되면, 따로 코드를 분리하지 않는 이상..하나의 파일에 모든 로직이나 코드들이 들어가있게 된다.한 두개면 상관 없겠지만 점차 규모가 커질수록 js 파일 용량도 커질 것이고,특히 SPA(싱글 페이지 어플리케이션)의 장점이 하나의

5일 전
·
0개의 댓글
post-thumbnail

[Vue] 절대 경로 파일

파일 절대 경로로 설정요즘은 vue/cli로 프로젝트를 생성하면 자동으로 jsconfig.js파일도 생성해서 셋팅해준다.따로 건드릴 필요는 없음.baseUrl : 현재 에디터기준 (vscode)가 열려있는 프로젝트가 루트가 되야함paths : 별칭 설정

5일 전
·
0개의 댓글
post-thumbnail

devServer : overlay : ~ (Webpack5)

vue/cli로 프로젝트 생성 후 에러성 코드가 발생하면화면에 overlay형식으로 아무 동작 못하게 막혀버림 ( 생산성 저하 )그래서 overlay옵션을 꺼주는 방법을 알아보겠다.vue/cli 4.~npm i @vue/cli 4.5.13 ( 확인 필요 )vue/cli

5일 전
·
0개의 댓글

vscode 초기화 방법

해당 컴퓨터에 폴더 경로로 이동 .vscode라는 폴더 삭제C:\\Users\\사용자이름여기에 .vscode폴더가 있다 이것을 삭제해당 컴퓨터에 폴더 경로로 이동 Code라는 폴더 삭제C:\\Users\\사용자이름\\AppData\\Roaming여기에 Code폴더가 있

5일 전
·
0개의 댓글
post-thumbnail

Prettier 란? ( feat. ESLint, vscode )

prettier추가 된 옵션에 의해해당 규칙에 따라 자동으로 코드 스타일을 정리 해주는 도구이다.여기서는 ESLint와 같이 사용하기 때문에 vscode에디터 기준으로 확장 설치된 prettier를 '사용 안 함' 으로 변경해 준다.코드 포맷팅 기준을 ESLint기준으

5일 전
·
0개의 댓글
post-thumbnail

Eslint 란? (feat. vscode, vue)

ESLint는 JavaScript 코드에서 발견 된 문제 패턴을 식별하기위한 정적 코드 분석 도구입니다.ESLint는 코드 품질과 코딩 스타일 문제를 모두 다룹니다.출처: https://www.google.com/search?q=eslint&oq=eslint&

5일 전
·
0개의 댓글
post-thumbnail

[Vue] 믹스인

filters, data, computed 를 가져와 사용가능하고이름이 같을시 자신의 것 기준으로 실행됨 ( 자신이 높은 우선순위를 갖음 )훅은 mixins가 먼저 실행됨

2022년 6월 20일
·
0개의 댓글
post-thumbnail

[Vue] slot

slot 이름에 의해서 순서가 보장된다.

2022년 6월 20일
·
0개의 댓글
post-thumbnail

컴포넌트 데이터 data()

또는Vue의 Instance를 확인해보면 data값은 객체로 되어있지만..객체 형태로 정의하면 모든 인스턴스가 data를 공유하기 때문에 인스턴스 끼리 다른 값을 가질 수 없다. 그래서 객체 리턴형 함수형으로 작성한다.

2022년 6월 20일
·
0개의 댓글
post-thumbnail

[Vue] v-model 양방향 바인딩

영문, 숫자, 한글 까지 잘 동작 영문, 숫자, 한글 까지 잘 동작 한글은 자음과 모음이 조합해서 사용하기 때문에 한글자씩 늦게 나옴한글은 IME기능이 필요한 문자여서 그렇다IME는 간단히 말해 문자의 조합을 도와주는 SW이다Vue 공식문서에서는 IME가 필요한 언어들

2022년 6월 20일
·
0개의 댓글

[Vue] 객체 변경 감지

해결

2022년 6월 20일
·
0개의 댓글
post-thumbnail

[Vue] 배열 변경 감지

변이 메소드 사용 배열대체 (새 배열로 치환) 주의사항 (배열감지 안하는 코드)

2022년 6월 20일
·
0개의 댓글
post-thumbnail

[Vue] v-bind:class

v-bind:class 축약문법 :class사용

2022년 6월 20일
·
0개의 댓글

[Vue] v-bind:style

v-bind:style 축약형 :style로 작성 가능스타일 속성중 하이픈 또는 대시로 표현된 속성(케밥)은 ''나 ""로 감싸줘서 문자로 표현하거나카멜케이스로 변경해서 사용한다ex)text-decoration 표기 예시인라인 스타일 4 처럼객체리터럴 방식으로 표현도

2022년 6월 20일
·
0개의 댓글

[Vue] v-if, v-show (directive)

v-if는 dom구조 자체를 변경\-> dom구성을 전부 하지않음. 조건에 맞는것만 (lazy 함)\-> 즉, 초기비용이 크지 않음\-> 조건이 바뀔때 dom구조를 바꾸므로 렌더링 비용이 큼\-> 변경이 자주 일어나지 않는 곳에 적합 ( ex - 로그인 상태 여부 )v

2022년 6월 19일
·
0개의 댓글

[Vue] v-for (directive)

array 배열\[] v-for="값, 인덱스 in 배열" key=""object 객체{} 둘다 표현 가능하다.v-for="값, 키 in 객체" key=""

2022년 6월 19일
·
0개의 댓글