개인사

개요하나의 페이지를 여러 개의 파일로 나눈 방식레고처럼 부품을 따로 만들고, 모아서 조립하는 형식으로 각각의 컴포넌트는 .vue 파일이 된다.각각의 컴포넌트는 필요에 따라서 자식 컴포넌트를 둘 수 있다. 컴포넌트는 HomeView로부터 자식 노드가 뻗어가는 형태의 트리 형태로 구현하게 된다.협업 혹은 가독성을 위해 컴포넌트 파일을 생성할 때 두 개 이상의 명사 결합, 부모를 나타낼 수 있도록 생성해 준다. 구현하기의 순서로 진행하게 된다.파일 생성자식 import부모에 붙이기1. 파일생성컴포넌트를 생성해 준다, 각각 header, main, foorter에 들어갈 컴포넌트로 예시를 들어본다.따라서 각각의 파일명은 다음과 같다.HomeHeader.vueHomeMain.vueHomeFooter.vue각각의 ..

개요우선 서버와 클라이언트를 간단하게 분류하자면 다음과 같다. 서버사용자 눈에 보이지 않는 곳에서 작동하는 부분클라이언트에게 정보나 서비스를 제공하는 시스템클라이언트의 요청을 받으면, 적절한 처리 후 클라이언트에게 응답클라이언트사용자 눈에 보이고 상호작용하는 부분서버를 통해 접속할 수 있는 애플리케이션이나 서비스서버에게 요청 하면, 서버로부터 응답 을 받는다Vue.jsJavaScript 프론트엔트 프레임워크, 표준 HTML, CSS, JavaScript를 사용한다.컴포넌트 단위로 나워서 개발이 가능 하다. 장점HTML에서 변수, 조건문, 반복문 사용이 가능하다, HTML + JavaScript만으로 개발 할 때에 비해 훨씬 쉽다.화면에 변경사항이 생기면 새로고침 없이 즉각 변경되어 앱처럼 부드러운 웹 개..

개요Node.js Firebase 연동, 데이터 파싱 collection, getDocsNode.js Firebase 연동, 데이터 파싱(2) getDoc, doc, dayjsNode.js Firebase 연동, 데이터 추가 Timestamp, addDocNode.js Firebase 연동, 데이터 수정 updateDocNode.js Firebase 연동, 데이터 삭제 deleteDocNode.js Firebase 연동, 로그인 구현하기Node.js Firebase 연동, 회원가입 구현하기Firebase의 Authentication를 사용하여 이메일 기반 로그아웃을 구현해 보자하기 링크에서 firestore database의 규칙을 적용해 주었다. 파이어베이스 Firebase 데이터베이스 규칙, fire..

개요Node.js Firebase 연동, 데이터 파싱 collection, getDocsNode.js Firebase 연동, 데이터 파싱(2) getDoc, doc, dayjsNode.js Firebase 연동, 데이터 추가 Timestamp, addDocNode.js Firebase 연동, 데이터 수정 updateDocNode.js Firebase 연동, 데이터 삭제 deleteDocNode.js Firebase 연동, 로그인 구현하기Firebase의 Authentication를 사용하여 이메일 기반 회원가입을 구현해 보자회원가입 시 firebase authentication에 사용자가 추가되는 것을 구현 auth.js해당 코드는 이전 로그인 구현하기에서 했던 내용과 동일하다.더보기// auth imp..

개요Node.js Firebase 연동, 데이터 파싱 collection, getDocsNode.js Firebase 연동, 데이터 파싱(2) getDoc, doc, dayjsNode.js Firebase 연동, 데이터 추가 Timestamp, addDocNode.js Firebase 연동, 데이터 수정 updateDocNode.js Firebase 연동, 데이터 삭제 deleteDocFirebase의 Authentication를 사용하여 이메일 기반 로그인을 구현해 보자인증이 된 사용자만 게시판에 글을 작성하게 해보자 firebase-auth CDN 추가기존에 작성했던 app.js 파일에 firebase-auth CDN을 추가해 주고, getAuth를 임포트 해준 뒤 초기화를 진행한다. // DB연동에..

