Github 간편 사용 설명서

목차

  1. 새로운 repository 생성
  2. 1번 이후 변경 사항이 있을 때
  3. branch, merge 사용법
  4. 충돌 시 해결 방법
  5. 풀리퀘스트 보내기

1. 새로운 repository 생성

Github 페이지에서 새로운 repository 생성 후에 로컬에서 작업한 내용을 올리기 위한 명령어 순서

명령어 입력 순서

  1. git init
  2. git add .
  3. git commit -m “commit message”
  4. git remote add origin repostory주소
  5. git push -u origin master

1번으로 현재 작업중인 폴더에서 git을 사용할 수 있도록 해주고

2번으로 폴더 내의 모든 파일(.이 모든 파일을 의미)을 git의 staging area에 추가

3번으로 커밋과 동시에 -m으로 커밋 메세지 작성

4번으로 원격 저장소, 즉 github repository 주소를 origin 이라는 이름으로 등록

5번으로 origin이라는 원격 저장소에 master 브랜치에 푸시, 이때 -u를 쓴다면 다음번 부터 git push만 입력해도 origin의 master로 푸시가 된다.

2. 1번 이후에 새로운 변경 사항이 있을 때

1번 과정 이후에 변경 사항이 있어 push를 하고 싶을 때 순서

명령어 입력 순서

  1. git add .
  2. git commit -m “commit message”
  3. git push

과정은 1번과 같으나 init과 원격 저장소 등록을 할 필요가 없다

3. branch, merge 사용법

협업을 할 때 많이 쓰는 기능 branch, merge 이름 그대로 가지를 치고, 합치는 방법이다

명령어 입력 순서

  1. git branch 브랜치이름설정
  2. git checkout 브랜치이름
  3. git add .
  4. git commit -m “commit message”
  5. git push origin 브랜치이름

1번으로 새로운 브랜치를 생성(기존 브랜치는 master)

2번으로 생성한 브랜치로 이동

3번으로 모든 파일 추가

4번으로 커밋, 메세지 작성

5번으로 origin 저장소의 새로운 브랜치에 푸시

브랜치에 푸시까지 완료 한 뒤

  1. git checkout master
  2. git merge 브랜치이름

위의 과정으로 master에 새로운 브랜치를 merge할 수 있다

4. 충돌 시 해결 방법

pull이나 push를 했을 때 원격저장소의 내용과 로컬폴더내의 내용중 같은 라인에 다른 내용이 있다면 충돌 발생

터미널 로그에 충돌이 난 파일이 표시되니 직접 수정 후 다시 pull이나 push를 실행

가장 좋은 방법은 협업자들끼리 역할을 완전히 분담해 애초에 같은 코드를 건드리지 않는 것이지만, 어쩔 수 없이 그렇게 된다면 항상 작업 전에 pull을 습관화하면 충돌을 최소한으로 줄일 수 있을 것!

5. 풀 리퀘스트 보내기

오픈소스를 만들 때 가장 많이 쓰는 방법

내가 push한 내용을 repository의 마스터 권한을 가진 사람에게 pull 해달라고 요청하는것

우선 참여하고 싶은 repository에 들어가 오른쪽 상단의 fork로 나의 repository에 복사해옴

명령어 입력 순서

  1. git clone 원본repository주소
  2. git remote add 나의repo이름설정 나의repo주소
  3. git remote -v
  4. git pull origin
  5. git checkout -b 브랜치이름(이슈)설정 origin/master
  6. git push 나의repo이름 브랜치이름

1번으로 원본 repo의 코드들을 나의 로컬환경에 클론해온다.

2번으로 포크해온 나의 repo주소를 새로운 이름으로 추가해준다.

3번으로 현재 등록되어있는 원격저장소가 어떤게 있나 확인해본다. 아마 origin이라는 이름의 원본 repo주소와 새로 설정한 이름의 나의repo주소가 있을 것이다

4번으로 혹시 모를 코드변화가 있을 수 있으니 한번 pull해서 확인해준다

5번으로 원본repo에 이슈명이나 키워드로 브랜치를 생성하고 이동한다

모든 작업 후에 6번으로 나의 repo에 푸시한다

위의 과정 이후에 github에서 fork한 나의 repo에서 방금 푸시한 브랜치명을 선택 하면 옆에 Pull request 버튼이 생기고, 절차에 따라 누르면 풀리퀘스트가 진행된다.

여기서도 충돌이 발생할 수 있으니, 코드를 보며 적절히 수정해주면 된다.

마치며

멋사 강의 준비하면서 공부했는데 기초적인 방법은 익힌 것 같아 도움이 많이 되었다!

