mykuromi.dev.log

 
✓ 선언문(Declare statement)
- 변수나 함수를 선언 ex) var, let, const, function
- 컴파일 때 호이스팅
- 실행 시 괄호를 붙여서 실행
 
✓ 표현식(Expression)
- 항상 값으로 평가
- 값을 평가하고 결과를 생성
- 변수, 리터럴 값, 연산자 및 함수 호출 같은 것들의 조합
- ex) var y = 10, var = x + y, var result = function ( ) { return " Hello, World"; } 
 
✓ 함수 선언문과 함수 표현식의 차이
- 호이스팅(hoisting) 영향 : 함수에 대한 선언을 실행 전에 미리 메모리에 등록하는 작업
 
✓ 함수 선언문(Function Declaration)
- 선언문은 선언(declare) 그 자체
- 실행 시 괄호를 붙여서 실행
- 함수 선언문이 코드 맨 앞단에 작성된 것처럼 작동하는 특징
- 호이스팅에 의해 스코프 최상단으로 끌어올려짐
- 컴파일 시점에 미리 메모리에 등록
- 함수가 선언되기 전에도 호출 가능
 
✓ 함수 표현식(Function Expression)
- 함수를 변수에 할당하는 방식
- 함수 이름은 선택사항
- 변수가 할당된 이후에만 사용 가능
- 컴파일 시점에 변수가 undefined로 초기화, 런타임 시점에 변수에 함수가 할당되어 작동
 
✓ 호이스팅
- 코드 실행 전, 변수 및 함수 선언이 스코프 최상단으로 끌어올려지는 매커니즘
- 코드 실행 단계에서 변수나 함수를 선언하기 전에도 참조
- 선언문만 해당
- 초기화 비해당
- 변수는 선언 시에 메모리에 할당(undefined), 초기화(값 할당)는 실제 코드의 실행 위치에 따라 결정
- 함수 선언문은 호이스팅되어 어디에서든지 호출 가능
- 함수 표현식은 변수가 할당된 이후에만 호출 가능
 
✓ const var let
- var : 호이스팅 O, 초기화는 실제 선언된 위치에 남으므로 선언 전에 참조할 경우 undefined
- let / const : 호이스팅 O, var와 달리 TDZ가 존재, 선언되기 전에 참조하면 Reference error
 
✓ TDZ(Temporal Dead Zone)
- 선언된 변수가 실제 선언된 위치에 도달할 때까지 변수를 참조할 수 없는 영역
 
✓ this 바인딩
- 일반함수 : 전역
-  화살표함수 : 상위
-  메서드 : 해당 메서드를 호출한 객체
-  클래스 : 해당 클래스의 인스턴스
 
✓ 일급 객체(First-Class Object)
- 변수에 할당 가능
- 함수 인자로 전달 가능
- 함수의 반환값으로 사용 가능
- 런타임에 생성
- 일급 함수(First-Class Function) :  함수가 일급 객체의 특성을 모두 갖춘 경우
- ex) 자바스크립트 함수
 
✓ examples

add(); // Hi
console.log(y); // ReferenceError: y is not defined

funtion add () {
	console.log('Hi');
}

console.log(y); // undefined
var y = 19;

add(); // TypeError: add is not a function

const add = function(){
	console.log('hi');
}

add(); // TypeError: add is not a function
var add = function(){
	console.log('hi');
}

function print(){
	console.log(this);
}
print(); // Window {...} // Node : global

const print = () => {
	console.log(this);
}
print(); // 상위 스코프의 this

const user = {
	say(){
		console.log(this)
	}
}
user(); // { say: [Function: say] }

🖤 React 컴포넌트에서 렌더링이 일어나는 이유
- prop간 동등비교
- 얕은 비교 기반 
 
 
1-1. 자바스크립트 동등 비교
 
✓ 원시 타입(primitive type)
- boolean / null / undefined / number / string / symbol / bigint
- 불변 형태의 값
 
