당신보다 고작 하루 먼저 시작한 개발자의 오지랖

백엔드와 통신을 편하게 하기 위해서 보통 Ajax와 Axios와 같은 HTTP 비동기 통신 라이브러리를 사용한다. 퀘이사 프레임워크를 설치할 때, axios를 설치할 것이냐고 묻고, 선택을 하게 되면 자동으로 boot파일에 axios를 추가해 준다. 우선, axios를 설치한 후, 스크립트에서 axios를 통해 api를 호출하는 법은 매우 간단하다. 1 this.$axios.get('http://127.0.0.1:8000/api/users/') cs 하지만, 이렇게 사용하면 백엔드 url이 변경될 때마다, 모두 찾아가서 주소 값을 변경해줘야 하는 번거로움이 생긴다. 그래서 axios의 baseUrl 속성을 사용한다. 위 코드처럼 baseUrl을 설정하면된다. 본인은 test서버와 본 서버를 구분해 놓기 ..

퀘이사 프레임워크에서 제공하는 컴포넌트에는 에디터도 있다. WYSIWYG Editor (“what you see is what you get”). 말 그대로 유저가 입력하는 내용 그대로 html화 시켜서 저장하고 출력할 수 있도록 한다. https://quasar.dev/vue-components/editor#examples Editor (WYSIWYG) | Quasar Framework The QEditor Vue component is a WYSIWYG editor that enables writing and pasting HTML. quasar.dev 퀘이사 에디터에는 이미지 파일을 넣는 기능은 제공하지 않기에 이를 커스텀해서 써야한다. 우선 퀘이사 에디터 컴포넌트를 선언해주고 그 안에 속성 값으로..

Vue Router 이용할 때, 원하는 페이지 이동을 위해서 push 혹은 replace 메소드를 이용한다. 1 2 3 4 5 // push this.$router.push('hobbada.com/post') // replace this.$router.replace('hobbada.com/post') cs 하지만, 동일한 페이지에서 query나 params의 값만 변경될 때는 페이지 갱신이 이루어지지 않는 문제가 발생한다. 1 2 3 // 같은 Post 페이지에서 query만 다른 페이지로 이동시 작동 X this.$router.push({ name: 'Post', query: { id: '33' } }) cs 이럴 경우 해당 페이지를 호출하는 router view에 key값을 넣어주면 해결할 수 있다...

사용자 경험을 위해서 화면 렌더링이 완료되기 전까지 스피너를 띄워 유저를 지루하지 않게 한다. 구현하는 것은 어렵지 않다. 말 그대로 로딩이 시작되는 시점에서 스피너를 보여주고, 끝나는 시점에 스피너를 가리면 된다. Vue에서는 v-if를 활용하면 돼서 정말 간단하다. 1 2 3 4 5 6 7 8 9 // ... 기타 코드 Colored by Color Scripter cs 1 2 3 4 5 6 7 export default defineComponent({ data () { return { isLoading: true } } }) cs v-if를 활용해서 화면 로딩이 끝나는 시점에 데이터 변수를 false로 바꿔주면 된다. 1 this.isLoading = false cs 마찬가지로 API를 호출할 경우..

Vue Router 사용 시에 해시모드와 히스토리모드 두 가지 설정이 가능하다. 디폴트는 해시모드 이고 url에 /#/이 붙는다. 히스토리 모드로 설정시에 url이 정상적으로 출력되지만 사용자가 직접 url을 입력하여 접근하면 404 오류가 발생한다. 이를 해결하기 위해서 서버에 포괄적인 대체 경로(index.html)을 추가하면 된다. 현재 프로젝트의 서버 구성이 완료되지 않아서 본인이 firebase를 통해 임시로 프론트개발 상황을 확인하고 있다. firebase에 배포시 firebase.json에 다음과 같은 코드를 추가하면 된다. 1 2 3 4 5 6 7 8 9 10 { "hosting": { "rewrites": [ { "source": "**", "destination": "/index.htm..

개발을 하다 보면 원하는 문자열을 가공하거나 추출해야 할 일이 많이 발생한다. 정규식을 직접 작성할 능력은 아직 없어서 그때그때 필요한 표현식을 구글링해서 차용한다. 사용한 정규식들을 차차 아카이빙 하려고 한다. 1. 문자열 내 모든 하이픈 제거전화번호나 계좌번호 등등의 문자열을 제어할 때 필요12345const str = '010-234-3-2344'const modified_str = str.replace(/-/g, '')console.log('변환: ' + modified_str) // 결과 - "변환: 01023432344"cs