[Front-end๐Ÿฆ] #19 Linux, SASS

๋˜์ƒยท2021๋…„ 11์›” 24์ผ
0

front-end

๋ชฉ๋ก ๋ณด๊ธฐ
30/58
post-thumbnail

1. Linux

1-1. Cloud Service

์‹ค๋ฌด์—์„œ๋Š” debian, redhat ๊ณ„์—ด์„ ๋งŽ์ด ์‚ฌ์šฉํ•œ๋‹ค.
+) ์šฐ๋ฆฌ๋Š” ์‹ค์ œ ์„œ๋น„์Šค๋ฅผ ๋Ÿฐ์นญํ•  ๋•Œ url์„ ์‚ฌ์„œ ๋ถ™์—ฌ์•ผ ํ•จ.


1-2. NGINX

NGINX๋Š” ์›น ์„œ๋ฒ„! apache๊ฐ€ ์—…๊ณ„ 1๋“ฑ์ด์—ˆ๋Š”๋ฐ, ์ ์  ๋ฌด๊ฑฐ์›Œ์ง€๋ฉด์„œ NGINX๋ฅผ ์“ฐ๋Š” ์‚ฌ๋žŒ๋“ค์ด ๋Š˜๊ณ  ์žˆ๋‹ค๊ณ  ํ•œ๋‹ค. NGINX๋ž€?


1-3. ๋ฆฌ๋ˆ…์Šค ์‹ค์Šต

์ถ”๊ฐ€์ ์œผ๋กœ ์ปค๋งจ๋“œ๋ฅผ ๋ฐฐ์šฐ๊ณ , #18์— ์ด์–ด์„œ ์ •๋ฆฌํ–ˆ๋‹ค.

๋ฌธ์ œ ํ’€์ด

  1. ls ๋ช…๋ น ์‹œ ์ˆจ๊น€ ํŒŒ์ผ๋„ ๋ชจ๋‘ ์ถœ๋ ฅ๋˜๋„๋ก alias๋ฅผ ์„ค์ •ํ•˜์„ธ์š”. alias ls="ls -a"
  1. ์œ„์—์„œ ์„ค์ •ํ•œ alias๋ฅผ ํ•ด์ œํ•˜์„ธ์š”. unalias ls
  1. ๊ธด ๋ช…๋ น์–ด๋ฅผ ์ณค๋Š”๋ฐ ์˜คํƒ€๊ฐ€ ๋‚ฌ๋‹ค. ๊ธฐ์กด์— ๋ช…๋ น์–ด๋ฅผ ๋ถˆ๋Ÿฌ์™€ ์ˆ˜์ •ํ•˜๋Š” ๋ฐฉ๋ฒ•์€ ๋ฌด์—‡์ธ๊ฐ€์š”? โฌ†๏ธ
  1. ์ž๋™์™„์„ฑ ํ‚ค๋Š” ๋ฌด์—‡์ธ๊ฐ€์š”? tab
  1. ํ˜„์žฌ ํด๋”์— ๋‹ค์Œ๊ณผ ๊ฐ™์ด ํด๋”์™€ ํŒŒ์ผ์„ ๋งŒ๋“ค๊ณ  tree ๋ช…๋ น์–ด๋ฅผ ์ด์šฉํ•ด ์ด๋ฅผ ์•„๋ž˜์™€ ๊ฐ™์ด ์ถœ๋ ฅํ•˜์„ธ์š”.
    1. tree๋Š” ๊ธฐ๋ณธ ์„ค์น˜๊ฐ€ ์•ˆ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค. ์ธํ„ฐ๋„ท์„ ํ†ตํ•ด tree์„ค์น˜ ๋ช…๋ น์–ด๋ฅผ ์•Œ์•„๋‚ด์„ธ์š”. apt-get install tree

    2. ํด๋” ํŠธ๋ฆฌ tree

      
      .
      โ”œโ”€โ”€ README.md
      โ”œโ”€โ”€ a
      โ”‚   โ”œโ”€โ”€ one.txt
      โ”‚   โ””โ”€โ”€ two.txt
      โ””โ”€โ”€ b
          โ”œโ”€โ”€ c
          โ”‚   โ””โ”€โ”€ four.txt
          โ””โ”€โ”€ three.txt
      
  2. ํ˜„์žฌ ํด๋” ๊ธฐ์ค€์œผ๋กœ ํ™•์žฅ์ž๊ฐ€ .js ํŒŒ์ผ์„ ๋ชจ๋‘ ์ถœ๋ ฅํ•˜์„ธ์š”. cat *.js
  1. ํ˜„์žฌ ํด๋” ๊ธฐ์ค€์œผ๋กœ ํ™•์žฅ์ž๊ฐ€ .js ํŒŒ์ผ์ธ ๊ฒƒ์„ result.txt์— ์ €์žฅํ•˜์„ธ์š”. cat *.js > result.txt
  1. ํ˜„์žฌ ๊ฒฝ๋กœ๋ฅผ ํ‘œ์‹œํ•ด๋ณด์„ธ์š”. pwd
  1. a ํด๋”์— ์žˆ๋Š” one.txt๋ฅผ change.txt๋กœ ์ด๋ฆ„ ๋ณ€๊ฒฝ์„ ํ•ด๋ณด์„ธ์š”. mv one.txt change.txt
  1. change.txt๋ฅผ bํด๋”์— ์˜ฎ๊ฒจ๋†“์œผ์„ธ์š”. mv change.txt ../b




