🍒What I did today(ES6 문법정리하기, node.js 설치)

✅ES6 문법 정리

Javascript에서 기존보다 훨씬 간결하게 코드를 작성할 수 있게 만들어준 ES6 문법에 대해 공부하고, 정리한 부분을 블로깅했다.

화살표 함수부터 클래스, 제너레이터 등 다른 언어와 비슷한 문법부터 처음 보는 문법까지 알게 되었다.

let이나 const, 백틱(``), 전개 연산자(...) 같은 것들은 ES6 문법이었다.

 

✅패키지 매니저

윈도우의 "앱 추가/제거" 기능과 같이, 프로그램을 삭제하거나 관리하는데 쓰는 도구이면서, 동시에 앱스토어와 같이 새로운 프로그램을 추가할 수 있는 도구이다.

다만 GUI로 구성되어 있지 않고, 명령어를 직접 터미널에 입력해야 한다.

운영체제 별 패키지 매니저는 macOS는 homebrew라는 것이 있고, 우분투, 데비안 계열 리눅스는 apt를 사용한다. 우분투의 경우 apt 패키지 매니저는 기본적으로 설치되어 있고, macOS에서 사용하는 homebrew는 직접 설치해줘야 한다.

 

++ 설치 과정

1. xcode-select를 먼저 설치하는데 나 같은 경우엔 macOS 업데이트를 진행하면서 과제를 올려야 되는데 git add 이 안 되는 경우가 생겼었다. 그래서 설치를 안 해도 됐었지만 결국 brew를 설치하려면 install 해야 한다.

2. Homebrew 사이트를 들어가 스크립트를 터미널에 복사 붙여 넣기를 한다.

3. 설치 과정 중에 관리자 권한을 요구하니, macOS 사용자 암호를 넣어주고 진행한다.

중간에 "Press RETURN to continue or any other key to abort" 문구가 나오면 Enter를 눌러 진행한다.

(return 키 === Enter)

4. Installation successful!이라는 문구가 나오면 설치 완료!

하지만 나는 Mac(M1)을 사용해서 위에 과정을 다했지만 잘 안됐다.

(설치해서 brew 하면 나왔는데 터미널을 끄고 다시 해보니 brew라는 명령어가 안 먹혔다...)

이게 무슨 말이지 할 수 있는데 나도 모르겠다. 다시 해보니 command not found : brew 가 떴다.

그래서 나는 이곳에서 도움을 얻었다.

 

++ wget, neofetch

wget은 URL을 통해 파일을 다운로드하는 프로그램이고,  neofetch는 간단하게 시스템 상태를 보여주는 것이다.

neofetch

wget

 

✅Javascript 런타임? node.js?

런타임이란? 프로그래밍 언어가 구동되는 환경이다. 어떤 프로그래밍 언어가 동작할 수 있는 프로그램이다!

Javascript를 이용해서 코드를 적었다면  코드가 실행되는 곳이 런타임이다.

그럼 node.js는? Javascript 런타임이다.

 

✅nvm, node.js 설치하기

node.js 버전 관리를 위해 NVM(Node Version Manager)도 설치하고, use 명령어를 통해 설치된 다른 node 버전들을 사용할 수 있는 방법도 배웠다.

처음에 nvm 설치할 때 이것저것 다운로드하고 확인해봤던 것 같다. 하지만 나는 Mac(m1)이라서 15 이상의 버전을 다운 받아야만 했다. 

원래 설치방법의 버전은 14.15.5 버전이었는데 use 명령어를 통해 15 이상의 버전을 번갈아가면서 사용할 수 있게 되었다.

설치 순서는 nvm -> Node.js -> npm ⭕ 

nvm은 Node.js를 설치하기 위한 툴이기 때문이다.

🍒Remember

---

✅ES6 문법 정리

⭕Arrows (화살표 함수) : => 기호로 함수를 축약해서 표현하는 방식

⭕Classes (클래스) :

• class로 새로운 클래스 생성, 메서드 정의한다.
• new로 호출하고 결과값을 출력하고, Class는 호이스팅 되지 않는다.

⭕Enhanced Object Literals (향상된 객체 리터럴)

• 축약 문법 1) 객체를 정의할 때 속성(property)과 값(value)이 같으면 아래와 같이 축약이 가능하다.
• 축약 문법 2) 속성에 함수를 정의할 때 function 예약어 생략
  

⭕Template literals (``) :

• 내장된 표현식을 허용하는 문자열 리터럴이다.
• ${변수} 형태로 문자열 중간에 변수를 바로 대입할 수 있다.
  

⭕Destructuring (구조 분해 할당) :

배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 표현식. 객체나 배열을 분해하는 것.
⭕Default Parameter (기본 매개변수) : 초기화 설정된 매개변수 값
⭕Generator (제너레이터) : 

• 함수의 실행을 중간에 멈추고 재개할 수 있는 독특한 기능이다.
• function*로 표현할 수 있으며, 작성할 때는 일반 function처럼 선언문과 표현식으로 작성할 수 있다.
• next() 메소드를 통해 제너레이터 함수를 실행시킬 수 있다.
• yield : value속성의 객체를 만들고, 이 안에 결과값을 넣어서 반환해준다.

⭕Unicode 코드포인트 이스케이프 : \u{c6d0}처럼 중괄호 안에 코드 포인트를 넣어 표시

✅node.js 관련 도구

NVM(Node Version Manager) : 간단한 명령어로 node를 설치하고, 다양한 node 버전을 쉽게 관리할 수 있게 도와주는 프로그램

NPM(Node Package Manager) : npm 서비스를 통하여 Node.js로 개발된 프로그램을(npm 패키지) 편리하게 설치, 업데이트 및 삭제를 해 주는 프로그램이다. 또는 필요한 모듈을 다운로드할 수 있고, 모듈들이 모여있는 모듈 스토어이다.

 

 

🍒More Study

---

✅Promise

✅fetch API

✅AJAX

 

 

2021-02-22

---

✏️ ES6 문법 정리를 가볍게 하려고 했는데 생각보다 많은 내용들이었다. 

검색할 때마다 살짝씩 다르게 나오기도 해서 당황스럽기도 했다😅

그래도 "한번 보고 정리라도 해보자" 요런 느낌이었으니 괜찮은 것 같다.

 

✏️ 오늘은 node.js를 설치하고 nvm, npm 요런 환경 설정을 하는 날이었다🤔

생각보다 에러는 많이 났고 그리고 무엇보다 내 노트북이 macOS(m1)이었다는 것...  

m1은 환경설정이 살짝 달랐고 로제타 2 모드, 내비게이터 모드 등 이해 안 되는 부분들도 있었다.

처음엔 터미널을 껐다 켜라고 영어로 나와있었는데 못 읽고 안된다고 하고 있었다😏

brew 설정만 조금 오래 걸리고 나머지 nvm, node.js는 순조롭게 잘 진행됐다.

m1은 환경 설정이 까다로워서 과정을 오늘 정리를 해놓았다⚡