TIL_1주차(IM)

셈·2021년 3월 20일

TIL

이머시브 코스 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() // 냠냠

셈

my life is free

이전 포스트

[JavaScript] OOP

다음 포스트