본문 바로가기

전체 글

 (364)
[Udemy Vue 완벽가이드 Section12] 160. “로딩 중..” 메시지 표시하기 새로고침이나 데이터를 로드할 때 Firebase와 나의 인터넷이 빠르기 때문에 대부분은 상당히 빠르게 로드가 끝난다. 만약 속도가 느린 서버와 통신하거나, Vue 애플리케이션 유저의 인터넷 연결이 느린 경우, 데이터를 로드하는데 시간이 걸릴 수 있다. 이 경우 로딩 아이콘이나 로딩 메시지를 띄워보자. UserExperiences.vue 파일에서 데이터를 로드 및 표시하게되는데, 데이터가 완전히 로드된 후 이 데이터 목록을 표시하고자한다. 데이터 로드 중에는 로딩메시지가 표시되도록 해보자. 새로운 data 프로퍼티를 추가해서 쉽게 실행할 수 있다. ex: isLoading 초기에는 false로 설정해보자. 그리고 loadExperiences 메서드가 트리거될때마다 fetch가 시작되기 전에 this.isL..
[2023.09.21.목.] 다시 기록을 시작해보자. AM [✔️] 11:00am-2:00pm(1.5h: 점심시간 제외) : 코딩테스트 1문제, 코딩테스트 강의 two pointer 나머지 듣기 → 1문제 풀었다. 근데 한시간 고민하다가 풀이가 적힌 블로그를 찾아봄.. 아쉽다. 조금만 더 깊게 생각하면 풀 수 있었는데. 저녁에 다시 풀어봐야겠다. → 코딩테스트 two pointer 강의 완료! PM [✔️] 값, 식, 문 공부 및 블로그 정리 : 10:00-11:30pm [ ] Promise 다시 복습 및 정리 [ ] vue-loader, webpack, module 공부 및 정리 [ ] Vue 강의 Section 13 보기 Section 13 [✔️] 169 : 2:00-3:00pm [✔️] 170 : 3:45-4:05pm [✔️..
표현식과 문 # 값 - 식(표현식)이 평가(evaluate)되어 생성된 결과 # 평가 - 식을 해석해서 값을 생성하거나 참조하는 것 ex: 아래 예제의 '식'은 '평가'되어 숫자 '값' 30을 생성한다. //10 + 20이라는 식은 평가되어 숫자 값 30을 생성. 10 + 20; // 30 모든 값은 데이터타입을 가지며, 메모리에 2진수, 즉 bit의 나열로 저장된다. 메모리에 저장된 값은 데이터 타입에 따라 다르게 해석될 수 있다. 예를 들어, 메모리에 저장된 값 0100 0001을 '숫자'로 해석하면 65, '문자'로 해석하면 'A'. - 변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 그 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름. 따라서 변수에 할당되는 것은 '값'이다. //변수에는 10 + ..
스코프 의미, 규칙 및 종류 컴퓨터 공학, 그리고 자바스크립트에서의 스코프의 의미 : "변수의 유효범위" # 스코프 규칙 1 바깥쪽 스코프에서 선언한 변수는 안쪽 스코프에서 사용 가능하다. 하지만 안쪽 스코프에서 선언한 변수는 바깥쪽 스코프에서 사용 불가능하다. 1. 예제로 알아보는 스코프(1) let username = 'kimcoding'; if (username) { let message = `Hello, ${username}!`; //username을 바깥 스코프에서 가져올 수 있으므로 정상적으로 출력. console.log(message); // 'Hello, kimcoding' } console.log(message); // ReferenceError. message는 안쪽 스코프(중괄호 안쪽)에 선언되어있으므로, 바깥쪽..
[Udemy Vue 완벽가이드 Section12] 159. 컴포넌트가 마운트될때 데이터 로딩하기 데이터를 전송하고 가져오는 작업을 해봤다. 여기에 추가할 기능이 더 있다. 페이지를 새로고침했을 때, 항상 제출된 모든 experiences를 로드하고싶다. 페이지를 새로고침해도 데이터가 백엔드 서버에 저장되어 유실되지 않는다. 새로고침하면 'Load Submitted Experiences'버튼을 클릭하지 않아도 자동으로 모든 제출된 경험들이 fetching되도록 해보자. Vue.js를 통해서 아주 간단하게 할 수 있는 작업이다. UserExperiences 컴포넌트를 보면, 데이터 fetching에 대한 코드가 있다. 바로, loadExperiences 메서드. 버튼 클릭 뿐만 아니라, 전체 컴포넌트가 최초로 로드될 때도 이 메서드를 트리거하자. 어떻게 하면 될까? 모든 컴포넌트는 Vue 생명주기를 따..
[Udemy Vue 완벽가이드 Section12] 155. 데이터 저장을 위해 POST 요청 보내기 그렇다면 fetch는 어떻게 작동할까? 요청을 보내는 URL을 먼저 첫번째 인수로 제공한다. Firebase에서 가져온 URL을 인수로 제공한다. 하지만 약간의 수정이 필요하다. → 마지막 슬래시(/)뒤에 원하는 식별자를 추가할 수 있다. 'surveys'라고 입력해보자. 그런 다음, 중요한 것은 그 뒤에 .json을 추가하는 것. (끝에 .json은 Vue가 필요로 하거나 보통 백엔드에서 필요한 게 아니라, Firebase에 국한된 요구사항. 다른 백엔드로 작업할 땐 필요하지 않을 가능성이 높다. 하지만 Firebase인 경우, 추가해야한다.) 'surveys' 식별자는 원하는대로 입력해도 된다. 그러면 Firebase가 자동으로 데이터베이스에 노트를 생성하고, 해당 노트에 데이터를 저장한다. fetc..
[Udemy Vue 완벽가이드 Section12] 154. HTTP요청을 보내는 방법과 보내지 않는 방법 Vue앱 내부에서 Firebase 또는 다른 백엔드와 어떻게 통신할까? # form태그의 submit 이벤트 예전에 우연히 HTTP 요청을 보내는 방법을 봤었다. Submit LearningSurvey에 있는 form에 Submit버튼이 있다. 양식이 submit될때 브라우저 기본 동작을 막아야한다. 그렇게 하지 않으면 HTTP요청이 전송되기 때문 **submit의 브라우저 기본동작 : form데이터를 서버에 전송하고 페이지를 새로고침하는것. form태그의 submit에 prevent수식어를 잠시 삭제하고 새로고침한 다음, Submit을 클릭하면 새로고침 아이콘이 잠깐 'x'로 바뀌는 것을 볼 수 있다. 이것을 클릭할 때마다 브라우저는 기본 동작을 사용해서 HTTP요청을 보낸다. ## 로컬 컴퓨터로의 H..
[Udemy Vue 완벽가이드 Section12] 153. 백엔드 추가 서버사이드 코드를 작성하고, 데이터베이스를 해당 코드에 연결하는데 사용하는 Node.js나 PHP와 같은 전용 프로그래밍 언어가 있다. 하지만 지금은 Vue에 집중하기 위해 서버사이드 코드를 직접 작성하지 않는다. 대신, 백엔드를 제공하는 서비스인 Firebase를 사용해보자. 데이터 저장을 위해 코드를 작성할 필요가 없다. Google에서 제공하는 서비스인 Firebase의 장점은 무료라는 것. ** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.

티스토리툴바