2. SASS

CSS๊ฐ€ ๋„ˆ๋ฌด ์ปค์ง€๋ฉด ๋ณต์žกํ•ด์ง€๊ณ  ์œ ์ง€๋ณด์ˆ˜๊ฐ€ ์–ด๋ ค์›Œ์ง€๋ฏ€๋กœ, ๋ณ€์ˆ˜๋ฅผ ์‚ฌ์šฉํ•ด์„œ ์‰ฝ๊ฒŒ ํ•ด์ฃผ๋Š”! CSS๋กœ ์ปดํŒŒ์ผ ๋˜๋Š” ์–ธ์–ด. iOS์˜ UIColor, UIFont Extension๊ณผ ๊ฐ™์€ ๋Š๋‚Œ์ธ๋“ฏ!

SASS, SCSS ๋ฐฉ์‹์ด ์žˆ๋Š”๋ฐ, SCSS ๋Š” {์ฝ”๋“œ;} . SASS๋Š” ํŒŒ์ด์ฌ ์ฒ˜๋Ÿผ. ๊ทธ๋ž˜์„œ ์šฐ๋ฆฌ๋Š” CSS์™€ ์กฐ๊ธˆ ๋” ์œ ์‚ฌํ•œ SCSS๋กœ ์‚ฌ์šฉํ•œ๋‹ค. node ๋ฐฉ์‹๊ณผ ruby ๋ฐฉ์‹์ด ์žˆ๋Š”๋ฐ ์šฐ๋ฆฌ๋Š” ruby ์‚ฌ์šฉ!


2-0. ํ™˜๊ฒฝ์„ค์ •

VSC live sass extension ํ•„์š”.

//SCSS
$font-stack: Helvetica, sans-serif;
$primary-color : #333;

body {
	font: 100% $font-stack;
	color: $primary-color;
}

ํŒŒ์ผ ์ด๋ฆ„ ์•ž์— _ ๋ถ™์–ด์žˆ๋Š”๊ฑด ์ปดํŒŒ์ผํ•˜์ง€ ์•Š๊ฒ ๋‹ค๋Š” ์˜๋ฏธ.

// style.scss 
@import "variables";
@import "mixin";
@import "header";
@import "main";

// variables.scss
$white: #fff;
$dark-black: #1f1f1f;
$light-black: #313030;

๊ฐ ํŒŒ์ผ์— ๊ฐ€์„œ ์ฝ์–ด์˜ด. ๋ถ„๋ฅ˜๋ณ„๋กœ ๋‚˜๋ˆ ์„œ ์‚ฌ์šฉํ•œ๋‹ค. ์‹คํ–‰์„ ํ•˜๋ฉด style.scss๋ฅผ ์ปดํŒŒ์ผํ•˜๋Š”๋ฐ @import ๋ฌธ ๋•Œ๋ฌธ์— ๋‹ค๋ฅธ ํŒŒ์ผ์— ๊ฐ€์„œ ์ฝ์–ด์˜ค๋ฉด์„œ style.css ํŒŒ์ผ์ด ์ƒ๊ธด๋‹ค.


2-1. Nesting

๋„ˆ๋ฌด ๋งŽ์€ ์ค‘์ฒฉ์€ ํ”ผํ•˜์ž. @at-root ํ‚ค์›Œ๋“œ๋กœ ์ค‘์ฒฉ์—์„œ ๋น ์งˆ ์ˆ˜๋„ ์žˆ๋‹ค.

