frontend 개발중

react hook을 쓰는 이유

최근 공부를 위해서 react class 를 중심적으로 썻는데 엄청나게 정신없고 state 관리와
this가 연달아 나와서 정리가 전혀 안되는 것을 깨달았다. 그게 이유인 것인지
16.8버전부터 react hook을 통해서 간단하게 상태를 보관 이용이 가능해진 것을 보아
나만 힘들었건 아니었던거 같다.

react useState가 편리한 이유

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

class 로 리엑트를 구성하면 위의 공식문서 코드처럼 this 사용이 빈번하다.
관련없는 코드를 건드는 일도 많아지고.. 그렇기에 useState()와 같은 함수 묶음으로 쉽게 처리하는게 직접 써보니 확실히 간단한 것을 알 수 있었다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

//useState hook과 함수형 react 사용시
 1:  import React, { useState } from 'react';
 2:
 3:  function Example() {
 4:    const [count, setCount] = useState(0);
 5:
 6:    return (
 7:      <div>
 8:        <p>You clicked {count} times</p>
 9:        <button onClick={() => setCount(count + 1)}>
10:         Click me
11:        </button>
12:      </div>
13:    );
14:  }

간단한 예시말고도 많은 수의 경우는 어떻게 쓰는지도 공부하였다.

JSON 데이터를 불러올시의 useState

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

import React, { useState } from 'react';

function App() {
  const [inputs] = useState({"Search":
  [{"Title":"Bet on Revenge","Year":"2017","imdbID":"tt4964310","Type":"movie","Poster"
  :"https://m.media-amazon.com/images/M/MV5BNzU1YzkzYzQtYTdkMS00ZWM1LThjOWQtMjg1NGIwM2I0MDc5L2ltYWdlL2ltYWdlXkEyXkFqcGdeQXVyNTkzMzMyNDA@._V1_SX300.jpg"}
  ,{"Title":"You Bet Your Life","Year":"1950–1961",
  "imdbID":"tt0042171","Type":"series","Poster":"https://m.media-amazon.com/images/M/MV5BNjQxNTllYzgtYjUwMS00NDhmLTgwYjUtMzc4NTlmZGI5YzhlXkEyXkFqcGdeQXVyNjE5MjUyOTM@._V1_SX300.jpg"}
  ,{"Title":"Bet Your Life","Year":"2004","imdbID":"tt0381980","Type":"movie","Poster":
  "https://m.media-amazon.com/images/M/MV5BOTk1MzUyMjU3NV5BMl5BanBnXkFtZTcwNzkwMTY2MQ@@._V1_SX300.jpg"},
  {"Title":"Early to Bet","Year":"1951","imdbID":"tt0043495","Type":"movie","Poster":
  "https://m.media-amazon.com/images/M/MV5BODdhOWY4YmEtY2ZkZi00NWQ4LWE0NGQtOGZlZWFiN2QxNGRhXkEyXkFqcGdeQXVyNjc2NjkzNTg@._V1_SX300.jpg"},
  {"Title":"The Top Bet","Year":"1991","imdbID":"tt0101780","Type":"movie","Poster":
  "https://m.media-amazon.com/images/M/MV5BMTUzOTczNTc4NV5BMl5BanBnXkFtZTgwMzE0ODc2MzE@._V1_SX300.jpg"},
  {"Title":"Don't Bet on Blondes","Year":"1935","imdbID":"tt0026289","Type":"movie","Poster":
  "https://m.media-amazon.com/images/M/MV5BM2I5M2ExOTctNzJkZi00OTRjLTkxMTMtODNiODE4ZGU3NWI4XkEyXkFqcGdeQXVyNjE5MjUyOTM@._V1_SX300.jpg"},
  {"Title":"Bet Raise Fold","Year":"2013","imdbID":"tt2719370","Type":"movie","Poster":
  "https://m.media-amazon.com/images/M/MV5BMTY3MDgwODE0OF5BMl5BanBnXkFtZTcwNzY0MTA4OQ@@._V1_SX300.jpg"},
  {"Title":"Deadly Bet","Year":"1992","imdbID":"tt0104066","Type":"movie","Poster":
  "https://m.media-amazon.com/images/M/MV5BMTk5MDg5OTU4MV5BMl5BanBnXkFtZTcwNDEwMDYxMQ@@._V1_SX300.jpg"},
  {"Title":"Outside Bet","Year":"2012","imdbID":"tt1772422","Type":"movie","Poster":
  "https://m.media-amazon.com/images/M/MV5BMTgzOTUxMzY3MV5BMl5BanBnXkFtZTcwNDk2MDc2Nw@@._V1_SX300.jpg"},
  {"Title":"The Big Bet","Year":"1987","imdbID":"tt0088800","Type":"movie","Poster":
  "https://m.media-amazon.com/images/M/MV5BMWY5OTc2YjEtZTVmOC00MTkwLWFiZmItMmQyYmQzZGE3OGUzXkEyXkFqcGdeQXVyMTY5Nzc4MDY@._V1_SX300.jpg"}],
  "totalResults":"350","Response":"True"});

  // 비구조화 할당을 통해 값 추출
  const arrayData= inputs.Search.map((itme,index)=>{
  return (
    <li key={index}>
    {itme.Title} {itme.Year}    
    </li>
  );
  }
  )
    return(
    <div>{ arrayData} </div>
  )

}
  