✓ 객체 타입(object/reference type) : object
- 변경 가능한 값 -> 프로퍼티 추가
- 참조 값 -> 변수 재할당 시 주소 저장
 
✓ Object.is
- cf) == : type casting 이후 비교
- 객체 간 비교 시 == 와 동일하게 동작(주소값 비교)
 
✓ shallowEqual
- React에서 사용
- 객체 간 얕은 비교
- 1 depth 까지 비교
- 객체 안의 객체(2 depth 이상)의 경우 제대로 동작하기 어려움
 
+ truthy, falsy
- truthy :  https://developer.mozilla.org/ko/docs/Glossary/Truthy
- falsy :  https://developer.mozilla.org/ko/docs/Glossary/Falsy
- quiz : https://quizzesforyou.com/quiz/jstruthyfalsy
 
1-2. 함수
- 작업을 수행하거나 값을 계산하는 등의 과정을 표현, 이를 하나의 블록으로 감싸 실행 단위로 만들어 놓은 것
 
✓ function ( ) { } 
- 함수 선언문(statement)
- 호이스팅 -> 실행 전 메모리에 등록, 선언을 하단에서 했어도 상단에서 사용 가능
 
✓ const ___ ( ) => { } / const ___ = function ( ) { }
- 함수 표현식 
- 변수에 할당해서 호이스팅 되는 경우 변수 값이 undefined로 호이스팅
 
✓ function 생성자
- new Functon(...params, return)
- 권장되지 않는 방법
 
✓ 화살표 함수
- this : 상위 스코프의 this 를 가리킴 -> React에서는 컴포넌트
- cf) function 선언에서 this : 런타임 시점의 this, 전역 객체
 
✓ 즉시 실행 함수
- ( function () { } )
- ( ( ) => { } )
 
✓ 고차 함수 
- 함수를 인수로 받거나 새로운 함수 반환
- ex) map
 

✔️ map

• [key, value]
• key에 다양한 자료형을 허용, 객체와 달리 키를 문자형으로 변환하지 않음

✔️ set

• 중복을 허용하지 않는 값을 모아놓은 컬렉션

Ref) https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Map / https://ko.javascript.info/map-set

✔️ arr.reduce(callback[, initialValue])

• 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행한 후 하나의 결과값을 반환
• return : 배열의 순서대로, 각 요소에 callback 함수를 실행한 결과를 누적한 값

✔️ callback function

• param 1) accumulator : callback 함수 반환값 누적. 콜백의 이전 반환값 또는 콜백의 첫 번째 호출이면서 initialValue를 제공한 경우에는 initialValue의 값
• param 2) currentValue : 배열의 현재 요소
• param 3) index : (optional) 배열 현재 요소의 인덱스. initialValue를 제공한 경우 0, 아니면 1부터 시작
• param 4) array : (optional) reduce()를 호출한 배열

✔️ initialValue (optional)

• callback의 최초 호출에서 첫 번째 인수에 제공하는 값
• 초기값을 제공하지 않으면 배열의 첫 번째 요소를 사용, 제공하는 경우 두 번째 호출이 배열의 첫 번째 요소가 됨
• 빈 배열에서 초기값 없이 reduce() 호출 시 TypeError 발생

Ref) https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce

✔️ async

• return : promise object

• async function f() {
    return Promise.resolve(value);
  }
  f.then(alert);

✔️ await

• suspends the function execution until the promise settles and then resumes it with the promise result (JavaScript engine can do other jobs in the meantime: execute other scripts, handle events, etc.)
• return : its result
• can’t use in regular functions

• async function f() {
    let promise = new Promise((resolve, reject) => {
      setTimeout(() => resolve("promise done"), 1000);
    });
    let result = await promise; // wait until the promise resolves
    alert(result); // "promise done" in 1 sec
  }

✔️ promise

• the eventual completion (or failure) of an asynchronous operation and its resulting value
• states : pending(initial state) / fulfilled / rejected

