profile
프론트엔드 개발자
post-thumbnail

vue api 파일 분리

weatherInfo파일에 해당하는 데이터 값들이 불러와지지 않는 현상이 발생하였다. api의 파일을 나누면서 코드의 문제가 생긴것!두군데서 다 async await를 사용해 try, catch를 해주고 있었다. 이러한 문제점을 해결하기 위해 api url이 들어있는

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

State Management

상태 관리는 여러 컴포넌트 간의 데이터 전달, 통신을 한곳에서 하는 것을 말한다.리액트에서는 Redux, Mobx와 같은 라이브러리를 사용하고, 뷰에서는 vuex를 사용한다.컴포넌트 기반 프레임 워크에서는 쪼개진 컴포넌트간 통신을 해야하는데, 이때 데이터 전달을 좀 더

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

라우팅

웹페이지간 이동방법을 말하며, 서버에 요청해 이동할 페이지를 갱신하는 것이 아니라, 미리 해당 페이지들을 받아놓고 페이지 이동시 화면이 갱신된다.vue-router vue에서 라우팅 기능을 구현할 수 있도록 지원하는 공식 라이브러리이다.<router-view>

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

Suspense

vue에서는 로딩중일때, 로딩완료 하였을때로 나눠 HTML을 작성한다.페이지에 세 개의 로딩 스피너가 표시되고 콘텐츠가 모두 다르게 렌디링 될 수 있다.vue3에 나온 것으로 비동기 작업이 완료될때까지 기다릴 수 있게 해준다.(중첩된 자식 컴포넌트 API 호출이 끝날때

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

Composables

vue2에서는 코드를 재사용할 수 있는 mixin만 가지고 있었지만, vue3에서는 composition API를 활용해 재사용하는 함수인 컴포저블을 사용할 수 있다.composition API는 특정 기능을 갖는 함수를 뜻하고 API처럼 사용할 수 있게 해주는 것을

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

Async Components

큰 어플리케이션에서는 앱을 작은 단위로 나눠 필요한 컴포넌트만 서버에서 구성해야 한다. vue는 컴포넌트 정의를 비동기 처리 할 수 있도록 팩토리 함수를 사용한다.\*팩토리 함수 - 파라미터로 객체를 변경하게 반환할 수 있는 팩토리를 정의한다.factory functi

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

Provide / Inject

계층 구조가 복잡한 경우에 props를 통해 전달하는 것은 복잡한 코드가 된다. 이러한 경우에 사용하는 것이 provide, inject이다.최상위 부모컴포넌트 -> 최하위 자식 컴포넌트로 전달해야할 경우최상위 컴포넌트는 provide, 최하위 컴포넌트는 inject를

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

Slots

슬롯(Slots) 상위 컴포넌트에서 하위 컴포넌트마다 다른 아이콘을 추가하고 싶을때가 좋은 예이다. slot에 들어가는 내용(Slot Content)

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

Props

문자열 배열 형태로 작성된 prop의 리스트도 가능하고,prop에 특정 타입의 값을 넣고 싶은 경우에는 속성 이름, 타입을 포함하는 오브젝트로 선언해서 타입이 지정된 prop의 리스트를 구현할 수도 있다.이는 컴포넌트를 읽기 좋게 문서화할 뿐 아니라, 콘솔에서도 잘못된

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

Registration

컴포넌트를 등록할 때는 항상 이름을 지어줘야 한다.케밥-표기법케밥-표기법으로 컴포넌트를 정의할 때는 케밥 표기법을 사용해야 한다.파스칼 표기법파스칼표기법은 두가지 모두 사용할 수 있다. 단 DOM에 바로 쓸 때는 케밥-표기법 이름만 가능한다.props로 파스칼케이스를

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

vuex

store.jsstore는 모든 컴포넌트에서 사용할 중앙저장소이다.state - 관리하고 싶은 데이터를 선언한다.mutations - mutations에서 선언된 메소드를 통해서만 state값을 변경할 수 있다.getters - state의 값을 가지고 특정 로직을 실

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

Custom Directives, 플러그인

v-model, v-if등 기본 외의 사용자가 직접 디렉티브를 정해서 사용할 수 있는 것을 뜻한다.CustomDirective.vue마운트 되는 순간 focus 이벤트가 발생하게 된다.

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

composition API

컴포넌트내에서 사용하는 특정 기능을 갖는 코드를 유연하게 구성해서 사용할 수 있는 함수 기반의 API이다.vue는 계층 구조가 복잡해질 수록 추적하기가 어려웠기 때문에 이 단점을 극복하기 위해 나온 것이다.공통 함수를 만들어서 재사용을 극대화시킨 기능믹스인의 단점을 보

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

axios & mixin

get - 서버에 데이터 호출해 조회할 경우post - 데이터를 저장하기 위해 새로운 데이터를 넣어줄 경우delete - 데이터를 삭제하는 용도로 서버 호출할 경우put - 데이터 수정할 경우ServerData.vueMixinTest.vue$를 사용해서 믹스인을 만들게

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

Provide & Inject

계층 구조가 복잡한 경우가 발생하는 경우최상위 부모컴포넌트 -> 최하위 자식 컴포넌트로 전달해야할 경우 props를 사용해 부모한테 받아옴최상위 컴포넌트는 provide, 최하위 컴포넌트는 inject를 사용하여 컴포넌트마다 계속 전달할 필요가 없어짐provideInj

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

컴포넌트에서 다른 컴포넌트 사용하기

컴포넌트에서 다른 컴포넌트를 사용할 경우 props속성을 사용해 받을 데이터를 정의해 준다.공통 컴포넌트를 만들어서 재사용하는 것은 중요하다. 필요할때마다 컴포넌트를 만들게 되면 많은 시간이 소요될 것이다.숫자, boolean, object, 배열 등 할당을 하고 싶을

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

computed, watch

computed 속성은 data의 필드값이 변경사항을 감시하고 반영된다.사용자가 로그인 여부를 알아야 할 경우 많이 쓰인다.데이터 필드의 정의된 값만 사용할 수 있다.데이터의 변경사항을 바로 감시하고 필드에 값을 갱신할 수 있다.단점은 자원을 많이 소모해서 꼭 필요한

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

Javascript & Typescript

김민태의 프론트엔드 아카데미 강의를 바탕으로 작성하였습니다.height의 단위를 지정해주고 싶을 경우에 위와 같이 타입을 지정해서 사용하면 어떤 단위이고 number를 뜻한다는 것까지 알 수 있게 된다.타입을 제공해주면 개발하면서 코드의 버그를 줄여준다.데이터 유형이

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

리스트 렌더링, 렌더링 문법

다중 데이터 렌더링 하는 경우 v-for를 사용한다.productList배열의 수만큼 하나하나의 object 데이터를 받아온다.if문 v-if, v-elsev-show실제 html 렌더링 되지만, style속성을 통해 display:none 처리를 해줌빈번하게 이벤트

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

속성, 클래스, 스타일에 데이터 바인딩

v-bind를 사용하여 속성을 제어할 수 있다.disabled를 사용해서 텍스트 값이 비어 있으면 true가 반환 값이 있으면 false를 반환하게 해주었다.

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