export default App;

json 데이터 파싱하는 것에 시간이 엄청 걸린다는 것을 생각한다면 엄청 깔끔하게 결과를 UI에 표시할수 있게 되었다.

promise

좀 직관적으로 설명해보고자 블로그로 정리하고 있다.

추가적인 내용이 있다면 한번씩 수정할 예정

중요한 점은 왜 프로미스를 써야하는가란 점이다.
react를 공부하다보면 비동기를 처리해야하는 곳이 점차 많아진다.
비동기를 좀 더 명확하게 보관하고 반환하는 작업을 하는 javascript function이 바로 Promise라는 것을 알고 강의를 찾아서 들었다.

콜백지옥 처리와 비동기 함수를 원하는 때에 쓸 수 있다는 것은 리엑트 개발을 해보니 중요한 것을 알게 되었다. 예를 들어 setstate 같은 기능이 비동기이기 때문에 promise를 이용하거나 async 를 써보는 방식도 가능하지 않을까? 아직 확실하지 않지만 가능성이 있어보인다. 그렇게 쓴다면 원하는 데이터를 보다 동적으로 쓰기위해서라도 promise 개념은 정확하게 숙지할 필요가 있어보인다

밑의 내용은 공식문서 내용을 내 방식으로 정리해보았다.

1. Promise 는 객체이다
2. new 키워드와 생성자를 필요로 한다
3. 결과 값으로 성공과 실패를 반환한다
4. 성공값은 resolve 로 반환되면 비동기 작업이 성공적일 경우에만 반환된다
5. 실패값은 reject 로 반환되며 작업이 실패하여 보통 오류값이 있을경우에 반환된다

1
2
3
4
5
6
7
8
9
10
11
12
13
14

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('foo');
  }, 300);
});

promise1.then((value) => {
  console.log(value);
  // expected output: "foo"
});

console.log(promise1);
// output: [object Promise]

Promise.all(iterable)

한번에 많은 양의 비동기 처리를 담당할때나 여러 프로미스의 결과를 집계할 때 유용하게 사용가능하다.

1
2
3
4
5
6
7
8
9
10

const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'foo');
});

Promise.all([promise1, promise2, promise3]).then((values) => {
  console.log(values);
});
// expected output: Array [3, 42, "foo"]

순회 가능한 객체(promise1,promise2,promise3)에 프로미스가 아닌 값이 들어있다면 무시하지만, 이행 시 결과 배열에는 포함합니다.

Promise.allSettled()