// ๋ถ€๋ชจ ์ž์‹ ๊ด€๊ณ„ ๋Œ€๋กœ ์ค‘์ฒฉํ•ด์„œ ์‚ฌ์šฉํ•˜๋ฉด ๋œ๋‹ค.
.info-list {
  div {
    display: flex;
    font-size: 14px;
    color: #4f4f4f;
    dt {
      font-weight: 700;
      margin-right: 7px;
    }
  }
}
.add-icon {
// ๊ฒน์น˜๋Š” ์†์„ฑ๋ช…: ๋„ ์ค‘์ฒฉํ•ด์„œ ์‚ฌ์šฉ ๊ฐ€๋Šฅ.
  background : {
    image: url("./assets/arrow-right-solid.svg");
    position: center center;
    repeat: no-repeat;
    size: 14px 14px;
    // @at-root ๋ฅผ ์“ฐ๋ฉด ์ค‘์ฒฉ์—์„œ ๋น ์ ธ๋‚˜๊ฐˆ ์ˆ˜ ์žˆ๋‹ค.
    @at-root i {
      opacity: 0.5
    }
  }
}

2-2. ampersand (&)

// &์ด ๋“ค์–ด๊ฐ„ ๊ณณ์€ ๋ถ€๋ชจ์˜ ์ด๋ฆ„์ด ๋“ค์–ด๊ฐ„๋‹ค.
.box {
    &:focus{} // ๊ฐ€์ƒ์„ ํƒ์ž
    &:hover{}
    &:active{}
    &:first-child{} 
    &:nth-child(2){}
    &::after{} // ๊ฐ€์ƒ์š”์†Œ
    &::before{} 
}
// ๊ฒน์น˜๋Š” ํด๋ž˜์Šค๋ช…์— ์“ฐ๊ฒŒ ์‘์šฉ ๊ฐ€๋Šฅ.
.box {
	// global ํ‚ค์›Œ๋“œ๋กœ ์ „์—ญ ๋ณ€์ˆ˜๋กœ ๋ณ€๊ฒฝ ๊ฐ€๋Šฅ.
	$line-normal: 1.34 !global;
  &-yellow {
    background: #ff6347;
  }
  &-red {
    background: #ffd700;
  }
  &-green {
    background: #9acd32;
  }
}

2-3. ๋ณ€์ˆ˜

2๋ฒˆ ์ด์ƒ ์‚ฌ์šฉ๋˜๊ฑฐ๋‚˜ ์ˆ˜์ • ๊ฐ€๋Šฅ์„ฑ์ด ์žˆ์„ ๋•Œ ๋ณ€์ˆ˜๋ฅผ ์ง€์ •ํ•˜์ž. ์ง€์—ญ๋ณ€์ˆ˜, ์ „์—ญ๋ณ€์ˆ˜๋กœ ์ง€์ • ๊ฐ€๋Šฅ.

$๋ณ€์ˆ˜์ด๋ฆ„: ๊ฐ’;
@debug ๋ณ€์ˆ˜ //์ด๋Ÿฐ์‹์œผ๋กœ ๊ฐ’ ํ™•์ธ ๊ฐ€๋Šฅ.

type

๐Ÿ”ข number : 1, .82, 20px, 2em,, ...
๐Ÿงต string : "./images/a.png", bold, left, uppercase, ...
๐ŸŽจ color : green, #FFF, rgba(255,0,0,.5) ๋“ฑ
๐Ÿ‘ boolean : true, false
๐Ÿ“ญ null
๐Ÿ“ฆ list : index 1๋ถ€ํ„ฐ ์‹œ์ž‘. -1 -2 -3 ์ ‘๊ทผ๋„ ๊ฐ€๋Šฅ.
๐Ÿ—บ map

๊ฐ type์—๋Š” ๋‚ด์žฅํ•จ์ˆ˜๊ฐ€ ์žˆ๋‹ค.
list

    // ๊ณต๋ฐฑ , ๋Œ€์‹  /๋กœ ๊ตฌ๋ถ„๋„ ๊ฐ€๋Šฅ. 
    $font-size : 10px 12px 16px; //ํฐํŠธ์‚ฌ์ด์ฆˆ ๋ฆฌ์ŠคํŠธ
    $image-file : photo_01, photo_02, photo_03 //์ด๋ฏธ์ง€ ํŒŒ์ผ๋ช… ๋ฆฌ์ŠคํŠธ
    //์•„๋ž˜์™€ ๊ฐ™์€ ํ˜•ํƒœ๋กœ ์‚ฌ์šฉ(์ˆœํšŒ๋„ ๊ฐ€๋Šฅ)
    list.nth(10px 12px 16px, 2); // 12px
    list.nth([line1, line2, line3], -1); // line3
    // ๋‚ด์žฅํ•จ์ˆ˜
    list.append(list,value,[separator])
    list.index(list,value)
    list.nth(list, n)

