Else (21) 썸네일형 리스트형 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도 원하면 붙일 수 있도록 하려고 한다. 한번 해볼까. 이전 1 2 3 다음