주어진 모든 프로미스가 실행되는 것은 Promise.all과 같지만
각 프로미스에 대한 결과값도 확인해준다.

1. 대기(pending): 이행하지도, 거부하지도 않은 초기 상태.
2. 이행(fulfilled): 연산이 성공적으로 완료됨.
3. 거부(rejected): 연산이 실패함.

위의 두개의 all기능과 allSettled기능은 비동기데이터or이벤트를 한번에 실행할때 좋은 방식이라고 생각한다. 실전에 사용한다면 한번 더 여기에 추가할 예정이다

javascript를 공부하다보면 this의 정의가 다른 언어와 생각보다 다르다라는 것을 느껴 여러 강의를 찾아보고 내용을 정리하고 다시한번 공식문서를 통해서 내용을 정리하였다.

이 부분이 왜 중요한가를 다시 느낀 것은 역시 리엑트를 공부하면서 느꼈다.
this.state
this.setstate 와 같은 방식의 this사용부터 arrow function에서 this를
사용하고 props 방식도 결국 this를 통해서 사용하기에 정리를 해보고자 한다.

arrow function 이전의 this

바인딩 되지 않은 this
화살표 함수가 나오기 전까지의 javascript는,
새로운 함수는, 어떻게 그 함수가 호출되는지에 따라 자신의 this 값을 정의

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

function Person() {
  // Person() 생성자는 `this`를 자신의 인스턴스로 정의.
  this.age = 0;

  setInterval(function growUp() {
    // 비엄격 모드에서, growUp() 함수는 `this`를
    // 전역 객체로 정의하고, 이는 Person() 생성자에
    // 정의된 `this`와 다름.
    this.age++;
  }, 1000);
}

var p = new Person();

function Person() {
  var that = this;
  that.age = 0;

  setInterval(function growUp() {
    // 콜백은  `that` 변수를 참조하고 이것은 값이 기대한 객체이다.
    that.age++;
  }, 1000);
}

arrow function 시 this(call 또는 apply)

화살표 함수는 자신의 this가 없다. 대신 화살표 함수를 둘러싸는 렉시컬 범위(lexical scope)의 this가 사용된다. 화살표 함수는 일반 변수 조회 규칙(normal variable lookup rules)을 따르며,현재 범위에서 존재하지 않는 this를 찾을 때, 화살표 함수는 바로 바깥 범위에서 this를 찾는것으로 검색을 끝내게 된다.

다음 코드에서 setInterval에 전달 된 함수 내부의 this는 setInterval을 포함한 function의 this와 동일한 값을 화살표 함수에서는 this가 바인딩되지 않았기 때문에, call() 또는 apply() 메서드는 인자만 전달 할 수 있습니다. this는 무시됩니다. (this.base==base)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

var adder = {
  base : 1,

  add : function(a) {
    var f = v => v + this.base;
    return f(a);
  },

  addThruCall: function(a) {
    var f = v => v + this.base;
    var b = {
      base : 2
    };

    return f.call(b, a);
  }
};

console.log(adder.add(1));         // 2
console.log(adder.addThruCall(1)); // 2

바인딩 되지 않은 객체에서의 this

화살표 함수는 arguments 객체를 바인드 하지 않습니다. 때문에, arguments는 그저 둘러싸는 범위(scope) 내 이름에 대한 참조입니다.

1
2
3
4
5
6
7
8
9
10
11
12

var arguments = [1, 2, 3];
var arr = () => arguments[0];

arr(); // 1

function foo(n) {
  var f = () => arguments[0] + n; 
  // foo's implicit arguments binding. arguments[0] is n
  return f();
}

foo(1); // 2

화살표 함수는 자신의 arguments 객체가 없지만, 대부분의 경우에 나머지 매개변수를 이용하면 됩니다

1
2
3
4
5
6

function foo(n) {
  var f = (...args) => args[0] + n;
  return f(2);
}

foo(1); // 3

리엑트에서 this의 사용방식에 대해서도 좀 더 정리를 해볼 생각이다.공식문서를 통해서 한번더 테스트 해보고 공부를 좀 더 해보고자 한다.

