Else (21) 썸네일형 리스트형 MERN Stack - MERN MERN이란 무엇인가? MERN은 각각 mongoDB, Express, React, Node.js를 뜻하며, MERN 스택이란 간단히 말하여 이 네 가지 요소를 사용하여 웹사이트를 개발하는 것을 뜻한다. 몽고디비 (mongoDB) 몽고디비는 C++로 작성된 NoSQL 데이터베이스로써, 기본적으로 자바스크립트 문법을 사용한다. Express Express는 웹 프레임워크이다. 웹서버를 개발하기 편리하게 해주는 프레임워크이며, 주로 백엔드를 개발할 때 사용된다. React 리액트는 facebook에서 내놓은 프론트엔드 개발 라이브러리이다. Node.js 노드.js는 서버 사이드 플랫폼으로써, 위에서 Express 와 리액트를 실행할 수 있게 해주는 자바스크립트 런타임이다. 왜 MERN? 그렇다면 왜 하필 M.. 티스토리 헤딩 태그 (h2, h3, h4) 자동 넘버링 (Heading Tags Auto Numbering) 글을 쓸 때마다 넘버링을 해주는게 귀찮다보니 그냥 h2, h3, h4에 맞게는 적어주지만 일일이 넘버링을 하지 않았다. 따라서 포스트가 다소 보기 어려워지고, 어떤 헤딩이 어떤 헤딩의 하위 헤딩인지 구분하기 힘들어졌다. 따라서 h2, h3, h4 태그를 최상위 태그 기준으로 (즉 h2 또는 h3 또는 h4 중 존재하는 최상위 헤딩) 자동으로 넘버링해주는 자바스크립트 코드를 아래와 같이 작성해주었다. (function (window, document) { 'use strict'; const post = document.querySelector('article#content .inner .entry-content .tt_article_useless_p_margin'); if (!post) return; co.. Beomlog - First Pre-Release Version Complete! 이제 범로그가 잘 작동한다. 코멘트 기능도 추가했고, 이제 다른 곳에 올리기만 하면 된다. 그러기 위해서 웹팩을 배울 생각이다. 웹팩을 배우고 deploy 할 생각이다. 그리고 도메인도 사려고 한다. beom.log로 살까 beom.blog로 살까 beomlog.io로 살까 고민중. 릴리스 하기 전 작업 끝! #### 추가 도메인도 사서 릴리스 완료했다. 깃허브 호스팅이지만 새로운 도메인 페이지로 리디렉트 되도록 했다. 주소는 https://beomlog.me 이다. 궁금하면 한번 들러보길! Beomlog - Profile Img Upload, Firestore Cloud Storage 프로필 이미지를 업로드 하는 공간을 마련하기 위해서 Firestore Cloud Storage를 쓰려고 한다. 당연히 가장 쉬운 Storage 방식이기도 하고, 이미 기반이 마련이 되어있기 때문에 여기에 이미지를 지정된 이름으로 저장한 후 불러오는 것으로 하려고 한다. 근데 생각해보니 기존 post들의 저장방식에는 사용자의 userData를 그대로 같이 업로드하고 있었는데, 이렇게 생각하니 만약 그렇다면 userData가 바뀐다면 post에 있는 모든 userData를 바꿔줘야 하는데, 그건 굉장히 비효율적이라고 생각해서, 그냥 글쓴이 uid를 바탕으로 userData를 불러오는 것으로 바꾸기로 했다. 먼저 Cloud Firestore Storage를 연결을 해보자. App.tsx에서 initialize.. Beomlog - Posts by Category 이번에는 카테고리별로 post들을 가져오는 메서드를 만들도록 하겠다. 이 역시 리덕스와 리덕스 미들웨어로 구성할 것이다. 하지만 posts들을 가져오는 것은 마치 userData를 가져오는 것과 비슷하다. post처럼 복잡하게 CRUD모두가 필요한 것이 아니라, R와 D만 있으면 된다. 나머지는 post를 업로드 할때 자동으로 처리를 해주기 때문에, 게시물들을 한눈에 볼 수 있는 R과 게시물들을 상태에서 지워주는 D만 있으면 된다. 한번 해보도록 하자. import { category } from "../Container/Home/HeaderContainer"; import { createCategoryPostsSaga } from "../lib/asyncUtils"; import { takeEvery .. Beomlog - firebase bug fixing FieldValue를 업데이트할때 자꾸 에러가 나고 삭제가 안돼서, 왜그런지 찾아봤더니, uid 내부에 .(점) 이 들어가 있어서 그것을 하나의 path로써 인식을 했기 때문이었다. 그렇기 때문에 uid에는 점이 들어가지 않도록 해야한다. 먼저, 기존의 형식은 그대로 유지하되, ISO 대신 UTC를 쓰는 방식으로 바꿀것이다. 그렇게 하면 중간에 점이 들어갈 일이 없다. 그렇게 하고 하니, 필드에서 잘 지워진다. 이를 이용해 delete와 update메서드는 모두 구현을 완료했다. 남은건 getPosts만 완료하면 된다. 커피 하나 사와서 완성해야지..! Beomlog - Category and Firebase Category별로 글을 가져오기 위해서 유저마다 새로운 컬렉션을 만들어 안에 글들의 짧은 정보가 담기도록 만들어 후에 게시판에 띄울 때 그 정보들이 뜨도록 하면서 동시에 각 카테고리별로 몇개의 글이 있는지 등등의 정보를 업데이트 할 수 있도록 하려고 한다. 먼저 user의 post들의 정보를 category별로 저장할 컬렉션을 만드려고 하는데, 이름을 고민하다가 그냥 postsByUser로 지었다. 먼저 각 post별로 게시판에 뜬다고 생각을 했을 때 중요한 정보들은 title, 글쓴이(userData), postId 정도가 될 것이다. editorData도 있으면 좋겠지만, 일단은 editorData를 저장하는 방식이 HTML 코드로 저장이 되기 때문에 일단은 보류하도록하고, time과 categor.. Beomlog - Categories and User Settings Update Page 먼저 카테고리를 만들어 각 포스트에 카테고리를 부여하도록 만들고 싶다. 티스토리와 비슷하게, 카테고리 관리 페이지를 만들어준 후, 이를 user의 userData로써 관리를 해 줄것이다. 만약 관련 카테고리가 없어졌다면, category는 카테고리 없음, 가리고 관련 카테고리가 존재한다면 관련 카테고리 별로 post 관련 데이터들을 불러올 수 있는 로직을 만들 것이다. 먼저 Category를 만드는 페이지를 만들어주자. 대체적으로 티스토리의 카테고리 관리 페이지를 참고하여 만들도록 하겠다. 근데 이럴 바엔 그냥 user settings page를 만들어 주는게 더 효율적일것 같아서 그걸 만들도록 하겠다. UserSettingsPage.tsx를 만들어주도록 하자. UserSettingsContainer에는.. 이전 1 2 3 다음