'개발 > 기타' 카테고리의 다른 글

Coin Push 프로젝트  (0) 2018.01.29
티스토리 블로그 폰트 바꾸기  (4) 2017.10.14
[git]Git 간편 사용 설명서  (0) 2017.05.27
Git, Github 10분만에 익히기  (0) 2017.04.25
"데일리후보" 단기 프로젝트 완성  (3) 2017.04.17
HTML,CSS용 VIM(8.0)세팅하기  (0) 2017.02.21

마크업 개발 레벨 테스트

서핑중에 흥미로운 테스트가 있어 해보고, 가져왔음
나름 마크업을 할줄 안다고 생각했는데, 처참히 발렸다..

프론트를 주력으로 하고있다면 아래의 링크로 가서 한번쯤 테스트 해보면 좋을 것 같음

마크업 테스트 출처
답안 참조

위 : 작성한 답
아래 : 검색 결과 (없을 시 답이 맞은것)

HTML

  1. Doctype을 사용하지 않을 때는 무슨 일이 발생할까요?

    HTML5이전 버전으로 렌더링되어 레이아웃이 깨짐

    웹이 quirks mode로 작동해 구형 브라우저에서 동작하던 것과 같이 동작함

  2. 웹표준에 맞게 작업할 때 b, i 태그 대신 적합한 태그는 각각 무엇일까요?

    <strong>, ?

    <strong>, <em>

    <b>,<i>는 표준에 맞지 않는것을 알고 있어서 사용을 안좋아했는데 <em>을 처음 알고 표준에 맞다는 사실도 알았음

  3. block 요소와 inline 요소에 해당하는 태그들을 각각 5개씩 적어보세요.

    div, p, a, h1, nav… / span, strong, li…

    블록 : div, p, h1~h6, ul, li…
    인라인 : a, img, span, select, td…

    몇개 잘못알고있었다.

  4. blockquote 태그는 어떤 용도로 사용해야 할까요?

    인용구 사용시

  5. 인라인 스타일(style=“property:value”)을 가급적 사용하지 말아야 할 이유는 무엇일까요?

    유지보수가 힘들어짐

    구조와 표현의 분리를 위함

  6. myPhoto.jpg 파일을 img 태그로 작성해보세요.

    <img src="myPhoto.jpg" alt="myPhoto">

  7. HTML에서 id 속성을 사용하는 이유와 주의 할 점은 무엇일까요?

    태그에 고유 id를 붙여 스타일링할때, class보다 우선순위로 적용되는 부분을 주의해야함

    페이지 당 한번만 써야함 / 알고있었지만 기억이 안났음

  8. ‘TopArea’라는 클래스명이 좋지 않은 이름이라면 그 이유는 무엇일까요?

    script단과 맞춰주려면 kebab-case로 작성해야해야함

    Top이라는 방향성을 가지고 있어서, 접근성 차원에서도 방향은 의미가 없음

  9. ‘blue-box’라는 클래스명이 좋지 않은 이름이라면 그 이유는 무엇일까요?

    음..클래스 이름이 의미하는것이 분명하지 않은 것 같다.

    색상이 CSS에서 변경될 수 있음

  10. HTML5에 새롭게 추가된 aside 태그는 어떤 용도로 사용해야 할까요?

    이름그대로 사이드에있는 nav라고 이해하고 있음

    컨텐츠의 주요 내용이 아니고 부수적인 내용일 때

  11. input 태그와 항상 함께 사용해야 할 태그는 무엇일까요?

    <button>

    <label>

    꼭 필요한건지 몰랐는데 처음 알았다

  12. 모바일 웹 또는 반응형웹디자인 프로젝트에서 각 기기에 적합한 화면을 보여주기 위해 필요한 meta 태그는 무엇일까요?

    device ~~ 속성을 썼는데 정확히는 모르겠다

    <meta name="viewport" content="width=device-width">

    보니까 알것같다

