[패스트캠퍼스] 웹퍼블리싱 강의 2주차 학습일지 - SCSS, GIT

요약

 오늘은 국비지원교육 과정으로 이뤄지는 "웹퍼블리싱 완전 정복 : 모션 디자인으로 완성하는 반응형 웹 디자인" 강의 중 SCSS와 GIT에 다룰 예정이다. 두 개념 모두 실무에서 중요한 내용이다.

 SCSS는 css를 마치 프로그래밍 언어처럼 사용할 수 있게 해주어 상당히 효율성을 높여준다. 또한 선택자를 선택하는 방법 또한 다르기 때문에 가독성 높은 코드를 작성하는데 큰 도움을 주기도 한다.

 GIT은 혼자 코딩할 때도 매우 유용하지만, 협업을 할 때 가장 큰 도움이 된다. 중요한 코드를 작성할 때마다 원격 저장소에 저장할 수 있으며, 이전 버전으로 되돌리는 것도 가능하다. 그리고 협업할 때, 각자 작성한 코드를 충돌없이 합치기도 가능하다.

 

새로 알게 된 개념

SCSS

SCSS 설치 방법

- scss는 ruby, node 등 여러 버전이 있지만, 현재로서는 dart 버전이 가장 최신이라서 이 버전을 다운로드하는 것을 권장한다.

최신 버전에 대한 정보를 알 수 있는 공식 사이트는 아래와 같다.

https://sass-lang.com/documentation

Sass: Documentation

 

- 설치는 npm으로 이뤄지며, 명령어는 아래와 같다.

// windows
npm install sass -g

// mac
sudo npm install sass -g

 

- scss는 프로그래밍 언어라기 보다는, css의 전처리기이다. 브라우저는 css만 이해할 수 있기 때문에 scss로 작성한 코드를 css로 변환해주는 과정이 필요하다. 그에 대한 명령어는 아래와 같다.

sass --watch scss/style.scss:css/style.css

 

import

Ssss @import는 기본적으로 sass 파일을 가져오는데, css @import 규칙으로 컴파일 되는 경우가 있다.

@import "reset";
@import "mixin";

@import "hello.css";
@import "http://goole.com";
@import url();
@import "green" screen;

 

nesting

css와 다르게 sass는 자식 선택자를 선택할 때 한 줄로 이어쓰기보다는 부모 선택자의 "{}" 안에 자식 선택자를 입력한다.

.wrap{
   width: 100%;
   height: 100%;
   
   .inner{
   }
}

 

변수

 Sass에서 변수를 지정할 때는, "$변수명"으로 지정한다.

색상이나 자주 사용하는 margin, padding 값을 미리 지정하면 효율적인 개발이 가능하다.

$bgBody: #eee;
$bgItem: #111;

 

mixin

Sass Mixins 사용이 많은 css 스타일을 미리 그룹화하여 정의할 수 있는 기능이다.

@mixin button($width:120px, $red:red) {
  display: block;
  width: $width;
  height: 35px;
  border-radius: 20px;
  background: $bg;
  font-style: 20px;
  color: #000;
}

선언된 mixin을 사용할 때는, @include를 사용한다.

@include 믹스인명;

 

@for

@for은 프로그래밍 언어의 for문과 비슷하게 스타일을 반복적으로 출력한다.

@for는 through를 사용하는 형식과 to를 사용하는 형식으로 나뉜다.

// through
// through 값만큼 반복

0~5까지 반복
@for $변수 from 0 through 5 {
   // 반복 내용
   }
   
// to
// to 값 전만큼 반복

0~4까지 반복
@for $변수 from 0 to 5 {
   // 반복 내용
   }

 

@each

@each는 List와 Map 데이터를 반복할 때 사용한다. 

여기서 List와 Map이란

List는 변수를 지정할 때, $color: (red, yellow, blue, black); 이와 같이 선언한 형태를 말하고,

Map는 변수를 지정할 때, $color: (red: r, yellow: y, blue: b, black: bl);처럼 key: Value 형태로 선언한 것을 말한다.

@each $변수 in 데이터 {
   // 반복 내용
   }

 

@if

@if는 조건의 참과 거짓에 따라 분기 처리가 가능하며, @else, @else if를 같이 사용할 수 있다.

// @if
@if (조건) {
   // 조건이 참일 때 실행
}

// @if + @else
@if (조건) {
   // 조건이 참일 때 실행
} @else {
   // 조건이 거짓일 때 실행
}

// @if + @else if + @else
@if (조건) {
   // 조건이 참일 때 실행
} @else if (조건2) {
   // 조건2이 참일 때 실행
} @else {
   // 조건들이 모두 거짓일 때 실행
}

 

GIT

git 설치

- 다음 git 공식 웹사이트에서 자신의 운영체제에 맞게 다운로드 받기

https://git-scm.com/

Git

git init

git init는 새로운 Git 저장소(repository)를 생성할 때 사용하는 Git 명령어이다.

git inti 명령어가 잘 실행되었는지 확인하는 방법은 해당 폴더 안에 ".git" 폴더가 생성되었는지 확인해보면 된다.

git add

 git은 크게 3가지 영역으로 나뉜다.

우리가 코드를 작성하는 Working Directory

변경사항이 저장되는 Staging Area

원격 저장소인 Repository

 

 이 때 Working Directory에서 Staging Area로 올리는 명령어가 git add이다. 

git 원격 저장소와의 연결

먼저 gitHub 홈페이지에서 new repository를 만들어준 다음에

gitHub 홈페이지에 나와있는 대로 명령어를 작성하면 원격저장소와 연결이 가능하다.

 

git commit

git commit은 폴더나 파일에 변경사항에 대하여 코멘트와 함께 저장소에 기록하는 명령어이다.

 

git checkout

git checkout은 특정 커밋으로 이동하거나 특정 branch로 이동이 가능하다.

하지만 checkout이라는 명령어 하나에 다양한 기능이 있기 때문에

branch를 변경할 때는 "git switch" 명령어를 사용하고,

워킹 트리의 파일을 복원할 때는 "git restore" 명령어를 명확히 사용하는 것을 권장한다.

 

git branch

branch를 새로 생성할 때 사용하는 명령어

 

git push

commit한 변경사항을 원격 저장소에 저장하는 명령어

 

git clone

원격 저장소에 저장되어 있는 특정 repository를 다운로드 받을 수 있는 명령어

 

git merge 및 conflict

git merge는 현재 branch와 특정 branch를 합치는 명령어이며,

merge를 하기 전에 메인이 될 branch로 switch해주는 과정이 꼭 필요하다.

그리고 merge하는 branch끼리 충돌되는 내용이 있다면 남겨둘 내용을 제외하고 나머지를 지워서 충돌을 제거해야 한다.

 

git pull

연결되어 있는 원격 저장소의 repository에서 내용들을 불러오는 명령어이다.

 

부족한 점

git에 대해 기본적인 지식은 익숙해졌지만, branch나 merge하는 과정에 대해서는 아직 이해도가 부족하기 때문에 취업하기 전에 더 많은 연습이 필요하다고 생각한다.

그리고 scss도 자주 쓰는 기능 외에는 이해도가 부족하기 때문에 조금씩은 공부할 필요가 있다고 생각한다.