✔️ examples

• states : pending(initial state) / fulfilled / rejected

• let response = await fetch('/article/promise-chaining/user.json');
  let user = await response.json();
  console.log(user);

Ref) https://javascript.info/async-await / https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

✔️ Truthy & Falsy

•  참 같은 값, 거짓 같은 값
• 자바스크립트는 Boolean 값을 넣지 않아도 TRUE나 FALSE로 인식
• Truthy : TRUE가 아니어도 참으로 평가되는 값 ex. 비지 않은 문자열, 빈 배열, 빈 중괄호(객체 리터럴), 숫자값, "false", Infinity
• Falsy : FALSE가 아니어도 거짓으로 평가되는 값 ex. 빈 문자열, undefined, null, 0, NaN

✔️ 삼항 연산자

• 조건문 ? true일 때 수행할 명령 : false일 때 수행할 명령 ;
• 중첩 삼항연산자 : ex. score >= 90 ? console.log("A+"); : score >= 50 ? console.log("B+"); : console.log("F"); 

✔️ 단락 회로 평가

• 왼쪽 -> 오른쪽에서 연산하는 연산 순서 활용
• AND : ex. false && true : 앞이 false면 false
• OR : ex. true || false : 앞이 true면 true
• Truthy & Falsy 값 활용 : ex. const getName = (person) => { const name = person && person.name; return name || "객체가 아닙니다.";  }; // person값이 undefined인 경우 뒤 person.name 에 접근하지 않음, 객체가 아닙니다라는 문자열 반환

✔️ 조건문 Upgrade

• includes : 배열 내장함수로 조건문 upgrade -> ex. if(["요소1", "요소2", ..].includes(배열)) { return true; }
• 객체 괄호표기법 활용 : ex. return meal[mealType];

✔️ 비 구조화 할당

• 배열의 기본 변수 비 구조화 할당
• 대괄호을 이용해서 배열의 값을 순서대로 할당하여 사용(인덱스 대신 변수명 활용)
• ex. let arr = ["one", "two", "three"]; let [one, two, three] = arr; consle.log(one, two, three); // 출력 : one two three
• 배열의 선언 분리 비 구조화 할당
• ex let [one, two, three] = ["one", "two", "three"]; // 출력 : one two three
• 기본값 할당 가능 let [one, two, three, four]="4";
• 객체도 비 구조화 할당 가능 : 순서가 아니라 키값을 기준으로 할당,각 키를 갖는 값을 변수에 저장
• ex. let object = { one: "one", two: "two", three: "three", name: "이정환"}; let { name: myName , one, two, three } = object; console.log(one, two, three, myName); // 출력 : one two three 이정환. 

✔️ Spread 연산자

• 기호 : ...
• 중복된 프로퍼티를 계속 작성해야하는 상황
• ex. const cookie { base: "cookie", madeIn: "Korea" }; const chocochipCookie { ...cookie, topping: "chocochip" }; // chocochipCookie는 기존 cookie의 base, madeIn 속성을 포함하게 됨
• 객체의 프로퍼티를 펼치는 상황 외 배열에도 사용 가능
• ex. const allCookies = [ ...noToppingCookies, "함정쿠키", ...toppingCookies];

✔️ 동기 & 비동기