CSS

  1. 화면 상에는 보이지 않으나, 스크린 리더에서 읽혀야 하는 요소에 주어야 할 스타일링을 작성해보세요.

    img alt속성, html lang속성, 태그의 name속성 밖에 모르겠다

    IR기법이라 부르며 display: nonez-index는 잘못된 방법임. text-indentz-index를 활용

    처음봄. 자세히 알아봐야 할 필요가 있음

  2. float 속성을 가진 자식을 품은 부모요소는 높이 값이 0이 되는 때가 있습니다. 이 현상을 해소하는법(clearing)을 알고 있나요?

    부모요소:after에 content: ''; display: table; clear: both 적용

  3. border-box와 content-box의 차이점은 무엇일까요?

    width, heigth 기준(box-sizing)을 border와 content로 지정

  4. position: relative는 어떤 경우에 사용 하나요?

    부모요소를 기준으로 요소를 배치하고 싶을 때

    좌표를 재정의할 때

  5. CSS Reset은 무엇이며 왜 사용할까요?

    리셋하지 않으면 기본적으로 태그가 가진 속성이 스타일링에 포함되어 레이아웃이 뭉개질 수 있음

    크로스 브라우징(브라우저마다 약간씩 차이가 있으므로)

  6. Sass, less, Stylus와 같은 CSS 프리프로세서를 사용해본적이 있나요?

    Sass 공부중

  7. id, class, inline style, !important를 우선순위 순으로 나열해보세요.

    !important, inline, id, class

  8. CSS에서 상속이 되는 속성을 2개만 꼽아보세요.

    width, height? 잘모르겠다

    color, size가 상속

  9. Sprite image 기법을 사용하는 이유는 무엇일까요?

    처음 들어봤다

    로딩 속도 감소, 서버로의 요청 횟수 최소화
    이미지를 한개의 파일로 합쳐 background-image로 적용 후에 해당 이미지 위치에 레이아웃을 배치하는 방법, 자동화 툴도 존재함

    이것역시 공부해야 함

  10. Sprite image 기법을 사용하는데 필요한 CSS 속성들을 꼽아보세요.

    역시 모른다

    background-position

  11. 점진적 향상(Progressive Enhancement)의 뜻을 설명 할 수 있나요?

    이것도 모른다..3연속 blank..

    내용이 길어 다른 링크로 첨부

  12. 웹폰트를 적용하기 위해서는 어떤 확장자의 폰트 파일들이 필요할까요?

    ttc, ttf

    ttf,eot,svg 왼쪽 두개만 있어도 대부분 지원된다고 한다

  13. 개발사 접두어(vendor prefix)를 꼭 사용해야 할 CSS 속성(property)를 2개만 꼽아보세요.

    잘 모르겠다

    앞에 webkit(크롬,사파리), moz(파폭), o(오페라), ms(IE) 등이 붙는것

  14. 반응형웹디자인의 3가지 요소를 꼽아보세요.

    grid, …

    Media Query, Flexible Image, Fluid Grid

  15. 모바일기기를 대응할 때 기준으로 삼는 해상도 사이즈는 몇이며 그 이유는 무엇인가요?

    560px..? 잘 모르겠다

    320px!

  16. :first-child와 :last-child가 지원하는 IE의 버전명을 적어보세요.

    모르겠다

    7, 9(first-child로 예외처리를 많이 한다고 함)

  17. 포토샵(또는 다른 그래픽툴)에서 이미지를 자를 때 어떤 기능을 사용하나요? (메뉴명, 단축키 등)

    ?

    cmd + t

  18. jpg, gif, png의 차이점을 설명해보세요.

    png가 화질이 짱이다(주륵)

    jpg: 손실 압축, 용량을 줄임, 가장 널리 쓰임
    png: 비손실 압축, 투명 가능
    gif: 비손실 압축, 움직이는 이미지 제작 가능

  19. 가상컨텐츠(:before, :after)는 어떤 용도로 사용할까요?

    clearfix시 사용하기도 하고, 버튼으로 토글시에 사용함

  20. 블럭요소 안의 어떤 자식 요소를 정중앙에 놓는 방법을 알고 있습니까?

    부모요소에 position: absolute, 자식요소에 position: relative; top: 50%; left: 50%; 맞나..

    그냥 flexbox 쓰는게 짱인것 같다.

후기

모르는걸 많이 배운 것 같다. CSS는 진짜 알다가도 모르겠다

Graceful Degration 과 Progressive Enhancement

포스팅 참고 출처

Graceful Degration

우아한 낮춤? 적절한 퇴보 등으로 해석되며, 최신 기술 기반 또는 기기에서 동작하는 기능을 만들고 나서 오래된 기술 기반 혹은 기기에서도 유사한 성능으로 동작하도록 조치하는것

예를들어 자바스크립트가 동작하지 않는 브라우저에서 접속 했을 때 “자바스크립트를 지원하는 브라우저를 사용하거나, 자바스크립트를 활성화해주세요”같은 메세지를 띄우는 것이다.

이는 자바스크립트를 모르는 사람에게 어리둥절을 선사하는 방법이다
이와 반대하는 개념이 Progressive Enhancement!

Progressive Enhancement

점진적 향상이라 부르며, 말 그대로 가장 기초적인 기술을 기반으로 점차 향상시키는 방법이다.

웹을 예시로 들면 HTML로 마크업 후, CSS효과를 주고, JS를 적용시키는 단계로 구성하는 것이다.

