과제
부트캠프의 첫번째 과제로, 원하는 도메인의 메인 페이지를 HTML/CSS/JS를 사용해서 구현하였다.
내가 선택한 페이지는 프로그래머스의 메인페이지,
grid와 flex를 적절히 사용한 깔끔한 디자인과 swiper 라이브러리를 가볍게 사용할 수 있어 선택하게 되었다.
프로그래머스 링크
프로그래머스 메인페이지 클론코딩 링크
클론코딩 깃허브 링크
학습 내용
이번 과제를 통해 아래 항목들을 배울 수 있었다.
- html5 시멘틱 태그를 이용한 구조 작성
- grid, flex와 미디어쿼리를 이용한 반응형 디자인
- BEM 방법론을 이용한 class 및 CSS 작성
최근까지 회사에서 작업시 퍼블리셔 분께서 로직을 제외한 HTML과 CSS를 다 사전에 처리해주셔서 한번도 고민해보지 않았지만,
이번에 토이 프로젝트로 클론코딩을 진행하면서 몇가지를 새로 배워갈 수 있었다.
이전에 주로 사용되었던 BEM 방법론으로 직접 class 명과 CSS를 작성해가면서,
최신 트렌드인 CSS in JS와 여러 프레임워크들이 왜 탄생하게 되었는지, 어떤 불편함을 해소하기 위해 나온것인지 생각해보았다.
CSS의 발전
CSS의 근본적인 문제인 Global namespace와 Cascade방식으로 요소에 스타일을 입히는 것은 프로젝트의 사이즈가
커질수록 유지보수하기 까다로워지며, 이를 해결해보기 위해 근본적인 방법이 아닌 방법론으로써 BEM 방법론을 통해
공통적인 컨벤션을 유지할 수 있음을 알게 되었다.
하지만 MVC 아키텍쳐에서 MVVM 아키텍쳐로 넘어감으로써 이제 하나의 페이지를 여러가지의 구성 요소로
분할하는 컴포넌트라는 개념이 나오게 되었고, 각 컴포넌트별로 CSS를 관리하기 위해 CSS in JS 방식인 styled-components가 탄생했다.
다른 방법으로 Tailwind라는 CSS 프레임워크를 이용하여 기존의 CSS를 완전히 개선하려는 움직임이 나오게 되었다.
CSS가 아닌, HTML을 직접 다루어 추후 나올 수 있는 사이드이펙트를 제거하는 방법 또한 제시된 것이다.
기존의 CSS의 불편한 점을 개선하기 위해 BEM 방법론에서부터 CSS 프레임워크라는 발전이 이루어졌고, 그 과정에서
복잡한 선택자가 더이상 필요하지 않은 컴포넌트 구조의 개발에서는 sass가 이제 사장되고 있다.
개발 트렌드
마치 MVVM 시대 이후 jquery가 더이상 잘 사용되지 않는것처럼, 새로운 개발론이 퍼짐에 따라 기존의 기술들이 사장될 수는 있다.
IE가 사라져 크로스 브라우징을 신경쓰지 않아도 되니 새로운 CSS 기술들이 나타나고,
과거의 문서가 아닌 각 요소(컴포넌트)를 표현하기 위한 CSS 프레임 워크 혹은 라이브러리 또한 계속 나타나고 있으며,
프론트엔드 분야에서는 계속해서 현재의 불편함을 개선하기 위한 다양한 방법들이 제시되고 있다.
하지만 단순히 트렌드에 따라 움직이는 것이 아닌, 해당 기술들이 나온 시대배경을 잘 이해해야지 앞으로 진행할 프로젝트에 적합한
라이브러리 등을 선택할 수 있을 것이다.
#패스트캠퍼스 #부트캠프 #프론트엔드개발자 #국비지원취업 #국비지원