• 자바스크립트 싱글 쓰레드 작업 수행 방식 : 코드 작성 순 작업 처리, 이전 작업이 진행될 때에는 다음 작업을 수행하지 않고 기다림 -> 동기 방식의 처리, 블로킹 방식
• 멀티 쓰레드가 불가능한 단점을 극복하기 위해 비동기 방식 사용 : 콜백함수 활용
• ex. function taskA(a, b, cd) { setTimeout( () => { const res = a + b; cb(res); }. 2000 ); } taskA(3, 4, (res) => { console.log("A TASK END", res ); } ); console.log("코드 끝"); // 코드 끝이 먼저 출력되며, 타이머 함수에 의해 콜백 함수인 A TASK END가 이후 출력 
• JS Engine에 의해 코드 해석 : Heap(메모리 할당), Call Stack(코드 실행에 따라 호출 Stack)
• Call Stack : 자바스크립트 코드중 최상위 문맥인 Main Context 가 가장 먼저 Call Stack에 들어옴, Main Context가 Call Stack에 들어가는 순간이 프로그램을 실행하는 순간, 나가는 순간이 프로그램을 종료하는 순간, Call Stack이 하나이기 때문에 싱글 쓰레드 방식
• Web APIS, Call back Queue, Event Loop : JS Engine - 웹브라우저 간 상호작용 처리(ex. 비동기), setTimeout과 같은 비동기 함수는 Call Stack에서 제거되고 Web APIs로 넘겨짐, setTimeOut 내 콜백 함수는 Callback Queue로 넘겨지고 Event Loop에 의해 Call Stack으로 옮겨짐
• Event Loop : 콜백 함수를 Call Stack으로 넘기기 위해, Call Stack에 실행해야 할 다른 함수가 남아있는지 계속 확인

✔️ Promise

• Callback 지옥을 탈출 방법
• 비동기 작업이 가질 수 있는 3가지 상태 : Pending, Fulfilled(resolve), Rejected(reject)
• ex. const asyncTask = new Promise(executor); // 생성자로 콜백함수 전달
• asyncTask 반환값이 Promise인 경우, 이 함수는 비동기 작업을 하고 반환값으로 Promise 객체를 반환받아 사용할 수 있는 함수
• Promise 객체의 메서드인 then / catch를 사용하면 함수를 수행한 결과 값을 콜백함수에서 받을 수 있음 
• ex. res.then( (res) => { console.log("작업 성공", res); } ).catch( (err) => { consloe.log("작업 실패", err); } );
• then 체이닝 방법 : 코드를 들여써서 콜백 함수를 실행하는 대신, then을 나열해 비동기를 호출하는 코드와 결과를 처리하는 코드를 분리해 콜백함수를 지양하고 가독성 있는 코드 작성

✔️ async & awiat 

• async : Promise 객체를 반환
• ex. async function helloAsync() { return "hello async"; } // Promise 객체의 res 반환
• then 방식은 Promise를 객체로 직접 반환하지만, async를 통해 res(resolve)를 직접 반환받을 수 있다.
• await : async 키워드가 붙은 함수 내부에서만 사용 가능, 비동기 함수 호출 앞에 붙이면, 비동기 함수가 마치 동기 함수처럼 사용할 수 있다 -> await 라인에서는 동기적으로 작동

✔️ API & Fetch