정리

요즘 시대에서 Progressive Enhancement로 웹을 구성하기는 Graceful Degration과 비교해서는 시간과 노력을 훨씬 더 필요로 하는 매우 비효율적인 일이지만,

웹을 구성함에 있어 잊으면 안되는 원칙 “Web for All”을 생각한다면 충분히 가치가 있는 방법이라고 생각한다.

Nuxt Toy Project

문서를 한번씩 훑었다고 생각되어 혼자서 웹페이지를 만들어보려 함(많이 부족한건 팩트 ㅜㅜ)

디자인을 따로 하긴 힘들어 https://startbootstrap.com/template-overviews/grayscale/ 템플릿의 레이아웃을 그대로 하드코딩해서 만들어 볼 예정

틀린 내용이 있을 수 있으니 피드백 부탁드립니다

참고 사이트

Nuxt 공식 한글 문서

Vue 공식 한글 문서

github 주소

진행과정

찾아본 내용과 찾아봐야 할 내용을 정리

2017.05.04

시작 / Nuxt starter로 프로젝트 생성 및 nav바 생성

2017.05.05

프로젝트 구조에 대해 이해할 필요를 느껴 샘플 사이트 코드 분석하려 함
백엔드는 알고있는게 루비온레일즈 밖에 없기 때문에 루비온레일즈의 프로젝트 구조와 비교해 예제 사이트 와 공식문서를 참고해 알게된 내용을 정리

  1. layouts폴더의 dafult.vue
    application.html 파일 처럼 페이지 전역에서 보여줄 기본 레이아웃을 설정하는데 사용 / 예를들어 전역에서 상단에 띄워놓을 navbar를 dafault.vue에다가 삽입
    default.vue의 <nuxt/> 태그가 <%= yield %> 같은 기능을 하는 태그 같음

  2. nuxt-link
    다른 vue파일로 이동할 때 a태그와 같은 용도로 사용되는것 같음 >> 알아보니 렌더링 되면 a태그가 된다 함

  3. middleware
    레이아웃이 렌더링되기 전에 사용할 함수를 정의할 수 있음(js파일), 사용예를 보니 vue파일에 methodscomputed에 필요한 함수를 middleware에 정의하고 import하는 식으로 사용

2017.05.06

결국 자료를 읽어보고 프로젝트 엎고 다시 시작함.
nav바 및 intro 구현

  1. assets 디렉토리
    컴파일되지 않은 LESS, SASS, JavaScript 등을 포함하는 디렉토리, 레일즈에서의 assets과 같은 역할인 듯 함. 예를들어 이미지 파일을 assets에 넣으면 nuxt는 file-loaderurl-loader를 통해 자동으로 url주소를 변경해 파일을 불러옴. webpack을 거치지 않고 static파일을 사용할 수도 있는데 둘의 정확한 차이를 모르겠음. 어떨때 assets을쓰고 어떨때 static을 쓰는지..궁금하다

  2. cover
    단순한 CSS문제 / 뷰포트에 이미지 cover 방법 찾기

2017.05.07

  1. Component화의 문제
    큰일났다. 컴포넌트를 그냥 편한대로 semantic tag에 따라서 쪼갰는데 막상 만들고나서 생각해보니까 컴포넌트는 기능별로 나눠야 한다는 부분에서 현자타임이 왔다..
    일단 쪼개놓고 완성은 해놓고 나중에 실력이 늘었을 때 보면서 반성하는 용으로 완성은 해놓고 생각해야겠다.

  2. fontawesome icon
    살짝 픽셀이 밀려서 원하는 모양이 안나오는데 해결 방법을 모색해봐야 할 듯

  3. 전역 CSS
    nuxt 가이드대로 CSS를 설정했는데 적용이 안돼서 결국 scoped로 적용하고 있는데 방법을 찾아야 함.

  4. 레이아웃 완성 / 자바스크립트 효과 넣으면 끝!

2017.05.08

  1. store
    React의 Flux처럼 Vue에서 상태관리를 위해 사용.
    대충 흐름은 파악해 놓았지만 어떻게 사용하는지는 잘 모르겠다.

  2. 자바스크립트 구현
    어떻게 어떤 디렉토리에 JS파일을 만들고 불러와야하는지 잘 모르겠다 ㅜㅜ 유튜브 강의 뒤져볼 예정

'개발 > Vue.js' 카테고리의 다른 글

Nuxt 토이 프로젝트(포트폴리오 페이지)  (0) 2017.05.08
Vue.js 정리  (0) 2017.04.25
Vue 기본자료 포스팅 완료!  (0) 2017.04.06
10. 컴포넌트  (0) 2017.04.06
9. 폼 입력 바인딩  (0) 2017.03.31
8. 이벤트 핸들링(v-on)  (0) 2017.03.31

