⚡ 기능 구현코드
🔗 Github
🔗 배포 링크
🔗 기능별 영상 링크
🔗 피그마 링크
👊 React Class Component로 개발하기
직접 구현한 부분 :
- 전체 페이지 및 공통 컴포넌트 마크업 및 스타일링
- 브랜드 목록 필터링 및 관심 없는 목록 필터링
과제를 끝내고 회고 내용
🔰 팀프로젝트, 처음 설계 및 기능 분담이 중요하다
-
과제에 이미지가 없어서 팀원 모두 당황했다. 첫 과제처럼 피그마나 이미지가 있었다면 보고 그대로 구현하면 되는데 글을 읽고 파악해서 화면에 기능을 담아야 하기 때문에 각자의 생각이 달랐다.
-
저녁시간을 가지면서 각자 읽은 내용을 토대로 팀원분들과 정리해보았다. 남주님이 피그마를 사용해서 가이드라인을 작성해오셨고, 그 안에 팀원들이 어떻게 화면에 그릴 것인지 기능은 어떻게 나눌 것인지 일사천리로 착착! 정해졌다
-
현찬님과 [상품 조회 이력 목록 페이지] 를 개발하기로 정해졌다. 처음 설계 시 의사소통을 충분히하고 피그마로 프로토타입도 만들고, 기능 분담을 하니 어려움 없이 프로젝트를 진행할 수 있었다.
🔰 LocalStorage도 Class로 관리할 수 있다
-
이번 과제가 유독 더디게 개발된 데에는 class 컴포넌트로 개발해야된다는 점도 있었다.
책에서 class 컴포넌트 / 라이프사이클 여러번 읽었다. 하지만 이제는 functional 컴포넌트로 개발하세요~! 라는 결론에 class 컴포넌트로만 프로젝트를 개발해 본 경험이 없었다. -
아래는 과제가 끝나고 다른팀 분이 작성하신 코드가 좋은 코드로 소개되어서 넣었다.
LocalStorage에 save, load를 class로 관리해야겠다는 생각을 해본적도 없는데 대단하시다..! 이렇게도 할 수 있어..!
export default class Storage {
constructor(title) {
this.title = title;
}
save = (list = []) => {
const obj = {
data: list,
timestamp: new Date().getDay(),
};
if (!localStorage.getItem(this.title)) {
localStorage.setItem(this.title, JSON.stringify(obj));
} else {
let previousTime = JSON.parse(localStorage.getItem(this.title))?.timestamp;
let currentTime = new Date().getDay();
if (previousTime !== currentTime) {
return localStorage.clear();
} else {
return localStorage.setItem(this.title, JSON.stringify(obj));
}
}
};
load = () => {
return JSON.parse(localStorage.getItem(this.title))?.data;
};
}🔰 URL 설계
-
아래 링크처럼 전체 상품정보값을 넘길 필요가 없다. prod4도 필요없다.
간결하게 아이디값 자체만 넘겨주어야 한다.
❌ http://localhost:3000/productdetail/prod4/나이키%20윈드러너%20블랙%20L/나이키/60000/false
⭕ http://localhost:3000/productdetail/4 -
이 부분에 대해서 프로젝트 진행 시 얘기가 나왔는데 확신이 없었다. 위에처럼 정보값을 넘겨서 사용해본 적이 없긴 했지만,, 내가 맞는지 틀린건지 확신이 없을 뿐더러, 내가 담당하는 부분이 아니라서 의견을 내는데 소극적이었다. ⭕와 ❌를 확실하게 구분할 수 있는 개발자가 되어야 한다!
🔰 Git Branch 관리하기
- branch 별로 기능 개발 후 머지하는 작업을 효율적으로 잘 할 수 있어야 한다.
- branch 생성
- branch에서 기능 개발(commit)쌓기
- branch에 push하기
- pull request 보내기
- merge하기
🔰 리팩토링 시 코드의 유지보수 및 간결성을 항상 생각하자!
-
함께 협업하여 개발하니, 역시 내가 놓치는 부분을 다른 누군가 잘 찾아주었다.
에러는 물론, 변수명은 이게 더 좋을 것 같은데..! 이건 이 방법으로 해보면 어떨까요..! 등 자유롭게 얘기하고 서로서로 도와가며 진행할 수 있었다. -
특히 마지막 날 리팩토링 하면서 if-else문 사용을 줄이려고 노력했고, 이 코드를 처음보는 사람의 마음으로 쭉 읽어보는게 중요하단걸 걸 알았다.
👀 아쉬웠던 점과 해결방안
개발 일정은 아래와 같았는데, 생각보다 시간은 정말 빠르게 지나갔다.
(우리 팀원분들 모두 아침에 눈뜨자마다 새벽4-5시까지 게더타운에서 함께 했음에도.. )
- 목 : 설계 및 피그마 작성
- 금 : 기능분담 내용 개발
- 토 : 코드 머지 후 배포, README 작성하기
우선 각자 기능분담된 내용은 잘 개발하는 것이 우선이었고, 제출일에 머지하면서 리팩토링의 시간을 갖긴했지만 나는 다른 분들의 코드를 하나하나 살펴볼 여유가 없었다😢
(제출하고 나서야 마음의 여유를 가지고 리뷰해보았다.)
프로젝트를 함께하면서 체력관리도 필수!