개요Node.js Firebase 연동, 데이터 파싱 collection, getDocsNode.js Firebase 연동, 데이터 파싱(2) getDoc, doc, dayjsNode.js Firebase 연동, 데이터 추가 Timestamp, addDocNode.js Firebase 연동, 데이터 수정 updateDoc이전 글에서 javascript로 firebase에 데이터를 수정 하는 방법을 공부하였다.이번 글에서는 firebase에 이미 존재하는 글의 문서를 삭제 해보자deleteDoc을 통해 게시글을 삭제하는 기능을 구현할 수 있다.하지만 데이터를 삭제하는 경우에는 매우 조심해야 하기 때문에 권한을 잘 설정하도록 하자 javascript 코드 작성코드 article.jsimport { db } ..

개요Node.js Firebase 연동, 데이터 파싱 collection, getDocsNode.js Firebase 연동, 데이터 파싱(2) getDoc, doc, dayjsNode.js Firebase 연동, 데이터 추가 Timestamp, addDoc이전 글에서 javascript로 firebase에 데이터를 추가 하는 방법을 설명하였다.이번 글에서는 firebase에 이미 존재하는 글의 필드 정보를 변경 해본다.updateDoc을 통해 게시글을 수정하는 기능을 구현할 수 있다.update시 모든 필드의 내용을 변경할 필요는 없기에 REST API나 CRUD에서 Patch와 유사하다고 보면 될 것 같다. javascript 코드 작성코드 article.jsimport { db } from "..\a..

개요Node.js Firebase 연동, 데이터 파싱 collection, getDocs Node.js Firebase 연동, 데이터 파싱(2) getDoc, doc, dayjsaddDoc는 firebase에 새로운 문서를 추가할 수 있는 메서드이다.게시글을 생성할 경우 해당 게시글에 대한 정보를 firebase의 문서로 추가할 수 있다. javascript 코드 작성코드 article.jsimport { db } from "..\app.js";import { collection, Timestamp, addDoc, } from "https://www.gstatic.com/firebasejs/10.12.2/firebase-firestore.js";async function createArticle(t..

개요Node.js Firebase 연동, 데이터 파싱 collection, getDocs이전 글에서는 데이터를 파싱해와 컬렉션을 배열 형태로 받아왔다면 이번엔 id를 파라미터 형식으로 전달하여 한개의 필드를 받아오는 방법에 대해 알아보자해당 내용을 사용하여 게시판 형식에서 게시글을 단일로 조회 할 수 있다. 관련 메서드doc : 컬렉션에서 id 에 해당하는 게시글을 가져옴getDoc : 해당 문서를 snapshot 형태로 한가지를 가져옴docSnapshot.exists() : 문서가 존재하는지 boolean 리턴 javascript 코드 작성코드 article.js// 이전 글 참조import { db } from "..\app.js";import { getDoc, doc,} from "https:..

개요구글에서 서비스 중인 Firebase와 Node.js를 연동해 보자Firebase는 NoSQL 기반으로, 별도의 SQL문 없이 API 서비스를 구현할 수 있다.Firebase 설치 및 기초 내용에 관한 내용은 하기 링크를 참고  파이어베이스 Firebase 기초개요Firebase의 특징NoSQL 문서형 데이터베이스로, 단 하나의 서버 기술(AWS, Spring, MySQL 없이, Firebase 만으로 API 서비스 구현)게시판, 할 일 관리 등의 학습용 프로젝트뿐만 아니라, 실제 서비스에도zzzz955.tistory.com  데이터 추가우선 더미데이터를 세개 정도 Firebase에 넣어주었다.articles : 문서의 이름 (게시판의 이름), 문서 하나 하나가 현재 게시판의 게시글에 해당한다.tit..