https://nodejs.org/ko/ 이 사이트를 들어가서 Node.js를 직접 설치가 가능합니다.

인스톨 파일을 설치 한 이후 실행을 시키면 다음과 같이 진행합니다.

  1. Next를 눌러 설치를 진행합니다.

  1. 라이센스 동의 여부를 묻습니다. 동의함을 체크 한 이후 Next를 눌러 진행합니다.

  1. 설치 경로를 설정하는 곳입니다. Default 경로로 설치할 예정이니 바꾸지 않고 Next를 눌러 진행합니다.

  1. Default로 설치 하는 것을 수정할 수 있는 곳입니다. (Default값은 모두 설치입니다.)
    따로 설정을 하실 경우가 아닌 경우 Default 로 설정 하고 Next를 눌러 진행합니다.

  1. Chocolatey, Python2, VS Build Tools 등도 같이 설치 할 것인지에 대한 여부입니다.
    (배치파일)

  1. 실질적으로 이제 Install을 할 것인지에 대한 곳입니다. Install 을 눌러 설치를 진행합니다

  1. 설치가 완료 되었음을 알려주는 창입니다. Finish를 눌러 종료한 이후 Node.js를 실행 합니다.

  1. 윈도우 검색에서 Node.js 를 검색하여 확인합니다

'Node.js' 카테고리의 다른 글

[Node] NVM(Node Version Manager) 이란 ?  (0) 2021.09.02
[Node] NVM-windows 설치하기  (0) 2021.09.01

순서

  1. Fork
  2. clone, remote 설정
  3. branch 생성
  4. 수정 작업 후 add, commit, push
  5. Pull Request 생성

1. Fork

  1. 타겟의 프로젝트 Repository 를 자신의 Repository로 Fork합니다
  2. 어느 계정에 Fork를 할 것인지 선택합니다.

  1. Fork를 완료 한 경우 아래와 사진과 같이 선택한 계정에 새로운 Repository에 저장됩니다.

forked from 으로 어디서 fork 해 왔는지에 대해서도 같이 저장이 됩니다.

2. Clone, remote 설정

  1. 자신의 PC에 Fork한 Repository를 Clone합니다.
$ cd [clone 받을 경로]
$ git clone [복사할 URL]

git에 있는 Repository를 본인 로컬저장소에 원격저장소를 추가하는 작업입니다.

  • cd [clone 받을 경로] - 본인 PC에 로컬저장소로 사용할 경로로 들어갑니다.
  • git clone [복사할 URL] - 복사할 경로는 ① 혹은 ② 둘중 하나의 주소를 복사합니다.

  1. Clone 했던 원본 프로젝트 저장소(Origin)을 원격 저장소(Github)로 연결하기(Remote)
$ cd [Clone을 받은 디렉토리]
$ git remote -v
$ git remote add [별명] [복사한 URL]
  • git remote -v 원격 저장소 설정 현황을 확인합니다.
  • git remote add [별명] [복사한 URL] 원본 프로젝트 저장소를 원격 저장소로 추가합니다.

fork, clone한 프로젝트는 origin이라는 별명 default 값으로 되어 있습니다. 따로 설정 하지 않아도 origin으로 clone한 url과 연결되어 있습니다. 따로 추가해야 할 경우에만 사용하면 됩니다. 위의 예시는 같은 레파지토리에 다른 이름으로 추가한 모습입니다.

3. branch 생성

$ git checkout -b devChaser
// $ git branch
// $ git checkout

  • git checkout -b 브렌치 생성과 체크아웃을 동시에 작업해줍니다.

4. 수정 작업 후 add, commit, push 하기

git add [filename]
git commit -m "Commant"
git push origin [branchName]

  1. 수정이된 파일을 git add 명령어를 통해 추적합니다. [ " . " 은 모든 파일을 추적하겠다는 의미 입니다.]
  2. git commit -m "Comment" 를 통해 push하기 전 commit 을 작성합니다.
  3. git push origin [branchName] 을 통해 자신의 계정 github Repository에 push 합니다.

5. Pull Request 생성하기

이는 따로 명령어를 통해 작업하는 것이 아닌 github를 통해 작업합니다.