Javascript - Null >= 0 is true

자바스크립트 기초 공부를 다시 듣던 중 흥미있는 것을 발견했다
Null==0 false 인데 왜 Null >= 0 은 왜 true일까

스펙 문서에 따르면, >, < 비교 연산자는 Abstract Relational Comparison Algorithm이라는 알고리즘을 사용하여 구문의 true/false를 판정한다.
https://interglacial.com/javascript_spec/a-11.html#a-11.8.5

전체적인 내용은 빼고 결과만 살펴보자

1. x가 null이고 y가 undefined면, true를 리턴.
2. x가 undefined이고 y가 null면, true를 리턴.
3. Type(x)가 Number이고 Type(y)가 String이면, x == ToNumber(y)의 결과를 리턴.
4. Type(x)가 String이고 Type(y)가 Number이면, ToNumber(x) == y의 결과를 리턴
5. Type(x)가 Boolean이면, ToNumber(x) == y의 결과를 리턴.
6. Type(y)가 Boolean이면, x == ToNumber(y)의 결과를 리턴.
7. Type(x)가 String 또는 Number이고, Type(y)가 Object이면, x == ToPrimitive(y)의 결과를 리턴.
8. Type(x)가 Object이고, Type(y)가 String 또는 Number이면, ToPrimitive(x)== y의 결과를 리턴.
9. false를 리턴.
   ToPrimitive은 형변환 함수이다
   https://ko.javascript.info/object-toprimitive

ToPrimitive를 사용하면 숫자형이나 문자형으로의 형 변환을 원하는 대로 조절할 수 있습니다.

null과 0은 다른 타입이므로 2~8번을 살펴보면 모두 해당하지 않고, 9번 false이다
따라서

1
2
3

null == 0; // false
null !==0 ; //true
null >= 0; // true

수학적으로, 두 수 x(null)와 y(0)가 있을 때, x(null)가 y(0) 보다 작지 않다 면, x(null)는 y(0) 보다 반드시 크거나 같다 . 그렇기에

1

null >= 0; // true

라고 할 수 있다.

웹 프론트엔드의 기본이라 불리는 DOM을 다시한번 정리해보고자 한다. 이것을 보고 왜 react가 버츄얼 돔을 쓰는지 DOM이란것을 통해서 어떤식으로 HTML을 다루는지 한번 더 공부해보고자 정리하였다.

DOM이란 무엇인가

웹 서비스 개발은 브라우저와 밀접한 관련이 있습니다. 모든 서비스는 사실 웹 브라우저를 바탕으로 실행되며 이 브라우저와 관련된 객체들의 집합을 브라우저 객체 모델(BOM: Browser Object Model)이라고 부릅니다.
이 브라우저 객체 모델(BOM)을 이용해서 Browser와 관련된 기능들을 구성합니다. 브라우저 객체 모델(BOM)의 최상위 객체는 window라는 객체입니다. DOM은 이 window 객체의 하위 객체이기도 합니다.
DOM은 이 BOM 중의 하나이며 Document Object Model의 약어입니다. 또한 객체로 문서 구조를 표현하는 방법으로 XML이나 HTML로 작성합니다.

웹 브라우저는 DOM을 활용하여 객체에 자바스크립트와 CSS를 사용합니다. DOM은 트리 형태라서 특정 노드를 찾거나 수정하거나 제거하거나 원하는 곳에 삽입할 수 있습니다.

DOM model 형태의 html 에서 문제점은 바로 동적 UI에 최적화되어 있지 않다는 것입니다. HTML은 자체적으로는 정적입니다. 자바스크립트와 같은 언어로 동적으로 활용할 수 있게되어 보다 보기 좋은 사이트들을 만들 수 있게 되었습니다. javascript 에서는 밑의 방식으로 사용할 수 있다.

1
2
3
4
5
6
7

var paragraphs = document.getElementsByTagName("P");