Extended Parameter Handling(함수 파라미터 확장)

먼저 용어에 대해 알아보자
인수, 실행인자(argument) - 함수를 호출하는 입장에서 “넘겨주는 값”
인자, 매개변수(parameter) - “인자를 받은 값”
즉 함수를 선언할 때 “매개변수”를 입력해주고 “인수”로 호출한다!

1. 기본 파라미터 초기값

기존 ES5에서는 함수 내에서 파라미터 체크와 초기화를 했다.

//ES5
function plus(x, y) {
    x = x || 0;
    y = y || 0;
    return x + y;
}
console.log(plus()); //0

위에 보는것과 같이 초기값을 || 뒤에 넣어 함수 내에서 설정을 함

//ES6
function plus(x = 0, y = 0) {
    return x + y;
}
console.log(plus()); //0

ES6는 직접 파라미터에 초기값을 담아, ES5보다 직관적으로 코드를 이해할 수 있다.

2. Spread 연산자(Spread Operator)

Spread 연산자는 ...로 작성하며 배열을 다른 배열의 내부에 삽입할 때 사용한다.

//ES5
var arr = [1, 2];
console.log(arr.concat([3, 4])); // [1, 2, 3, 4]
//ES6
let arr = [1, 2];
console.log([...arr, 3, 4]); //[1, 2, 3, 4]

3. Rest 파라미터

우선 ES5와 ES6을 비교하기 전에 먼저 알아야 하는 내용들을 알아보자.

ES5에서는 인자의 개수를 알 수 없을 때 arguments 객체로 인자값을 확인한다.
이는 호출시 전달된 인수들의 정보를 배열의 형태로 담고있는 객체로 함수 내부에서 지역변수처럼 사용됨.

function check() {
    console.log(arguments)
}
check("a", "b", "c"); // { "0": "a", "1": "b", "2": "c"}

이러한 유사배열객체(array-like object)를 배열로 바꾸기 위해 call 메서드를 사용한다.

function check() {
    var arr = Array.prototype.slice.call(arguments);
    console.log(arr);
}
check(1, 2, 3); //[1, 2, 3]

위의 코드를 분석해보면 call로 내용을 받아 하나하나 잘라서(slice) 배열로 만들겠다는 코드이다.

이제 위에서 익힌 내용을 기반으로 ES5와 ES6를 비교해보자.

// ES5
function sum() {
  var arr = Array.prototype.slice.call(arguments);
  return arr.reduce(function(pre, cur) {
    return pre + cur;
  });
}
console.log(sum(1, 2, 3, 4, 5));
// ES6
function sum(...args) {
  console.log(Array.isArray(args)); // true
  return args.reduce((pre, cur) => pre + cur);
}
console.log(sum(1, 2, 3, 4, 5));

참고: Rest parameter


내용이 부족함 / 추가 예정


'개발 > ES6' 카테고리의 다른 글

6. 함수 파라미터 확장  (1) 2017.04.30
5. ES6 Class(클래스)  (0) 2017.04.28
4. ES6 Module(모듈)  (0) 2017.04.28
3. ES6 Template String(템플릿 문자열)  (0) 2017.04.28
2. ES6 Arrow function(화살표 함수)  (0) 2017.04.28
1. ES6 let과 const의 특징 알아보기  (0) 2017.04.28
  1. 2017.04.30 19:12

    비밀댓글입니다

Class(클래스)

Class란?

객체지향 언어에서 핵심이 되는 Class! 우리는 왜 클래스를 사용해야 할까?

우선 클래스를 알기 전에 객체지향에 대해 알아야 하는데 짧게 설명하긴 어렵겠지만, 얕은 지식을 뽐내보자면
말그대로 객체지향이란것은 “데이터 하나하나의 고유한 특성들을 각각의 객체로 구분해 놓고, 내용을 구성함에있어 필요한 내용 즉, 각각의 객체를 연결함으로써 구현하는 패턴” 이라고 표현할 수 있을 것 같다.
객체지향에서 코드를 조금더 효율적으로 작성하기 위해서 나온 개념인 클래스는 각각의 객체를 생성하기 이전에 반복되거나 비슷한 코드를 그룹화 할 때 사용을 한다.

