프로젝트 소개
Morning & Brunch
기간 : 2021 / 11 / 01 ~ 2021 / 11 / 12 (총 12일)
팀 구성 : 프론트엔드 3명, 백엔드 : 2명
공통 적용 기술 : Git & Github, Slack, Trello
프론트 적용 기술 : ReactJS(Class Component, react-router-dom), SCSS(nesting, mixin)
- Morning & Brunch는 전 세계 브런치 메뉴들을 글과 이미지로 소개하고 공유합니다.
- 회원들이 직접 브런치에 대한 글을 써서 공유하고 인기순으로 혹은 화제도 순으로 추천합니다.
- 각각의 브런치 메뉴에 대한 다른 사람들의 평가를 보거나 읽을 수 있습니다.
- 짧은 기간동안 기존의 브런치를 전부 클론하는 것은 힘들 것이라 생각하여 구조적 요소와 디자인적 요소만 클론하였고 그 외 세부적인 요소들은 직접 기획하여 프로젝트를 진행했습니다.
.gif)
.gif)
나의 역할
- 회원가입 및 로그인페이지 레이아웃 및 기술 구현
- 마이페이지 레이아웃 및 블로그리스트 데이터 연결
- 서기를 맡아 Trello에 회의록 작성
1차 프로젝트를 통해 얻은 것
-
프로젝트가 무엇인지 알게되었다. 팀원들과 소통하고, 프로젝트 일정을 계획하고, 데드라인을 맞추기 위해 노력하였다.
-
데이터가 어떻게 들어오는지에 대해 백엔드와 구체적으로 소통을 하지않아 연결하는데 어려움을 겪었다. 소통을 통해 구체적으로, 미리미리 준비하자!
-
유연한 일정관리. blocker에 막히고, 다음 일정이 늦춰지기도 하였다. 나 만의 목표를 정하고, 주어진 시간을 효율적으로 쓰자!
코드 리뷰
코딩을 하는 스타일은 사람마다 다르다. 나의 스타일은 쉽고 간단하게 가독성을 높이는 것! 다양한 방법을 시도해보고, 나에게 맞는 것을 찾자!
리팩토링 전, 함수를 이용한 유효성 검사
checkEmail = e => { const emailRegex = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i; this.setState({ emailCkInput: emailRegex.test(e.target.value), }); }; checkPassword = e => { const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/; this.setState({ pwCkInput: passwordRegex.test(e.target.value), }); }; checkPasswordConfirm = e => { const { pwInput, pwcfInput } = this.state; const passwordcfRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/; if (pwInput === pwcfInput && passwordcfRegex.test(e.target.value) == true) { this.setState({ pwcfCkInput: true, }); } else { this.setState({ pwcfCkInput: false }); } };
리팩토링 후, 변수를 이용한 유효성 검사
const emailRegex = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i; const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/; const emailCheck = emailRegex.test(idInput); const pwCheck = passwordRegex.test(pwInput);
변수를 사용하여 유효성 검사 코드를 작성하니, state값을 저장하는 빈 배열도 사용하지 않았고, 코드를 26줄에서 6줄로 줄일 수 있었다.
동일한 화면에서 다른 컨텐츠 렌더링
state값에 boolean값을 부여하여, 값이 true일 때 나오는 화면과 false일 때 나오는 화면이 다르도록 구현
{openMyBlog ? ( <div className="myBlog"> <ul> <Bloglist myBlogList={myBlogList} /> </ul> </div> ) : ( <div className="likeInner"> <div className="likePost">좋아요한 글 {'>'}</div> <div className="likeBlog"> <Likebloglist likeBlogList={likeBlogList} /> </div> <div className="recentPost">최근 본 글 {'>'}</div> <div className="recentBlog"> <Recentbloglist recentBlogList={recentBlogList} /> </div> </div> )}
삼항연산자를 이용하여 openMyBlog : true 일 때, 내가 쓴 글(myBlog) 리스트를 렌더링하고, false 일 때 Recent & Like (likeInner) 리스트가 렌더링 된다.
여러 input 엘리먼트 제어
updateInputs = e => { const { name, value } = e.target; this.setState({ [name]: value, }); };<input id="id" type="text" placeholder="이메일*" name="idInput" onChange={this.updateInputs} /> <input id="password" type="password" placeholder="비밀번호* (영문 대소문자, 숫자, 특수문자 포함 8자 이상)" name="pwInput" onChange={this.updateInputs} /> <input id="passwordConfirm" type="password" placeholder="비밀번호 확인*" name="pwcfInput" onChange={this.updateInputs} /> ...
각 엘리먼트에 name 어트리뷰트를 추가하여, 하나의 함수를 여러 곳에서 사용할 수 있었다. 각 input마다 해당하는 함수를 만들어야하는 것을 방지하여, 효율성을 증가시켰다.
조건부 렌더링을 이용한 체크박스 이미지 삽입
<div className="inputDiv"> <input id="id" type="text" placeholder="이메일*" name="idInput" onChange={this.updateInputs} /> {emailCheck && ( <img className="check" src="images/SignUpcheck.png" alt="check" /> )} </div>
회원가입 페이지에서 email 유효성 검사를 통과하면 emailCheck 의 값이 true가 되어 img 태그를 추가하였다. 비밀번호와 비밀번호 확인 input 창에서도 같은 로직을 적용하였다.
잘한 점
- 내가 구현하고자 했던 방식으로 구현 했다는 점
- 시간 상 부족했을 수 있는 마이페이지를 구현해 냈다는 점
- 예민해 질 수도 있는 프로젝트에서 감정적으로 대처하지 않은 점
아쉬운 점
- 로그인 및 회원가입 페이지에서 component로 분리 하지 않은 점
- 마이페이지에서 Recent & Like 부분을 mockdata로 처리했다는 점
마무리
어제보다 오늘 더 잘 하자!
1차 프로젝트 때 아쉬운 점을 보완하고, 2차 프로젝트는 후회없이 마무리하자.
