[포스코 x 코딩온] 웹개발 풀스택 코스 5주차 교육 회고 feat. sass

일주일이 후다닥 지났다.

이번 주 부터는 팀 프로젝트가 시작이 되었다. 그래서 그런지 더 정신없이 지나간거 같다.

이번 프로젝트의 주제는 프론트-엔드 영역이고, 팀 마다 주제를 정해서 프론트적인 웹사이트를 만드는 것이다.

지난 기수분들의 작업물을 보니 어떤 것은 하나의 예술 작품 같기도 했고, 어떤 것은 실용적인 측면에 포커스를 두어 심플하게 제작한 것도 있었다.

가장 인기가 좋았던 것은 예술적이면서도 실용성을 챙긴 작업물이었다.

카메라 판매를 주제로 카메라를 판매하는 웹을 만들었는데, 홈페이지 시작부터 마치 애플의 홈페이지 같은 퍼포먼스를 보여주면서도 상품의 정보도 잘 전달해 주었다.

 

너무 두서없이 프로젝트 이야기를 늘어놓았는데, 지금부터 이번 주 키워드 중심으로 스터디한 내용을 간략하게 정리해 볼까 한다.

 

키워드-

1.  부트스트랩(Bootstrap)

2. 깃(Git): Branch, Rebase, Merge

3. SASS

---

1. Bootstrap

이번 주의 강의 내용들은 앞으로 시작할 팀 프로젝트를 위한 내용들이 대부분이었던 듯하다.

그 중 가장 첫번째가 부트스트랩(Bootstrap)이다.

아무래도 프론트-엔드 영역 안에서 결과물을 내야하다 보니, 디자인적 요소가 비중이 크다. 그렇다보니 부트스트랩 활용법에 대해 장세히 알려주신거 같다.

나는 이전에 잠깐 부트스트랩을 사용한적이 있어서 크게 어렵지는 않았으나, 이번 강의를 통해서 새롭게 알게된 부분이 많았다.

새롭게 알게 된 것 첫 번째가 클래스를 이용한 스타일 적용이었고, 두 번째가 그리드 적용이었다.

나는 부트스트랩이 그저 코드를 복사해서 쓰는 건 줄만 알았는데, 클래스를 이용해서 스타일을 쉽게 적용해 준다거나, 그리드 기능을 탑재하고 있는 줄은 몰랐다.

그래서 이번에 귀를 쫑긋하고 수업을 들은 거 같다.

부트스트랩의 css와 js를 적용한 후 위와 같이 부트스트랩 규칙으로 클래스명을 입력한 것

위 사진은 수업시간에 강사님과 같이 짠 코드이다. 빨갛게 클래스명을 표시한 부분이 부트스트랩이 제공하는 클래스로 스타일을 컨트롤 하는 방식이다.

'd-flex' 라고 되어 있는 것은 display: flex;를 줄인 말이다. 이렇게 적용을 해주면, 구지 CSS에서 힘들게 코드를 칠 필요가 없이 flex기능이 하위에 있는 div에게 적용이 된다.

그리고 한칸을 띄워서 더 많은 스타일을 적용할 수 있다.

'justify-content-center'라고 되어 있는 것은 눈치챘겠지만, CSS에서 justify-content: center;라고 표기한 것과 같다.

그래서 하위에 있는 div들이 flex를 먹고 이후에 중앙정렬을 하게 된다.

 

이렇게 부트스트랩은 클래스를 이용해서 스타일 적용을 해주는 기능을 제공한다. 부트스트랩이 제공하는 클래스명만 잘 익혀두면 CSS로 넘어가 스타일을 적용하는 번거로움을 크게 덜을 수 있다.

 

그리고 마지막으로 배운 것은 그리드 기능이다.

이것도 수업시간에 짠 코드를 기반으로 설명해 보겠다.

위 코드 결과물, 그리드는 라인은 눈에 보이지 않지만, border적용을 해서 알아보기 쉽게 해놓은 것

