⭐️ 프로젝트 소개
최고의 품질과 검증된 성분으로 만들어진 스킨, 헤어, 바디제품 브랜드 '이솝(Aesop)'을 클로닝 웹사이트로 선정하였다. 세계적으로 유명하기도 하고 실제로 클로닝 사이트를 선정하는 과정에서 여러 사이트를 살펴보던 중에 깔끔한 웹디자인과 정갈한 폰트, 정적인 색감이 마음에 들어서 개인적으로 후보에 올렸던 웹사이트였다.
- 기간 : 12일 (20.07.20 - 20.07.31)
- 참여인원 : Frond-end 3명 & Back-end 2명
- 사용한 라이브러리 : React, React-Router, Sass,React-Slick
- 사용한 툴 : Github(Front-end Repo), Trello, Slack
⭐️ 내가 맡은 기술적 부분
Main
Nav
- hover시 nav list에 border-bottom에 transform적용 (scaleX(0)-> scaleX(1))
- scroll-down의 경우에 nav가 사라지고 scroll-up의 경우 nav fixed
📝 기억하고 싶은 코드 : scrollY , componentDidMount, componentDidUpdate
Footer
Feeds
- scroll-down시에 천천히 각각의 feed component가 나타나는 기능
📝 기억하고 싶은 코드 : scrollY , componentDidMount, componentDidUpdate
( 이 기능을 먼저 구현하고 scrollY의 원리를 이해해서 nav-fixed에서도 응용할 수 있었다) - 라이브러리를 이용하지 않고 순수 React로만 slide 구현
📝 기억하고 싶은 코드
: slice를 이용해서 보여주고 한 화면에 보여주고 싶은 아이템의 수를 설정
: currentItemIndex를 설정해서 처음 페이지에선 prev Btn이 사라지고 마지막 페이지에선 next Btn이 사라지도록 구현
: slide안에 들어올때만 버튼이 보이고 나가면 사라지게 (onMouseEnter, onMouseLeave)
(slick 라이브러리가 ui가 매끄러워서 사용해볼까 생각했었지만 버튼이 보이고 사라지는 기능을 구현하기엔 커스터마이징할 요소가 많다고 생각해서 순수React로 시도해보았다. 그래서 슬라이드가 넘어가는 속도가 라이브러리를 사용한 것에 비해 매끄럽진 않았지만 나에겐 재밌었던 도전이었고 세세하게 조건을 걸어줘야해서 배우는게 많은 과정이었다.)
SideBar
이솝의 가장 아름답고도 임팩트가 있던 3단 sidebar 애니메이션!
프로젝트 첫날에 이 부분이 가장 어려울 수 있다는 경고를 들어서 무거운 마음을 안고 접근했는데 생각보다 할만해서 다행이었던 부분이었다.
📝 기억하고 싶은 코드 state 값으로 {style:width: 숫자;} 를 초기설정으로 하고 onClick 이벤트로 변동되게 하였다.
사실 방법은 여러가지가 있어서 처음 sidebar만 state값으로 조정하게 하고, 두세번째 sidebar은 scss에서 translate(-100%,0) & keyframes를 이용해서 속도와 나오는 시작점도 조절하였다.
Cart
sidebar에서 이용한 translate를 응용해서 이번엔 y축으로 적용하였다. cart message는 top:0;에서 내려왔다가 다시 올라가면서 사라지기 때문에 keyframes에서 0%/50%/100%마다 설정을 해주었다.
cart message
cart list
⭐️ 완성본 영상보기 (go watch it 👻)
⭐️ After Project
💓 프로젝트 하나를 마친 초보 개발자의 생각
협업으로 진행된 프로젝트였고 내가 제안한 웹사이트가 선정된 이유로 PM 역할을 담당하고 최종 발표자 역할을 맡았다.
'자리가 사람을 만든다'고 했던가 나는 그말을 너무도 공감하는게 어린 시절 소심했던 내 성격을 많이 바꿔준게 리더 역할을 맡고나서부터였기 때문이다. 공교롭게도 혹은 감사하게도 어딜가도 항상 그룹내에서 '리더'라는 역할을 많이 맡게됐는데, 이 경험들로 사람들과 쉽게 잘 어울리고 타인을 이해하려는 포용력을 키울수 있었다. 물론 이번 프로젝트는 리더 보다는 진도와 방향성을 잡아주는 PM으로서 성격이 달랐지만 적어도 그간의 경험들로 밝은 분위기를 주도해서 다같이 열심히 나아갈 수 있게 노력했다.
'목적'을 달성하기 위해선 달려가는 개개인의 능력도 중요하지만 어떤 '환경'에서 일하느냐가 지대한 영향을 미친다고 생각한다. 그래서 최대한 긍정적이고 서로 격려하고 스트레스 받지 않는 분위기를 만들려고 했던 것 같다.
다만 나도 사람인지라 시간이 촉박해짐에 따라, 그리고 나도 어떤 문제에서 헤매고 있을때 나에게 도움이나 질문을 하면 원래만큼 최대한 성심껏 응답을 하지 못했던 것 같다.
초반에는 내가 잘 해야한다 라는 책임감이 엄청 컸다. '내가 진도가 느린건 아닌지, 우리팀에 내가 누를 끼치면 안되는데..잘해야 하는데' 라는 생각이 나를 짓눌렀다. 하지만 긍정적으로 보자면 적당한 스트레스와 중압감은 나를 달려가게 하는 원동력이 되었다. (걱정한다고 걱정이 해결되는건 아니니까, 그리고 그럴 시간에 고민하면서 코딩을 하는게 도움이 되니까😂)
그래도 마지막에 각자가 한 코드를 합치고 유기적으로 이어지는 것을 보고 지난 2주간 우리의 노력들이 합쳐졌구나 생각이 들어서 굉장히 뿌듯했고 신기했다. 혼자였으면 편했을지 모르지만 절대 혼자서는 이렇게 훌륭한 결과물을 만들지 못했을 것이다. 협업을 통해서 프론트에서도 상대방의 코드를 보면서 내가 몰랐던 지식들을 배웠고, 백엔드와의 소통의 중요성 그리고 그들만의 고충을 조금이나마 이해하게 되었다.
한달전의 내가 지금의 '나'를 보면 얼마나 신기해할까. 나조차도 코딩을 전혀 모르던 내가 이렇게 성장하리라 생각하지 못했다. 아직도 가야할 길이 너무너무 멀고 산 넘어 산은 끊임없이 나오겠지만 그래도 이렇게 달려가다보면 실력은 조금씩 조금씩 쌓이겠지 ☺️
개인적으로는 '개발자'로 커리어전향을 한 게 굉장히 잘한 일 같다. 내 과거의 직업을 아는 이들은 하나도 빠짐없이 관둔것을 후회하지 않냐고 물어보았다. 하지만 인생에서 단조로운 걸 싫어하고 배움이 없는걸 싫어하는 내 성격상, 끊임없이 내 뇌와 생각을 자극하고 발전하게 도와주는 '개발자'로서의 삶은 꽤 기대가 된다.
❗️ 나를 끝까지 괴롭혔던 장바구니 기능 (추억으로 남겨두자)
(마지막 전날쯤이었던가. 집에 가는 막차 지하철을 타고가면서 지금 이 감정과 생각들을 얼른 적어두고 싶어서 급하게 써놓은 메모. 오타가 엄청나다. 나만 이해할 수 있는 생각의 플로우 (근데 지금보니 뭐라한거야 😳 손가락의 움직임이 생각의 흐름 속도를 따라가지 못했...)
