이머시브 코스 TIL 1주차 모음..
노션에 정리한거 옮겨오기

0222.월

brew 명령어 이용하기

• 프로그램 검색 : brew search 검색어
• 프로그램 정보 확인 : brew info 프로그램이름
• 프로그램 설치 : brew install 프로그램이름
  그래픽 인터페이스 설치 : brew cask install 프로그램이름
• dbrew 자체 업데이트 : brew update
• 프로그램 업그레이드 : brew upgrade 프로그램이름
• 프로그램 삭제 : brew uninstall 프로그램이름
• 설치된 프로그램 보기 : brew list

JavaScript 런타임과 node.js

• 런타임 : 프로그래밍 언어가 구동되는 환경(코드가 실행되는 곳)
• node.js : 새로운 JavaScript 런타임
  Javascript를 이용해서 웹페이지 뿐만 아니라 서버와 같은 다른 프로그램을 만들 수 있음
  node <file_name> → 작성한 코드가 node.js 환경에서 실행

nvm (Node Version Manager)

nvm을 통해 간단한 명령어로 node를 설치하고, 다양한 node version을 손쉽게 옮겨 다닐 수 있다

nvm 간단 사용법

• nvm ls : 현재 nvm을 통해 설치한 node version 확인
• node install 12.18.3 : 우리가 원하는 node version 설치(이전 것을 지우지 않고 설치가능)
• node use 버전넘버 : 다른 node version 사용

nano 사용법

• nano 에디터 : CLI 환경에서 가장 사용하기 쉬운 에디터
• nano 파일이름 : 파일열기
• ^X (Ctrl + X) : 파일 편집 후 종료 (Y 와 N 를 눌러서 저장여부 결정)
• ^O WriteOut : 파일 저장

0223.화

git 환경설정

• 사용자 이름과 이메일 설정하는법

$ git config --global user.name "semin"
$ git config --global user.email 1234@gmail.com

• nano 에디터로 변경

$ git config --global core.editor nano

브랜치(Branch)

• 독립적으로 어떤 작업을 진행하기 위한 분리된 작업 영역을 말한다.
• 다른 브랜치와 병합(merge)함으로써, 작업한 내용을 다시 새로운 하나의 브랜치로 모을 수 있다.
• master 브랜치 : 처음 만든 저장소의 브랜치
• head : 현재 사용 중인 브랜치의 선두 부분을 나타내는 이름

브랜치 전환하기

git checkout 브랜치이름 작업공간 옮기기

git checkout -b 기능1 기능1 브랜치 생성+기능1 브랜치로 작업공간 이동

브랜치 병합하기

merge commit 병합 커밋

git merge <commit> 병합할 커밋 이름을 넣어 실행하면, 지정한 커밋 내용이 head 가 가리키고 있는 브랜치에 넣어짐

0224.수

node.js vs 브라우저

node.js에는 DOM이 존재하지 않는다.

package.json

• npm을 활용하기 위한 프로젝트의 정보(필요한 모듈이 무엇인가, 프로그램을 실행시키는 방법 등)가 들어있는 파일
• dependencies : 프로젝트가 돌아가기위해 반드시 필요한 모듈이 적힘
  —save 옵션을 줘야한다. ex) npm install mocha --save-dev , npm install --save react
• devDependencies : 프로젝트를 개발하는 환경에서 필요한 모듈이 적힘
  —dev 옵션을 줘서 등록한다.
• scripts : npm으로 실행시킬 수 있는 명령어를 정의(CLI에서 사용가능한 명령)

npm init : npm이라는 패키지 매니저를 사용하겠다, 폴더를 npm을 쓰는 프로젝트로 정의하겠다

• nodemon (npm install —save nodemon) : 자동으로 변경사항을 반영해서 코드를 실행시켜줌

화살표 함수(arrow function)

const add = (x, y) => {
	return x + y;
}
const add = (x, y) => (x + y)

• function 키워드를 화살표로 축약해서 표시 가능, 함수 본문에 return문만 있는 경우 return도 생략 가능
• 클로저는 연속된 여러 개의 화살표로 표시 가능(1 2 3 4 모두 같은 코드)

1.
const adder = function(x){
	return function(y){
		return x + y;
	}
}
adder(5)(7) //12
2.
const adder = (x) => {
	return (y) => {
		return x + y;
	}
}
3.
const adder = x => {
	return y => x + y;
}
4.
const adder = x => y => x + y

spread / rest 문법