map

    $font-weights: ("regular": 400, "medium": 500, "bold": 700); //๊ธ€์ž ๊ตต๊ธฐ ๋ฆฌ์ŠคํŠธ
    map-get($font-weights, "medium"); // 500
    map-get($font-weights, "extra-bold"); // null
    //๋‚ด์žฅํ•จ์ˆ˜
    map-get(map,key)
    map-keys(map)
    map-values(map)

2-4. ์—ฐ์‚ฐ์ž

  1. ๋น„๊ต < <= > >= (์ˆซ์ž) == != (๋ชจ๋“  ํƒ€์ž…)

๋‹จ์œ„๊ฐ€ ์ผ์น˜ํ•ด์•ผ ํ•œ๋‹ค.

  1. ์—ฐ์‚ฐ + - * / % (๋ฌธ์ž์—ด + ๊ฐ€๋Šฅ)
  2. boolean not and or
    true 1 false 0 ์—ฌ๊ธฐ๋„ ๋œ๋‹ค.

2-5. Mixin

์ฝ”๋“œ ์žฌ์‚ฌ์šฉ. ์—ฌ๋Ÿฌ๋ฒˆ ์‚ฌ์šฉํ•˜๋Š” block์„ ํ•จ์ˆ˜์ฒ˜๋Ÿผ ๋บ€๋‹ค. ์—ฐ๊ด€์„ฑ์ด ๋†’์€ ๊ฒƒ ๋ผ๋ฆฌ ๋ฌถ์–ด์•ผํ•จ.

@mixin center-xy{
	display: flex;
	justify-content : center;
	align-items : center;
}
.card{
	@include center-xy; // ์ •์˜ํ•œ center-xy mixin์„ ์‚ฌ์šฉํ•˜์—ฌ ์ฝ”๋“œ ํ•œ์ค„์ด๋ฉด ๋!
}
.aside{
	@include center-xy; 
}
// ์ง„์งœ ํ•จ์ˆ˜์ฒ˜๋Ÿผ ์ธ์ž๋ฅผ ์ด์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.
@mixin image-style($ul, $size, $repeat, $positionX, $positionY) {
  background-image: url($ul);
  background-size: $size;
  background-repeat: $repeat;
  background-position: $positionX $positionY;
} 
// @content๋ฅผ ์ด์šฉํ•ด์„œ ์Šคํƒ€์ผ์„ ์ถ”๊ฐ€ํ•  ์ˆ˜๋„ ์žˆ๋‹ค.
@mixin my-font($x, $y) {
    font-size: $x * $y + px;
    @content
}
div {
    @include my-font(10, 10) {
        color: red;
    }
}
// ๊ธฐ๋ณธ๊ฐ’์„ ์ค„ ์ˆ˜ ์žˆ๋‹ค.
@mixin flex($horizontal: cetner, $vertical: center) {
    display: flex;
    justify-content: $horizontal;
    align-items: $vertical;
}
@include flex; //๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค. ๋งŒ์•ฝ ํ•˜๋‚˜๋งŒ ๋ฐ”๊พธ๊ณ  ์‹ถ์œผ๋ฉด ์ธ์ž ํ•˜๋‚˜๋งŒ ์ ์–ด์ฃผ๋ฉด ๋œ๋‹ค.

2-6. Extend

๋‹ค๋ฅธ ํด๋ž˜์Šค์—์„œ ์†์„ฑ๊ฐ’์„ ๊ฐ€์ ธ์˜ฌ ์ˆ˜ ์žˆ๋‹ค. CSS์—์„œ , ๋กœ ๋ฌถ์—ฌ์„œ ์ฒ˜๋ฆฌ๋จ. ์™„์ „ํžˆ ์ค‘๋ณต๋  ๋•Œ๋งŒ ์‚ฌ์šฉํ•œ๋‹ค.

.profile-user {
  background-image: url("../assets/user.jpg");
  background-size: cover;
	background-position : 50% 50%;
  border-radius: 50%;
	width : 50px;
	height : 50px;
}
.comment-user {
  @extend .profile-user;
}

2-7. ์„ ํƒ์ž %

// ๊ธฐ๋ณธ ์Šคํƒ€์ผ์„ ์„ ํƒ์ž๋กœ ๋งŒ๋“ค์–ด์„œ extend๋กœ ๊ฐ€์ ธ๋‹ค ์“ธ ์ˆ˜ ์žˆ๋‹ค. modal, btn(๊ธฐ๋ณธ) ๋“ฑ์— ์“ธ ์ˆ˜ ์žˆ๋‹ค.
%modal {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  border-radius: 6px;
}
.login-modal {
  @extend %modal;
  width: 272px;
  height: 405px;
  padding: 10px 20px;
}
.event-modal {
  @extend %modal;
  width: 340px;
  height: 160px;
  padding: 18px;
}