① 혹은 ②을 눌러 작성이 가능합니다.

작성하기를 눌렀을 경우 본인이 마지막으로 남긴 commit이 title에 작성이 되어 있는것을 확인 할 수 있습니다.

내용을 작성 한 이후 Create pull request 를 눌러 pull request를 작성합니다.

템플릿 문자열

템플릿 문자열은 ES6 (ES2015)에서 문자열을 템플릿 처럼 쓸 수 있게 만든 기능입니다.

ES6 이전에는 문자열에 함수를 작성 할 때는 다음과 같이 작성 했습니다.

const porfile = {
 name : "chaser";
 job : "student"
}
let str = profile.name + "의 직업은 " + profile.job + "입니다.";

여러 변수를 합쳐 문자열을 만들려니 띄어쓰기도 고려해야하고, + 와 따옴표로 인해 종종 오타를 범할 수 있습니다.(경험담)

이를 템플릿 문자열을 사용 할 경우 다음과 같이 작성 할 수 있습니다.

const porfile = {
 name : "chaser";
 job : "student"
}
let str = `${profile.name}의 직업은 ${profile.job}입니다.`;

+와 따옴표만 사라졌는데 개인적으로는 코드의 가독성이 확실히 좋다 생각이 듭니다.

여러 줄 문자열

const multiline1 = "line1\nline2";
const multiline2 = `line1
line2
line3`;

//Error
const multiline3 = "line1\
line2";
                         //    multiline1       multiline2
console.log(multiline1)  // return line1     return line1 
console.log(multiline2)  //        line2            line2 
                                                 //                         line3 
console.log(multiline3)  // return line1line2

