✨ 1차 프로젝트 : 가구 전문 이커머스 플랫폼[이케아(IKEA)] 를 모티브로 한 팀 프로젝트
📦 프로젝트 팀 : WIKEA(위케아)
(1) 프로젝트 소개
이케아
는 인테리어 가구 및 소품을 판매하는 사이트로, 카테고리, 신제품, 가격, 색상 등에 따라 상품을 볼 수 있는필터
기능을 제공(2) 프로젝트 기간 : 2021.05.10. ~ 2021.05.21. (2주)
(3) 프로젝트 계획
- 1주차 Sprint : 전체 레이아웃 구현 및 컴포넌트화
- 2주차 Sprint : 컴포넌트 별 기능 구현, 프론트와 백엔드 간 API 통신, conflict 해결 등
(4) 프로젝트 팀원 (👩💻github)
(5) 적용기술
- Front-end :
React
,React Router
,Sass
,JavaScript
,CSS3
,HTML5
- Back-end : Python, Django web framework, Bcrypt, My SQL, pyjwt
- Common : Slack, Trello, GitHub, Git, RESTful API
(6) 필수 구현사항 💥
- 🎈 로그인/회원가입 페이지 : 안정현
- 로그인/회원가입 시, 입력 항목들에 대한 validation 로직(유효성 검증) 구현
- 사용자 인증(Authentication) 완료에 따른, Local Storage에서의 access token(JSON Web Tokens) 관리
- 🎈 메인 페이지 : 김예슬
- 객체 매핑을 활용한 네비게이션 탭 기능
- react-router를 사용한 동적 라우팅 (메인 -> 리스트 이동)
- 🎈 리스트 페이지 : 김수연
- List page layout
- Product card Component 구현
- 제품 평점 기준으로 별점을 보여주는 간단한 데이터 시각화 함수 구현
- 클릭 이벤트 발생 시 각 버튼에 해당하는 필터된 데이터의 API 주소를 변경해 리랜더링해주는 필터 구현
- 🎈 상세 페이지 : 노선경
- 상세 페이지의 반응형 레이아웃 및 제품 상세이미지 Carousel 구현
- path parameter를 이용한 메인 및 리스트 페이지와의 동적 라우팅
- 제품 상세 데이터 API를 활용한 상세 정보 모달 구현
- 반응형 및 스크롤 감지 공동 헤더(네브바) 구현
(7) 프로젝트 전체 시연 영상
주로 자기주도 학습에 초점이 맞추어진 처음 한 달 동안,
Pre-course 2주
(HTML, CSS, JavaScript 이론 + 실습) 및 Foundation 2주
(React 이론 + 실습) 과정을 거치면서
동기와 비교하지 않고 나만의 보폭으로 나아가는 것도 중요하지만,
전체적인 커리큘럼에 맞춰 (1) 제 시간에 결과물을 내고 (2) 피드백을 받아 진도에 지장없이 해나가는 것 또한 중요함을 깨달음
즉, 프로젝트는 팀원들과 같이하는 작업이므로, 내가 할 수 있는 부분과 막히는 부분에 대해 빠르게 판단하여
부족하고 모르는 부분에 대해서는 기한을 정해두고 구글 검색 등을 통해 1차적으로 해결하고, 그 외에는 동기나 멘토님들께 조언을 구하는 형태를 취함으로써,
프로젝트 일정에 차질이 없도록 진행하고자 함
- 로그인/회원가입 페이지 각각 3가지 기능 단위로 구분
1) 페이지 레이아웃
2) validation 로직 구현
* 로그인/회원가입 시 입력 항목들(이메일, 비밀번호, 이름, 휴대폰 번호 등)에 대한 중복 및 유효성 검증 조건 백엔드와 사전 협의
3) API 붙이기 (백엔드와 통신)
* fetch 함수 통해 백엔드에 요청할 key값 사전 협의
인증(Authentication)
되지 않은 사용자가 로그인을 시도할 경우, 아이디나 비밀번호를 확인해주세요.
라는 알림창이 뜸
사용자 인증을 위해 회원가입 버튼
을 클릭, 회원가입 페이지로 이동
휴대폰 번호 입력 부분에서는
onBlur 이벤트
를 통해, 맨 앞의 0과 하이픈(‘-’)을 자동 삭제하도록 함수를 적용함비밀번호 입력 후, 우측 자물쇠 버튼을 클릭시 비밀번호 숨김/표시 기능 추가
위의 조건이 모두 만족할 경우, 가입하기 버튼
활성화
좀전에 회원가입한 사용자의 아이디와 비밀번호를 입력
회원가입 페이지에서와 동일하게,
입력 조건이 만족할 경우, 로그인 버튼
활성화
로그인 버튼 클릭 시,
access token
을 받아 localStorage 에 저장하고메인페이지
로 이동하게 됨
- 멘토 리뷰 사항 반영
- fetch 함수에 들어가는 API 주소는 추후에 src/config.js 등에서 관리하면 좋음
- API 주소를 변수로 지정하고 파일을 따로 분리하면 IP 주소가 바뀔 때 관리가 용이
- 처음에 해당 로직 구현 방법을 찾아보다가 fetch 함수 내에서 split 메소드 등을 사용하는 방법을 생각했으나
- 타 팀 팀원의 도움으로
onBlur 이벤트
를 사용한 함수 호출 방법이 더 합리적이라 판단되어 해당 방법으로 적용-
을 포함하여 휴대폰 번호를 입력한 경우,onBlur 이벤트
를 사용하여 휴대폰 번호 형식 변경하는 함수 호출
한 달 동안 배운 이론과 실습 부분에 대해 어디서부터 다시 복습을 하고 임해야 하나 싶어 걱정도 되고 막막 했으나,
막상 프로젝트를 시작해 보니, 우선은 얕게 알고 넘어갔던 부분들에 대해 결국은 다시 되돌아가 공부하게 되고,
나의 Bloker에 대한 팀원들의 조언과 도움으로 처음 한 달 동안 배운 것보다 단기간에 더 많이 배울 수 있었음
모든 공부가 그렇듯 한 번에 100% 이해하고 넘어가는 것이 아니라, 처음엔 60~70% 수준에서 알고 넘어갔다가 실습해 나가면서 조금씩 부족한 부분을 채워나가는 것임을 깨달음
에자일(Agile) 하게 매일 아침 Standup Meeting, Trello 관리, 멘토의 피드백 반영 등을 통해 (1) 어제 작업한 내용 (2) 오늘 작업할 내용 (3) Blocker에 대해 팀원들과 이야기 하긴 했으나,
각자가 맡은 부분에 대해 얼마나 구현을 했는지 보여주기에 급급하지 않았나 생각됨
전체적인 큰 흐름을 가져가면서 무엇을 놓치고 있는지, 어떤 흐름으로 가져가야 하는지 등을 고려하면서 진행했으면 하는 아쉬움이 남음
프론트의 작업을 고려하는 백엔드
& 백엔드의 작업을 고려하는 프론트
라는 생각은 있으나, 서로간의 과한 배려(?)로 인해 첫 번째 sprint(1주)
를 마칠 때 까지는 효과적인 의사소통이 어려웠던 것 같음
소통을 한다는 것이 단순히 상대방의 말을 잘 들어주는 것이 아니라, 명확한 근거를 통한 적극적인 의견 전달/조율의 스킬이 필요함을 느낌
input 박스
나 버튼
부분에 대해 리팩토링을 적용해 볼 수 있을 듯 함
테스트 https://hubhopper.com/podcast/un-dia-mas-para-morir-pelicula-completa-en-espanol-latino-repelis/322583
https://hubhopper.com/podcast/el-conjuro-3-el-diablo-me-obligo-a-hacerlo-pelicula-completa-en-espanol-latino-repelis/322585
https://hubhopper.com/podcast/un-lugar-en-silencio-parte-ii-pelicula-completa-en-espanol-latino-repelis/322586
https://hubhopper.com/podcast/spirit-el-indomable-pelicula-completa-en-espanol-latino-repelis/322588
https://hubhopper.com/podcast/rapidos-y-furiosos-9-pelicula-completa-en-espanol-latino-repelis/322589
https://hubhopper.com/podcast/la-reina-del-flow-2-capitulo-20-en-espanol-completo-online-gratis-tokyvideo/322494
https://hubhopper.com/podcast/la-reina-del-flow-2-capitulo-18-en-espanol-completo-online-gratis-tokyvideo/322495
https://un-lugar-en-silencio.tumblr.com/
https://spirit-indomable.tumblr.com/
https://spiral-pelicula-ver.tumblr.com/
https://operacion-camaron.tumblr.com/
https://cosas-imposibles-ver.tumblr.com/
https://latestcovidnews.wordpress.com/
https://peirce.instructure.com/eportfolios/21149/Home/Anschauen_A_Quiet_Place_2_Ganzer_Film_2021_Stream_Deutsch_Online_Kostenlos
https://openlibrary.org/people/nisogaeh