본문 바로가기

분류 전체보기

 (153)
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 자체가 너무 단순하고 심플하기도 하고 새로운 포스트를 업로드 하기 위해선 전 포스트의 카운트가 얼마인지 알고 있어야 한다. 따라서 이보다 좀더 단순하게, 시간에 따라서 오름차순 또는 내림차순으로 정리할 수 있도록, (시간_..
Beomlog - Redux, Redux-saga - post post의 상태관리는 redux와 redux-saga를 통해서 하려고 한다. 일단 가장 기본적인 리덕스 액션들은 다음과 같이 짰다. const UPLOAD_POST = 'post/UPLOAD_POST'; const UPLOAD_POST_SUCCESS = 'post/UPLOAD_POST_SUCCESS'; const UPLOAD_POST_ERROR = 'post/UPLOAD_POST_ERROR'; const GET_POST = 'post/GET_POST'; const GET_POST_SUCCESS = 'post/GET_POST_SUCCESS'; const GET_POST_ERROR = 'post/GET_POST_ERROR'; const DELETE_POST = 'post/DELETE_POST'; const ..
Beomlog - CKEditor5 글 쓰는 페이지를 만들려고 한다. 글 쓰는 페이지와 상태와 상태관리는 post.ts라는 module에서 관리할 것이고, 글 쓰는 로직 자체는 CKEditor라는 패키지를 써서 만들 계획이다. (나는 온라인 에디터를 만들만한 실력도 자신도 없기 때문에) CKEditor를 설치해주자. 에디터 설치는 이 사이트를 참고 했다. https://m.blog.naver.com/PostView.nhn?blogId=tk2rush90&logNo=221552585263&categoryNo=9&proxyReferer=https:%2F%2Fwww.google.com%2F Angular2+, React 를 위한 WYSIWYG 에디터, CKEditor5 안녕하세요. 오늘은 Angular2+ 와 React를 위한 WYSIWYG 에디..
Beomlog - Toggle Menu Animation 토글메뉴를 만들고, 토글메뉴가 나올때마다 배경은 어둡게, 토글메뉴는 왼쪽에서 오른쪽으로 나오는 애니메이션을 만들었다. scss파일에 다음과 같은 코드를 작성해 주었다. 각 애니메이션들은 별거 아니고 그냥 0% 와 100% 각각에 시작과 끝에 수행할 것들을 적어 놨다. 그리고 ToggleMenu.tsx 파일은 다음과 같이 작성했다. toggle이 될때마다 뒤에 on 또는 off라는 클래스가 붙는다. 붙는 클래스에 따라서 애니메이션이 다르게 실행되는 것이다. 실제로 실행해서 넣어보면, 아주 잘 된다. 꾸며주기만 하면 되는데, 좀 귀찮다. 꾸미기는 나중에!
Beomlog - user data calling: Redux-Saga 리덕스 사가를 이용해서 유저데이터를 콜 하기로 했다. 먼저 redux-saga를 yarn add로 설치해주고, index.tsx 에 미들웨어를 사용할 것임을 알려주자. 그리고 Modules/index.ts에 rootSaga를 만들어 run 해주자. 추후에 사가들을 넣어줄 것이다. 이제 user라는 상태를 만들어주자. user는 다음과 같이 되어있다. GET_USERDATA를 하면, 사가에 userdata를 database에서 가져오라고 명령을 내린다. 이 명령이 끝나서 데이터가 들어오면 SET_USERDATA를 통해서 state에 userdata를 저장하는 방식이다. lib/asyncUtils.ts 라는 파일을 만들어 이를 관리해주도록 할텐데, 이 파일은 다음과 같이 작성되었다. 여기서 promiseCr..
Beomlog - RegisterPage 일단 db를 연결시켜 놓았다. db에 userData를 저장하려 하는데, 이를 signup 하면서 동시에 진행하려고 한다. 이를 Modules/firebase.ts 에서 진행하도록 하겠다. onSubmit이벤트는 다음과 같이 구현했다. 일단 values라는 state에는 name, email, password, checkPassword가 들어있다. validity를 판단해보고, valid하면 signUp으로 올린다. 만약 valid하지 않다면, name과 email은 그대로 둔 채 패스워드와 checkPassword만 초기화 시킨다. onChange는 다음과 같이 구현하였다. values가 바뀔때마다 setValues를 통해 바뀐 부분을 수정해준다. 그러고 password와 checkPassword가 같..

티스토리툴바