• spread 문법 : 주로 배열을 풀어서 인자로 전달하거나, 배열을 풀어서 각각의 요소로 넣을 때에 사용

function sum(x, y, z) {
  return x + y + z;
}
const numbers = [1, 2, 3];
sum(...numbers)

• rest 문법 : 파라미터를 배열의 형태로 받아서 사용할 수 있다. 파라미터 개수가 가변적일때 유용

function sum(...theArgs) {
  return theArgs.reduce((previous, current) => {
    return previous + current;
  });
}
sum(1,2,3)

• 활용

// 배열
let arr1 = [0, 1, 2];
let arr2 = [3, 4, 5];
arr1 = [...arr1, ...arr2]; //[0, 1, 2, 3, 4, 5]
// 객체
let obj1 = { foo: 'bar', x: 42 };
let clonedObj = { ...obj1 }; // 그대로 {foo: "bar", x: 42} 들어감

구조 분해(Destructing)

[a, b, ...rest] = [10, 20, 30, 40, 50]; 
// a = 10, b = 20, rest = [30,40,50]
{a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}
// a = 10, b = 20, rest = {c: 30, d: 40}

모듈화

• 기본적인 사용법

const 모듈이_담긴_변수 = require('모듈이름')

• 다른 스크립트를 불러올 때

// script1.js
const module2 = require('./script2.js') // ./는 현재 디렉토리

// script2.js
console.log('this is module2')

• 모듈로 노출시킬 때

// script1.js
const module2 = require('./script2.js')
console.log(module2) // 'this is module 2'

// script2.js
module.exports = 'this is module 2'

module.export : 다른 스크립트 파일에서 내가 만든 모듈을 사용할 수 있도록 노출시키는 방법

CommonJS

• 모든 모듈은 자신만의 독립적인 실행 영역이 있어야 한다
• 모듈 정의는 전역객체인 exports 객체를 이용한다
• 모듈 사용은 require 함수를 이용한다

module.exports vs exports

• exports는 module.exports 사용을 도와주는 helper(shortcut)
• exports는 module.exports를 참조할뿐 module.exports에 뭔가가 이미 붙어있다면 exports는 무시
  섞어쓰지 말아야함

0225.목

객체 review

• 메소드 호출 실습하기
  ** 메소드 호출 방식을 이용할 때에는 화살표 함수를 쓰지 않음

let counter1 = {
	value: 0,
	increase: function(){
		this.value++
	},
	decrease: function(){
		this.value--
	},
	getValue: function(){
		return this.value
	}
}
counter1.increase()
counter1.increase()
counter1.decrease()
counter1.getValue() //1

• 클로저를 이용해 매번 새로운 객체 생성하기

function makeCounter(){
	return {
		value: 0,
		increase: function() {
			this.value++ // 메소드 호출을 할 경우, this는 makeCounter 함수가 리턴하는 익명의 객체
		},
		decrease: function(){
			this.value--
		},
		getValue: function(){
			return this.value;
		}
	}
}

클래스와 인스턴스

• 객체 지향 프로그래밍(OOP)의 기초가 되는 용어
• 클래스 : 객체의 템플릿
• 생성자(constructor) 인스턴스가 만들어질 때 실행되는 코드로 return 값을 만들지 않음
• 인스턴스 : 클래스의 속성과 메서드를 담고 있는 객체
  각각의 인스턴스는 클래스의 고유한 속성과 메소드를 갖게 됨

class Car{
	constructor(brand, name, color){
		this.brand = brand;
		this.name = name;
		this.color = color;
	}
	drive(){
		// 운전을 구현하는 코드
	}
}
let avante = new Car('hyundai', 'avante', 'black')
avante.color // 'black' 
avante.drive() // 아반떼가 운전을 시작합니다

this 키워드

• 함수가 실행시 호출(invocation) 방법에 의해 결정되는 특별한 객체
• 함수 실행의 방법에 따라 this는 다르게 결정 즉, 실행시(runtime) 결정됨
  Method 호출 → 부모 객체(실행 시점에 온점 왼쪽에 있는 객체)
  new 키워드를 이용한 생성자 호출 → 새롭게 생성된 인스턴스 객체
  .call 또는 .apply 호출 → 첫번째 인자로 전달된 객체
• 화살표 함수는 어떻게 실행하든 this 값은 전혀 영향을 끼치지 않습니다.

call, apply, bind 메소드

• .call , .apply 호출은 명시적으로 this를 지정하고 싶을 때 사용함
  첫번째 인자가 항상 this 값이 된다. 두번째 인자 이후로는 파라미터로 전달