์ฒ˜์Œ ์‚ฌ์šฉํ•ด๋ณธ ์†Œ๊ฐ์€... ์ด๋ ‡๊ฒŒ ์•Œ์•„์„œ ๋ถ€๋ชจ ์ž์‹ ๊ด€๊ณ„๋กœ ๋งŒ๋“ค์–ด์ฃผ๋ฉด BEM ๋„ค์ด๋ฐ์€ ์™œ ์“ฐ๋Š”๊ฑธ๊นŒ? ์‹ถ์—ˆ๋Š”๋ฐ ๋’ค์— ์ˆ˜์—…์„ ๋“ค์–ด๋ณด๋‹ˆ๊นŒ ํ•จ์ˆ˜์ฒ˜๋Ÿผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์–ด์„œ ๊น”๋”ํ•˜๊ฒŒ ์ ์šฉํ•  ์ˆ˜ ์žˆ์„ ๊ฒƒ ๊ฐ™๋‹ค.


2-8. ์กฐ๊ฑด๋ฌธ

if - else if - else

@mixin theme-colors($light-theme: true) {
  @if $light-theme {
    background-color: $light-background;
    color: $light-text;
  } @else {
    background-color: $dark-background;
    color: $dark-text;
  }
}
.banner {
  @include theme-colors($light-theme: true);
  body.dark & { // ๋ถ€๋ชจ๋ฅผ ์žก์•„์„œ ์ฒ˜๋ฆฌ.
    @include theme-colors($light-theme: false);
  }
}

2-9. ๋ฐ˜๋ณต๋ฌธ

@for

for ($๋ณ€์ˆ˜) from (์‹œ์ž‘) through(๋){
	// ๋ฐ˜๋ณตํ•  ๋‚ด์šฉ
}
@for $i from 1 through 5 { // 5ํฌํ•จ.
  // ํ•ด๋‹น ์ˆซ์ž๋ฅผ ๋„ฃ๊ณ  ์‹ถ์€ ๊ณณ์— #{$๋ณ€์ˆ˜} ๋กœ ์จ์•ผํ•œ๋‹ค.
  // ์ˆซ์ž์— *10 ํ•˜๊ณ  ์‹ถ์œผ๋ฉด {} ์•ˆ์ชฝ์— ์จ์•ผํ•จ.
  // #{$๋ณ€์ˆ˜}์˜ ๊ฒฐ๊ณผ๋Š” ๋ฌธ์ž์—ด
  .photo-box:nth-child(#{$i}) { 
    background-image: url("../assets/phoster#{$i}.png");
  }
} 

@each

@each ($๋ณ€์ˆ˜) in (๋ฆฌ์ŠคํŠธ๋‚˜ ๋งต){ 
	// ๋ฐ˜๋ณตํ•  ๋‚ด์šฉ
}
$color-palette: #dad5d2 #3a3532 #375945 #5b8767 #a6c198 #dbdfc8;
@each $color in $color-palette {
  $i: index($color-palette, $color); //index๋Š” list์˜ ๋‚ด์žฅํ•จ์ˆ˜
  //index๋กœ ๋‹ค์‹œ ๊ฐ€์ ธ์˜ฌ ์ˆ˜ ์žˆ๋‹ค.
  .color-circle:nth-child(#{$i}) {  //#{$i} ์•ˆ๊ฐ์‹ธ๋ฉด ๊ทธ๋ƒฅ $i ๋ฌธ์ž์—ด๋กœ ์ธ์‹๋จ.
    background: $color;
    width: 20px;
    height: 20px;
    border-radius: 50%;
  }
}

@while

@while ์กฐ๊ฑด {
	// ๋ฐ˜๋ณตํ•  ๋‚ด์šฉ
}

2-10. function

return์ด ๊ผญ ์žˆ์–ด์•ผ ํ•œ๋‹ค. mixin๊ณผ ๋‹ค๋ฅธ ์ .

@function ํ•จ์ˆ˜์ด๋ฆ„($๋งค๊ฐœ๋ณ€์ˆ˜) {
	// ์‹คํ–‰ ์ฝ”๋“œ
	@return ๊ฐ’
}
@function scale-below($value, $base, $ratio: 1.618) {
  @while $value > $base {
    $value: ($value/$ratio);
  }
  @return $value;
}
$normal-font-size: 16px;
.sup {
  // mixin๊ณผ ๋‹ค๋ฅธ ์  : @include ํ‚ค์›Œ๋“œ ์—†์ด ์‚ฌ์šฉ.
  font-size: scale-below(20px, 16px); 
}

