본문 바로가기

Else

 (21)
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가 같..
Beomlog - Firebase/Firestore connection, Router Firebase 와 firestore를 앱에 연결시켜줄 차례이다. 먼저 firebase를 설치하자. 이제 앱에 연결을 해주자. 먼저 파이어베이스를 관리할 api/firebase.ts를 하나 만들어줘야겠다. 이제 analytics와 initializeApp을 한데 묶어준다. 사실 혼자쓸 거라서 analytics는 필요없지만, 뭐, 있으면 어때. signUp 메서드와 signIn 메서드를 작성해주었다. authentication을 자동으로 처리해준 후, 에러가 나면 캐치해 에러를 띄우도록 만들었다. 이제 onSubmit에 signUp을 임시로 넣고, 이메일과 패스워드를 넣고 만들어보니, 잘된다. 그럼 signIn도 잘되는지 확인해보자. signUp이 있던 자리에 signIn을 넣고, 로그인을 해보면, sig..

티스토리툴바