⛅리액트 파이널 프로젝트: Style Cast☔ 회고
목차
- 프로젝트 개요
- 기간
- 소개
- 목적
- 배포
- 기능 구현
- 역할 분담
- 기능 분담
- 프로젝트를 통해 알게 된 것들
- 회고
- 칭찬
- 반성
- 노력
- 느낀점
- 결론
- 프로젝트 전반적인 성과
- 향후 계획 및 방향
🗂️ 프로젝트 개요
⛅ 리액트 파이널 프로젝트: Style Cast ☔
- 날씨 기반 오늘의 옷(OOTD) 추천 애플리케이션
기간
- 2024. 08. 26 ~ 09. 24
프로젝트 소개
- 기온만으로는 적절한 옷차림을 결정하기 어려운 경우가 많습니다.
이 애플리케이션은 당일 날씨와 기온에 따라 적합한 옷차림(Outfit of the Day, OOTD)을 추천받을 수 있도록 설계되었습니다.
이를 통해 사용자에게 보다 정확하고 실용적인 옷차림 정보를 제공하고, 일상에서의 편리함을 더하고자 합니다.
- 날씨에 따른 적절한 옷차림 제공
- 사용자는 날씨에 맞는 옷차림을 선택하는 것이 종종 어려울 수 있습니다.
- 이 애플리케이션은 현재 날씨를 기준으로 적절한 옷차림을 추천하여, 사용자들이 날씨에 맞는 옷을 손쉽게 고를 수 있도록 돕습니다.
- 패션 선택의 다양성 제공
- 매일 새로운 OOTD를 제안하여 사용자들에게 다양한 스타일의 패션 선택을 제공합니다.
- 이를 통해 사용자들이 패션을 더 즐기고 창의적인 스타일을 시도할 수 있도록 유도합니다.
- 편리한 패션 관리
- 사용자에게 날씨 기반의 패션 추천을 제공함으로써, 매일 아침 무엇을 입을지 고민하는 시간을 줄이고, 패션 선택의 스트레스를 경감시킵니다.
- 마음에 드는 코디를 저장하여 원하는 패션을 관리할 수 있습니다.
- 사용자 경험 개선
- 직관적이고 사용하기 쉬운 인터페이스를 통해 사용자들이 손쉽게 애플리케이션을 사용할 수 있도록 합니다.
배포
문서
Home
멋사 프론트엔드 스쿨 10기 - 탑텐(TopTen) 프로젝트. Contribute to FRONTENDSCHOOL10/Topten development by creating an account on GitHub.
github.com
💻 기능 구현
역할
- 문서 작업 및 회고 기록 담당 (Notion, Git Wiki)
기능
- 컴포넌트 제작
- Input 컴포넌트
- LookBook 컴포넌트
- 기능 구현(React)
- 비밀번호 찾기 페이지
- 메인 페이지 - 룩북 컴포넌트
- 룩북 페이지
- 룩북 디테일 페이지
- 날씨 캘린더 페이지 - 캘린더 컴포넌트
비밀번호 찾기 페이지
메인 페이지 - 룩북 컴포넌트
룩북 페이지
룩북 디테일 페이지
날씨 캘린더 페이지 - 캘린더 컴포넌트
✏️ 프로젝트를 통해 알게 된 것들
1. onBlur()
: HTML 및 React에서 사용하는 이벤트 핸들러
- 사용자가 입력 필드나 버튼 등의 요소에서 포커스가 벗어났을 때 실행된다.
- 폼 유효성 검사나 입력 내용 검증을 할 때 많이 사용
- 비밀번호 찾기 페이지 구현할 때 입력칸의 입력값 검사를 위해 경고 메시지를 띄우려고 사용했다.
const handleBlur = (e) => {
const { name, value } = e.target;
if (name === 'name' && !validateName(value)) {
setWarnings((prevWarnings) => ({
...prevWarnings,
name: '이름은 2자에서 6자 사이의 한글이어야 합니다.',
}));
} else if (name === 'email' && !validateEmail(value)) {
setWarnings((prevWarnings) => ({
...prevWarnings,
email: '유효한 이메일 주소를 입력하세요.',
}));
} else {
setWarnings((prevWarnings) => ({
...prevWarnings,
[name]: '',
}));
}
};
return (
<>
<Form onSubmit={handleAction}>
<Input
text={'이름'}
description={'이름을 입력해주세요'}
value={name}
onBlur={handleBlur}
/>
<Input
text={'이메일'}
description={'이메일을 입력해주세요'}
buttonText={'이메일 인증'}
value={email}
onBlur={handleBlur}
/>
</Form>
</>
);
}
2. 리액트 스와이퍼의 네비게이션 커스텀 디자인
- 라이브러리인 리액트 스와이퍼를 사용해서 슬라이드 기능을 넣었는데 네비게이션 버튼이 이미지 내부에만 있었다.
- 룩북 페이지는 아래 사진처럼 슬라이드 네비게이션 버튼이 이미지 외부(상단)에 있어야 했기 때문에 네비게이션 바를 스와이퍼 범위 외부로 빼서 커스텀해야 했다.
- 스와이퍼 밖에 스와이퍼 버튼을 만들고, 해당 버튼에 onClick 함수를 적용하여 슬라이드 버튼이 작동되도록 했다.
// 착용샷 슬라이드 버튼 -----------------------
const swiperRef = useRef(null);
const goNext = () => {
swiperRef.current.swiper.slideNext();
};
const goPrev = () => {
swiperRef.current.swiper.slidePrev();
};
return (
<>
<div className={styles.outfitSwiper}>
<Swiper
className={styles.swiper}
modules={[Pagination, Scrollbar, A11y, Keyboard]}
spaceBetween={20}
slidesPerView={1.2}
loop={lookBookItems.length > 1}
keyboard={{ enabled: true }}
pagination={{ clickable: true }}
a11y={{
prevSlideMessage: '이전 슬라이드',
nextSlideMessage: '다음 슬라이드',
paginationBulletMessage: '페이지 {{index}}',
}}
ref={swiperRef}
>
{lookBookItems.length > 0 ? (
lookBookItems.map((item) => (
<SwiperSlide key={item.id}>
<img
src={getPbImageURL(item, 'outfitImage')}
alt={item.lookBookTitle}
className={styles.outfitImage}
/>
</SwiperSlide>
))
) : (
<SwiperSlide>계절에 맞는 착용샷이 없습니다.</SwiperSlide>
)}
</Swiper>
<div className={styles.swiperBtn}>
<button className={styles.goPrev} type="button" onClick={goPrev}>
이전
</button>
<button className={styles.goNext} type="button" onClick={goNext}>
다음
</button>
</div>
</div>
</>
);
}
3. 오토 캔슬(Automatic Cancel)
: 데이터베이스 통신을 두 번 방지하기 위한 방법으로 첫 번째 요청을 취소하고 두 번째 요청만 남기는 방식
- 리액트가 기본적으로 2번 실행되니까 데이터베이스에도 통신을 2번 실행하는데, 이걸 방지하는 차원에서 맨 처음 요청은 취소 시키고 두 번째 요청을 실행한다.
- AbortController를 사용하여 직접 구현 가능
1. UI/UX 및 앱 설계
- 팝업 창을 띄웠을 때 사용자가 팝업 외부를 클릭하면 자동으로 팝업이 닫히는 경우
- 사용자가 더 이상 팝업이나 특정 동작을 원하지 않는다는 것을 암시하는 상황에서 동작한다.
2. 비디오 게임
- 격투 게임에서 특정 동작(공격 애니메이션)이 자동으로 취소되고 다음 동작으로 빠르게 전환되는 기능
- 플레이어가 의도하지 않았더라도, 특정 공격 동작이 취소되어 더 빠른 속도로 다음 공격이나 방어 동작으로 넘어가서 캐릭터가 유리한 포지션을 유지할 수 있다.
3. 네트워크 및 통신
- 서버로 데이터를 전송하려고 할 때 일정 시간 동안 응답이 없으면 그 작업이 자동으로 취소되는 기능
- 네트워크 병목이나 서버 문제를 방지하기 위해 사용되며, 작업이 중복 실행되거나 쌓이지 않도록 한다.
4. 상거래
- 온라인 쇼핑몰이나 예약 시스템에서 오토 캔슬은 사용자가 결제나 예약을 확정하지 않은 상태에서 일정 시간이 지나면 자동으로 주문이 취소되는 기능
- 재고가 낭비되거나 다른 고객이 상품을 구매하지 못하는 상황을 방지할 수 있다.
5. API 및 비동기 처리
- API 호출 중 일정 시간 내에 응답이 없거나 작업이 중단되면 자동으로 요청을 취소하는 기능
- 불필요한 리소스 낭비를 방지하고 시스템 성능을 개선할 수 있다.
📝 회고
👍 칭찬
기획부터 개발까지
이전 클론코딩 프로젝트에서는 주어진 사이트를, 주어진 디자인에 맞춰서 만들다보니
내 생각이나 적극적인 의견 없이 그저 따라가는 마음이었다. (그래서 끝나고 현타가 심했을지도)
이번 자유 주제 프로젝트에서는 내가 흥미있는 주제로 기획부터 직접 시작하니 개발의 전체적인 과정이 이해가 잘 되었고,
처음 해보는 리액트로 개발하는 것이 어려우면서도 재밌는 마음이 컸다.
코드 리뷰
이전까지는 사실 PR이 올라오면 '잘 됐겠지~' 하며 바로 승인하고는 했는데
이번 프로젝트에서는 변경된 코드를 살펴보고 직접 애플리케이션을 실행해서 에러가 없는지 확인하는 습관이 생겼다.
이 PR 승인 과정이 생각보다 중요한 과정이라는 것을 깨닫게 되었다.
문서화
이번 프로젝트에서도 모든 회의와 피드백들을 모두 문서로 정리하고 위키에 올렸다.
정리하는 걸 좋아하긴 하지만 문서 양이 많아지면서 개발 일보다 많아지기도 해서 부담이 되긴 했다.
그러나 기억은 몇 주만 지나면 다 사라진다는 걸 잘 알고 있기 때문에
포트폴리오 사용할 때 생생하게 기억할 수 있도록 사소한 것까지 신경써서 기록했다.
🙏 반성
리액트 실력이 부족하다.
클론코딩 프로젝트 때와 비슷하지만...
리액트 문법의 개념들은 알고 있으나 어떤 상황에 사용해야 하는지 아직 감이 오지 않아서 어정쩡하게 구현한 것 같다.
멋사 수업 때 배운 개념들을 복습한 후 리팩토링이 필요하다.
웹 접근성을 (여전히) 놓친다.
애플리케이션을 탭으로 작동할 때도 유연하게 사용할 수 있도록 하고 싶었으나
프로젝트 기한이 넉넉치 않았을 뿐더러 하나를 고려하면 고려해야 할 것이 우루루 생겨나서ㅠㅠ
매번 이런저런 핑계를 대며 접근성을 고려하지 못하고 있어서 다시 접근성에 대해 확실히 복습해야겠다고 느꼈다.
✊ 노력
리액트 챌린지
노마드코더 리액트 챌린지를 시작하려고 한다.
이전에 CSS 지식이 전혀 없을 때 노마드코더의 CSS 챌린지가 CSS 개념을 익히는 것에 도움이 많이 되었다.
매일 과제를 받고, 머리 싸매며 해결하는 것이 재밌었던 기억이 있어 리액트 챌린지에 합류했다.
리액트 챌린지 이후 사이드 프로젝트에 참여하려고 한다.
자바스크립트 스터디
JS Deep Dive 책을 공부하며 맡은 파트를 정리하고, 발표하는 JS스터디를 시작했다.
발표가 부담이 되긴 하지만 확실히 남에게 설명하니 혼자 공부하는 것보다 개념 이해가 잘 되는 것을 느꼈고,
발표라는 부담이 있으니 미루지 않고 공부하게 되어 좋다.
타입스크립트 스터디도 시작할 계획이다.
💁♀️ 느낀 점
협업의 중요성
프로젝트 할 때마다 느낄 협업의 중요성...
나든 팀원이든 의견이 너무 강해도 힘들고 너무 약해도 힘들다.
그래도 팀원들이 적극적이고 현명하게 논의해서 원활하게 프로젝트를 끝낼 수 있었던 것 같다.
앞으로 프로젝트를 더 해보면 유연하고도 확신있게 의견을 제시할 능력이 생길지...
적극적인 참여
그저 코드를 짜는 것만이 아닌 기획부터 적극적으로 참여해야 프로젝트에 애정이 생겨서 더 신경쓰게 되는 것 같다.
그냥 하라는대로 하면 '구현'인 느낌이고 내가 직접 적극적으로 의견을 낸 것을 만드는 건 '개발'을 하는 느낌?
모름 걍 그냥 커피와 TOP의 차이인듯
애정이 생기니 더 정성스럽게 만들고 싶고 최적화도 신경 쓰고 리팩토링도 더 하게 된다.
프로젝트의 애정을 위해서라도 적극적으로 참여하는것이 좋은 것 같다.
컴포넌트 개발
이번 프로젝트에서 컴포넌트를 잔뜩 만들어서 사용하니
컴포넌트 구현을 이해함과 동시에 얼마나 어려운 것인지 다시 한번 느끼게 되었다.
한 페이지에서 사용하는 컴포넌트가 다른 페이지에서 사용될 땐 prop이 추가되고 조건부 UI도 필요하게 되어
처음 넣어놓은 코드의 2배 가량 늘어났다.
대체...알 것 같다가도 너무 어렵다.
이걸 자연스럽게 구현할 날이 오긴 할까
💾 결론
프로젝트의 전반적인 성과
기획 때 정했던 페이지의 85%정도 달성한 것 같아서 전반적으로 좋은 결과라고 생각한다.
사실 프로젝트 시작 전에 걱정을 많이 했어서 아직도 스타일 캐스트가 작동하는 것이 신기하고 대견하다ㅜ
이후 꾸준히 리팩토링 해야겠다.
향후 계획 및 방향
JS스터디를 진행하면서 자바스크립트는 기본적으로 항상 공부하고,
리액트는 노마드코더의 리액트 챌린지를 진행하면서 더 공부할 것이다.
알고리즘 공부를 더 이상 미룰 수 없어서 알고리즘 스터디에 참여했다.
혼자서는 알고리즘 문제 풀이가 작심이일이 되기 때문에 유료이긴 하지만 커리큘럼이 좋은 스터디에 참여했다.
타입스크립트 스터디를 위해 인원을 모집하고 있는데, 이 스터디도 타입스크립트 책을 공부하고 발표하는 식으로 공부하려고 한다.
노마드코더 강의를 듣고 있기는 한데 아직 이해가 잘 안돼서 2회차 복습 중이다.
멋사 프론트엔드 스쿨 11기는 강의 과정 중 타입스크립트도 있던데 부럽다.......
멋사 취업 지원에서 진행한 멘토링에서 강사님께서 부캠 수료 후 6개월 전까지 취업하는 것을 강조하셔서
다음 주부터는 이력서와 포트폴리오를 본격적으로 업데이트 & 정리할 계획이다.