유튜브 클론코딩

유튜브 클론코딩

 

🚀 들어가며

이번 주차에는 CSS, SCSS 강의를 수강하고 네이버 모바일이나, 유튜브 메인페이지를 클론하는 과제가 주어졌다.

사실.. 시간이 엄청 촉박했다. 과제 기간은 화요일 ~ 금요일 총 4일이었으나 강의에서 float, flex, grid 등 CSS 심화된 내용을 다뤘고, 과제는 익숙치 않은 SCSS를 사용해야만 했어서 적응이 안됐다. 특히 CSS 심화된 내용을 강의를 들으며 이해하려니, 실제로 해볼 때는 어떻게 응용해야되나 막막했던 것 같다. (CSS가 오히려 자바스크립트보다 어렵구나.. 라고 느꼈다.) 더군다나 이번 주차에 타입스크립트 강의까지 있어서 너무 많은 것을 한 주에 몰아서 학습하려하니 굉장히 벅찼다. 

그래도 CSS, SCSS, 타입스크립트 과제 직접 해보다 보면 '혈이 다 뚫릴것이다.' 라는 자신감이 있었다.(바닐라 자바스크립트도 그랬기 때문에!)

 

 

✅ SCSS를 사용하며 유튜브 클론코딩을 하며 변화된 나의 모습

😧 과제 수행 이전의 나

• CSS의 정말 기초적인 속성 몇개만 알고 있었다.
• 클래스명을 네이밍하기 힘들었고, 통일성을 갖게 네이밍하기 힘들었다. (때문에, 다른 사람이 내 코드를 보면 아마 이해하기 힘들었을 것이다..)
• 반응형 웹을 전혀 고려하지 않았었다.

😎 과제 수행 이후의  나

• CSS의 여러 속성들을 활용하면서 자연스레 CSS 개발 역량이 향상되었고, grid 속성을 통해 의도된 레이아웃을 구현할 수 있었다.
• BEM 방법론을 사용하여 SCSS의 중첩 구문에 활용되는 클래스명을 가독성 좋게 네이밍할 수 있었다.
• 미디어 쿼리를 활용하여 의도한 반응형 웹을 구현할 수 있었다.

 

✅ SCSS가 도대체 뭐길래?

나는 이번 주차에 SCSS 라는 것을 처음 배웠다. SCSS(Syntactically Awesome StyleSheet)는 프로젝트 규모가 커졌을 때, CSS의 유지보수적인 측면을 강화하기 위해 코드의 재활용성을 높이고, 가독성을 높이는 등의 CSS의 단점을 보완한 기술이다.

SCSS는 변수, 중첩(Nesting), 재활용(Mixins) 등 다양한 기능을 제공하고, 실제로 SCSS를 사용해보면서 'CSS가 정말 불편한 것이구나'라는 사실을 깨달았다. 사용해보니 SCSS가 훨~씬 가독성이 좋고 편리했다.

 

▪︎ 변수(Variables)

SCSS에서는 반복적으로 사용되거나 관리하고 싶은 값을 따로 빼서 변수로 지정할 수 있다. 간편하게 '$'키워드를 붙이면 된다. 아래의 코드는 동일한 색을 사용하는 버튼을 따로 변수로 빼서 관리한 코드이다.

 

 

▪︎ 중첩(Nesting)

SCSS를 사용하면서 가장 좋았던 기능이다. 바로 중첩 기능. 중첩 기능을 통해 상위 선택자의 반복을 줄일 수 있고, 복잡한 구조를 훨씬 가독성 있게 작성할 수 있다.

 

▪︎ 재활용(Mixins)

SCSS를 사용하며 또 좋았던 기능 중 하나는 재활용(Mixins) 기능이다. 재사용할 CSS 스타일을 @mixin 키워드로 선언하고, @include 키워드를 통해 사용할 수 있는 아주 편리한 기능이다.

 

 

✅ BEM 방법론에 관하여

이번 과제에서 BEM 방법론이라는 것도 처음으로 학습했다. BEM 방법론은 클래스 네이밍 기법인데, Block, Element, Modifier를 기준으로 클래스명을 네이밍하는 기법이다.

BEM 방법론을 사용했다.

BEM 방법론은 SCSS의 중첩 기능과 찰떡궁합인 것 같다. BEM 방법론을 사용한 덕에 SCSS 가독성이 좋아지는 것을 스스로 체감했고, 실제로 클론코딩하며 '이 블럭과 요소는 여기에 있지!' 하며 쉽게 해당 블럭이나 요소를 찾을 수 있었기에 시간이 많이 단축될 수 있었다.

처음으로 BEM 방법론을 사용하면서 이게 올바른 사용법인가 걱정도 했지만, 멘토님께서 코드 리뷰 때 가독성있게 잘 작성해주었다고 칭찬해주셨다. ㅎㅎ

 

 

🛸 마치며

유튜브 클론코딩 과제 덕분에 스스로 CSS, SCSS 속성들을 학습할 수 있었다. 아쉬웠던 점은, 시간에 쫓겨서 유튜브 Shorts 화면을 구현하지 못해 아쉬웠다. 앞으로 남은 뷰, 리액트, 타입스크립트 등을 학습하고 남는 시간에 천천히 리팩토링해볼 계획이다. 많은 양의 강의와 과제에 지쳤지만 그래도 긍정적인 생각으로 화이팅해보며 회고를 마친다.