분류 전체보기 (153) 썸네일형 리스트형 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.. Beomlog - Components (1) 왠지 모르게 input부터 만들고 싶어졌다. input이라는 component는 type과 placeholder를 가져온다. value는 useState를 통해 자체적으로 관리해주었다. 다음은 버튼. onClick 메서드만 불러와주고, isFilled로 버튼의 색을 채울지 말지를 결정하도록 했다. isFilled는 버튼에 클래스네임을 부여하고 이에 따라 scss에서 관리해줄 것이다. children을 받아와 버튼 안에 넣기로 했다. 이제 로그인 / 회원가입 기능부터 만들어보자. Beomlog - Folder Tree src 디렉터리의 폴더트리는 다음과 같다. 이제 진짜 시작! Beomlog Building - Introduction 똥글들을 적을 개인 블로그를 하나 장만하려고 한다. 절대 포트폴리오 용은 아니다. 프론트엔드는 React, 백엔드는 Google Firestore로 연결 시킬 예정이다. 대략적인 구조는, domain ->/auth --->/signup ->/home ->/board --->/1 ->/post --->/somePostIndex ->/upload ->/settings 따라서 만들페이지는 대략 9페이지 정도 되보인다. 게시물에는 태그들을 달 수 있고, 이미지 삽입이 가능하다. 그리고 게시물을 만들 때 무조건 HTML로 작성해주어야 하며, css도 원하면 붙일 수 있도록 하려고 한다. 한번 해볼까. Redux & Typescript - typesafe-actions Typesafe-actions 라이브러리로 코드를 조금 더 깔끔하게 만들고 리팩터링을 해보자. 먼저 typesafe-actions 모듈을 설치해주자. createStandardAction을 불러오고, 기존의 액션 타입 뒤에 붙어있던 as const들을 지워준다. 지워준 후에는 이제 createStandardAction을 써주자. 각 디스패치 함수에 createStandardAction을 아래와 같이 넣어준다. 그리고 이렇게 작성해주자. actions에 액션들을 넣어준다. 그 후, CounterAction이라는 타입을 만들어 ActionType (typesafe-actions 타입)에 타입을 로 지정해준다. 그리고 리듀서도 createReducer로 더 쉽게 작성 가능하다. 리듀서가 이렇게 쉽게 작성되었다.. Redux & Typescript - Ducks Pattern Redux with Typescript 타입스크립트와 리덕스를 같이 써보자. 먼저 프로젝트를 생성하고, redux와 react-redux를 설치해주자. redux는 자체적으로 타입스크립트를 지원하지만, react-redux는 그렇지 않다. 그러므로 따로 추가해주어야 한다. 이렇게 설치해주자. 이제 react-redux도 타입스크립트가 지원이 된다. 정확히는 공식적인 지원이 아닌, 커뮤니티에서 만든 타입스크립트 써드파티 라이브러리이다. 이제 ducks pattern을 사용하여 모듈을 만들어주자. ducks pattern에 대해서는 http://guswnsxodlf.github.io/redux-ducks-pattern Redux의 ducks패턴에 대해서 Ducks patternRedux를 사용하는 어플리케이션을 구축하다 보면 기능별로 여러 개의 .. 이전 1 ··· 15 16 17 18 19 20 다음