• API 호출 : Request - Response, 원하는 데이터를 얻기 위해 API 호출 (비동기)
• JSONPlaceholder : 개발자를 위한 API 호출 사이트, 더미데이터 응답
• ex. let response = fetch('url').then( (res) => { // 응답시 수행할 코드 } ); // response 객체
• fetch : API를 호출할 수 있게 도와주는 JS 내장 함수

참고) 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

✔️ Front-end

• 리액트 : 자바스크립트 라이브러리 중 하나, 노드js와 함께 사용하는 경우 효율 극대화
• HTML5 : 요소들의 배치와 내용을 기술하는 언어, 다만 색이나 크기와 같은 디자인 부분 수행 불가 
• CSS3 : 색, 크기, 애니메이션 등을 정의, 스타일링을 위한 언어
• 자바스크립트 : 웹사이트에 활력을 부여하는 언어, 웹사이트를 실질적으로 움직이게 하는 요소 -> 자바스크립트 Runtime : 웹브라우저의 자바스크립트 엔진을 통해 실행(ex. 크롬 V8)

✔️ JS 개발 도구

• 크롬 개발자 도구(F12) Consle
• 온라인 웹 에디터 : CodeSandbox ex. Vanilla template

✔️ 변수

• 선언 : 키워드 let / var
• 프로그램 실행 도중에 계속해서 값을 바꿀 수 있는 저장소
• 변수명 선언 규칙 : 언더스코어(_), 달러($) 제외 기호 사용 불가, 문자로 시작, 예약어 제외
• let은 중복 선언 불가, var는 중복 선언 가능(선언 후 재선언, 혼란의 여지 다분)

✔️ 상수

• 선언 : 키워드 const
• 선언과 동시에 초기화
• 선언 후 값 변경 불가

✔️ 자료형

• 값을 성질에 따라 분류한 것
• Primitive Data Type(Number, String, Boolean, Undefined, Null) / Non-Primitive Data Type(Object, Array, Function)

✔️ Prmitive Type(원시 타입)

• 내장형, 기본형 타입
• 하나의 순간에 하나의 값만 가질 수 있음(값 변화 가능)
• 하나의 고정된 저장 공간 이용
• ex. let number = 12;
• 1) Number : 정수, 실수, Inifinity, -Infinity(음의 무한대), NaN(연산이 잘못 수행된 경우, 실패의 결과값) -> 연산 가능
• 2) String : " " or ' ' 로 감싸서 사용, ` ` 사용 시 문자열 내부에 변수 사용 가능 -> 템플릿 리터럴 ex. `mykuromi ${name}`
• 3) Boolean : true / false 
• 4) Null : 의도적으로 이 변수가 아무것도 가리키지 않을 때 사용
• 5) Undefined : 변수를 선언하고 아무 값도 할당하지 않았을 때 ex. let variable;

✔️ Non-Prmitive Type(비원시 타입)

• 한번에 여러 개의 값을 가질 수 있음
• 여러 개의 고정되지 않은 동적 공간 사용
• ex. let array = [1, 2, 3, 4];

✔️ 형변환

• 값은 유지하면서 자료형 변환 가능
• ex. 12 + "2" = "122" -> parseInt 14

✔️ 연산자

• 대입 연산자 : =
• 산술 연산자 : +, -, *, /, %
• 연결 연산자 : +  문자열 연결, 문자 + 숫자 시 묵시적 형변환
• 복합 연산자 : +=
• 증감 연산자 : ++, --, 전위연산, 후위연산
• 논리 연산자 : ! not, && and, || or
• 비교 연산자 : ==, !=(값만 비교), ===, !==(자료형까지 비교), > 대소 비교
• typeof 연산자 : 자료형 출력
• null 병합 연산자 : 양쪽의 피연산자 중 null이나 undefined가 아닌 값을 선택 ex. let a;  a = a ?? 10; -> a는 10 출력

✔️ 조건문

• if-elseif-else
• switch-case-default

✔️ 함수

•  함수 선언식 : function 함수명 (매개변수1, 매개변수2, ..) { return .. }
• 함수 호출 : 함수명 (매개변수) ;
• { } 내 지역변수는 함수 외부에서 접근 불가 <-> 전역변수

✔️ 함수 표현식 & 화살표 함수

• 함수 표현식 : 함수는 값이므로 변수나 상수에 담아 사용 가능
• ex. let hello = function () { }; const hellloText =hello();
• 호이스팅: 함수 선언식으로 만든 함수는 프로그램 실행 전 최상단으로 끌어올려져, 후에 선언되어도 먼저 호출하는 코드 작성 가능 cf. 함수 표현식, 화살표 함수는 호이스팅 불가
• 화살표 함수 : 함수 표현식을 간단하게 사용하는 방법 ex. let hello = () => { }; 또는 let hello = () => "안녕하세요 여러분"; (리턴값이 있는 경우)

✔️ 콜백 함수

• 다른 함수의 매개변수로 함수를 넘겨준 것
•  ex. function checkMood(mood, goodCallback, badCallback) { ... }; function cry () { .. }; function sing () { .. }; 호출 시에는 checkMood("sad", sing, cry); -> cry 함수 호출 