// paragraphs[0] is the first <p> element
// paragraphs[1] is the second <p> element, etc.
alert(paragraphs[0].nodeName);
// p tag serch => p tag 0번째의 node네임을 alert

javascript 이외에도 DOM 은 여러 언어로도 표현 가능하다

1
2
3
4

import xml.dom.minidom as m
doc = m.parse("C:\\Projects\\Py\\chap1.xml");
doc.nodeName # DOM property of document object;
p_list = doc.getElementsByTagName("para");

현업에서 개발단계 릴리즈 전 단계에서 어떤식으로 개발을 진행하는지 git flow로 좀 더 명확하게 알게 되었다. 단계를 보면 기술 출시전 개발 단계에서 어떤 식으로 일을 진행하는지 툴을 통해 명확하게 파악되었고 실질적으로 git 을 사용하면서 협업의 기술을 쌓아올릴수 있을 것 같았다.

Git-flow

Git-flow에는 5가지 종류의 브랜치가 존재합니다.

• main : 제품으로 출시될 수 있는 브랜치(master)
• develop : 다음 출시 버전을 개발하는 브랜치
• feature : 기능을 개발하는 브랜치
• release : 이번 출시 버전을 준비하는 브랜치
• hotfix : 출시 버전에서 발생한 버그를 수정 하는 브랜치

develop branch

main에서 가장 가까운 branch입니다.
develop branch에서는 상시로 버그를 수정한 커밋들이 추가됩니다. 새로운 기능 추가 작업이 있는 경우 develop branch에서 feature 브랜치를 생성합니다.

feature branch

feature branch에서는 언제나 develop branch에서부터 시작하게 됩니다. 기능 추가 작업이 완료되었다면 >feature branch는 develop branch로 merge 됩니다.

release branch

develop에 이번 버전에 포함되는 모든 기능이 merge 되었다면 QA를 하기 위해 develop branch에서부터 >release 브랜치를 생성합니다. 여러 상황에 따라 발생하는 버그들은 release branch에서 수정됩니다.
testing을 무사히 통과했다면 release branch를 main과 develop branch로 merge 합니다. 마지막으로 출시된 main branch에서 버전 태그를 추가합니다.

hotfix branch

긴급 상황이 발생할 경우 main branch에 바로 출시할 수 있도록 작업하는 branch 입니다

전체적으로 필요할 때마다 보기위해 커멘드를 정리해보았다. 깃 커멘드가 추가되는 것도 포함해서 깃 관련 정보를 계속 업데이트 할 예정이다.

• 별도 사양 git add . 과 git reset은 되도록 사용하지 말것
• 개별 파일 add 에 익숙해질 것
• reset 말고 git revert 로 되돌리는 것도 커밋을 통해 확인하고 되돌리자

git commands

1
2
3
4

git config
사용예시 : git config –global user.name “[name]”  

Usage: git config –global user.email “[email address]”  

이 명령은 커밋에 사용할 작성자 이름과 전자 메일 주소를 각각 설정합니다.
git 초기 설정에 사용합니다

git init

1

Usage: git init [repository name]

이 명령은 새 리포지토리를 시작하는 데 사용됩니다.

git clone

1

Usage: git clone [url]  

이 명령은 기존 URL에서 리포지토리를 가져오는 데 사용됩니다.

git add

1
2
3
4
5
6
7
8
9
10

Usage: git add [file]  

이 명령은 준비 영역(staging area)에 파일을 추가합니다.


Usage: git add *  

이 명령은 준비 영역(staging area)에 하나 이상을 추가합니다.

git commit

1
2
3
4
5
6
7
8

Usage: git commit -m “[ Type in the commit message]”  

이 명령은 파일을 버전 기록에 영구적으로 기록하거나 스냅샷합니다.


Usage: git commit -a  

이 명령은 git add 명령으로 추가한 모든 파일을 커밋하고 이후 변경된 파일도 커밋합니다.

git diff