줄 바꿈 특수문자 (\n) 를 사용 할 경우와 백틱( ` )을 사용 하면 정상적으로 new line에 글을 작성 할 수 있습니다.
코드의 결과 문자열에 줄바꿈 문자가 들어가지만 , 원하지 않는 공백이 line2 와 line3에 들어 간 것을 확인 할 수 있습니다.

책에서는 여러 줄 문자열을 권하지 않습니다. 여러 줄 문자열을 쓰려면 코드를 읽기 쉽게 만드는 들여쓰기를 포기하거나, 결과 문자열에 원하지 않는 공백이 들어가거나 둘중 하나 입니다.

소스 코드에서 문자열을 여러 행에 나눠 써야 할 때 필자는 보통 문자열 병합을 사용합니다.

const multiline = "line1\n" + 
   "line2\n" +
   "line3";

숫자와 문자열

const result1 = 3 + '30'; // 3이 문자열 바뀝니다. return '330'
const result2 = 3 * '30'; // '30' 이 숫자로 바뀝니다 return 90

문자열 병합 ( + ) 을 사용 할 경우에는 앞의 숫자가 문자열로 변경이 되고 result1 의 값은 '330' 이 됩니다.
(Number → String) + (String)

곱셈 ( * ) 을 할 경우 뒤의 문자열이 숫자로 변경 되며 result2 의 값은 90이 됩니다.
(Number) * (String → Number)

HTML & CSS & JS 의 차이

HTML(Hyper Text Markup Language)

  • 웹의 구조를 담당하는 언어입니다.
  • 웹 문서를 만들기 위하여 사용하는 기본적인 웹 언어의 한 종류입니다.
  • 웹의 틀과 구조의 골격을 만들어 주는 역활입니다.

CSS(Cascading Style Sheets)

  • 웹의 시각적인 표현을 담당하는 언어입니다.
  • 마크업 언어(HTML, XML, XHML 등)가 실제 표시되는 방법(색상, 레이아웃, 크기, 폰트 등)을 지정하여 콘텐츠 구조를 꾸며주는 정적 언어 입니다.

JS(JavaScript)

  • 동적 처리를 담당합니다.
  • 브라우저 자체에서 내장된 해석기능을 이용한 클라이언트 기반의 일종의 스크립트 언어입니다.

1줄 요약

  • HTML로 구조의 골격을 만들고 CSS로 웹 페이지의 옷을 입히고, JS로 기능을 추가합니다.HTML(Hyper Text Markup Language)

HTML 요소는 아래의 그림과 같이 시작태그로 시작해서 종료 태그로 구성되어 있습니다.

사진 출처 : http://tcpschool.com/html/html_intro_elementStructure

  • 요소 : 시작 태그부터 종료 태그까지 모두 포함한 구성입니다.
  • 태그 : 해당 부분이 어떤 요소인지를 '태그'라는 표시를 붙여 나타냅니다.
    • 태그 이름 : 태그의 이름입니다. ex) "p" , "span" , "div"
    • 속성명 : 요소의 속성을 정의합니다. ex) "class" , "href"
    • 속성값 : 속성명의 속성값을 정의합니다.

자주사용하는 HTML 요소

W3C 혹은 MDN 을 참조 하시거나 한눈에 보는 HTML요소(Elements & Attribues) 총정리 사이트를 참조 해주세요.

DOM(Document Object Model)이란 ?

DOM은 W3C의 표준 객체 모델이며, MDN에서는 다음과 같이 정의 합니다.

문서 객체 모델(Document Object Model)은 HTML, XML 문서의 프로그래밍 interface 이다. 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다.

DOM 트리 구조 (Tree)

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>hello title</title>
    </head>
    <body>
        <h1 name="title">hello world-h1</h1>
        <a href="www.google.com">Google</a>
        <div>
            <span>hello world-span</span>   
        </div>
    **</body>
</html>

위의 그림의 구조를 코드로 나타냈을때는 그림 밑에 있는 코드와 같이 작성이 됩니다.

DOM과 Javascript의 연관성

초창기에는 Javascript와 DOM이 밀접하게 연결되어 있었지만, 나중에는 각각 분리되어 발전해왔습니다. DOM 은 프로그래밍 언어와 독립적으로 디자인이 되어있습니다. 문서의 구조적인 표현은 단일 API를 통해 이용가능합니다.

문서(document)와 문서의 요소(element)에 접근하기 위해 DOM이 사용 되었습니다. DOM은 Javascript 이외 어떠한 언어로도 사용이 가능합니다. 아래의 예시는 Javascript로 작성을 했습니다.

var paragraphs = document.getElementsByTagName("title");
// paragraphs[0] is the first <p> element
// paragraphs[1] is the second <p> element, etc.
alert(paragraphs[0].nodeName); // return H1

페이지 콘텐츠는 DOM에 저장되고 스크립트 언어를 통해 접근하거나 조작할 수 있습니다.
방정식으로 표현하면 다음과 같습니다.

API (web or XML page) = DOM + JS (scripting language)

Sematic Elements

<body>
  <div class="header"></div>
  <div class="nav"></div>
  <div class="section">
      <div class="article"></div>
      <div class="article"></div>
  </div>
  <div class="aside"></div>
  <div class="footer"></div>
</body>
<body>
    <header></header>
    <nav></nav>
    <section>
            <article></article>
            <article></article>
        </section>
    <aside></aside>
    <footer></footer>
</body>

위의 사진을 HTML 코드만 작성하면 다음과 같이 작성 할 수 있습니다.

HTML4 시절에는 웹의 구조를 div 태그와 span에 id 와 class 붙여 구역을 나누었습니다. ex)ex)<div class = "header">

HTML5로 넘어 오면서 구조를 기술할 수 있는 Sematic Tag 들이 추가가 되며 가독성을 높이고 명확하게 사용하기 시작했습니다. 형식이 아닌 <header>와 같이 뜻이 명확한 태그가 Sematic 태그들이 제공 되었습니다.

'SEB' 카테고리의 다른 글

Chater_01_JS  (0) 2021.08.27

특수문자

역슬래스 ( \ ) 는 이스케이프 할때만 사용 하는 것이 아닌 특수문자나 임의의 유니코드 문자를 나타날 때도 역슬래시를 사용합니다.

코드 설명
\n 줄바꿈 문자(Newline)
ASCII / UniCode 10인 라인 피드(line feed)[U+000A]
\r 캐리지 리턴(Carriage return) / 엔터 ( )
ASCII / UniCode U+000D
\t 탭  (Tab)
ASCII / UniCode U+009
\' 이스케이프를 할 필요가 없어도 이스케이프 한 작은 따옴표를 쓸 수 있습니다.
\" 이스케이프를 할 필요가 없어도 이스케이프 한 큰 따옴표를 쓸 수 있습니다.
\` 이스케이프를 할 필요가 없어도 이스케이프 한 백틱을 쓸 수 있습니다.
\$ 이스케이프를 할 필요가 없어도 이스케이프 한 달러 기호를 쓸 수 있습니다.
\\ 이스케이프를 할 필요가 없어도 이스케이프 한 역슬레시를 쓸 수 있습니다.
\uXXXX 임의의 유니코드 코드포인트 ISO/IEC 10646
XXXX는 16진수 코드 포인트 입니다.
\xXX 라틴-1 문자 ISO/IEC 8859-1
XX는 16진수 라틴-1 코드 포인트입니다.

\n 과 \r 의 차이는 다음과 같습니다.

console.log("Carriage Return test\r");
console.log("Carriage Return test");
console.log("New Line test\n");
console.log("New Line test");
/*
Carriage Return test
Carriage Return test
New Line test

New Line test
*/

유니코드와 라틴-1의 차이는 다음과 같습니다.

console.log("UniCode \u00e1");
console.log("Latin-1 \xE1");
/*
UniCode á
Latin-1 á
*/

유니코드 문자 코드를 이스케이프 하지 않고 에디터에 직접 입력할 수도 있습니다. 이는 에디터와 운영체제에 따라 입력 방법이 다릅니다.

아래의 특수문자는 자주 쓰이지 않는 특수문자 입니다.

코드 설명
\0 NUL 문자
ASCII/UniCode 0
\v 세로 텝 (Vertical tab)
ASCII/ UniCode 11
\b 백스페이스
ASCII/ UniCode 8
\f 폼 피드(Form feed)
ASCII/ UniCode 12

숫자(Number)

3 , 5.5 , 1,000,000 처럼 컴퓨터가 정확히 나타낼 수 있는 숫자도 있지만, 근사치로만 표현할 수 있는 숫자도 많습니다. 예를 들어 𝞹 는 절대 컴퓨터로 표현 할 수 없다. 원주율을 구성하는 숫자는 무한하고 반복되지도 않기 때문이죠. 10/3 같은 숫자는 특별한 테크닉을 써서 나타낼 수 있긴 하지만, 소수점 아래 자리가 무한히 반복 되므로 (3.333⋯) 일반적으로 근사치로만 나타냅니다.

JS도 다른 프로그래밍 언어와 마찬가지로 실제 숫자의 근사치를 저장할 때 IEEE-764 배정도(double-precision) 부동소수점 숫자 형식을 사용한다. 이 형식을 '더블' 이라 지칭합니다.

JS는 정수형 데이터 타입을 하나만 사용한다.

대부분의 프로그래밍 언어는 여러 가지 정수 타입(int short, long)을 사용하며 부동소수점 숫자 타입도 두가지 이상(double , floot)을 사용합니다. 하지만 JS 는 숫자형 데이터 타입이 하나 밖에 없습니다..

장점

  • 숫자 데이터에 사용용도에 따라 데이터 타입을 지정할 필요가 없기 때문에 코딩작성이 간결하고 쉬워진다.
  • 초보자에게 부담이 없다.

단점

  • 고성능 정수 연산이나 정밀한 소수점 연산이 필요한 애플리케이션에서 쓸 수 없다.

JS는 10,2,8,16 진수의 네 가지 숫자형 리터널을 인식한다.

let count = 10;          // 숫자 리터널. count는 더블입니다.
const blue = 0x0000ff;   // 16진수. 16진수 ff는 10진수 255와 같습니다.
const umask = 0o0022;    // 8진수. 8진수 22는 십진수 18과 같습니다.
const roomTmp = 21.5     // 십진수
const c = 3.0e6;         // 지수 (3.0 x 10^6 = 3,000,000)
const e = -1.6e-19;      // 지수 (-1.6 x 10^-19 = 0.00000000000000000016)

JS는 무한대, 음의 무한대, '숫자가 아님' 을 나타내는 특별한 값이 있다.

const inf = Infinity;
const ninf = -Infinity;
const nan = NaN;

이들은 숫자형 값이지만, 계산에 사용하는 숫자라기보다 일종의 플레이스 홀더(placeholder)입니다.

Number 객체 유용한 프로퍼티

const small = Number.EPSILON; // 1에 더했을 때 1과 구분되는 결과를 만들 수 있는 가장 작은 값
                                                            // 근사치는 2.2e-16 입니다.
const bigInt = Number.MAX_SAFE_INTEGER; // 표현할 수 있는 큰 정수
const max = Number.MAX_VALUE;              // 표현할 수 있는 큰 숫자
const minInt = Number.MIN_SAFE_INTEGER;       // 표현할 수 있는 작은 정수
const min = Number.MIN_VALUE;              // 표현할 수 있는 작은 숫자
const nInf = Number.NEGATIVE_INFINITY;      // -Infinity
const nan = Number.NaN;                    // NaN
const inf = Number.POSITIVE_INFINITY;      // Infinity

문자열(String)

String 이라는 단어는 string of characters에서 나왔습니다. 이 표현은 1800년대 후반 식자공들이 일정한 순서로 배열된 심볼을 가리킬 때 썻던 표현이며 나중에는 수학들이 사용했다네요.

String은 텍스트 데이터입니다. JavaScript 문자열은 Unicode 텍스트 기반입니다.

Unicode란 ?

  • 텍스트 데이터에 관한 표준이다. 다른 이름으로는 국제 문자 세트(UCS) 라고도 표기한다.
  • 사람이 사용하는 언어 대부분의 글자(이모티콘 포함)와 심볼에 해당하는 코드 포인트(code point)를 포함하고 있다.
  • 모든 언어의 텍스트를 나타낼수 있지만, 모든 코드 포인트를 정확히 렌더링 한다는 보장은 없다.

JavaScript 문자열 리터널은 작은 따옴표, 큰 따옴표, 백틱(backtick)을 사용합니다.

const extraQuotes = 'extra';
const doubleQuotes = "double";
const backticks = `backtick`;

문자열 이스케이프(Escape)

문자열의 리터널은 따옴표를 사용하든 백틱을 사용하든 시작과 끝을 작성합니다.

                  StartPoint                       EndPoint
const apostrophe  =  '           안녕하세요           '   
const doubleQuotes =  "           안녕하세요           "
const backticks    =  `           안녕하세요           `

이때 StartPoint와 같은 따옴표 혹은 백틱을 사용 하고 싶을 경우 다음과 같이 에러를 발생 할 수 있습니다.

// Error!!
                  StartPoint   EndPoint|StartPoint   EndPoint
const apostrophe   =  '           '안녕하세요'           '
const doubleQuotes =  "           "안녕하세요"           "
const backticks    =  `           `안녕하세요`           `

이를 방지 하기 위해서 역슬래시( \ ) 을 써서 이스케이프 하면 문자열이 여기서 끝나지 않았다고 JS 에 알릴 수 있습니다.

                  StartPoint                           EndPoint
const apostrophe   =  '           \'안녕하세요\'           '
const doubleQuotes =  "           \"안녕하세요\"           "
const backticks    =  `           \`안녕하세요\`           `

역슬래시를 사용 해야 할 경우에도 역슬래시를 이용하여 이스케이프를 할 수 있습니다.

const backSlash = '\\'; // return : \

그렇다면 ' , " , ` 중 무엇을 써야 할까?

책의 저자는 다음과 같이 작성 했습니다.

  • 스스로 정하면 된다.
  • 사용자에게 표시될 텍스트에는 보통 큰따옴표를 사용한다.
  • 따옴표보다 don't 등 아포스트로피를 더 많이 쓰는 편이므로, 큰 따옴표를 쓰는게 필자에게 편하다.
  • 자바스크립트 문자열 안에 HTML을 쓸때는 반대로 작은 따옴표를 쓴다.
  • HTMl 문자열을 작은 따옴표로 감싸면 속성값에 큰 따옴표를 쓸 수 없이 때문이다.

저는 문자 하나 일 경우에는 외 따옴표, 문자열일 경우에는 큰 따옴표를 사용하고 있었습니다.

다른 언어만을 거진 사용하다 보니 그러한 습관이 생겼던 것 같습니다. 책을 보고 난 뒤에는 나도 사용용도를 언어에 맞게 다시 한번 생각해봐야 겠다 라는 생각이 들었습니다.

변수(variable)

이름이 붙은 값으로, 변수라는 이름이 암시하듯 언제든 값이 변할 수 있습니다.

ES5 버전 이하 부터는 var 키워드만 사용할 수 있었는데, ES6 이후 부터는 let(변수) 과 const(상수)를 사용합니다.

var varTmp = 'varVariable';
let letTmp = 'letValue';
const CONST_TMP = 'constVariable';

변수에 따로 초깃값을 지정하지 않을 경우 'undefined' 값이 할 당 됩니다. 상수 값인 const 경우 네이밍을 대문자와 밑줄만을 사용하는 관례가 있습니다. 상수에 비해 변수는 생각의외로 꼭 필요한 상황이 적습니다.

  • 변수보다 상수를 자주 사용하는 습관을 가지는 것이 좋습니다.
  • 바뀌는 값보단 고정된 값이 제어하기 편하고 에러를 방지할 수 있기 때문입니다.

식별자(identifier)

변수와 상수, 함수 이름을 식별자(identifier)라 부릅니다. 그리고 식별자에는 규칙이 존재합니다.

  • 반드시 글자나 달러 기호($), 밑줄(_)로 시작해야 한다.
  • 글자와 숫자, 달러기호, 밑줄만 쓸 수 있다.
  • 유니코드 식별자도 가능하다.
  • 예약어는 식별자로 사용이 불가능 하다.

식별자 표기법

카멜 케이스(camel case)

varTmp, letTmp 등 카멜 케이스는 띄어쓰기를 대문자로 작성하여 표기합니다.

스네이크 케이스(snake case)

var_tmp, let_tmp 등 띄어쓰기를 밑줄(_) 로 작성하여 표기합니다.

식별자 표기 방침

  • 식별자는 대문자로 시작해서는 안된다. 예외의 경우는 존재한다.
  • 밑줄 한 개 또는 두 개 시작하는 식별자는 아주 특별한 상황, 또는 '내부' 변수에서만 사용한다.
  • 제이쿼리를 사용할 경우, 달러 기호로 시작하는 식별자는 보통 제이쿼리 객체라는 의미이다.

리터널(literal)

리터널이라는 단어는 값을 프로그램 안에서 직접 지정한다는 의미를 가지고 있습니다.
리터럴은 값을 만드는 방법 이며, 자바스크립트는 작성자가 제공한 리터널 값을 받아 데이터를 생성합니다.

let identifier_1 = "literal_1"

위의 코드를 보면 identifier_1 은 변수를 가리키는 식별자이며,
그 옆에 "literal_1"은 문자열 리터널인 동시에 identifier_1에 할당하는 값입니다.

원시 타입(Primitive Type)

원시 값(primitive)이란 객체가 아니면서 메서드도 가지지 않는 데이터입니다. 원시 값은 하나의 값만 나타낼 수 있는 '불변성'을 가지고 있으며, 새로운 값을 직접 할당 하기 전까지는 이미 생성한 원시 값은 객체,배열,함수와는 달리 변형 할수 없습니다.

// 원시 값
let foo = 5;

// 원시 값을 변경해야 하는 함수 정의
function addTwo(num) {
   num += 2;
  console.log("1# num: " + num); // #1
}
// 같은 작업을 시도하는 다른 함수
function addTwo_v2(foo) {
   foo += 2;
  console.log("2# foo: " + foo); // #2
}

// 원시 값을 인수로 전달해 첫 번째 함수를 호출
addTwo(foo);
// 현재 원시 값 반환
console.log("3# : " + foo);   // #3

// 두 번째 함수로 다시 시도
addTwo_v2(foo);
console.log("4# : " + foo);   // #4

// 원시 값에 직접 할당
foo = 8;
console.log("5# : " + foo);   // #5

// return 
1# num: 7   3# : 5   2# foo: 7   4# : 5   5# : 8

원시 타입은 다음과 같이 6가지가 존재합니다.

  • 숫자(Number)
  • 문자열(String)
  • 불리언(boolean)
  • null
  • undefined
  • 심볼(Symbol) - ES6

+ Recent posts