본문 바로가기

전체 글

 (364)
Vue.js는 왜 '자바스크립트' 프레임워크인가? Vue.js는 무엇인가, 라이브러리와 프레임워크의 차이는 무엇인가 등 원론적인것부터 차근차근 기본을 좀 다지고싶은 마음에 하나하나 찾아보다가 문득, Vue.js는 왜 '자바스크립트' 프레임워크인지 궁금해졌다. 예를 들어, '프론트엔드 프레임워크' 이렇게 적었다면 별로 궁금해하지 않았을 것 같은데, 왜 꼭 '자바스크립트' 프레임워크일까? (나만 궁금한가?ㅎㅎ) Vue.js에 HTML, CSS도 사용하잖아..? 구글링을 해서 찾아봐도 잘 나오지 않아 chatGPT의 도움을 받았다. # 자바스크립트 프레임워크의 의미 자바스크립트 언어를 '기반'으로 한 프레임워크 - 웹애플리케이션의 일부로서 HTML 및 CSS와 함께 사용된다. - 주로 '자바스크립트 언어'를 기반으로 웹페이지를 조작하고 관리하지만, HTML ..
[Udemy Vue 완벽가이드 Section16] 255. HTTP 오류 처리 추가하기 오류를 발생시켜보자. 그런 다음 이 액션을 dispatch한 컴포넌트에서 처리할 수 있다. 기술적인 오류가 발생하면 오류 객체가 자동으로 발생한다. 그렇지 않은 경우에는 수동으로 발생시킨다. error가 발생하거나, new Error를 생성할 때 error객체에 메시지를 responseData.message 또는 폴백으로 'Failed to fetch!'로 설정한다. 그런다음, error객체를 throw한다. async loadCoaches() { const response = await fetch(`https://vue-main-pr***hes.json`); // Response객체 const responseData = await response.json(); //읽어온 데이터(Response객체)를 ..
로그인 인증/인가 방식 2. 토큰 방식 세션 방식에 이어서, 토큰 방식에 대해서 알아보자. 인증/인가에 사용되는 토큰은 JWT(Json Web Token)이고 구조는 아래와 같다. # JWT 구성 XXX.YYY.ZZZZ와 같이 두 개의 점을 기준으로 세 파트로 나눠져있다. 각각 1. Header, 2.Payload, 3.(verify) Signature로 구분. 1. Header Header에는 토큰의 종류(타입)와 해싱 알고리즘의 종류, 이렇게 2가지 정보가 담겨있다. 1) typ 토큰의 종류(type). 여기엔 언제나 고정값인 'JWT'가 들어간다. typ값이 'JWT'여야 이 토큰의 종류가 JWT가 된다. 2) alg 해싱 알고리즘. 3번 Signature을 만드는데 사용될 알고리즘이 지정된다. 보통 HS256(HMAC-SHA256) ..
로그인 인증/인가 방식 1. 세션 방식 세션과 토큰방식 로그인에 대해 알아보기 전에, 왜 필요한지를 먼저 알아보자. → 이를 위해, HTTP에 대해 알 필요가 있다. # HTTP 1/ HTTP란? - 웹 브라우저와 웹 서버간의 통신에 사용되는 프로토콜 - 클라이언트(웹브라우저)가 서버에 요청을 보내고, 서버가 클라이언트에게 데이터를 응답하는 방식으로 동작. 2/ HTTP 특징 HTTP의 여러 특징 중 하나는 바로, HTTP 프로토콜은 Connectionless와 Stateless이라는 것! 1. Connectionless Protocol : 비연결지향(비연결성) 클라이언트가 서버에 요청했을 때, 그 요청에 맞는 응답을 보낸 후 연결을 끊는 처리방식. 즉, 각 요청은 독립적으로 처리되고, 이전 요청과의 연결을 유지하지 않는다. → 그래서, 아래..
[React] UseEffect가 두번 실행되는 이유 부트캠프를 할 당시, React를 공부했었다. 그러다가 첫 회사에서는 Vue.js 프레임워크를 사용을 하여 입사하고 지금까지 쭉 Vue로 개발을 하고, 공부를 하고 있다. 물론 Vue를 계속 공부하고 있지만, 많은 회사에서는 React를 사용하고 있어서 React도 다시 공부를 해야겠다는 생각이 들어서 조금씩이라도 하고 있다. # 상황 함수 컴포넌트에서 사용하는 Hook 중 하나인 useEffect를 공부하는 와중, 예제를 보고 똑같이 따라하는데도 책에서는 처음 렌더링 시 '한번'만 실행이 되는데 내가 짠 코드에서는 계속 두 번씩 실행이 되는 것이다. //Info.js import { useState, useEffect } from 'react'; const Info = () => { const [nam..
[Udemy Vue 완벽가이드 Section16] 254. 로딩 아이콘 렌더링 Requests로 갔다가 다시 All Coaches화면으로 가면, 백그라운드에서 새로운 코치들을 로딩하고 있다는 아무런 표시가 없다. → 최적화된 앱이라고 할 수 없다. UI를 업데이트할 수 있는 컴포넌트에서 하면 좋겠지만, Vuex 저장소(store)에서 HTTP요청을 보내고 있기 때문에 충돌이 발생할 수 있다. 코치 데이터를 가져오는 동안, 로딩 아이콘을 표시하여 페이지를 새로고침할 때 발생하는 깜박임을 없애보자. 먼저 로딩아이콘이 필요하다. 첨부한 BaseSpinner.vue를 사용해서 CoachesList.vue페이지에 로딩아이콘을 렌더링하자. Vuex를 사용하면 요청을 보내는 중에도 로딩여부를 확인할 수 있다. 액션을 dispatch할 때 좋은 기능이 있는데 이 기능이 필요한 상황이 없었어서 사..
[Udemy Vue 완벽가이드 Section16] 253. GET요청(HTTP) 전송으로 코치 데이터 가져오기 coaches 페이지를 방문하거나, Refresh 버튼을 클릭할 때, 데이터를 fetching해야한다. → 따라서 CoachesList.vue 컴포넌트가 화면에 로드될 때, 데이터 fetching이 시작되게 해야한다. 그렇다고 요청을 보내고 응답을 파싱하는 로직 전체를 수행해야한다는 뜻은 아니다. 대신에 Vuex를 활용할 수 있다. # Vuex를 활용하여 코치데이터 fetching coachData를 로컬앱에 저장하면 Vuex로 관리할 수 있다. actions.js 파일에 데이터페칭 action을 추가하고, mutations.js 파일에서 사용하면 된다. 컴포넌트가 아니라, Vuex에서 HTTP요청을 보내고, 응답을 파싱하는 접근방식이다. 컴포넌트를 깔끔하게 유지하는게 좋다. 먼저, coaches의 mu..
[Udemy Vue 완벽가이드 Section16] 252. PUT요청(HTTP) 전송으로 코치 데이터 저장하기 # 백엔드 서버 없이 사용한 경우 지금까지 작업한 데이터는 모두 더미 데이터 → 영구적이지 않다. 코치를 등록했지만, 앱을 새로고침하면 사라진다. 즉, 데이터가 손실된다. 또한, 데이터를 이 컴퓨터에서만 확인할 수 있다. 다른 사용자의 데이터는 못본다. 당연히..앱은.. 이런 식이면 안된다. 전 세계 모든 코치의 정보를 제공하는게 목적이므로. 그래서 HTTP요청과 데이터를 저장할 수 있는 백엔드 서버가 필요하다. 이번에도 Firebase를 사용하는데, 유일한 옵션이기 때문은 아니다. 서버 사이드 코드를 작성하지 않아도 되고, 무료로 시작할 수 있다는 것도 장점. (물론 실제 프로젝트에서 사용할 때는 요금 페이지를 확인해야한다.) 새 프로젝트를 생성하고, Realtime Database로 가서 이 데이터베..

티스토리툴바