☕️소개
HIPCE 프론트엔드
구현한 웹사이트 동영상보기(아래클릭) :movie_camera:
https://www.youtube.com/watch?v=6vp3yAKCLMg
프로젝트 소개
메이크업 브랜드 hince 웹사이트를 clone한 프로젝트
프로젝트 참가자 (프론트 엔드)
프로젝트 기간
- 약 2주 (2020.08.17 ~ 2020.08.30)
적용기술
- HTML/CSS
- JavaScript
- Team Project Set-up with CRA
- React(Class)
- React(Router)
- Scss
구현기능
=> 🤟마크는 직접 구현한 기능입니다.
- main/nav에서의 스크롤 이벤트
- 이미지 캐러셀
- 메뉴 탭
- 🤟 map 함수를 이용한 컴포넌트 재사용
- 🤟 URL Parameters를 활용한 동적 라우팅
- 특정 조건에서 로그인 기능 활성화 및 Access token의 저장
- 댓글 생성/삭제 기능
- 🤟 Mock data 활용한 Component 생성 및 재활용
- 🤟 제품 list page에서 색깔별 카테고리별 분류
- 🤟 장바구니 페이지에서 수량에 따른 가격 증감 및 총액 변동, 배송비 변경... 5
- 🤟 Modal window를 component로 만들어 사용
과정
일단 적고보니 구현기능에서 정말 많은것을 한것처럼 생각이 듭니다.
하지만 기능을 일일히 보자면 아직도 부족한점이 많고(당연한것이겠죠 이제 6주배웠는데 ..) 더러운 코드들이 많이보이며 logical 에 초점을 둔것이 아닌 operational 한것만 노린 것 같이 그저 작동만 하면 마무리하고 다음 과정이나 기능들로 넘어간 부분이 많았던 것 같습니다.
그중 가장 기억에 남는것 두가지가 있다면 아무래도 동적라우팅과 장바구니를 직접 만들어보면서 많은 메서드들을 써본 기억입니다.
해당 이야기는 글이 너무 길어질 것 같아 다른 게시물에 따로 posting하였습니다.
다른 포스팅으로 담기에 애매한 몇가지 코드들은 해당 글에 적도록 하겠습니다 :)
중간과정에서 든 생각
일단 개인적으로 commercial 분야의 어떤사이트든 해보고 싶은 생각을 항상 가지고는 있었습니다. 그 중 어떤 분야를 꼭해보고 싶다는 줏대는 없었는데 하필 저랑은 상당히 거리감이 먼 화장품이라 조금 당황스러웠습니다.
몇몇 후기들을 읽어보면 자신이 관심없는 분야의 사이트를 만드는(cloning)과정은 재미가 없다는 글들을 많이 봤기 때문입니다.
그런데 정말 운이 좋은 것인지는 모르겠으나 개인적으로 화려한 색감과 동영상등을 보며 작업하는 것이 재미있었으며 정말 친절하고 상냥한 팀원들 덕분에 항상 힘을내고 같이 진행할 수 있었던 것 같습니다.
코드적인 부분을 빼놓을 수가 없는데 event구현에만 너무 집중하여 html과 css의 구현에 있어 semantic한 부분을 너무 놓친게 아닌가라는 생각이 다시끔 들게 되었습니다. 이런 생각이 들면서 다짐을 한 것이 하나가 있다면
매번 바쁘다는 핑계로 코드를 이런식으로 쳐버리면 버릇이 될 것 같으니까 구현에만 집중하지말고 버릇을 만들자였습니다.
물론 생각대로 이쁜코드를 작성하지는 못했으나 제가 지금하고 있는 과정은 모두 학습을 위한과정이지 일을하고 있는것이 아니니까 조금 더 여유를 가져야한다는 생각을 강제로 가지기 위해 노력했습니다.
그렇게 여유를 가지면서 몇몇 로직을 짜며 나름 만족스러운 몇가지들은 아래와 같습니다 :)
기억하고싶은 코드
1. Map돌이의 시작
맞습니다 대충 보기만 해도 map함수의 연속에 연속입니다 ..ㅋㅋㅋㅋ
해당 코드는 받은 데이터에 각자 불리안 값을 넣어 색깔별 화장품 분류를 위해 미리 각 색깔별로 Boolean값을 주고 버튼이 클릭되었을 때 버튼의 배경색 유지와 하단의 색깔이 선택되었다는 표시를 남겨주기 위한 코드입니다.
사실 만들때부터 개별 component화 시켜서 그 내부의 state로 관리했으면 될터인데 그것을 깨닫지 못한 상태였습니다.
어떻게든 만들고는 싶고 알고있는 메서드라고는 몇가지 존재하지 않았기 때문에 stackoverflow w3school 등을 전전하며 코드를 보고보고 또 보고 console.log()를 찍어보고 하여 완성되었던 코드입니다.
완성되는 과정까지를 통해 map, filter, forEach와 같은 iterator를 위한 메서드들이 얼마나 중요한지 또 얼마나 좋은지를 깨닫게 되었습니다.
하루하루 성장해 나가는 속도가 무섭다고 생각이 드는 코드이기도 합니다.
지금보면 더 잘 짤 수 있을 것 같기에 .. (아마?..)
2. SessionStorage활용한 장바구니
아마도 이건 삽질이지만.. sessionStorage를 이용해서 장바구니에 특정 제품을 옮기는 과정을 만들었습니다.
자세한 코드는 다른 포스팅에서 따로 다루고 있습니다 :)
또한 수량 조절에 따른 가격변동 및 그에 따른 배송비 변경 로직도 작성해보았습니다.
신나게 만들고 알게 된 것은 계산된 정보를 다시 백엔드에서 받아내는 것이지 프론트단은 렌더만 한다는 점입니다.
그래서 최 상단에 위치한 github에는 컨벤션에 따른 backend와의 소통을 통한 코드가 작성되어있습니다 :)
끝내고 난 후의 생각
아무래도 잘한점과 못한점을 구별해서 적는것이 가장 쉬운방법 같습니다.
그런데 잘한점과 못한점이 상당히 겹친부분이 많아보여 그냥 통째로 적는게 나을 것 같습니다.
잘한것 같지만 못한것 같은점은 크게 두가지 정도입니다.
1. 우선 팀원분들에게 너무 부담을 드린것이 아닌가하는 생각이 드는게 있습니다.
개인적으로는 페이지를 클로닝하면서 아주 짧은시간(2주)이지만 Nav바에 존재하는 모든페이지의 첫페이지 까지만이라도 레이아웃을 다 짜고 싶었던 마음에 조금 더 조금 더 재촉했던 것 같습니다 🌗 그런데 그런 과정을 통해서 팀원분들도 열심히하게 되었고(나만의 생각인가 ..) 저 또한 팀원분들에게 짐이 되지 않으려 열심히 많은 것을 해보려고 도전하고 많은 정보공유를 하는 과정을 거쳤던 것 같습니다!
아마 다시 돌아가도 똑같은 태도이기는 하겠지만.. 어떤것에 시간을 더 투자하고 덜 투자해야하는지 확실히 알게된 계기인 것 같습니다 :)
2. 두번째로는 방향성을 모르면서 만들려 했던 점입니다.
대표적인것이 장바구니인데 사실 모달창도 위와같은 시행착오를 거쳤습니다.
유명하디 유명한 velopert님의 모달창 만들기를 따라 만들어 해당 페이지의 검색창을 만들었습니다. 처음에는 그저 따라만들었기에 DOM을 이용하였고 .. 그에 따른 리뷰는 Component로 만들라는 멘토님의 조언이 있었습니다 :)
위와 같이 여러개라면 관리가 어려워진다는 점을 간과하고 그저 따라만들며 해당 이벤트가 보통의 방식으로 만들어지는 방향자체를 몰랐던 것입니다
아마도 제가 앞으로 만들 모든 것은 미리 만들어져있던 것이고 그에 따른 미리 정해진 일관성있는 방향들이 존재할텐데 그것을 까먹고 그저 작동시키는것에 치중하다보니 이런 일이 벌어졌던것 같습니다 :).. 앞으로는 좀 더 기존의 방식이라는 것들을 찾아보고 작성해야할 것같다는 깨달음을 얻었습니다.
하지만 이 과정에서 본인나름대로 어떻게든 만들어보겠다고 많은 메서드들과 사이트들을 찾아보며 얻은지식은 정말 값진 것 같습니다
3. 수료 후 무조건 리팩토링을 통해 좋은 코드로 만들어 놓자는 것
끝맺음
생전 처음으로 해본 웹프로그래밍 협업을 통해 위에 적은 것에 더하여 많은 것들을 느꼇습니다.
백엔드와의 사전 데이터협의를 통해 키값을 미리맞춰둬야 추후가 편하다는것, 백엔드와 맞춰보는 것은 빠르면 빠를수록 좋다는점, 무리한 욕심을 부리면 안된다는 점 어느 분야든 소통이 매우 중요하다는 점 등.. 굉장히 많습니다.
또 한번 느끼게 된 것은 앞으로도 무던한 개발자가 되어야 겠다는 점입니다.
공부를 아무리해도 keep studying을 해야하니 무던하게 짜증내지 말고 새로운 지식을 덤덤하게 습득하려는 자세를 가져야겠다는 태도를 계속 가져가야겠습니다.
그럼
뿅!
PS