이제 JavaScript에 대해 알아보자.
JavaScript는 프로토타입 기반 객체지향 언어이다.
보통 객체지향 언어라 하면 위에서 설명한 클래스 기반인 경우가 많아 다른 언어를 공부했던 사람들은 JavaScript가 낯설게 느껴질 수 있지만,
ES6에 클래스를 생성하는 방법을 추가해 기존에 알던 개념으로 보다 빠르게 이해하고 쉽게 사용할 수 있을 것이다.
(물론 나는 다른 언어를 해본적이 없는 비전공자라 이것도 어렵다ㅋㅎ)
ES6에서도 이전에 없던 새로운 방법으로 클래스를 구현하는 것이 아닌 기존에 알고 있던 함수로 구현을하며,
이는 prototype 기반 패턴의 Syntatic sugar이다.
여기서 Syntatic sugar란 컴퓨터 언어를 사람이 이해하고 쉽게 사용할 수 있도록 구성해 놓은 것이다.

사용 방법

먼저 용어에 대해 알아보면
Class(클래스) - 객체의 특성을 정의
Object(객체) - 클래스의 인스턴스
Instance(인스턴스) - 객체의 실체화
쉽게 자동차에 비유해 이해해 보면
클래스가 자동차이면, 자동차의 종류인 페라리, 람보르기니 등을 객체라 표현하고 즉, 클래스의 인스턴스를 객체라 부르는 것이다.
부디 이해가 되셨으면 좋겠다..

이제 클래스 선언 방법에 대해 알아보자

기존 ES5로 클래스를 선언할 때는 prototype을 이용해 구현을 했음

//ES5
function Box(length, width) {
    this.length = length;
    this.width = width;
}
Box.prototype.calculateArea = function() {
    return this.length * this.width;
}
var box = new Box(2, 2);
box.calculateArea(); //4

과정을 살펴보면 함수를 선언할 때 첫 글자를 대문자로 설정하는데 이를 생성자(constructor) 함수라 하며,
new 키워드로 새로운 객체를 생성할 수 있고, this를 사용해 생성자 함수로 생성될 객체의 속성을 지정한다.

그 후에 prototype 메소드를 사용해 선언한 클래스(Box)에서 새로운 객체로 확장하는데 이런 방식 때문에 자바스크립트를 프로토타입 기반 프로그래밍 언어라 부른다.
프로토타입 사용의 장점은 객체에 같은 메소드로인해 메모리를 낭비하지 않도록 해주는 것이다. 즉 자바스크립트에서 클래스와 같은 의미로 사용을 하는 것이다.
따라서 효율적으로 코드를 짜기 위해서는 새로 만드는 모든 메소드(예제 코드에서는 calculateArea)는 프로토타입 안에 넣어야 한다.

위의 코드에서 calculateArea 메소드를 생성 한 뒤에 box에 원형 객체 Box에 인자를 넣은 값을 담고
box.calculateArea()로 프로토타입에 선언한 메소드를 호출하면 정의한 연산을 거쳐 값이 출력된다.

이제 ES6에서 새로 생긴 클래스를 정의하는 방법을 알아보자

//ES6
class Box {
  constructor(length, width) {
    this.length = length;
    this.width = width;
  }
  calculateArea() {
    return this.length * this.width;
  }
}
let box = new Box(2, 2);
box.calculateArea(); // 4

다른 언어에서 클래스를 생성할 때와 비슷하게 생성을 한다.
class로 새로운 클래스를 선언을 해주고 동시에 속성과 메소드까지 정의를 해주고
호출을 할때는 마찬가지로 new키워드로 새로운 객체를 생성해 메소드를 호출해 결과값을 출력한다.

객체지향에서 핵심 내용인 클래스를 설명했는데 포스팅으로 다시 정리해보려니 까다롭다.
쓰다보니 길어졌는데 아마 완독을 한다면 충분히 도움될 내용임!

작성한 부분중 이해가 안되거나 틀린 내용이 있다면 꼭! 댓글 남겨주시면 감사하겠습니다.


'개발 > ES6' 카테고리의 다른 글

6. 함수 파라미터 확장  (1) 2017.04.30
5. ES6 Class(클래스)  (0) 2017.04.28
4. ES6 Module(모듈)  (0) 2017.04.28
3. ES6 Template String(템플릿 문자열)  (0) 2017.04.28
2. ES6 Arrow function(화살표 함수)  (0) 2017.04.28
1. ES6 let과 const의 특징 알아보기  (0) 2017.04.28

Modules(모듈)

모듈이란?

어플리케이션을 구성하는 개별적 요소를 모듈이라 부르며 (.js 확장자의 개별 파일)
기능별로 쪼개져 있어 필요한 기능을 불러다가 프로젝트에 삽입해 사용할 수 있음
이전까지는 없던 모듈을 ES6에서 추가했지만 대부분 브라우저에서 지원하지 않으므로,
Babel이나 TypeScript를 사용해 ES5로 변환해 사용하도록 한다.

