패스트캠퍼스X야놀자 프론트엔드 개발 부트캠프_HTML/CSS 과제 리팩토링_라인클론코딩

과제 목표:

HTML/CSS를 사용하여 원하는 페이지를 구현하기(JS는 꼭 필요한 부분에만 사용하고 그 이유를 명시하기)

 

 

결과물:

원본 사이트:

https://line.me/ko/

LINE｜라인은 언제나 사용자와 함께 합니다.

 

클론 코딩 결과물:

https://playful-eclair-e2793a.netlify.app/

LINE｜라인은 언제나 사용자와 함께 합니다.

 

 

 

과제에서 배운 부분:

지금껏 html/css/바닐라 자바스크립트를 활용하여 만들어본 웹페이지 중에 가장 인터랙션이 많았다.

 

1. 이걸 css만으로 구현할 수 있는지, 자바스크립트를 꼭 써야하는지 고민하며 판단력이 늘었다.

2. 외부 라이브러리로 복잡한 애니메이션을 처음 구현해보았다. (배너 애니메이션, 스크롤에 따른 요소 크기 변화 ・ 상태 변화 등..)

3. 카테고리를 선택했을 때, 이에 해당하는 카드만 소팅되게 하는 기능을 구현해보았다. (서비스 부분)

4. 깃허브에서 코드리뷰 시간을 처음 진행해보았다. 팀원들과 코치님의 조언을 듣고 리팩토링할 방향성을 잡았다.

 

 

---

 

리팩토링한 부분:

코치님께서 코드 리뷰 때 고치거나 추가해야될 기능들을 몇 개 알려주셔서 고치기로 하였다.

 

1. 다른 코드와 잘못 머지된거 덜어내기

과제 제출날 8시 쯤에 메인 브랜치에 다른 브랜치 코드가 머지되는 문제가 생겨서 고생을 좀 했는데, 결국 해결책은 메인 브랜치를 다시 pull해와서 병합하는 것이었다. 그런데 이때 다른 사람 코드가 섞여서 내가 쓰지 않는 소스들이 많이 추가 되었었다. 그러나 마감 시간이 너무 촉박했던터라 'PR할 수 있을 때 얼른 PR해야지 또 뭔 에러가 날지 모른다'라고 생각하여 즉각 PR을 해버렸다ㅋㅋㅠㅠ 그래서 지금 내 PR은 다른 사람 커밋기록과 여러 소스들이 뒤섞인 상태였다. 이번 리팩토링 미션 동안 잘못 섞인 소스들을 일단 덜어내기로 했다.

 

 

 

 

2. 헤더 네비게이터로 해당 위치 이동

원본 사이트 / 클론 코딩

원본에서는 배너의 위치를 누르면 해당 파트로 스크롤이 내려간지만 클론 코딩에서는 그렇지 않았다. 이를 구현하는건 어렵진 않지만 다른 기능들을 구현하다가 우선순위에 밀렸는데, 이번에 구현해보기로 했다.

 

이를 구현하기 위해

headerTab1.addEventListener("click", () => {
  gsap.to(window, 0.6, { scrollTo: 0 });
});
headerTab2.addEventListener("click", () => {
  gsap.to(window, 0.6, { scrollTo: 4073 });
});
headerTab3.addEventListener("click", () => {
  gsap.to(window, 0.6, { scrollTo: 5780 });
});

위에서 계속 gsap라이브러리를 활용한 김에 스크롤 애니메이션도 gsap으로 처리했다. 
순수 바닐라로 하려면 window.scroll({top: 0, left: 100, behavior: "smooth"})로 처리하면 된다.

gsap이 스크롤까지 걸리는 시간을 조금 더 세부적으로 조절할 수 있다.

 

개선된 결과물:

누르면 이에 따라 스크롤이 따라가도록 만들었다.

 

 

 

 

3. 커서 포인터 설정

원본 사이트 / 클론 코딩

원본에선 a태그에 호버했을 때 마우스 포인터가 바뀌지 않았다. 하지만 클론 코딩에서는 글자 위에 커서를 올린 것처럼 처리하여 보기 좋지 않았다. 그래서 이를 개선할 때 기본 마우스 커서가 아니라 제대로 된 선택 커서로 바꿔주기로 하였다.

.btn-category {
  cursor: pointer; /* 이 속성 하나 추가해줬다! */
  margin-left: 40px;
  width: 104px;
  height: 36px;
  border: 1px solid #dedede;
  border-radius: 18px;
  margin-bottom: 16px;
  color: rgb(97, 97, 97);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  font-weight: 700;
}

개선된 결과물:

선택가능한 커서로 바꿔주었다! css 한 줄이면 바뀌는 부분이니 다음부턴 디테일을 잘 챙겨야겠다.

 

 

 

 

 

4. README 꼼꼼히 작성

시간에 쫓기며 과제 제출을 하다보니 README가 조금 부실했던 것을 수정하였다.

코치님도 JS스크립트 양이 상당히 많으니 어떤 기능을 추가했는지 자세히 써보는게 어떻냐는 조언을 해주셔서 이번 기회에 수정하였다.

소스코드에 한줄한줄 주석을 추가했었어서 gif이미지와 함께 정리만 하였다.

 

- readme 보러가기

https://github.com/Bumang-Cyber/LINE_Clone

GitHub - Bumang-Cyber/LINE_Clone: 라인 클론코딩