DOTY

JavaScript에서 날짜를 입맛대로 형식을 바꾸는 방법에 대해서 소개하려 한다. 함수 하나만 추가해주면 되는데 열심히 구글링을 하다보니 거의 다~~~~ 이 코드를 쓰길래 나도 썼다 ㅎㅎㅎ 배꼽인사(_ _) Date.prototype.format = function (f) { if (!this.valueOf()) return " "; var weekName = [ "일요일", "월요일", "화요일", "수요일", "목요일", "금요일", "토요일", ]; var d = this; var h; return f.replace(/(yyyy|yy|MM|dd|E|hh|mm|ss|a\/p)/gi, function ($1) { switch ($1) { case "yyyy": return d.getFullYear()..

사실 Firestore에서 가져오는 것과 큰 차이가 없는 듯 하다. 몇몇개만 수정해주면 된다. 이런 식으로 데이터가 되어 있다고 해보자. 이것이 Firestore에서 가져오는 방법이라면, 다음은 realtime에서 가져오는 방법이다. 둘이 같은 듯 다르다. realtime에는 child라는 것이 존재하는데 여기서 board의 child는 그 바로 하위에 데이터를 말하는 것이다. 그래서 child("BoardData")를 추가해줘서 BoardData밑의 내용들을 가져올 것이다. 이제 이걸 쓰는 방법은 매우 간단하다. import "firebase/database" 이걸 본인이 데이터베이스를 다룰 js 파일에 import해준다. 후에 다른 파일에서도 사용할 것이니 export 를 해준다. export con..

우선 npm을 사용해 다운받아 사용할 모듈은 다음과 같다. 그냥 firebase만 받았다는 뜻 헤헤 npm install firebase 후에 위 처럼 (진한 글씨로 되어있는것만 해도 상관 없을듯) import를 해준다. 이제 어디서 데이터들을 가져올 것인지 정보를 알려줘야 하는데 설정 > 일반 에 들어가면 다음을 볼 수 있다. firebaseConfig를 사용한다. 이런식으로 initializeApp으로 여기의 데이터를 사용할 것이다~ 라는걸 알려준다. 준비는 끝. 다음은 3가지를 다른 파일에서도 사용할 수 있게 해주는데 우선 auth는 후에 로그인 관련해서 쓸 듯 하다. passport.js 대신으로 말이다. 지금 쓸건 맨 아래꺼다. 우선 나의 firestore은 아래처럼 되어있는데 이를 불러와보자...

Middleware를 사용해서 버튼을 누르면 해당 페이지로 이동할 수 있게 설정을 해주었다. 이 파일을 app.js에 추가를 시켜준다. import { localsMiddleWare } from "./middleware" app.use(localsMiddleWare); 이런식으로 설정을 해준다면 다음과 같이 사용할 수 있다

Font Awesome Font Awesome The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options. fontawesome.com 이게 5로 바뀌면서 헷갈려졌다고 하는 사람도 있고 간단해졌다는 사람도 있고..... 사실 나는 5부터 사용했기 때문에 잘은 모르겠다.ㅎㅎㅎㅎㅎ 우선 가입을 하고 나면 우측 상단에 동그란 프로필이 기다리고 있다. 그걸 누르면~ 여기서 Font Awesome CDN을 클릭하게 되면 이런 창이 반기는데 밑의 코드를 복사해서 head에 넣어주면 된다. 참고로 pug는 저걸 그대로 넣어도 상관 없지만 pug 스타일은 다음과 같다. link(..

솔직히 말하자면 Firebase에 대한 자료가 많이 없는 듯 해서 나도 뒤져보면서 섞다보니 짜잔~ 하고 된 듯 하다. 우선 몇개를 npm install로 받자. npm install firebase firebase-admin firebase-export-import 이 3가지를 받는다. 물론, Node.js를 사용할 것이다. Firebase에서 프로젝트를 만든 후 설정에 들어가서 밑으로 내리면 위와 같은 화면을 볼 수 있다. 여기서 필요한 것은 databaseURL만 필요하다. 다른곳에 우선 복사해두도록 하자. 같은 페이지에서 서비스 계정으로 들어가게 되면 위와 같은 화면을 볼 수 있는데 '새 비공개 키 생성'을 누르게 되면 키 생성 버튼이 생기는데 이를 누르게 되면 json파일을 하나 받을 수 있게 된..

MVC를 짜기 전에 Router먼저 설정해주자. Router은 위와 같은 그림에 위치해 있다. 3개의 Router파일을 만들었는데, 커뮤니티, 검색(이 외 여러가지), 사용자와 관련한 경로들을 설정해주었다. 후에 이 3개를 app.js에 import 해주고 난 다음에 다음과 같이 경로를 설정한다. 중간의 큰 따옴표는 router.js를 작성 한 다음에 변경할 것이다. 이처럼 경로를 설정해준다. 로그인이든 글 수정이든 모든 경로 전부 다!!!!! 경로를 이런식으로 설정해두면 다른 파일에서는 굳이 경로를 하나하나 안쓰고 바로 쓸 수 있다. 위의 경우가 그런 경우다. router.home, globalRouter로 수정해놓으면 위와 같은 의미를 지닌다. 후에 globalRouter, userRouter, bo..

Babel과 Nodemon을 받았다. 각각 '코드를 간결하게 해주는 기능'과 '코드 변경시 서버를 자동으로 다시 시작해주는 기능'이다. 전에 설명을 올렸기 때문에 여기서는 굳이 설명 하지 않음. Babel · The compiler for next generation JavaScript (babeljs.io) Babel · The compiler for next generation JavaScript The compiler for next generation JavaScript babeljs.io Middleware를 Route가 시작 되기 전에 넣어주자. 넣어준 것들은 1. Morgan - Logging을 위해 씀. > option이 여러가지 있는데 여기서는 dev(개발자용 logging)를 사용할 것..

노드를 사용해서 서버를 열어보자. Node.js Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org (사실 전에 한번 포스팅 했었던건 안비밀..ㅎㅎㅎ) 그리고 Node.js를 쓴다면 꼭 필요한 Express도 받아보자. npm i express 그 후에는 npm init을 입력해서 이번 프로젝트에 대한 내용들을 어느정도 작성 하고 나서 package.json을 만들어준다. 물론 이와 똑같이 생기지는 않을 것이다. 이는 다른사람이 내 코드를 사용할때 알려주는 지표 라고 생각하면 된다. 사용법 이랄까...??? app.js 파일을 생성 한 다음에 이렇게 입력했다. 이 예제는 Express 페이지에..

그동안 웹 공부를 하면서 글을 못썼다. 노마드코더에서 결제를 하고 공부 했는데 혹시나 저작권 관련해서 문제가 있을까봐 함부로 적지 못해서가 가장 큰 이유다. 그런데 이번에 어떻게 기회가 되서 아는 사람들과 프로젝트 하나 만들기로 했다. 웹과 앱 두가지를 만드는데, 나는 웹을 하기로 했다. 혼자서 백과 프론트 다 해결해야 하는데 잘 할수 있을지는 모르겠다. 여기다가는 나의 프로젝트 진행 과정을 적기로 했다. 지금은 설계를 계속 하고 있는데 생각보다 음.... 많다. 허허..ㅠㅠㅠㅠㅠ 화이팅이다!