1
2
3
4
5
6
7
8
9
10
11
12

Usage: git diff  

이 명령은 아직 준비되지 않은 파일 차이를 표시합니다.


Usage: git diff –staged 

이 명령은 준비 영역에 있는 파일과 존재하는 최신 버전의 차이를 표시합니다.

Usage: git diff [first branch] [second branch]  

이 명령은 언급된 두 분기(branch) 간의 차이를 표시합니다.

git reset

1
2
3
4
5
6
7
8
9
10
11

Usage: git reset [file]  

이 명령은 파일을 스테이징하지만 파일 내용은 보존합니다.

Usage: git reset [commit]  

이 명령은 지정된 커밋 후 모든 커밋을 취소하고 변경 내용을 로컬로 보존합니다.

Usage: git reset –hard [commit]  

이 명령은 모든 기록을 삭제하고 지정된 커밋으로 돌아갑니다.

git status

1
2
3

Usage: git status  

이 명령은 커밋해야 하는 모든 파일을 나열합니다.

git rm

1
2
3

Usage: git rm [file]  

이 명령은 작업 디렉토리에서 파일을 삭제하고 삭제를 준비합니다.

git log

1
2
3
4
5
6
7
8

Usage: git log  

이 명령은 현재 분기의 버전 기록을 나열하는 데 사용됩니다.


Usage: git log –follow[file]  

이 명령은 개별 파일 이름 변경을 포함하여 파일의 버전 기록을 나열합니다.

git show

1
2
3

Usage: git show [commit]  

이 명령은 지정된 커밋의 메타데이터 및 내용 변경을 표시합니다.

git tag

1
2
3

Usage: git tag [commitID]  

이 명령은 지정된 커밋에 태그를 지정하는 데 사용됩니다.

git branch

1
2
3
4
5
6
7
8
9
10
11

Usage: git branch  

이 명령은 현재 리포지토리의 모든 로컬 분기를 나열합니다.

Usage: git branch [branch name]  

이 명령은 새 분기를 만듭니다.

Usage: git branch -d [branch name]  

이 명령은 피쳐 분기를 삭제합니다.

git checkout

1
2
3
4
5
6
7

Usage: git checkout [branch name]  

이 명령은 한 분기(branch)에서 다른 분기로 전환하는 데 사용됩니다.

Usage: git checkout -b [branch name]  

이 명령은 새 분기를 만들고 분기로 전환합니다.

git merge

1
2
3

Usage: git merge [branch name]  

이 명령은 지정된 분기의 기록을 현재 분기에 병합합니다.

git remote

1
2
3

Usage: git remote add [variable name] [Remote Server Link]  

이 명령은 로컬 리포지토리를 원격 서버에 연결하는 데 사용됩니다.

git push

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

Usage: git push [variable name] master  

이 명령은 마스터 분기의 커밋된 변경 내용을 원격 리포지토리로 보냅니다.

Usage: git push [variable name] [branch]  

이 명령은 원격 리포지토리로 분기 커밋을 보냅니다.

Usage: git push –all [variable name]  

이 명령은 모든 분기를 원격 리포지토리로 푸시합니다.

Usage: git push [variable name] :[branch name]  

이 명령은 원격 저장소의 분기를 삭제합니다.

Usage: git push -u [variable name] [branch]  

이 명령은 원격 리포지토리에 새로운 분기를 만들고 커밋된 변경 내용을 원격 리포지토리에 보냅니다

git pull

1
2
3

Usage: git pull [Repository Link]  

이 명령은 원격 서버의 변경 내용을 작업 디렉터리로 가져오고 병합합니다.

git stash

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Usage: git stash save  

이 명령은 수정된 추적된 모든 파일을 임시로 저장합니다.

Usage: git stash pop  

이 명령은 가장 최근에 저장된 파일을 복원합니다.

Usage: git stash list  

이 명령은 모든 저장된 변경 리스트를 나열합니다.

Usage: git stash drop  

이 명령은 가장 최근에 저장된 변경 내용을 삭제합니다.