위와 같이 클래스명으로 저렇게 구역들을 나눌 수 있다. 즉, CSS의 그리드 기능을 클래스명으로 적용할 수 있다는 것이다.

그런데 여기에는 규칙이 있다. 'container'라는 div 부모 요소가 있어야 하고, 그 아래로 작성이 되어야 한다.

row는 행이고, col은 열이다. container안에 row를 먼저 만들어 행을 만들고, 그 row안에 col을 이용해 열을 만든다.

이 규칙만 알면 일정 비율에 따라 그리드를 생성하여 위와 같이 만들어 준다.

위 그림을 보면 더 이해가 쉽다.

 

부트스트랩은 화면을 12등분한다.

위 사진은 부트스트랩이 공간을 어떻게 나누는지 보여주는 내용이다. 부트스트랩은 화면을 12등분하여 최대 12까지 입력이 가능하다. 즉,  col을 12개 만들 수 있다는 것이다. 그 이상 넘어가게 되면 열이 아래로 내려가 버린다.

 

그럼 이 그리드는 어떤 역할을 하는 것일까?

화면 좌우 폭이 좁아지면, 우리가 그리드로 짜놓은 그 공간에서 배율을 바꾸어 폰트나 컨텐츠가 화면 밖으로 나가지 않게 해준다.

즉, 반응형을 만들기 편하다.

그런 점에서 부트스트랩이 제공하는 그리드 기능은 프론테-엔드 작업에서 매우 유용하게 사용이 될 것 같다.

 

2. 깃(Git): Branch, Rebase, Merge

깃은 1주차부터 강사님이 매우 강조한 부분이었다.

특히 개인 작업 보다는 팀 작업이 많은 업계 특성상 꼭 필요한 부분이라고 강조했다.

코드는 조금 부족해도, 깃이 부족하면 큰일난다고 할 정도로 강조를 하셨다.

그래서 팀 작업이 들어가기 전, 깃에 대해 더 많은 기능을 알려주셨다.

 

가장 중요하게 가르쳐주신 것이 branch였다. 강사님은 이 branch라는 개념은 가상의 공간이라고 생각하라 하셨다.

메인으로 작업하던 공간에 branch라는 가상의 공간을 만들어서 자기 파트 작업을 한 후에 깃허브에 요청을 보내면된다.

메인으로 작업을 바로 하지 않고 branch 공간에서 하는 이유는, 시간이 엉키기 때문이다.

하나의 홈페이지를 만들기 위해 여러 사람이 작업을 하는데,  시간 순으로 메인을 만지면 좋겠지만, 각자 다른 시간에서 연결되지 않게 작업을 하기 때문에, 메인을 건드리지 않고 작업을 하고 최종적으로 합치는 것이다.

메인에 바로 작업을 하면 백업도 애매해질 뿐더러, 다른 사람이랑 작업 위치가 겹치게 되면 충돌도 나기 때문이다.

브렌치에서 작업을 하면 깃허브를 통해 팀장에서 merge여부 확인이 간다. 그럼 팀장이 최종 검토를 해서 메인 코드와 합쳐준다.

 

rebase는 메인의 최신 내용을 브런치에 반영하는 작업이다. 이렇게 되면 branch에서 메인의 업데이트된 상황을 반영할 수 있게 한다. 하지만 rebase는 자칫 메인을 꼬아놓을 수 있어서 되도록 사용하지 말고, 브렌치에서 작업을 해서 merge하는 식으로 작업을 하라고 권유받았다.

 

merge는 그야말데로 작업한 코드를 합치는 작업이다. 이건 브렌치에서 작업한 것을 git push하면 깃허브에서 요청을 보낼 수 있다. 이때 팀장의 컴펌을 받게 설정해 놓으면, 팀장이 전체적인 것을 확인 후 요청 확인을 누른다. 그러면 메인이 내가 작업한 브렌치와 합치된다.

 

