본문 바로가기

전체 글

 (364)
[Udemy Vue 완벽가이드 Section13] 170. router-link로 탐색하기 이제 라우트 등록은 마쳤고, 애플리케이션 내에서 해당 라우트에 접속할 수 있는지를 확인해보자. const router = createRouter({ history: createWebHistory(), routes: [ { path: '/teams', component: TeamsList }, { path: '/users', component: UsersList }, ], }); TheNavigation.vue파일을 보면 두 버튼이 있는데, 이것들로는 App.vue에서 수신하는 커스텀 이벤트(set-page)를 발생시킬 수 있다. Teams Users 이제 더이상 navigate하지는 않을 거다. 어떤 페이지가 로드되어야 하는지 일일이 관리하지 않겠다는 뜻. 따라서 App.vue에서 activePage 데..
[Udemy Vue 완벽가이드 Section13] 169. 라우트 등록 및 렌더링 # 라우트 등록 라우트는 어떻게 등록할까? ## routes 옵션 routes 배열에는 JS객체를 전달해야한다. 모든 객체는 하나의 라우트에 해당하며 라우트에 대한 구성이 있어야한다. This tells the router for which path that's the part of the URL after the domain, a certain component should be loaded. 1/ path 옵션 모든 라우트에 대해 설정하는 중요한 옵션으로 경로 path옵션이 있다. path는 URL에서 도메인의 뒷부분에 해당하며, 라우터에게 이 path로 가면 특정 컴포넌트를 로드해야하는지 한다는걸 알려준다. 가령, '/teams'에 대해 특정 컴포넌트가 로드된다고 해보자. '도메인../teams'가..
[Udemy Vue 완벽가이드 Section13] 168. 라우팅 설정 # vue-router ## vue-router 설치 라우팅 패키지 설치를 위해 먼저, ctrl + c로 현재 실행중인 개발 서버를 종료시켜준다. 그리고 npm install --save vue-router를 실행하는데 이는 Vue팀이 만든 공식 패키지이다. (vue-router뒤에 @next를 입력해서 최신 버전을 다운로드할 수 있다.) npm install --save vue-router@next Vue 프로젝트에 추가해서 라우팅 기능을 사용할 수 있도록 하는 패키지. 해당 패키지 설치가 끝나면 npm run serve를 통해 개발 서버를 재시작하자. 이제 애플리케이션에 라우팅을 추가할 수 있다. ## 라우팅 추가 라우팅을 추가한다는 것은 무슨 뜻일까? main.js로 가보자. 메인 Vue앱, 바로 ..
[Udemy Vue 완벽가이드 Section13] 167. 라우팅 개념 및 사용목적 라우팅이란 무엇일까? 현재 Vue앱은 크게 두 가지 영역인 Teams와 Users로 나뉜다. 내비게이션 상, 두 개의 버튼이 있고 버튼 클릭 시 아래 해당 페이지로 바뀐다. 둘다 클릭이 가능하며, Teams에서는 View Members를 통해서 각 멤버도 볼 수 있다. 굉장히 간단한 프로젝트이다. 유심히 볼 점이 하나 있다. 버튼을 클릭하면 화면에 표시되는 스크린은 바뀌지만, URL(localhost:8080)은 바뀌지 않고 있다. 계속 동일한 URL로 나온다. Vue를 이용해서 JS기반 클라이언트사이드 웹애플리케이션을 구축할 수 있는데, 이 웹 애플리케이션은 브라우저에서 실행되는 JS로 완전히 제어한다. 또한, 현재 SPA를 구축하고 있는데, SPA란 fetching되는 단일 HTML파일에 작성하는 모..
[Udemy Vue 완벽가이드 Section13] 163. 오류 응답 처리하기 이와 관련하여 알아둘 것이 하나 더 있다. fetch메서드는 앞서 기술적 오류에 제대로 작동했었다. URL을 유효하지 않게 만들어서 꾸며낸 오류를 catch메서드를 통해 처리됐었다. 이 외에도 서버 사이드로부터 발생한 오류가 있을 수 있다. Also could be errors that are stemming from the server side. Firebase로부터 발생하는 오류는 기술적 오류가 아니다. 이런 경우, 일반적인 응답을 얻을 수 있겠지만 해당 응답은 오류의 발생을 알려줄 뿐이다. 따라서 이와 같은 오류(서버사이드 오류)는 기본적으로 catch블록이 처리할 수 없다. 서버사이드 오류를 살펴볼텐데, LearningSurvey.vue파일에서 오류를 꾸며낼 수 있다. # 기술적 오류 현재 Lea..
[Udemy Vue 완벽가이드 Section13] 162. 기술적 오류와 브라우저 측 오류 처리하기 이제 발생할 수 있는 실제 오류에 대해서 살펴보자. URL을 한번 조작해보자. 현재 서버사이드 코드에 아무런 영향을 주지 못하고있기 때문에 서버사이드 오류를 꾸며낼 수 없다. 따라서 유효하지 않은 URL로 요청을 전송해보자. URL에서 .json을 삭제하여 Firebase가 인식할 수 없게 해보자. //UserExperiences.vue loadExperiences() { this.isLoading = true; fetch( 'https://vue-http-demo-**.firebaseio.com/surveys' //여기서 .json삭제 ) .then((response) => { if (response.ok) { return response.json(); } }) .then((data) => { this..
[2023.09.22.금] AM [] 9:00am-10:00am(1h) : 코딩테스트 1문제 [✔️] 10:00am-11:00am(1h) : 연결리스트 -1 강의 듣기 [✔️] 11:00-11:30am : 어제 강의 복습 → 9:00-11:00am : 중간중간 쉬는시간 제외하고, 코딩테스트가 안풀렸다. 오후에 다시 풀어보자. → 11:00-12:40pm : 조금 쉬고, 연결리스트-1 강의 완료 PM 1:00-2:40pm : 점심 & 산책. 꽤 오랜 시간 여유를 즐겼다. 광합성 잘한 만큼 달리자. 2:40-5:00pm : Vue 강의 Section 12 복습 [ ] Promise 다시 복습 및 정리 [ ] vue-loader, webpack, module 공부 및 정리 [✔️] Vue 강의 Section 12 복습 [✔️] Sect..
[Udemy Vue 완벽가이드 Section12] 161. “데이터 없음" 상태처리하기 지금까지는 모두 오류없이 제대로 작동한다는 가정 하에 작업했다. 하지만 현실에서는 당연히 오류가 발생할 수 있다. 따라서 로딩상태 확인과 더불어 표시할 데이터가 있는지도 확인하고자 한다. 오류로 인식되지는 않지만, 데이터가 없는 경우가 발생할 수 있기 때문. 가령 Firebase에 있는 모든 데이터를 삭제하여 데이터가 없어도 요청은 성공적으로 전송할 수 있다. 하지만 로드할 데이터가 없으므로 아무 데이터가 없는 응답을 얻는다. const results = [ ]; 데이터가 없는 경우에 대해 처리하는 방법은 쉽다. 루프를 거칠 데이터가 없기 때문에 results도 빈 배열로 남는다. .then((data) => { this.isLoading = false; const results = []; for (co..

티스토리툴바