본문 바로가기

Else/Personal Blog Building

 (19)
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에는..
Beomlog - Post Page Post Page를 이제 만들려고 한다. 먼저 Container 부터 만들어주자. PostContainer를 이렇게 만들어 주었다. 이제 useEffect에서 컴포넌트가 마운트될때 getPost 액션이 실행되도록 하려고 한다. import React, { useEffect, useState } from 'react'; import { PostState, getPost } from '../../Modules/post'; import { useSelector, useDispatch } from 'react-redux'; import { RootState } from '../../Modules'; import './PostContainer.scss'; import Loader from '../../Compon..
Beomlog - Writing Page & Upload writing page를 만들려고 한다. 먼저 포스트를 업로드 할때 필요한 자원들을 보자. 업로드할때는 category, editorData, postId, time, title, uid가 필요하다. uid는 상태관리의 user.uid에서 가져와 주면 되는 것이고, category는 내가 지정하는 것이며, editorData는 에디터에서 불러오면 되고, time은 그냥 현재 시각, title은 써져있는 제목을 가져와주면 되지만, postId는 문제이다. 그냥 숫자로 하자니 postId 자체가 너무 단순하고 심플하기도 하고 새로운 포스트를 업로드 하기 위해선 전 포스트의 카운트가 얼마인지 알고 있어야 한다. 따라서 이보다 좀더 단순하게, 시간에 따라서 오름차순 또는 내림차순으로 정리할 수 있도록, (시간_..

티스토리툴바