2-11. ๋‚ด์žฅํ•จ์ˆ˜

  1. ์ƒ‰์ƒ ํ•จ์ˆ˜

    lighten(color, amount) : ๋ฐ๊ธฐ ๋†’์ž„ (amount 0~100%)
    darken(color, amount)
    mix(color1, color2, weight) : ์ƒ‰ ์„ž์Œ

  1. ์ˆซ์ž ํ•จ์ˆ˜

    max(number, ..) , min(number, ..) : ์ตœ๋Œ€ ์ตœ์†Œ ๋ฐ˜ํ™˜
    parcentage(number) : %๋ฅผ ์ˆซ์ž๋กœ ๋ฐ”๊ฟ”์คŒ
    comparable(num1,num2) : ์ˆซ์ž1๊ณผ ์ˆซ์ž2๊ฐ€ ๋น„๊ต ๊ฐ€๋Šฅํ•œ์ง€๋ฅผ boolean์œผ๋กœ ๋ฐ˜ํ™˜.

  1. ๋ฌธ์ž ํ•จ์ˆ˜

    srt-insert(string,insert,index) : ๋ฌธ์ž์—ด์— ์›ํ•˜๋Š” ์œ„์น˜(index)์— ๋ฌธ์ž๋ฅผ ๋„ฃ์€ ํ›„(insert), ์ƒˆ๋กœ์šด ๋ฌธ์ž์—ด์„ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.
    str-index(string,substring) : ๋ฌธ์ž์—ด์—์„œ ํ•ด๋‹น ๋ฌธ์ž์˜ index ๊ฐ’์„ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.
    to-upper-case(string) : ๋ฌธ์ž์—ด ์ „๋ถ€๋ฅผ ๋Œ€๋ฌธ์ž๋กœ ๋ฐ”๊ฟ”์ค๋‹ˆ๋‹ค.
    to-lower-case(string) : ๋ฌธ์ž์—ด ์ „๋ถ€๋ฅผ ์†Œ๋ฌธ์ž๋กœ ๋ฐ”๊ฟ”์ค๋‹ˆ๋‹ค.

  1. ํ™•์ธ ํ•จ์ˆ˜

    unit(number) : ์ˆซ์ž์˜ ๋‹จ์œ„๋ฅผ ๋ฐ˜ํ™˜.
    unitless(number) : ๋‹จ์œ„๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๋Š”์ง€ boolean
    variable-exists(name) : ๋ณ€์ˆ˜๊ฐ€ ํ˜„์žฌ ๋ฒ”์œ„์— ์กด์žฌํ•˜๋Š”์ง€ boolean ์ด ํ•จ์ˆ˜์˜ ์ธ์ˆ˜๋Š” $์—†์ด ์‚ฌ์šฉ




3. ์กฐ์€๋‹˜ ํŠน๊ฐ•

