프리온보딩은 원티드 정승일님, 위코드 김예리 멘토님, 루트임팩트 이지현님과 함께하는 프론트엔드 실무 과정입니다. 💕
이번주는 8명이 같이하는 큰 프로젝트였기 때문에, 적을 내용이 많아서 수업 내용은 생략했다. 수업내용에 나온 부분들을 따로 공부해서 포스팅하려한다.
🧐 3차 과제
주제 및 내용
- 로그인, 회원가입 페이지
- admin에서 테이블로 유저 관리하기
과정
1. 회의
우리 1팀(8명)은 월,화,수,목,금 총 5일동안 하루에 몇번씩 회의를 하며 각자 진행사항을 공유하고, 싱크를 맞추기 위해 노력했다.
2. 협업
2-1. Github
우리는 git flow 방식으로 협업을 진행했다. 석기님이 git 협업 관련해서 글을 작성해주셔서, 템플릿에 맞춰서 협업을 진행했다.
2-2. Slack
Zoom을 통한 화상회의 외에도, Slack을 통해 그때그때 확인하고 진행상황을 이야기했다.
내가 맡은 부분
1. Local Storage
2차 과제에서도 나는 Local Storage쪽을 맡았다.
2차 과제때 나는 배열(Array) 형태로 모든 것을 하려고 했는데, 내가 하는 방식이 Best인 것 같지 않았다.
아래는 데이터를 가져와서 갱신하는 방식으로 작성한 add 메서드이다.
// 2차 과제 Local Storage Class의 add 메서드
add(item) {
const data = this._getAll();
if (!data) {
this.arr.push(item);
this._save(this.arr)
}
// 데이터가 1개이고, 같은 것을 누른 경우 종료
else if (data.length === 1 && item.id === data[0].id) {
return;
// 데이터가 2개 이상이거나, 1개면서 다른 것을 누른 경우
} else {
const isClikedSame = data.some((v) => v.id === item.id);
// localstorage에 이미 있는지 확인, 있다면 삭제후 갱신
// 모두 지우고
// 새로운 데이터 다시 저장
}
});
} else {
// localstorage에 없는 경우 그냥 추가
}
}
}구현하면서 굉장히 불편하다는 생각이 들었다. 과제가 끝나고 계속 찝찝해서 검색하고 있었는데, 3차 과제에서도 Local Storage가 나왔다. 나는 회의에 들어가자마자 내가 하겠다고 찜했다.
내가 클래스를 만들기 전에 고민했던 것은 이랬다.
- 외부에서 복잡하게 저장하거나 꺼내오지 않도록 만들 것 ->
직접 접근하지 않도록 만들자 - 데이터를 조작할 메서드를 만들 때, 내부 메서드만을 이용해서 쉽게 할 수 있도록 할 것 ->
private 메서드를 활용하자 - 새로운 기능을 추가할 때도 쉽게 할 수 있도록 할 것 ->
잘개 쪼개자
// 3차 과제
export class UserStorage {
constructor(name) {
this.name = name;
this.arr = this.getAll() || [];
}
save(item) {
if (this._checkExistId(item.id)) return;
// 아이템을 넘겨주면 LocalStorage에 Object로 저장
}
getAll() {
// LocalStorage의 모든 정보를 Array로 리턴
const data = this._getDataFromStorage(); // obj
// ...
return result;
}2. UI 디자인
2차 과제때 우리가 냈던 과제 디자인은 솔직히 별로였다. 평범한 정도가 아니라 별로였다. 기능구현을 하느라 디자인을 신경쓰지 않았는데, 어떤 팀은 디자인도 이쁘게 만들었다.
그 때 생각났다. 아, 맞다 그냥 공부하러 온게 아니라 개발자라는 타이틀을 달기 전에 성장하러 온거였지. 내가 맡은 일이 무엇이든, 일단 전력을 다해 해야한다고 생각했다. 몇시간 안에 디자인을 하고 버그를 잡으며, 틈틈이 디자인을 수정하고 팀원들의 CSS를 도와주었다.
어려웠던 점
1. 소통, 협업
나는 당연히 내가 구현한 Local Storage 클래스를 적극 활용해서 메서드를 활용하고, 추가 요청을 해줄줄 알았는데, 다른 사람들에겐 당연하지 않았나보다.
나는 Object형태로 Local Storage에 저장되도록 메서드를 만들었는데, 다른 팀원은 메서드를 사용하지 않고 직접 Local Storage에 접근 후 저장을 해서, 에러를 찾느라 살떨렸다. (데이터를 추가하여 해결하긴 했다.)
이를 통해 내가 당연히 여기는 것을 누군가는 당연히 여기지 않는다는 것을 느꼈고, 다른사람의 생각을 확인하고 이야기해야 한다는 것을 알았다.
2. 깃헙
master 브랜치에 관련해서만 commit, push, fetch, pull 할줄 알았는데, 이번에 처음으로 깃헙으로 issue를 만들고, 기능에 따라 branch를 따고, Pull Request를 날리는 경험을 해보았다.
내가 PR, merge 관련해서 다른 팀원들에게 살짝 민폐를 끼쳤는데 팀원들이 너무 다들 이해심이 넓어서(?) 괜찮다고 해주셔서 감사했다.
팀원들이 구현한 기능
1. Admin
1-1. 테이블
thead: table의 head가 되는 영역tbody: table의 body영역tr: 하나의 tr = row.tr안에는th또는td로 작성th: 제목 태그td: 내용 태그
<thead>
<tr> <th>이름</th><th>나이</th> </tr>
</thead>
<tbody>
<tr> <td>김젤리</td><td>15</td> </tr>
<tr> <td>김액트</td><td>16</td> </tr>
<tr> <td>김브라운</td><td>16</td> </tr>
</tbody>1-2. 검색 창
admin 페이지에서는 serachOption{username: ''}을 수정할 수 있는 setSerachOption(함수)을 넘긴다.
searchBar 컴포넌트는 이 함수를 받아서, input이 변경될 때마다 함수를 실행시킨다.
1-3. 검색 결과
{applySearchOptions(tableData).map(v => {검색옵션에 따라 데이터를 다르게 뿌려줘야 했기때문에, 결과로 리턴받은 데이터를 tbody안에서 돌렸다.
2. Pagination
props로 array를 받으면 pagintaion이 생성되도록 구현했다. 한 페이지에 10개 단위로 보일 수 있도록 했다.
3. Sign up (회원가입)
3-1. 유효성 검사
각 input 별로 조건이 맞는지 확인하는 로직으로 구현되어있다. id 중복을 확인하고, 가입시 홈으로 push 하도록 했다.
3-2. 모달 (팝업)
sign up 페이지에 있는 주소입력 창, 신용카드 입력 부분은 재사용 가능한 모달 컴포넌트를 만들었다. props를 넘겨주면 알아서 모달이 생성된다.
4. Log in (로그인)
input의 값을 받아서 id와 password가 맞는지 확인하고, 로그인 되도록 구현되어있다.
