제로베이스
DREAM 프로젝트 회고 본문
프로젝트 시작 전 Mid Term
1차 프로젝트를 마무리하고 Midterm 기간에는 Amazon S3를 활용하여 1차 프로젝트의 React 앱을 배포하는 경험을 하였고 간단하게 1차 이력서를 작성하면서 내 자신의 역량과 경험을 돌아보는 시간을 가졌습니다. 그리고 1차 프로젝트에 몰두하며 힘들었기 때문에 몸과 마음을 풀어 쉴 수 있는 조금의 휴식을 취했습니다. 너무 쉬면 풀어지게 될까봐 휴식을 취하는 동안, 1차 프로젝트에는 적용하지 못한 기술들을 2차 프로젝트에는 적용하여 더 나은 결과물을 만들기 위해 새롭게 적용할 기술과 도구들에 대한 공부를 시작하며 마음을 다질 수 있었습니다.
프로젝트 소개
서비스 형태 : 레고 리셀 거래 중개 플랫폼
프로젝트 기간 : 2023.04.24 ~ 2023.05.04 (약 11일)
팀 구성
팀명 : DREAM TEAM
인원 : 프론트엔드 3명 / 백엔드 4명
적용 기술
• React
• styled component
• Git / Git Hub (rebase)
프로젝트 진행 방식
• 매일 아침마다 15분 내외로 데일리 스탠딩 미팅 진행
• 트렐로를 사용하여 팀원들과 업무 티켓 현황 공유
• 노션을 이용하여 미팅 내용이나 코드 공유
Product+ing 분석 | KREAM
크림은 "거래 중개 플랫폼" 입니다.
판매자와 구매자의 거래를 중개해주고, 그 대가로 수수료로 수익을 얻는 구조입니다.
핵심 프로덕트
첫 번째
개인 정보 공유 이제 그만! 익명으로 안전 거래
- 거래를 위해 서로의 개인 정보를 공유할 필요가 없고 메시지를 보내 가격을 흥정할 필요도 없습니다.
두번째
주식처럼 시세에 맞춰 똑똑하게 거래
- 모든 거래 체력 내역과 입찰가를 공개하여 주식처럼 시세를 예측할 수 있어 똑똑한 구매와 판매가 가능합니다.
세번째
철저한 검수로 가품 걱정없이 편안한 거래
- 거래가 체결된 모든 상품은 검수센터에서 전문 검수팀이 다양한 방법으로 철저한 검수를 진행합니다. 검수한 합격한 상품만 구매자에게 배송합니다.
핵심 고객
누구든, 언제든 리셀러가 될 수도 구매자가 될 수도 있습니다.
리셀 시장은 누구에게나 열려있습니다.
리셀 테크는 적은 노력과 적은 투자금으로 투자할 수 있어 진입 장볍이 낮고,
고소득까지 이어질 수 있는, 정보는 많지만 자원은 한정적인 MZ세대들에게 아주 매력적이고, 인기 있는 투자 방법입니다.
당장 내일의 이 매력적인 리셀 시장에서 판매자와, 구매자를 꿈꾸는 잠재적 고객들과 이미 리셀 문화를 잘 향휴 하고 있는 리셀 시장 고객들이 핵심고객입니다.
시장 분석
꾸준한 리셀 시장 성장의 근간, 리셀 테크 붐
사람들의 투자 방식은 더 똑똑해지고 다양해졌습니다 그 중 가장 독특하고 편리한 방법 중 하나가 "리셀 테크" 입니다.
주로 거래되는 상품은 의류, 운동화, 전자제품, 아이돌 굿즈 등을 비롯해 팬사인회 대기 순서 등 무형의 서비스에 이르기까지 다양합니다.
저희 팀은 그 중에서도 키덜트 분야 중 하나인 "레고"라는 아이템을 선정하여 서비스를 개발하였습니다.
내가 맡은 페이지 레이아웃 및 기능 구현 사항
• 레이아웃
- 제품 상세 페이지
- 관심 상품 페이지
- 이벤트 페이지
- 구매 / 판매 동의 페이지
- 구매 / 판매 입찰 페이지
- Footer 영역
• 기능 구현 사항
제품 상세 페이지
- 스크롤 이벤트를 활용한 레이아웃 구성
- 스크롤 모달창
- 시세 그래프
- 거래 / 입찰 내역 모달창
- 거래 / 입찰 내역 가격 맟 날짜 순 정렬
- 포토 리뷰 포스팅 / 좋아요 토글 기능
- 관심 상품 토글 기능
- 구매 / 판매 버튼 클릭시 컴포넌트 재사용을 통해 각각 다른 UI 구성
관심 상품 페이지
- 관심 상품 담기 / 삭제
이벤트 페이지
- 다양한 애니메이션 효과
- 정답 입력시 응모 완료 창 띄움
구매/ 판매 동의 페이지
- 체크박스 클릭시 안내 사항 모달창
- 체크박스 전부 체크시 버튼 활성화
구매 / 판매 입찰 페이지
- 즉시 구매, 판매 / 구매 입찰, 판매 입찰 UI 변경
- 판매 입찰가 입력 시 수수료 계산
- 입찰 기한 설정 기능
제품 상세 페이지
제품 상세페이지에서 UI를 구성하는 과정이 조금 어려웠습니다. 단순한 레이아웃처럼 보였으나 스크롤에 따라 UI를 다르게 보여줘야 했기 때문에 처음에는 어떻게 구성해야 할지 고민을 하게 되었습니다. 먼저 제품 이미지 영역과 제품 정보 영역을 각각 컴포넌트로 분리하여 작업을 진행했습니다.
제품 이미지 영역
- 아래 코드와 같이 window 객체에 스크롤 이벤트를 추가하고, 스크롤 시 handleFixed 함수가 실행되도록 하였습니다. handleFixed 함수는 스크롤 위치를 가져와서 이미지 영역의 위치를 조정하는 역할을 합니다. 스크롤이 1540보다 크면 이미지 영역의 위치를 position: absolute;로 설정하고, top 속성을 1555px로 지정하여 고정을 해제하고 함께 내려가도록 구현했습니다. 반대로 스크롤이 1540보다 작을 때는 이미지 영역을 position: fixed;로 설정하여 고정합니다.
useEffect(() => {
window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
}, []);
const handleScroll = () => {
handleFixed();
};
function handleFixed() {
const scrollTop = document.documentElement.scrollTop;
if (scrollTop > 1540) {
fixed.current.style.position = 'absolute';
fixed.current.style.top = '1555px';
} else if (scrollTop < 1540) {
fixed.current.style.top = '';
fixed.current.style.position = 'fixed';
}
}
스크롤 모달창
- 사용자가 버튼을 누르기 위해 화면 위로 올라가야하는 수고를 덜어 줄 수 있도록 스크롤 이벤트를 활용하여 구매 / 판매 버튼이 항상 화면에 보이도록 하는 기능을 구현했습니다. 스크롤이 내려가더라도 해당 버튼이 보일 수 있도록, 버튼이 화면에 보이지 않는 스크롤 위치에서 모달 창을 상단에 뛰워 스크롤을 계속 내려도 모달 창이 상단에 고정 되도록 구현했습니다. 먼저 스크롤이 내려가 구매 / 판매 버튼이 보이지 않을 때, 모달 창을 상단에 띄우기 위해 useState를 활용했습니다. 스크롤 위치가 일정 값을 넘으면 scrollModal 상태를 true로 설정하여 모달창을 표시하고, 그렇지 않을 경우 false로 설정하여 모달창을 숨기는 방식으로 구현했습니다.
const [scrollModal, setScrollModal] = useState(false);
useEffect(() => {
window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
}, []);
const handleScroll = () => {
handleScrollModal();
};
function handleScrollModal() {
const scrollTop = document.documentElement.scrollTop;
if (scrollTop > 360) {
setScrollModal(true);
} else if (scrollTop < 360) {
setScrollModal(false);
}
}
제품 상세페이지 UI를 구성하면서 스크롤 이벤트를 다루고, 모달 창을 활용하여 화면 요소를 조작하는 방법을 익힐 수 있었습니다. 또한 실제로 구현해보니 사용자 편의성을 고려한 레이아웃이라는 것을 알 수 있었고 사용자 경험을 고려한 UI 구성에 대한 중요성을 깨닫게 되었습니다. 앞으로의 프로젝트에서도 사용자의 편의를 고려한 기자인 기능을 구현하는데 더욱 신경쓰도록 노력해야할 것 같습니다.
시세 그래프 / 거래 체결, 입찰 내역
시세그래프
Chart.js 라이브러리를 사용하여 날짜 데이터와 해당 날짜에 체결된 가격 데이터를 이용하여 동적 시세 그래프를 구현했습니다. 사용자가 원하는 기간을 선택할 수 있으며, 그에 따라 그래프가 실시간으로 업데이트됩니다. 이 기능을 통해 사용자들은 선택한 기간 동안의 시세 추이를 쉽게 파악할 수 있습니다.
구체적인 구현 절차
1. 먼저 서버에서 받아온 데이터를 Chart.js에서 사용할 수 있는 형식으로 전처리합니다. 날짜와 가격 데이터를 각각 X축과 Y축에 맞게 구성합니다.
2. Chart.js 그래프 컴포넌트 : React 컴포넌트를 생성하여 Chart.js그래프를 렌더링합니다. 레고 거래 시세를 표현하기 위해 시간에 따른 가격 변동을 시각적으로 보여주기 적합한 라인 그래프로 표현했습니다.
3. 사용자가 기간을 선택할 수 있는 인터페이스를 구성합니다.
4. React의 상태 관리 훅인 useState를 활용하여 데이터의 변화에 따라 그래프를 동적으로 업데이트합니다. 선택한 기간에 따라 그래프를 업데이트하는 함수를 호출하고 이에 따라 React 컴포넌트가 리렌더링되고, 변경된 데이터로 그래프가 업데이트됩니다.
거래 체결 / 입찰 내역
전체 거래 체결 / 입찰 내역을 상세페이지에 모두 표시하기에는 가독성과 사용자 경험이 떨어질 수 있으므로 내역 더보기 버튼을 제공하여 사용자가 필요할 때에만 전체 체결 내역을 확인할 수 있도록 하였습니다. 내역 더보기 버튼을 클릭하면 모달창이 뜨며, 그 안에서 전체 체결 내역을 필터 기능과 함께 제공하여 사용자는 편리하게 대략적인 추세를 파악하면서, 필요한 경우에만 상세한 체결 내역을 확인할 수 있습니다.
사진 후기 업로드
상세페이지에서의 상품 정보 부족함을 보완하기 위해 해당 제품의 상세페이지에 사진 후기 업로드 기능을 구현했습니다. 이를 통해 사용자들은 해당 상품에 대한 다양한 시각적인 정보를 얻을 수 있으며, 상품에 대한 이해도를 높일 수 있습니다. 사용자는 상품의 사진을 업로드 할 수 있으며, 해당 사진 후기에 대한 텍스트 내용도 작성할 수 있는 폼도 제공합니다. 게시된 포토 리뷰는 해당 상품의 포토 리뷰 리스트에 추가되어 다른 사용자들이 확인할 수 있도록 구현했습니다.
사용자들은 상품의 세부 정보를 사진을통해 확인할 수 있으며, 포토 리뷰에 작성된 텍스트 리뷰는 상품의 특징이나 사용 경험에 대한 추가적인 정보를 제공합니다. 이를 통해 다른 사용자들은 상품에 대한 실제적인 이미지와 리뷰를 통해 더욱 정확한 정보를 얻을 수 있고, 구매 결정을 내리는 데 도움을 받을 수 있습니다.
그리고 이미지 업로드 부분은 input 태그를 사용하지 않고 리액트 드랍존 라이브러리를 사용하여 이미지를 업로드하고 미리보기 기능을 구현했습니다. 사용자는 직접 이미지를 찾아서 업로드할 수도 있고 드래그 앤 드랍으로 이미지를 업로드할 수 있습니다. 또한 사용자가 포스팅된 이미지가 예상치 못한 모습이 나오지 않도록 업로드한 이미지의 모습을 실시간으로 확인할 수 있도록 미리보기 기능을 추가했습니다.
관심 상품
관심 상품 기능을 추가하여 사용자가 상품을 저장하고 나중에 구매 결정을 내릴 수 있는 기회를 제공했습니다. 이를 통해 사용자는 원하는 상품을 관심 상품으로 추가할 수 있습니다. 관심 상품은 사용자가 별도의 페이지에서 확인할 수 있게 페이지를 따로 만들었습니다.
사용자가 관심 있는 상품을 발견하면 해당 상품의 상세페이지에 관심 상품으로 추가할 수 있는 버튼을 제공하는데 해당 버튼에는 관심을 표시한 횟수를 추적하여 해당 상품이 몇명이나 관심을 가지고 있는지 확인할 수 있는 기능을 구현했습니다. 이를 통해 사용자는 다른 사용자들이 얼마나 많이 해당 상품에 관심을 가지고 있는지 알 수 있습니다. 사용자들이 관심 상품으로 추가할 때마다 해당 상품의 관심 표시 횟수가 증가하고 사용자가 관심 상품을 삭제할 경우 횟수가 감소합니다. 이렇게 관심 표시 횟수를 추적하여 상품의 인기도를 나타낼 수 있도록 구현했습니다.
거래 플로우
• 구매
• 판매
구매 :
회원가입 > 로그인 > 제품 > 구매(즉시구매) > 결제
회원가입 > 로그인 > 제품 > 구매입찰 완료 > 낙찰 대기
판매:
회원가입 > 로그인 > 제품 > 판매(즉시판매) > 정산
회원가입 > 로그인 > 제품 > 판매입찰 완료 > 낙찰 대기
위와 같은 플로우로 구매와 판매로 거래가 나뉘어지는데 구매 플로우와 판매 플로우가 비슷한 형태의 UI를 가지고 있어 하나의 컴포넌트를 재사용하고, useState를 활용하여 상태값이 구매와 판매 모드에 따라 다른 UI가 그려지도록 구현했습니다.
구매 / 판매 동의페이지에서는 구매자나 판매자가 거래를 신중하게 결정할 수 있도록 첫번째 동의에 체크를 하면 모달창이 나타나며, 사용자에게 주의 메시지를 한 번 더 알려줍니다. 또한 모든 내용에 동의해야만 다음 페이지로 넘어갈 수 있는 버튼을 활성화 시켜 사용자가 확실한 동의를 표시하도록 구현했습니다.
즉시 구매 / 판매 및 입찰이 이루어지는 페이지에서도 즉시거래인지 입찰인지에 따라 UI가 다르게 보이도록 구현하였고, 입찰모드에서는 입찰가를 입력할 수 있으며, 입찰 기한도 설정할 수 있습니다.
위와 같은 기능을 구현하면서 유사한 UI를 가진 컴포넌트를 재사용함으로써 중복된 코드를 피하고 유지보수성을 높이는데 도움이 되었습니다. 비슷한 형태의 UI를 가진 여러 페이지나 기능이 있을 때 매번 새로운 컴포넌트를 작성하는 것보다 기존의 컴포넌트를 재사용함으로써 개발 시간과 노력을 절약할 수 있었습니다.
이벤트 페이지
해당 이벤트 페이지는 레고 중개 플랫폼으로서 5월 4일에 프로젝트 발표를 하는데 프로젝트 발표에서 더욱 흥미로운 경험을 제공할 수 있을 것 같아서 5월 5일 어린이날을 기념하여 만든 페이지입니다. 크림 사이트를 벤치마킹하였지만, 이벤트 페이지는 기존 크림 사이트에는 없는 페이지로 창의적인 아이디어와 기능을 구현해보았습니다.
이벤트 페이지를 제작함으로써 사용자들에게 즐거운 경험을 선사하고, 특별한 날인 어린이날을 기념할 수 있는 기회를 제공하였습니다. 이 페이지를 통해 레고 중개 플랫폼의 독특한 컨텐츠와 이벤트를 소개함으로써 사용자들의 관심과 참여를 유도하고자 하였습니다.
주요 목표는 페이지에 들어온 사용자들의 시선을최대한 끌어들이고 페이지를 스크롤하여 내려갈 때에도 사용자들이 집중을 놓지 않도록 만드는 것이었습니다. 이를 위해 react-spring과 같은 라이브러리를 활용하여 다양한 애니메이션 효과를 구현하였고 특히 자동차 레고를 멋있게 보이도록 애니메이션 효과를 주었습니다. 또한 페이지 하단에 위치한 퀴즈 이벤트까지 사용자들이 페이지를 이탈하지 않고 내려갈 수 있도록 페이지를 스크롤 할 때에도 흥미를 유발할 수 있는 애니메이션 효과를 적용함으로서 사용자 경험을 향상시키고자 하였습니다.
이 페이지를 제작하면서 다양한 애니메이션을 경험하고 구현해볼 수 있어서 좋은 경험이었습니다. 애니메이션은 사용자들에게 시각적인 매력을 제공하고 웹 페이지를 더욱 생동감 있게 만들어줄 수 있는 중요한 요소이기 때문에 애니메이션을 통해 사용자들의 관심을 끌고 페이지의 전체적인 흐름을 개선하는것은 매우 가치있는 일인 것 같습니다. 이러한 경험을 바탕으로 앞으로의 프로젝트에서도 다양한 애니메이션 효과를 활용하여 사용자들에게 더욱 흥미로운 경험을 제공하고자 할 것입니다.
코드 리팩토링
• Prop Drilling
전역 상태관리 도구를 사용하지 않아 여러 페이지에서 필요한 상태 값을 props로 전달하는 방식은 비효율적으로 렌더링되는 문제가 발생했습니다. 이 문제를 해결하기 위해 코드 리팩토링을 진행하여 데이터 전달 방식을 변경했습니다. 제품 디테일 페이지에서 필요한 데이터를 동의 페이지나 결제 페이지에서도 필요한 경우, useNavigate 훅을 사용하여 제품 디테일 아이디값을 이용해 다음 페이지로 이동할 때 패스 파라미터로 전달했습니다. 그리고 해당 페이지에서는 usePrams를 이용해 아이디 값을 받아왔으며, 페이지 렌더링 시 서버로부터 아이디 값에 따른 데이터를 받아와 사용했습니다. 이렇게 함으로써 최상위 컴포넌트인 라우터 컴포넌트에서 상태 값을 내려줄 필요가 없어졌습니다. 이러한 방식으로 데이터를 관리하면서 문제를 해결할 수 있었지만, 전역 상태 관리 도구인 리덕스나 리코일 등을 사용하여 상태 관리를 하는 것이 상태 변화가 발생할 때 변경된 부분만 업데이트하므로 불필요한 렌더링을 방지하고 성능을 최적화 할 수 있기 때문에 나중에 애플리케이션 규모가 커지게 되면 Props로 상태 값을 전달하는 방식은 굉장히 비효율적이기에 필수로 학습해야할 것 같습니다.
• 클릭에 따른 UI 변경
아래 코드를 보면 tradeButton과 dateButton 상태를 배열의 요소가 불리언 타입으로 이루어진 복잡한 배열로 관리하는 대신 각각 currentTradeId와 currentTradeId라는 단일 상태 값을 사용하여 관리하도록 수정했습니다. currentTradeId와 currentTradeId는 현재 선택된 요소의 ID를 저장하고, 저장된 ID와 요소의 ID를 비교하여 CSS 스타일을 변경하도록 했습니다. 클릭 이벤트가 발생할 때 handleDateButton 또는 handleTradeButton 함수를 호출하여 선택된 요소의 ID값으로 업데이트 하고 이를 통해 해당 요소에 대한 스타일을 조정했습니다. 이렇게 단일 상태 값을 사용하면 코드가 간결해지고 관리하기 쉬워졌으며 상태 값 업데이트를 위해 복잡한 조건문을 사용하는 대신, 간단한 값 할당을 통해 선택된 요소를 변경할 수 있었습니다. 이러한 방식으로 클릭한 요소의 ID값을 활용하여 특정 요소에 대한 스타일을 쉽게 조작할 수 있었습니다.
// const [tradeButton, setTradeButton] = useState([true, false, false]);
// const [dateButton, setDateButton] = useState([
// true,
// false,
// false,
// false,
// false,
// ]);
// function handleTradeButton(targetId) {
// if (targetId === 1) {
// setTradeButton([true, false, false]);
// } else if (targetId === 2) {
// setTradeButton([false, true, false]);
// } else {
// setTradeButton([false, false, true]);
// }
// }
// function handleDateButton(targetId) {
// if (targetId === 1) {
// setDateButton([true, false, false, false, false]);
// } else if (targetId === 2) {
// setDateButton([false, true, false, false, false]);
// } else if (targetId === 3) {
// setDateButton([false, false, true, false, false]);
// } else if (targetId === 4) {
// setDateButton([false, false, false, true, false]);
// } else {
// setDateButton([false, false, false, false, true]);
// }
// } const [currentDateId, setCurrentDateId] = useState(1);
const [currentTradeId, setCurrentTradeId] = useState(1);
function handleDateButton(targetId) {
setCurrentDateId(targetId);
}
function handleTradeButton(targetId) {
setCurrentTradeId(targetId);
}프로젝트를 진행하면서 느낀점
• 좋았던 점
[2차 프로젝트 Trello 티켓]
1차 프로젝트를 통한 팀의 경험을 바탕으로 Trello를 효율적으로 활용하여 작업을 분배하였고, 그 결과로 더욱 깔끔하고 목표적인 작업을 진행할 수 있었습니다. Sprint기간 동안 주요 페이지 기준으로 티켓을 생성하고, 해당 Sprint에서 완료하고자 하는 티켓을 'This Sprint'로 이동하는 방식을 사용하였습니다. 이전 프로젝트에서는 목표를 과소평가하여 Sprint 중반에 이미 모두 완료해버린 경험이 있었는데, 이번에는 목표를 높게 설정하여 그러한 상황을 방지하였습니다. 목표를 더 높게 설정하면 팀원들이 더욱 열심히 작업하게 되고, 그 결과로 예상치 못한 성과를 얻을 수 있었습니다. 작업이 효율적으로 분배되어 모든 기능을 구현할 수 있었다는 점에서 만족스러웠습니다. 이러한 경험을 통해 Trello를 활용하여 프로젝트를 관리하고 작업을 효율적으로 분배하는 방법을 익혔으며, 목표를 높게 설정하여 더욱 높은 수준의 성과를 이뤄낼 수 있다는 것을 깨달았습니다.
[Postman Documentation으로 소통]
프로젝트를 진행하면서 API 통신을 위해 정보를 공유하려고 Postman의 API Documentation 기능을 활용했습니다. 백엔드에서 작성한 Documentation을 공유 받았고, 이를 통해 나를 포함 프론트엔드 팀원들이 작업을 편리하게 진행할 수 있었습니다. 이를 통해 전체 서비스의 API를 한눈에 볼 수 있었고 팀원 간의 원활한 소통과 협업이 이루어졌습니다. 이러한 경험은 앞으로의 프로젝트에서도 유용하게 활용할 수 있을 것 같습니다. 프로젝트의 성공적인 완료와 함께, 팀원들과의 협업을 향상시키고 서비스 개발에 큰 도움이 된 경험이었습니다.
• 아쉬웠던 점
[런타임 에러 처리]
프로젝트 진행 중 UI 렌더링 과정에서 서버 응답을 받기 전에 발생하는 런타임 에러에 대해 어려움을 겪었습니다. 이러한 문제를 해결하기 위해 조건부 렌더링을 사용하여 처리할 수도 있었지만, 다음 프로젝트에서는 타입 스크립트를 학습하여 변수와 함수의 타입을 명시적으로 지정하고, 컴파일 단계에서 타입 체크를 수행하여 런타임 에러를 사전에 방지하고자 합니다.
[전역 상태 관리 ]
프로젝트를 진행하면서 전역 상태 관리 도구를 사용하지 않고 모든 상태값을 Props로 전달하는 방식을 선택했습니다. 하지만 이 방식은 부모에서 자식으로만 데이터를 전달할 수 있기 때문에 컴포넌트 계층이 깊어질수록 Props 전달이 번거로워지고, 최상위 컴포넌트에서 모든 상태값을 관리해야 했습니다. 이로 인해 불필요한 렌더링이 많이 발생하고 성능에도 영향을 줄 수 있었습니다. 상태값을 최상위 컴포넌트에서 뿌려주다 보니 중간에 필요 없는 데이터도 함께 전달되어 컴포넌트들이 불필요하게 리렌더링되는 상황이 발생했습니다.
프로젝트 초반에는 팀원이 많아 시간적인 여유가 있어 추가적인 기능도 구현하고 있었는데, 이런 상황이 발생하여 코드를 전부 갈아 엎어야 할지 많은 고민이 필요했습니다. 전역 상태 관리 도구를 학습해 코드를 갈아 엎기에는 시간이 부족해서 데이터만 다른 방법으로 전달하는 방식으로 코드를 전부 수정하기로 했습니다. 그러다 보니 시간이 촉박해져서 프로젝트를 마무리하는 데에도 어려움을 겪었습니다.
이 경험으로부터 전역 상태 관리 도구의 필요성을 느끼게 되었습니다. 상태 관리 도구를 사용하면 컴포넌트 간에 효율적으로 상태를 공유하고 업데이트할 수 있으며, 불필요한 렌더링도 최소화할 수 있습니다. 앞으로는 이러한 도구를 학습하고 적용하여 프로젝트 진행에 차질이 생기지 않도록 하고자 합니다.
• 프로젝트를 마무리하며
두 번째 프로젝트를 마무리하며 많은 어려움을 겪었지만, 이를 통해 개발자로서 한 발 더 나아갈 수 있었다는 느낌이 들었습니다. 고난과 어려움을 두려워하지 않고 즐기며 나아가는 개발자로서의 마음가짐이 중요하다는 것을 깨달았습니다. 또한 어려움이 있을수록 성장할 수 있다는 것을 알게 되었습니다.
프로젝트에서 인원이 늘어남에 따라 업무의 난이도가 더욱 높아졌지만, 그만큼 다양한 기능을 갖춘 서비스를 구현할 수 있어서 좋았습니다. 많은 팀원들과 함께 논의하고 아이디어를 공유함으로써 더욱 풍부한 결과물을 만들었으며, 서로의 단점을 보완하고 완성도 있는 코드를 작성할 수 있었습니다. 협업 능력은 개발자에게 매우 중요한 요소라고 생각하는데, 이번 프로젝트를 통해 팀원들과의 소통 방법을 개선하고 적용하는 계기가 되었으며, 처음에는 걱정이 많았지만, 계획한 것 이상으로 기능을 완성하고 갈등 없이 프로젝트를 마무리할 수 있었습니다. 어려움이 있었지만 그만큼 보람찬 프로젝트였습니다. 이 경험을 바탕으로 앞으로도 새로운 도전을 두려워하지 않고 즐기며 성장해 나가고자 합니다.
'프로젝트 회고' 카테고리의 다른 글
| WECAR 프로젝트 회고 (1) | 2023.06.20 |
|---|---|
| 4bsop 프로젝트 회고 (1) | 2023.04.23 |