์˜ค๋Š˜์˜ ์ง‘ ํ”„๋ก ํŠธ์—”๋“œ๋ฅผ ๋‹ด๋‹นํ•˜์‹œ๋Š” ์กฐ์€๋‹˜์˜ ํŠน๊ฐ•์ด ์žˆ์—ˆ๋‹ค.

  • ์ข‹์€ ๊ฐœ๋ฐœ์ž๋Š” ๊ฐœ๋ฐœ์€ ๊ธฐ๋ณธ์ด๊ณ , ๋ฌธ์ œ๋ฅผ ์ธ์‹ํ•˜๊ณ  (์ •์˜) ํ•ด๊ฒฐํ•˜๋Š” ๋Šฅ๋ ฅ, ์ปค๋ฎค๋‹ˆ์ผ€์ด์…˜์ด ๋’ท๋ฐ›์นจ ๋˜์–ด์•ผํ•œ๋‹ค๋Š” ์ด์•ผ๊ธฐ๋ฅผ ํ•ด์ฃผ์…จ๋‹ค.
  • ๋‚ด๊ฐ€ ์ฐจ๋ณ„์ ์„ ๊ฐ€์ง€๊ธฐ ์œ„ํ•ด์„œ๋Š” ์–ด๋–ค ๊ฒƒ์„ ์ž˜ํ•˜๋Š”์ง€๋ฅผ ์ฐพ๋Š”๊ฒŒ ์ค‘์š”ํ•˜๋‹ค.
    ํŠนํžˆ ํ† ์ด ํ”„๋กœ์ ํŠธ๋ณด๋‹ค๋Š” ์ง€๊ธˆ์ฒ˜๋Ÿผ ๊ณต๋ถ€ํ•œ ๊ฒƒ์„ ๋ธ”๋กœ๊ทธ์— ์ •๋ฆฌํ•˜๋Š” ๊ฒƒ์„ ์ค‘์ ์ ์œผ๋กœ ๋ณธ๋‹ค๊ณ  ํ•˜์…จ๋‹ค.

  • ๋˜, ๊ฐ€๊ณ  ์‹ถ์€ ํšŒ์‚ฌ๋ฅผ ์„ ๋ง์˜ ๋Œ€์ƒ์œผ๋กœ๋งŒ ๋ณด์ง€ ๋ง๊ณ , ์ฑ„์šฉ๊ณต๊ณ , ๊ธฐ์ˆ ๋ธ”๋กœ๊ทธ, ์˜คํ”ˆ์†Œ์Šค, ํ”„๋ก ํŠธ์—”๋“œ ๋ถ„์„์„ ํ•ด๋ณด์ž. ๊ทธ๋ฆฌ๊ณ  ์‹ค์ œ๋กœ ์‚ฌ์šฉํ•˜๋ฉด์„œ ์‚ฌ์ดํŠธ์— ์–ด๋–ค ์ด์Šˆ๊ฐ€ ์žˆ๋Š”์ง€, ๋‚ด๊ฐ€ ๊ฐ€์ง„ ๊ธฐ์ˆ ๋กœ ์–ด๋–ค ๊ธฐ์—ฌ๋ฅผ ํ•  ์ˆ˜ ์žˆ์„์ง€๋ฅผ ๊ผผ๊ผผํžˆ ์ƒ๊ฐํ•ด๋ณด์ž.

  • 1-3-5-10๋…„ ๋กœ๋“œ๋งต์„ ๋งŒ๋“ค๊ณ  ์–ด๋–ค ๊ฒƒ์„ ํ•ด์•ผ ์ด ํšŒ์‚ฌ์— ๊ฐˆ ์ˆ˜ ์žˆ์„์ง€๋ฅผ ๊ณ„์† ์ƒ๊ฐํ•˜๋Š” ๊ฒƒ๋„ ์ค‘์š”ํ•˜๋‹ค๊ณ  ํ•˜์…จ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์™œ ์ด ๊ธฐ์ˆ ์„ ์‚ฌ์šฉํ•˜๋Š”์ง€ ์— ๋Œ€ํ•œ ๋‹ต์„ ๋‚ด๋ฆด ์ˆ˜ ์žˆ์–ด์•ผ ํ•œ๋‹ค๊ณ  ํ•˜์…จ๋‹ค.

  • ์—ฌ๋Ÿฌ๊ฐ€์ง€ ์งˆ๋ฌธ์— ๋‹ต๋ณ€๋„ ํ•ด์ฃผ์…จ๋Š”๋ฐ, ๋ง‰์—ฐํ•œ ๋‘๋ ค์›€์ด ์กฐ๊ธˆ์€ ์‚ฌ๋ผ์ง„ ๊ฒƒ ๊ฐ™๋‹ค.




4. JS Chaellenge

interval & timeout

// ์ธ์ž : ํ•จ์ˆ˜, ๊ฐ„๊ฒฉ ms.
setInterval(sayHello, 5000); // interval : ์ผ์ • ๊ฐ„๊ฒฉ์œผ๋กœ ์ผ์–ด๋‚˜๋Š”.
setTimeout(sayHello, 5000);  // timeout : ๋”œ๋ ˆ์ด๋ฅผ ์คŒ. 

Date

const date = new Date();
date.getFullYear(); date.getMonth(); date.getDay();
date.getHours(); date.getMinutes(); date.getSeconds();
date.getMilliseconds();
// ์‹œ๊ณ„ ๋งŒ๋“ค๊ธฐ.
function getClock() {
    const date = new Date();
    // padStart(2, "0"); - ์–ด๋–ค ๋ฌธ์ž์—ด์˜ ๊ธธ์ด๊ฐ€ 2 ์ด์ƒ์ด๋ฉด ์•„๋ฌด๊ฒƒ๋„ ํ•˜์ง€ ์•Š๊ณ ,
    // 2 ๋ฏธ๋งŒ์ผ ๋•Œ ๊ธธ์ด๊ฐ€ 2๊ฐ€ ๋  ๋•Œ๊นŒ์ง€ ์•ž์— 0์„ ๋ถ™์ž„. padEnd๋„ ์žˆ๋‹ค.
    const hours = String(date.getHours()).padStart(2, "0");
    const minutes = String(date.getMinutes()).padStart(2, "0");
    const seconds = String(date.getSeconds()).padStart(2, "0");
    clock.innerText = `${hours}:${minutes}:${seconds}`;
}
// ์ฒ˜์Œ ๋“ค์–ด๊ฐ”์„๋•Œ๋Š” ์ถœ๋ ฅ์ด ๋˜์ง€ ์•Š์œผ๋ฏ€๋กœ ํ•œ๋ฒˆ์€ ์ง์ ‘ ์ถœ๋ ฅํ•ด์ค€๋‹ค.
getClock()
setInterval(getClock, 1000);