이렇게 하나의 홈페이지가 완성되어 간다.

깃에 많은 시간을 들인거 같다. 그만큼 팀 작업에서 깃의 역할이 큰 것 같다.

깃이 꼬이면 지금까지 노력해서 작업한 것들이 뒤죽박죽이 될 수 있기 때문에 굉장히 집중도 높게 수업을 하셨다.

 

3. SASS

Syntactically  Awesome Style Sheets의 앞자를 따서 SASS. 한글음성으로는 사스라고 한다.

SASS는 CSS의 단점을 보완하려고 나온 스타일시트언어이다. SASS를 이용하면, CSS에서 반복적으로 사용하는 선택자 문제도 해결할 수 있다.

CSS로 적용한 것

SASS로 적용한 것

위 사진 2개를 비교하면 이해가 쉽다. 첫 번째 사진이 일반 CSS로 스타일을 적용한 것이고, 두 번째 사진이 SASS를 이용해 적용한 것이다. 

CSS의 선택자는 'body' , 'body .wrap'이라고 써서 'body' 2번 사용한다.

그런데 SASS는 body { } 이렇게 공간을 만들고 그 안에 자식들을 넣는다. 그래서

 

body {

  .wrap {

    width: 100% 

  }

}

 

이렇게 모양이 나온다. 이것을 네스팅(nesting)기능이라고 한다. 영어단어 그대로 품는 형태인 것이다.

이렇게 되면 body를 2번 사용하는 노력을 안해도 된다.

 

SASS를 이용해 함수를 적용한 것

다음으로 소개할 SASS의 기능은 함수적용이다.

JS에서나 사용될 것 같은 함수가 SASS는 적용 가능하다. 위에 수업시간에 짠 코드 중 일부이다.

이렇게 JS에서나 쓸 법한 if문을 SASS를 통해 쓸 수 있다.

이뿐만이 아니라 가장 많이 쓰는 for문도 사용이 가능하고, for each도 가능하다.

나는 여기서 경악을 금치 못했다.

이제 CSS에서 하던 반복 작업을 안해도 되기 때문이다!!! for문을 사용하면 간편하게 반복작업을 적용할 수 있다!

 

SASS는 .scss라는 형식을 가지고, 순수 CSS언어를 자동으로 만들어준다.

SASS는 CSS언어를 도와주는 스타일시트언어이다. 즉, 순수 CSS가 아니라서 HTML에 적용을 하려면 CSS로 변환이 필요하다.

이는 VS코드를 통해서 가능하다. VS코드에서 익스텐션을 설치하면 위 사진과 같이 SASS에서 작업한 것을 CSS파일로 변환하여 만들어준다. 우리는 그럼 HTML에 저 CSS파일을 적용해주면 SASS에서 작업한 내용이 그대로 적용이 된다.

SASS는 .scss라는 형식의 파일로 작업된다.

 

---

이렇게 5주차의 수업도 정리를 해보았다. 오늘 소개한 키워드 말고도 더 좋은 내용들이 많았다.

다 소개하지 못해 조금 아쉽다.

위 3가지 키워드는 5주차에서 가장 인상깊고, 앞으로 많이 사용할 것 같은 기능들을 소개해보았다.

현재 프론트-엔드 프로젝트가 활발하게 진행 중인데, 위 기능들을 잘 활용하여 좋은 결과물을 만들었음 좋겠다.

 

참, 5주차에는 작업도 같이 했다. 아래 강사님과 함께 만든 작업물도 공유해 보며 글을 마치겠다.

 

HTM, CSS&SASS, JS 활용

[MUSIC플레이어]

https://drew-musicbox.netlify.app/

Music Player by Drew

 

HTM, CSS&SASS, JS 활용

[비디오렌더링홈페이지] (반응형)

https://app.netlify.com/sites/drewlandscape/overview

Netlify App