4주 차 일곱 번째 과제(22.02.21 ~ 22.02.23) TIL

프리온 보딩에서는 과제마다 각 기업이 요구하는 기술을 바탕으로 과제를 진행하는 방식입니다.

 

일곱 번째 꾸까 페이지 만들기

꽃을 파는 꾸까 페이지를 만들었습니다.

 

배포 깃 허브 링크 

https://github.com/Gilpop8663/07_kukka

GitHub - Gilpop8663/07_kukka: 원티드 프론트앤드 프리온보딩 2기 14팀 꾸까 페이지 프로젝트입니다

과제 조건

• 리액트 사용 없이 바닐라 자바스크립트 구현
• 바닐라 자바스크립트가 어려운 경우 jQuery까지 사용 가능

 

기능 구현 (맡았던 부분)

 

Header 영역

• 사용자의 스크롤 높이를 파악하여 스크롤을 내릴 시 노란색으로 border 값이 생기고, 모바일에서는 메뉴가 사라지게 구현.
• pc 버전과 모바일 버전 두 가지의 반응형 디자인을 구현.

 

팝업창

• onClick 이벤트를 사용하여 동그란 버튼 3개를 누르면 각각 다른 사진이 나오도록 구현 및 반응형 사이즈 구현.

 

유튜브 동영상 (iframe 영역)

• 유튜브 동영상을 볼 수 있게 구현 및 반응형 사이즈 구현.

 

크로스 브라우징

• IE8에서는 const, let을 지원하지 않아 var을 사용.
• IE8에서 작동하지 않는 scroll-behavior을 setTimeout으로 비슷한 퍼포먼스를 내려고 하였음.
• -webkit(크롬, 사파리), -moz(파이어폭스) , -o(오페라) css 속성을 이용하여 다양한 브라우저(사용자들)에서 동일한 성능을 보이고자 하였음.

정리 및 회고

새로 알게 된 점

• 과제 조건 중 인터넷 익스플로어 8까지 지원하는 크로스 브라우저를 만들어달라는 조건이 있었는데 크로스 브라우저를 만드는 것은 참 힘들구나 알게 되었습니다.

 

• 현재 당연히 사용하고 있는 css나 js에서의 여러 속성이나 문법들을 지원하지 않는 브라우저가 아직 있다는 것을 알게 되었습니다.

 

• 자바스크립트로 협업하는 방법에 대해 새롭게 알게 되었습니다.

 

• 자바스크립트로 개발을 하다 보니 단순 반복적인 코드를 여러 번 작성해야 할 때가 있었습니다. 어떻게 좋게 해 볼 수 있지 않을까 하였으나 우선 기능이 잘되도록 하기 위해서 좋은 코드는 나중으로 미루고 제출을 하였습니다. 리액트에서의 개발자 편의성이 얼마나 높은지 오랜만에 다시 깨달은 것 같았었습니다.

 

힘들었던 점 / 해결과 극복 방법

• 크로스 브라우저를 하는 도중 헤더에서 특정 메뉴를 누를 때 해당하는 콘텐츠의 스크롤 값까지 내려가는 것이 있었는데 이때 scroll-behavior이라는 css 속성을 쓰지 말고 다른 방법으로 하는 것이 과제 조건 중 하나였는데 그 이유는 IE에서 이 속성을 지원하지 않기 때문이다. 따라서 구글에 열심히 검색을 해보았고 polyfill이라는 것도 알게 되고 다양한 사람들이 고민한 것들을 검색했으나 polyfill이라는 것을 처음 보았고 사용방법을 따라서 했는데 작동이 되지 않아서 결국 IE에서 지원하는 setTimeout을 여러 번 불러와서 순차적으로 내려가는듯하게 코드를 작성하여 해결하였다. 

 

• 크로스 브라우저 중 IE8까지 지원하라고 되어있었으나 현재 우리가 자주 사용하는 let, const 부터 flex , grid 모두 되지 않아서 난항을 겪었다. let과 const는 var로 바꾸었으나 css적으로 잘 작동되지 않는 부분들이 있어서 결국 IE 11까지만 지원하는 것으로 팀 자체에서 협의를 하고 과제 제출을 하였다.

 

• 자바스크립트로 협업을 하였는데 리액트처럼 컴포넌트를 나누어서 각각 한 페이지에 합치는 것은 맞으나 이번 과제에서는 실제로 html , css , js  모두 합치는 과정을 겪었었다. 팀원들끼리 각각 클래스 네임을 잘 지어줘서 충돌이 나지 않아서 해결 가능하였다.