์˜ค๋Š˜์€ ๊ณผ์ œ๋กœ Date ๊ณ„์‚ฐํ•˜๋Š”๊ฑธ ์ข€ ํ–ˆ๋Š”๋ฐ, js Date timestamp ๊ธฐ์ค€์ด ms ์ธ ๊ฒƒ์„... ์žŠ๊ณ  ์—ฐ์‚ฐํ•  ๋•Œ / 1000 ์•ˆํ–ˆ๋‹ค๊ฐ€ ์กฐ๊ธˆ ํ—ค๋งธ๋‹ค. ๊ทธ๋ž˜๋„ 40๋ถ„ ์ •๋„ ๊ฑธ๋ ค์„œ ๋๋ƒˆ๋‹ค.




5. ์ž‘์€ ํšŒ๊ณ 

fact - ๋ฌด์Šจ ์ผ์ด ์žˆ์—ˆ๋Š”์ง€, ๋ญ˜ ํ–ˆ๋Š”์ง€

  • Linux, SASS ์— ๋Œ€ํ•œ ๊ฐ•์˜๋ฅผ ๋“ฃ๊ณ  ์‹ค์Šตํ•˜๊ณ 
  • ์กฐ์€๋‹˜ ํŠน๊ฐ•์„ ๋“ฃ๊ณ 
  • JS Chaellenge ๊ฐ•์˜ ๋“ฃ๊ณ  ๊ณผ์ œ๋ฅผ ์ œ์ถœํ–ˆ๋‹ค.

feeling - ๋ฌด์—‡์„ ๋Š๊ผˆ๋Š”์ง€,
finding - ์–ด๋–ค ์ธ์‚ฌ์ดํŠธ๊ฐ€ ์žˆ์—ˆ๋Š”์ง€

  • ์•„์ง๊นŒ์ง€๋Š” ๋ฆฌ๋ˆ…์Šค๊ฐ€ ์žฌ๋ฐŒ๋Š” ๋‹จ๊ณ„๋‹ค. ์–ด๋ ต์ง€ ์•Š์€ ๊ฑธ ๋ฐฐ์šฐ๋Š” ๊ฒƒ ๊ฐ™๋‹ค..
  • SASS๋Š” ํŽธํ•˜๊ธด ํ•œ๋ฐ, BEM์ด๋ž‘ ๊ฐ™์ด ์“ฐ๊ธฐ์—” ์ค‘์ฒฉ์ด ์•ˆ ์ข‹์€ ๊ฒƒ ๊ฐ™๋‹ค.
  • SASS์— ์ต์ˆ™ํ•ด์ง€๋ฉด js์—์„œ๋„ ํ•จ์ˆ˜ ๋ณ€์ˆ˜ ์ •๋ฆฌํ•˜๋Š”๋ฐ ๋„์›€์ด ๋  ๊ฒƒ ๊ฐ™๋‹ค.
  • ๊ธฐ์ˆ  ๋ธ”๋กœ๊ทธ ์šด์˜์„ ์—ด์‹ฌํžˆ ํ•˜๋ฉด์„œ ๊ผญ ์˜ฌ๋ฆฐ ๋‚ด์šฉ์„ ์ˆ™์ง€ํ•˜๊ณ  ์žˆ์–ด์•ผ๊ฒ ๋‹ค.
  • Swift ์—์„œ๋Š” Date๋ฅผ ์ง„์งœ ์–ผ๋ ˆ๋ฒŒ๋ ˆ ์ผ๋Š”๋ฐ, ๊ณต์‹ ๋ฌธ์„œ ์ฝ์œผ๋ฉด์„œ ์ •๋ณตํ•ด์•ผ๊ฒ ๋‹ค.

future action - ์•ก์…˜ ํ”Œ๋žœ์ด ์žˆ๋Š”์ง€

  • Vending Machine SASS๋กœ ์งœ๊ธฐ. -> 1125 #20 ์— ์ง์ ‘ ์งœ๋ณด์•˜๋‹ค.
  • ๋ฒจ๋กœ๊ทธ์— ์˜ฌ๋ฆฐ ๋‚ด์šฉ๋“ค ์™„๋ฒฝ ์ˆ™์ง€ํ•˜๊ธฐ.
profile
0๋…„์ฐจ iOS ๊ฐœ๋ฐœ์ž์ž…๋‹ˆ๋‹ค.

0๊ฐœ์˜ ๋Œ“๊ธ€