[프론트엔드 개발 스쿨 9주차] Sass특강 및 컴퓨터공학 수업

오늘의 포스팅은 지지난주에 했었던 특강인 Sass특강과 8일간의 컴퓨터공학 수업에 대해서 포스팅을 하려 한다.

열심히 과제중인 나...

 

포스팅 전에 노트북들을 다들 쓰다보니 나처럼 이렇게 키보드를 가지고 다니는 사람이 정말 많다. 

그리고 노트북 거치대를 쓰시는 분들도! 만약, 이글을 읽고 있는 당신이 패스트캠퍼스에 다닐 생각이 있다면,

무선키보드, 마우스 , 노트북 거치대 등 주변기기들을 사는것을 추천한당.개발환경에 큰 도움을 주는것같다.ㅎㅎ

(물론, 난 나중에 살생각...ㅎㅎ)

 

1. Sass특강

 일단, 전반적인 Sass특강 설명에 앞서 패스트캠퍼스에서는 특강을 여러개 스케줄을 잡아놓았다. 앞서서 정적블로그(지킬)과 같은 특강이나 보강특강 개념의 특강도 있었다. 이번엔 CSS를 혁신적으로 쓰게 해주는 Sass특강을 배우게 되었다. 사실 지지난주쯤인가에 Naver Front-end developer conference를 다녀왔었다. 거기서 처음 사스라는것(Sass)을 듣게 되었고, 코드설명을 해주는데 이해가 잘 가지 않았었다. 하지만 특강을 들으면서 아 이런게 저런거였구나 하는 것을 느끼게 되었었다.

 

 Sass특강은 임기완 강사님께서 해주셨다. 프론트엔드 개발 스쿨 4기인가 수료하신것으로 알고 있고, 6기때인가 조교로 활동하셨다고 들었다.(데레사님께서..말씀해주신.. 기억이 사실 잘안난다..) 하여튼! 사스특강은 전반적으로 내용적인 측면은 좋았던 것 같다. CSS에서 변수와 함수를 쓸 수 있다던가 자동으로 Scss파일을 css파일로 변환해준다던가 하는 등의 신세계.....(왜 이걸 이제 알았나) 하지만, 강사님 왈! JS단에서 CSS수정을 한다고...또르르 그럼 지금 이걸 배우는 이유는??또르르.. ㅎㅎ 여튼 많은 기업에서 쓰고있기도하고 모르는것보다 아는것이 좋으니까 ! 

 

 아쉬운점이라고 한다면, 강사님께서 아직 언변의 스킬이 부족하신....듯..... 근데 사실 따지고 보면 나도 못함... 말잘하는 사람이 정말 부러움..(데레사님이 너무 뛰어나셔서 비교된건지도 모르겠지만..) 하여튼! 약간 설명하는 방식이 강의 형태라기 보다는 옆자리에 있는 누군가가 뭉뚱그려 설명해주는 듯한 강의였다. 알려주고 싶은것은 많으신데 조금 아쉬웠던 부분이었다.. 

(혹시라도 이글을 보신다면! 힘내세용! 내가 알고있는걸 명확하게 전달하는 일은 정말 어려운 일이니까요 ㅠ )

 

일단 수업은 비주얼 스튜디오 코드로 진행했으며, 터미널을 킵니당!

새로운 디렉토리를 만들어주고, 해당 디렉토리에서 

npm init -y

npm i -D node-sass        로컬인스톨
npm i -g node-sass         글로벌인스톨
 
node-sass sass-overview.scss sass-overview.css

위 와 같이 입력해줍니다.

 

첫째줄에 init은 초기화 

둘째줄과 셋째줄은 사스를 사용하기 위해 인스톨 하신다고 생각하시면 됩니다. 원래 로컬인스톨만 하면되는경우도 있있는데 내 컴퓨텨는 둘다 하니까 되었다... 뭐지...

 

넷째줄에 보이는게 사실 핵심이다. sass-overview.scss 파일을 만들고 나서  저 명령어를 입력하면 자동으로 scss파일이 css파일로 변환된다. 약간 C언어로 보면 자동 컴파일 느낌이다.  

 