• func.call(this, ...arguments) : 전개 문법을 사용해 인수가 담긴 배열을 전달
  func.apply(this, arguments) : 유사 배열 형태의 args 만 받음

let allDivs = document.querySelectorAll('div') // NodeList라는 유사배열
// allDivs를 this로 지정
[].map.call(allDivs, function(el)[
	return el.className
})
// allDivs는 유사배열이므로 map 메소드가 존재하지 않음
// 그러나, Array prototype으로부터 map 메소드를 빌려와 this를 넘겨 map을 실행할 수 있음

bind 메소드(유용하게 잘사용됨)

• .bind 는 .call 과 유사하게 this 및 인자를 바인딩하나, 당장 실행하는 것이 아닌 바인딩된 함수를 리턴하는 함수
• 첫번째 인자는 this, 두번째 인자부터는 필요한 파라미터를 전달
  fn.bind(this값, 인자1, 인자2, ...)
• 이벤트 핸들러에서 이벤트 객체 대신 다른 값을 전달하고자 할 때 유용
  btn.onclick = handleClick.bind(null, user); → 여기서 user는 객체
• setTimeout은 시간 지연을 일으킨 후 함수를 비동기적으로 실행하게 하는 함수인데 명시적으로 항상 window 객체를 this 바인딩하는 특징이 있음

let user = {
	firstName: 'John',
	sayHi(){
		alert(`hello, ${this.firstName}!`)
	}
};
setTimeout(user.sayHi, 1000) // Hello, undefined!
setTimeout(() => user.sayHi(), 1000); // Hello, John!
setTimeout(user.sayHi.bind(user), 1000); // Hello, John!

0226.금

OOP(Object Oriented Programming)

• 객체를 이용해 프로그래밍하는 것
• 자바스크립트는 객체 지향 언어는 아니지만, 객체 지향 패턴으로 작성 가능

클래스와 인스턴스

• 클래스 : 특정 객체를 생성하기 위한 템플릿
• 생성자(constructor) 함수 : 속성을 초기화 시켜줄 수 있다
• 인스턴스 : 클래스의 속성과 메서드를 담고 있는 객체

OOP 주요 특징 4가지

• Encapsulation(캡슐화)
• 데이터와 메서드를 하나의 단위로 묶고, 구현 내용은 외부로부터 은닉한다.
• Inheritance(상속)
• 속성과 메서드를 물려받고, 객체들 간의 관계(부모/자식,슈퍼/서브 등)가 형성된다.
• Abstraction(추상화)
• 사용자에게 불필요한 복잡한 내부 구현을 숨기고, 노출되는 부분은 단순하게 만든다.
• Polymorphism(다형성)
• 요소들이 각자 특성에 맞는 여러 다른 형태로 가질 수 있다.

Prototype

• 다른 객체를 참조하는 경우 참조 대상
• 자바스크립트는 프로토타입 기반의 언어로 모든 객체는 자신의 부모 객체와 연결되어 있다.
• 상속 개념과 같이 부모 객체의 속성과 메서드를 상속받아 사용할 수 있다.

const user = {
	name: 'Kim',
	age: 20
}
user.__proto__ === Object.prototype //true

function User(name){
    this.name = name;
}
const kim = new User('kim');
kim.__proto__ === User.prototype // true
kim.__proto__.__proto__ === Object.prototype // true (Object는 가장 상위 객체)

Prototype Chain

• 객체의 속성이나 메서드에 접근할 때 해당 객체에 존재하지 않는다면 자신의 부모의 프로토타입 객체를 검색하는 것
• pseudoclassical

let Human = function(name){
	this.name = name;
}
// 메모리 낭비때문에 이렇게 작성
Human.prototype.sleep = function(){ console.log(this.name+' zzz') }
let Student = function(name){
	Human.call(this, name); // Human.apply(this, arguments)
}
Student.prototype = Object.create(Human.prototype)
Student.prototype.constructor = Student
Student.prototype.learn = function(){}
const kim = new Student('kum');
kim.learn()
kim.sleep()

• class 키워드를 쓰면 간단하게 작성할 수 있다.
• extends : 상속하겠다
• super : 부모 클래스에 전달

class User{
	constructor(name){
		this.name = name;
	}
	eat(){ console.log('냠냠') }
}
class Student extends User{
	constructor(name){
		super(name)
	}
	learn(){ console.log('공부중..')}
}
const stu1 = new Student('kim')
stu1.learn() // 공부중..
stu1.eat() // 냠냠