본문 바로가기

전체 글62

Firebase - Authentication (사용자 가입/로그인) 위 서비스들 중 인증(auth) 서비스를 사용하면 사용자 가입 및 로그인 기능을 사용할 수 있다.https://firebase.google.com/docs/web/setup?hl=ko&authuser=0&_gl=1*14z9cn1*_up*MQ..*_ga*NDg4Njg2My4xNzE2NzcyNjcw*_ga_CW55HF8NVT*MTcxNjc3MjY3MC4xLjEuMTcxNjc3NTIxMS4wLjAuMA JavaScript 프로젝트에 Firebase 추가의견 보내기 JavaScript 프로젝트에 Firebase 추가 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. 이 가이드에서는 웹 앱에서 또는 최종 사용자의 액세스를 위한firebase.google.com     Firebase .. 2024. 6. 4.
Firebase 무료 웹호스팅 https://firebase.google.com/ Firebase | Google's Mobile and Web App Development Platform개발자가 사용자가 좋아할 만한 앱과 게임을 빌드하도록 지원하는 Google의 모바일 및 웹 앱 개발 플랫폼인 Firebase에 대해 알아보세요.firebase.google.com Firebase 홈페이지 접속 -> 우측 상단 Go to console로 접근하면 구글 계정으로 로그인 하여 Firebase 콘솔창에 들어갈 수 있다. [Firebase Console 페이지 내 설정]         콘솔 페이지에서의 설정은 여기까지 해두고로컬에 Firebase를 설치한다. [Firebase Cli 설치]https://firebase.google.com/do.. 2024. 5. 27.
[Vue] 컴포넌트 컴포넌트 화면의 영역을 쪼개서 재사용 할 수 있는 형태로 만드는 기능(웹 화면을 헤더, 푸터, 컨텐츠영역, 네비 등으로 분할해서 화면을 구성한다고 생각하자) 전역 컴포넌트 먼저 전역 컴포넌트를 등록 해보자. Vue.component('컴포넌트 이름', 컴포넌트 내용); 으로 등록 할 수 있다. js Vue.component('global-component', { // 컴포넌트 이름은 케밥 형식이 아니여도 된다. template: '전역 컨텐츠의 내용이 요기잉네' }); const app = new Vue({ el : '#app' }); html // 컴포넌트 이름과 같은 태그를 생성 전역 컴포넌트 렌더링 결과 지역 컴포넌트 지역 컴포넌트도 등록해보.. 2020. 8. 4.
[Vue] 반복 렌더링 & 조건 적용 유니크 키가 없는 배열 배열 조작을 가하기엔 적합하지 않지만, 단순 출력을 위한 용도로는 문제가 없다. {{ item }} data: { list : ['리스트1', '리스트2', '리스트3'] }리터럴에 직접 v-for 적용 {{ item }} 번째 P 문자열에 v-for 적용 {{ item }}data : { text: 'TEST' }반복 렌더링 const data = { monster : [ { id: 1, name: '슬라임', hp: 100 }, { id: 2, name: '고블린', hp: 200 }, { id: 3, name: '드래곤', hp: 500 } ], } const app = new.. 2020. 8. 4.
[Vue] 기본 기능 Vue 기본 기능 인스턴스 생성 뷰로 개발할 때 필수로 생성해야 하는 코드 new Vue(); 참고로 뷰 인스턴스는 변수에 담아서 확인해 볼 수 있다. const app = new Vue(); console.log(app); 뷰에서 제공해주는 기능들을 확인 가능 뷰는 생성자 안에 객체가 들어가는 형태(객체 리터럴)로 코드 작성하는걸 권한다. const obj = { 속성 : 값, 속성 : 값 } const app = new Vue(obj); 이러지 말고 const app = new Vue({ //요 안에 객체 표기법으로 내용이 들어간다. 속성 : 값, 속성 : 값 });이런 식으로 작성하자. 인스턴스에서 사용할 수 있는 속성과 api new Vue({ el: , // 인스턴스가 그려지는 화면의 시작점 d.. 2020. 8. 4.
[javaScript] 반응성 (Reactivity) 자바스크립트의 반응성(reactivity) 에 대해 알아보자. 기본적으로 변수의 동작은 접근과 할당으로 되어있음 var a = 1; //값 할당 a; // 접근 a = 2; //값 재할당 이 개념으로 Object.defineProperty () 를 사용해보자. Object.defineProperty () 는 객체의 속성을 재정의 (접근과 할당시 동작을 정의) 해주는 자바스크립트 내장 객체이다. Object.defineProperty(대상 객체, 객체의 속성, { //정의할 내용 }); 간단하게 콘솔창에서 테스트 해보자 var a = {}; Object.defineProperty(a, 'str', { // getter 역할을 한다. 속성에 접근했을 때 동작하는 코드를 구현 get: function(){ c.. 2020. 6. 11.