✔️ 객체

• 1) 객체 생성자 : ex. let person = new Object();
• 2) 객체 리터럴 : ex. let person = { key : "value" } ;
• 객체 프로퍼티 : 멤버, 객체 속성, 객체가 가지고 있는 데이터(key : value), value는 모든 자료형 가능, key는 문자열로만 작성
• 프로퍼티 접근 : 점 표기법 ex. person.name / 괄호 표기법 ex.person["name"] - 키가 고정되어 있지 않거나 파라미터로 주고 받을 때 괄호 표기법 사용 
• 상수로 선언한 객체도, 상수 자체를 수정하는 행위가 아니기 때문에 상수인 객체에 프로퍼티 추가 가능 
• 프로퍼티 삭제 : delete 객체.프로퍼티 또는 delete 객체["프로퍼티"] -> delete 키워드는 메모리를 계속 점유하는 형태이기 때문에 null로 초기화 하는 방법 추천 
• 메서드 : 객체 내의 함수
• this : 객체 자기 자신
• 존재하지 않는 프로퍼티 확인 : ${"프로퍼티" in 객체명}

✔️ 배열

• 1) 배열 생성자 : let arr =new Array();
• 2) 배열 리터럴 : let arr = [];
• 자료형이 다 달라도 배열 안에 삽입 가능
• 객체와 다르게 key가 없고, 순서(인덱스)를 통해 접근 ex. arr[0]; arr[1]; 
• 배열의 길이 : arr.length

✔️ 반복문

• for (초기식; 조건식; 증감연산자) { 반복 수행할 명령 } ;
• 반복문을 통해 배열, 객체 순회 가능
• 객체 순회시 Object.keys(객체명); 함수 이용 -> 객체의 key를 배열로 반환 ex. const personKeys = Object.keys(person); for (let i = 0; i < personKeys.length; i++) { const curKey = personKeys[i]; const curValue = person[curKey]; console.log(`${curKey} : ${curValue}`); );
• value만 반환하고 싶은 경우 Object.values(객체명);

✔️ 배열 내장 함수

• forEach : 배열 순회 함수, forEach라는 내장함수에 전달하는 콜백 함수를 배열의 각각 요소에 적용 ex. arr.forEach( (elm) => console.log(elm) ); // 콜백함수
• map : 배열의 모든 요소에 대해 한 번씩 연산 후 새로운 배열 return ex. const newArr = arr.map( (elm) => { return elm * 2 } );
• includes : 주어진 배열에서 전달받은 인자와 일치하는 값이 존재하는지 확인(true/false) ex. arr.includes(number);
• indexOf : 주어진 배열에 요소가 존재하는지 확인 후 인덱스 반환, 존재하지 않을 시 -1 반환
• findIndex : 객체 배열에서 원하는 속성을 가진 요소의 인덱스 반환 ex. arr.findIndex( (elm) => elm.속성 == "value") );
• find : 객체 배열에서 원하는 속성을 가진 요소 반환 
• filter : 배열 필터링, 특정한 속성을 가진 요소 모두 반환 ex. arr.filter( (elm) => elm.color === "blue") );
• slice : 배열 자르기 ex. arr.slice(0, 2);
• concat : 배열 붙이기 ex. arr1.concat(arr2); 첫 번째 배열에 두 번째 배열 붙이기
• sort : 배열 사전순(문자순) 정렬 cf. 숫자 오름차순 정렬시 -> const compare = (a, b) => { if (a > b) return 1; if (a < b) return -1; return 0; }; 배열명.sort(compare); // 1은 클 때, 배열의 뒤로 보냄, 2는 작을 때, 배열의 앞으로 보냄, 0은 같을 때 제자리
• join : 쉼표로 구분하여 배열의 요소를 문자로 합쳐 반환, 파라미터로 구분자 사용 가능 ex. arr.join("-");

참고) 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지