아래코드에서 보면 사칙연산이 되는 부분이 있다. 

 

//SCSS파일//

.container{
    width: 100%;
}
article[role="main"]{
    float: left;
    width: 600px / 960px * 100%;  //사칙연산이 된다.
}
aside[role="complementary"]{
    float: right;
    width:300px / 960px * 100%;
}

//CSS파일//

.container {
  width: 100%; }

article[role="main"] {
  float: left;
  width: 62.5%; }

aside[role="complementary"] {
  float: right;
  width: 31.25%; }

 

위에 코드중에서 아까 말한 4번째 코드를 치면 위와같이 변환된다.

신기한 점은 width가 자동으로 계산된다는 점이다!

 

두번째 예제를 보자.

//SCSS파일//

$main-width:100%;
#main {
  $width: 10px !global; 
  border: $width solid red;
  $main_color:#fff;
  background-color:$main-color;
  width: $main-width;
}
#sidebar {
  width: $width*50;
}
#content {
  $width:500px;
  width: $width;
}
#sidebar2 {
   width: ($main_width/10);  
}

//CSS파일//

#main {
  border: 10px solid red;
  background-color: #fff;
  width: 100%; }

#sidebar {
  width: 500px; }

#content {
  width: 500px; }

#sidebar2 {
  width: 10%; }

 

위에 코드에서 보면 맨 위에 main-width:100%로 SCSS파일에서 변수설정을 할 수 있다는 것을 볼 수 있다.

변수로 설정을 하고나서 css로 변환된 것을 보면 자동으로 그값들이 계산되고 스르륵 들어가는 것을 볼 수 있다.

정말 편리한 기능이다. 일일히 노가다를 안해도되는.... 왜이런걸 잘 안쓸려고하는지 모르겠네...ㅎㅎㅎ

 

자세한 사스의 모든것은 아래 사이트를 참고하길 바란다. 사실 JS강사님께서 만드신 페이지 인데 정말 깔끔하게 잘 정리되어있다. 전반적인 웹프로그래밍에 관하여 되어있다.

 

 https://poiemaweb.com/

웹 프로그래밍 튜토리얼 | PoiemaWeb

 

2. 8일간의 컴퓨터공학 수업

 

 

 제목이 8일간의 컴퓨터공학과 수업인데.. 사실은 불가능한 수업이다. 하지만, 수업을 8일 듣고나서는 정말 내가 컴퓨터공학을 4년동안 들었던것이 다 주마등처럼 스쳐갔다. 그정도로 컴퓨터공학과 핵심정리 8일 수업을 들었다.

기본적으로 해야하는 운영체제, 알고리즘, 컴퓨터네트워크 등의 필요한 부분들을 학생들 수준과 진행에 맞춰서 설명을 해주셨다. ( 아 물론 안배운부분이 훨씬 많다. 그럴 수 밖에 없다. ) 또한, 파이썬으로 실습까지 병행하면서 파이썬언어에 대해서 공부할 수 있는 좋은 기회였던 것 같다. 

 

 아쉬웠던 점이라고 한다면, 아무래도 강사님의설명인 것 같다. 강의를 많이 해보시지 않은 티가 났다라고 해야하나....

하지만! 강사님은 정말 똑똑하신분 같았다. 앞에서 수업을 하면서 즉석에서 실시간 하드코딩을 하시고, 개념을 딱딱 잘 알고 계시고 어떤게 필요하신지 설명해주시고, 어떤걸 공부해야 하는지 다 알려주시고 하는 부분을 보면, 정말로 강의만 잘하신다면 최고의 강사님이 될거라고 생각합니당.

 

 

현재 9주차. JS에 입문하였고, 어제 첫수업을 들었다! 이제 행복끝 지옥시작이다! ㅎㅎㅎㅎㅎ

 

 

<패스트캠퍼스 프론트엔드 스쿨 후기>

 

[프론트엔드 개발 스쿨] 살펴보기>>