개발 공부
-
14. Vue와 Firebase로 나만의 사이트 만들기 - firebase 알아보기개발 공부/VF 2025. 6. 24. 09:00
VF - 14강 이번 강에서는 Firebase 프로젝트 개설에 관한 내용을 알아보자.일단 먼저 가장 중요한 것은 요금이다. 얼마까지가 무료이고 많이 사용하면 얼마까지 내야 하는지 알아볼 것이다.2022년 5월 9일 기준으로 두 가지의 Plan이 있다.무료(Spark 요금제)종량제(Blaze 요금제)그리고 세부 내역은 아래와 같다.전화 인증(이번 프로젝트에서는 쓰지 않음)10,000번/월 까지는 무료이나, 그 이상은 건당 $0.01(미국, 캐나다, 인도), $0.06(기타 다른 국가)이다.아이디(이메일) & 패스워드 인증이나 구글 인증무료FireStore(DB역할)NoSQL 기반1GB 용량까지 무료이나, 초과 시 1GB당 $0.108이다.트래픽은 10GB/월 까지는 무료이나, 이후에는 Google Cl..
-
13. Vue와 Firebase로 나만의 사이트 만들기 - 메뉴 그룹화하기개발 공부/VF 2025. 6. 23. 09:00
VF - 13강 이번 강에서는 menu grouping에 대해 알아볼 것이다.아래와 같이 현재의 메뉴는 일차원 배열이다.일차원적 배열은 잘 쓰이지 않으며, 서브 메뉴를 가지는 메뉴로 변경할 것이다.vuetify 공식 사이트의 Lists 예제가 잘 작성되어 있기 때문에 그대로 사용할 것이다.https://vuetifyjs.com/en/components/lists/#expansion-lists List component — VuetifyThe list component is a continuous group of text, images and icons that may contain primary or supplemental actions.vuetifyjs.com 작성하면 아래와 같다. ..
-
12. Vue와 Firebase로 나만의 사이트 만들기 - component 사용하기개발 공부/VF 2025. 6. 22. 09:00
VF - 12강 이번 강에서는 component에 대해서 알아볼 것이다.App.vue는 기본 골격인데 이제 점점 코드가 추가되면 복잡해지고 지저분해질 것이다.vue의 장점은 component이다. component는 우리가 저번에 사용한 태그와 같은 것을 component라고 하며, 이 component는 vuetify가 만들어 준 것이다.이제 우리가 직접 component를 만들어 App.vue에 있는 코드를 관리하기 편하도록 조금씩 분리할 것이다. 일단 App.vue에서 필요 없는 아래의 코드는 삭제하고, title을 먼저 분리해볼 것이다. mdi-magnify mdi-magnifytitle을 수정하는 버튼이랑 이러한 Interaction(상호작용)이 필요하기 때문에 title에 compon..
-
11. Vue와 Firebase로 나만의 사이트 만들기 - navigation drawer 만들기개발 공부/VF 2025. 6. 21. 09:00
VF - 11강 이번 강에서는 메뉴라고 할 수 있는 navigation drawer를 만들어 볼 것이다.크게 어렵지 않으며, App bar의 석 삼자(三)를 누르면 나오는 창이 나오고 들어가는 것을 구현할 것이다. 태그는 일반적으로 보는 메뉴는 아니며, 빈 박스만 가지고 있다고 생각하면 된다.그리고 v-model 속성으로 나오고 안나오게 해 줄 것이다.일단 공식사이트에서 아래와 같이 빈 틀을 복사하여 태그 바로 밑에 추가한다.여기서 permanent는 영구적인, 지속적인 이라는 뜻이며, 공식 사이트 Example에서 표시하려고 하다 보니 계속 나와있어야 하여 이 속성이 사용되었다.이제 평소에는 안보이다가 클릭했을 때만 보이는 것이 필요하다.그래서 permanent 속성을 삭제하고, v-model="..
-
10. Vue와 Firebase로 나만의 사이트 만들기 - footer 만들기개발 공부/VF 2025. 6. 20. 09:00
VF - 10강 이번 강에서는 간단하게 footer를 다뤄볼 것이다.footer는 바닥에 붙는 글을 말한다. 하지만 최근에는 스크롤에 방해되거나 하여 잘 쓰지 않는다. 그렇지만 회사나 상용에서는 회사 상호나 정보를 넣기 위해 사용한다.크게 할 게 없으나 특이사항을 알고 넘어가자.먼저 vuetity 사이트에서 footer의 Example을 하나 들고 와서 태그 위에 붙여 넣어 준다. {{ new Date().getFullYear() }} — Vuetify 이렇게 붙여넣어주면 일단 끝은 났다.하지만 이것이 중요한 게 아니라 이전 강에서 말했듯이 v-footer 안에 app propertys가 있어야 제 위치를 찾아갈 수 있다.이제 태그에 몇 가지 설정을 해보기 위해서 아래와 같이 속성을 추가..
-
9. Vue와 Firebase로 나만의 사이트 만들기 - appbar 만들기개발 공부/VF 2025. 6. 19. 09:00
VF - 9강 이전 강에서 vuetify이 설치를 완료하였고 이제부터 하나씩 만들어갈 예정이다.SPA에서 중요한 것은 부모 component 격인 App.vue 파일이 중요하다.보통 SPA에서는 상단바를 제외한 나머지 부분이 라우터로 페이지가 변하게 된다.더욱 상세히 말하면 상단바 좌측이나 우측에는 메뉴 드롭을 하는 navigation drawer가 있고, navigation drawer가 페이지들을 각각 링크하고 있으며, 링크한 것을 클릭하면 뷰 라우터를 통해 화면이 라우터 되는 영역에 뿌려지게 된다. 그리고 상단바에는 검색이나 상태 유무 같은 기능이 들어가기도 한다.그래서 맨 처음 해야할 것은 Appbar를 만들기 위해 App.vue를 수정해야 한다. 디자인 적으로 보았을 때 Material De..
-
8. Vue와 Firebase로 나만의 사이트 만들기 - vuetify 설치하기개발 공부/VF 2025. 6. 18. 09:00
VF - 8강 이번 강에서는 responsive, 반응형에 대해서 알아볼 것이다.naver.com의 경우 PC용은 naver.com이지만, 모바일용은 m.naver.com이다.이렇게 되면 2가지의 웹 페이지를 만들어야 하며, 수정이나 추가할 때 복잡해질 것이다. vuetify는 vue로 만들어진 CSS 프레임워크이다.예전에는 폰트크기라도 수정하는 것에 신경을 많이 써야 했다.하지만 vuetify는 PC, 태블릿, 모바일에 적당한 폰트크기를 제공해주어 이러한 문제를 해결해 줄 수 있다.vuetify는 플러그인 형태로 지원을 하며, Vuetify Vue CLI package 라고 한다.vuetify는 아래의 명령어로 추가할 수 있다.$ vue add vuetify이러한 플러그인은 보통 선택하는 것이 있다..
-
7. Vue와 Firebase로 나만의 사이트 만들기 - SPA 알아보기개발 공부/VF 2025. 6. 17. 09:00
VF - 7강 이번 강에서는 SPA에 대하여 알아보자.SPA는 Single Page Application의 줄임말이다.이것은 한 페이지에서 화면 내용이 변하는 것을 말한다. vue 프로젝트의 파일로서 더 알아보자. npm run serve 로 명령어를 실행했을 경우 entry point는 index.html이다.여기서 index.html이 스크립트를 로드하면서 맨 처음 들어가는 것은 main.js 파일이다.index.html은 손대지 않을 것이며, 결국 제일 처음 시작하는 것은 main.js이다.main.js는 필요한 import 자원들을 여기서 넣어주면 되며, 그 다음 화면에서 제일 신경써야할 파일은 App.vue 파일이다.App.vue는 아래와 같이 Home과 About의 2개의 페이지일 뿐이다...