scss for(반복문)

css 도 javascript 와 같이 for문을 이용하여 웹상에서 이용가능하다.

1
2
3
4
5
6

@for $i from 1 through 10{
  .box:nth-child(#{$i}){
  //변수를 감싸줄때는 #{}으로 감싸주고 표현할 필요가 있다
    width:100px-#{$i}px;
  }
}

위와 같은 함수는 여러번 반복되지만 조금씩 다른 표현이 필요할 때 사용할 수 있다.
조금씩 작아지거나 순차적으로 커지는 css 표현에서도 사용가능하며 짝수 홀수에 따라 나눠질때도 표현이
가능하다고 생각한다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

///위의 for문 실행시에 표시되는 css
.box:nth-child(1) {
  width: 100px- 1px;
}

.box:nth-child(2) {
  width: 100px- 2px;
}

.box:nth-child(3) {
  width: 100px- 3px;
}

.box:nth-child(4) {
  width: 100px- 4px;
}

.box:nth-child(5) {
  width: 100px- 5px;
}

.box:nth-child(6) {
  width: 100px- 6px;
}

.box:nth-child(7) {
  width: 100px- 7px;
}

.box:nth-child(8) {
  width: 100px- 8px;
}

.box:nth-child(9) {
  width: 100px- 9px;
}

.box:nth-child(10) {
  width: 100px- 10px;
}

SCSS MIXINS 재활용

css를 변수화 혹은 반복할수 있는 점이 scss의 최고의 장점이라고 생각합니다
혹은 함수화를 통해서 무궁무진하게 재활용하여 편리하게 웹사이트를 구축하는데 도움이 되기에 정리를 해보고 있습니다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

@mixin center 
{
   display: flex;
   justify-content: center;
   align-items:center;
    
}
// 자주 쓰는 css 형식을 변수화

@mixin box($size:100px){
    width: $size;
    height: $size;
    background-color: tomato;
}
// 자주 쓰는 css 형식을 함수화(변수 2개도 사용가능)

.container{
    @include center;
    .item{
        @include box(100px);
    }
}

위의 코드를 풀면

1
2
3
4
5
6
7
8
9
10
11

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.container .item {
  width: 100px;
  height: 100px;
  background-color: tomato;
}
//사이즈가 지정되지 않았기때문에 기본사이즈인 100px가 들어가게 된다.

코드수가 많아질수록 위와 같은 변수화와 함수화는 코드 압축에 큰 도움이 된다고 할수 있습니다.
사이트 프로젝트 만들때 자주 쓸 예정입니다

지난번 정리한 내용에 클래스가 만들어졌을때의 순서를 한번 정리해보았다.

클래스가 하는일

class User {…} 문법 구조가 진짜 하는 일의 순서를

1. User라는 이름을 가진 함수생성.
2. 생성자 메서드 constructor에서 작성
3. 생성자 메서드가 없으면 본문이 비워진 채로 함수가 만들어짐
4. getFullName 같은 클래스 내에서 정의한 메서드를 User.prototype에 저장
5. new User를 호출해 객체를 만들고, 객체의 메서드를 호출
6. 함수의 prototype 프로퍼티에서 설명한 것처럼 메서드를 prototype 프로퍼티를 통해 가져옵니다.
   이 과정이 있기 때문에 객체에서 클래스 메서드에 접근할 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

class User {
  constructor(name) { this.name = name; }
    getFullName(){
        return `${this.firstName} ${this.lastName}` 
    }
}

// 클래스는 함수입니다.
alert(typeof User); // function

// 정확히는 생성자 메서드와 동일합니다.
alert(User === User.prototype.constructor); // true

// 클래스 내부에서 정의한 메서드는 User.prototype에 저장됩니다.
alert(User.prototype.sayHi); // alert(this.name);

// 현재 프로토타입에는 메서드가 두 개입니다.
alert(Object.getOwnPropertyNames(User.prototype)); // constructor, getFullName