ES6 모듈을 내보내고 가져올 때 export, import를 사용한다

export와 import

한가지의 모듈 내에서 선언한 내용을 다른 모듈에서 사용할 수 있게 할 때 export로 내용을 내보낸다.
export는 다음과 같이 사용한다

//num.js
export const random = Math.random();

export function double(x) {
    return 2 * x;
}

위와같이 상수, 함수, 클래스 등 원하는 내용을 export로 내보내며 일일이 써주지 않고 묶어서 내보낼 수도 있다.

const random = Math.random();

function double(x) {
    return 2 * x;
}

export { random, double };

위에서 export로 내보낸 내용을 다른 모듈에서 import로 다음과 같이 불러온다

//main.js
import { random, double } from './num.js';

만약 불러올 모듈이 많다면 한번에 불러올 수도 있다

//main.js
import * as num from './num.js';

이름을 바꿔서 import할 수도 있다.

import { random as ran, double as db } from './num.js';

모듈의 장점은 위의 방법으로 기능마다 모듈로 쪼개놓으면 유지보수의 용이함, 성능 향상 등 보다 편하게 개발할 수 있는 환경을 만들 수 있다.

'개발 > ES6' 카테고리의 다른 글

6. 함수 파라미터 확장  (1) 2017.04.30
5. ES6 Class(클래스)  (0) 2017.04.28
4. ES6 Module(모듈)  (0) 2017.04.28
3. ES6 Template String(템플릿 문자열)  (0) 2017.04.28
2. ES6 Arrow function(화살표 함수)  (0) 2017.04.28
1. ES6 let과 const의 특징 알아보기  (0) 2017.04.28

Template String(템플릿 문자열)

아주 효율적이고 새로운 방법이며 사용하기 쉬움

사용 방법

예제로 설명하는 방법이 이해가 빨라 적어 봄

  1. 변수에 템플릿 문자열 삽입 후 사용 가능

    let story = `Hello, World! I'm "24"`
    console.log(story) // Hello, World! I'm "24" 출력
    

    위와 같이 변수 뒤에 내용들을 `(grave accent)로 감싸면 공백, 따옴표 등 작성한 그대로 출력할 수 있음

  2. 템플릿 문자열 안에 변수 삽입 가능

    const a = "takeU";
    const b = 24;
    

    ES5에서는 위에서 선언한 상수 a,b를 문자열 안에 출력하려면 아래와 같이 작성했다.

    console.log("Hello " + a + " I'm " + b + " year's old")
    

    보는것과 같이 띄어쓰기도 일일이 해야하고 +로 이어줘야 하므로 번거롭다.
    하지만 ES6는 아주 편하게 할 수 있음.

    console.log(`Hello ${a} I'm ${b} year's old`)
    

    이처럼 `에 넣어주고 변수는 ${}사이에 넣어주면 위와 같은 결과를 얻을 수 있다.
    1번에서 설명한 것과 같이 공백과 따옴표도 그대로 출력이 되어 간단하게 사용할 수 있다!


'개발 > ES6' 카테고리의 다른 글

5. ES6 Class(클래스)  (0) 2017.04.28
4. ES6 Module(모듈)  (0) 2017.04.28
3. ES6 Template String(템플릿 문자열)  (0) 2017.04.28
2. ES6 Arrow function(화살표 함수)  (0) 2017.04.28
1. ES6 let과 const의 특징 알아보기  (0) 2017.04.28
0. ECMAScript, ES6란?  (0) 2017.04.28

Arrow function(화살표 함수)

이름 그대로 익명함수를 화살표 형태로 간략하게 쓸 수 있는 새로운 방법

사용 방법

  1. 매개변수가 없을 때

    //ES5
    function() {...}
    
    //ES6
    () => {...}
    
  2. 매개변수가 한 개일 때

    //ES5
    function(x) {
     return x * x
    }
    
    //ES6
    x => x * x
    x => { return x * x}
    
  3. 매개변수가 두 개 이상일 때

    //ES5
    function (x, y) {
     return x + y
    }
    
    //ES6
    (x, y) => x + y
    (x, y) => { return x + y }
    

원래 자바스크립트의 this는 함수 호출 패턴에 따라 this에 바인딩되는 객체가 달라지는데
Arrow function은 항상 자신을 포함하는 외부 scope에서 this를 받는데 이를 Lexical this라 한다.
Arrow function을 사용하면 this를 보다 직관적으로 사용할 수 있다.
(this는 언제봐도 정말 헷갈리는데 나중에 제대로 포스팅 해보려 함)

