Else/Personal Blog Building (19) 썸네일형 리스트형 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.. Beomlog - Components(2) : Dialog 밑에 다이얼로그가 뜨는 걸 넣었다. Redux와 React-redux로 구현했다. 각 다이얼록은 마운트되자마자 타이머를 셋해놓고 5000초 후에 자동으로 사라진다. 이를 showComponent라는 지역상태로 관리했다. 그 후, 리덕스 디스패치를 통해서 다이얼록을 디스패치에서 사라지게 해주었다. 아주 잘되는군 Beomlog - Container : FormContainer Form container의 구현은 다음과 같이 했다. 먼저 value들을 밖으로 끌어냈고, 이들을 useState를 통해 상태관리를 한꺼번에 했다. Login Form에서만 쓸 것이기 때문에, onChange 함수의 구현은 event.target.type (email 또는 password) 속성에 event.target.value를 넣어 바꾸는 것으로 구현하였다. 이메일과 패스워드를 입력하는 input을 두개 넣었고, 이를 onSubmit하면 일단은 console.log()로 출력하는 것을 구현하였다. 추후에 validation을 구현하려고 하는데, 일단인 이대로 두었다. 내가 원하는 validation은 email을 validate한 후, 패스워드가 8자 이상인지 판단한 후 success/failur.. 이전 1 2 3 다음