그냥 함수 표기법으로 this를 바인딩하는 방법이 있지만 따로 작성하지 않고 Arrow function을 쓰는걸로..


'개발 > ES6' 카테고리의 다른 글

5. ES6 Class(클래스)  (0) 2017.04.28
4. ES6 Module(모듈)  (0) 2017.04.28
3. ES6 Template String(템플릿 문자열)  (0) 2017.04.28
2. ES6 Arrow function(화살표 함수)  (0) 2017.04.28
1. ES6 let과 const의 특징 알아보기  (0) 2017.04.28
0. ECMAScript, ES6란?  (0) 2017.04.28

ES6 let,const 알아보기


let과 const

ES5까지는 var 키워드로 변수를 선언했었는데 이는 중복 선언이 가능하며 Function-level scope를 가짐.
ES6에서는 Block-level scope를 갖는 변수 let과 상수 const를 지원한다

let이란

간단한 예로let의 특징을 알아보자

  1. block-level scope

    let a = 111;
    {
     let a = 222;
     let b = 222;
    }
    console.log(a); // 111
    console.log(b); // b is not defined
    

    위에 설명한 것과 같이 let은 블록 레벨 스코프이므로 a는 블록 밖에서 먼저 선언된 111이란 값이 나오고,
    b는 블록 밖에서는 정의 되지 않은 변수라는 결과가 나옴.

  2. 변수 중복 선언 불가

    var a = 111;
    var a = 222;
    console.log(a); // 222
    
    let a = 111;
    let a = 222; // Error
    

    같은 레벨에서 var은 재설정이 가능하지만, let은 같은 변수를 다시 선언하면 에러가 반환

  3. 호이스팅 불가

    console.log(a); // undefined
    var a;
    
    console.log(b); // error
    let b;
    

    위의 코드와 같이 var로 변수를 선언하기 전에 참조를하면 error가 뜨지 않고 undefined가 출력된다.
    이렇게 변수 선언전에 호출을 했을때 변수가 상단으로 이동하는 것을 호이스팅(hoisting)이라고 함.
    let으로 var과 같이 호이스팅을 기대하고 코드를 작성하면 error가 뜨게된다.

const란

const는 상수를 만드는데 사용함.(이전까지 상수는 그냥 숫자인줄만 알았는데 변하지 않는 값을 상수라 한다고 함..)
const의 특징을 알아보자

  1. block-level scope
    let과 마찬가지로 constblock-level scope이다.

    {
     const a = 11;
     console.log(a); // 11
    }
    console.log(a); // error
    
  2. 재할당 불가능
    let은 변수의 재할당이 가능하지만(재선언 x), const는 불가함

    let a = 111;
    a = 222; // 222가 출력
    const b = 111;
    b = 222; // error
    
  3. 객체의 내용 변경 가능
    객체의 속성이 보호되지 않음. 즉 객체의 내용이 변경 가능함

    const a = {
     name: 'Jung',
     info: {
         phone: 123123
     }
    };
    a.name = 'Lee'; //가능
    console.log(a); // { name: 'Lee', info: { phone: 123123 }}
    

    이때 객체의 내용을 보호하고 싶다면 객체를 선언한 아래에 Object.freeze(a) 메소드를 사용하면 속성이 변하지 않고, console.log(Object.isFrozen(a))로 해당 객체에 freeze 메소드를 선언했는지 알 수 있다.
    하지만 객체안의 객체 즉 뎁스가 2인곳은 바꿀 수 있는데 이마저도 막으려면 Deep freeze를 위한 함수를 만들어야 한다.

  4. 가독성, 유지보수를 위해 사용

    if (x > 3) {
    }
    const MINBUY = 10;
    if (x > MINBUY) {
    }
    

    위의 코드와 같이 쓴다면 코드를 작성하고 나중에 보면 3이 어떤 의미로 사용했나 잊어버리거나 파악하기 힘들 수도 있기 때문에 의미를 부여해 const로 대체한다면 나중에 보고도 쉽게 파악이 가능하다.


잘못된 정보가 있다면 지적해주시면 감사하겠습니다.

앞으로 작성하는 모든 포스팅은 아래 링크를 메인으로 참고해 작성했습니다.
참고 사이트 링크


'개발 > ES6' 카테고리의 다른 글

5. ES6 Class(클래스)  (0) 2017.04.28
4. ES6 Module(모듈)  (0) 2017.04.28
3. ES6 Template String(템플릿 문자열)  (0) 2017.04.28
2. ES6 Arrow function(화살표 함수)  (0) 2017.04.28
1. ES6 let과 const의 특징 알아보기  (0) 2017.04.28
0. ECMAScript, ES6란?  (0) 2017.04.28

+ Recent posts