우선 이를 이해하기 앞서

1. 동기와 비동기의 차이
2. 싱글 스레드 기반 JS의 비동기 처리 방법에 대해서 알아보도록 하자.

동기와 비동기, 싱글 스레드와 멀티 스레드

동기란?

동시에 일어난다는 뜻입니다. 요청과 결과가 동시에 일어난다는 약속인데, 바로 요청을 하면 시간이 얼마가 걸리던지 요청한 자리에서 결과가 주어져야 합니다. 즉 리턴해주기 전까지 사용자는 다른 활동이 불가능하며 기다려야 합니다.

• 요청한 결과가 한 자리에서 동시에 일어남
• 작업 처리 단위(transaction)를 동시에 맞춘다.

비동기란?

동시에 일어나지 않는다는 뜻입니다. 요청과 결과가 동시에 일어나지 않을 거라는 약속이죠.

• 요청한 그 자리에서 결과가 주어지지 않음
• 노드 사이의 작업 처리 단위를 동시에 맞출 필요가 없다.
• 반환되는 시간 동안 다른 작업 수행 가능.

JavaScirpt는 싱글 스레드 프로그래밍언어 때문에 비동기 처리가 필수적이다! 하지만 비동기 처리는 그 결과가 언제 반환될 지 알 수 없기 때문에 동기식으로 처리하는 기법들이 사용되어야 한다. 대표적으로 setTimeout, callback, Promise 객체가 있습니다. 비동기 코드를 동기식으로 처리하기에 좋은 기법들이지만, 약간의 문제점을 지녔고 이를 보완하기 위해 async, await이 이를 보완해준다.

싱글 스레드 & 멀티 스레드

싱글 : 하나의 스레드를 갖는 프로세스. 첫번째 작업 마무리 후 두번째 작업을 시작한다. 멀티 : 하나 이상의 스레드를 갖는 프로세스. 두개의 스레드가 두개의 작업을 짧은 시간 동안 번갈아가며 수행하기 때문에 두개의 작업이 동시에 처리되는 것으로 보인다.

비동기적 JavaScript

C, Java, Python을 사용하면 상식적으로 별도의 스레드나 프로세스를 사용하지 않는 이상 먼저 작성된 순서로, 즉 동기적으로 코드가 실행된다. 하지만 자바스크립트는 먼저 실행된 코드의 작업이 끝나기 전에 더 나중에 실행된 코드의 작업이 끝날 수도 있다.(전말 자바스크립트는 왜 이 모양일까)

function first(){
    setTimeout(()=>{
        console.log('the first function has been called');
    }, 1000)
}

function second(){
    setTimeout(()=>{
        console.log('the second function has been called');
    }, 500)
}

first();
second();

console 창을 확인해보면 second 함수가 먼저 실행된 게 보인다. 이것이 JavaScript의 비동기성이다. 하지만 JavaScript는 하나의 스레드(Single Thread)기반의 언어이다. 즉, 한번에 하나의 작업밖에 수행하지 못한다는 의미이다. 하지만 Ajax로 데이터를 불러오며 Mouseover 이벤트를 처리하면서 애니메이션도 동작시킨다. 이런 _동시성_이 어떻게 가능한 것일까?

Call Stack

JavaScript 엔진은 메모리 힙과 단일 호출 스택(Call Stack)을 가지고 있다. 하나의 호출 스택만 가지고 있으므로 단 한번에 단 하나의 함수만 처리가 가능하다. 호출된 함수를 추가(push), 제거(pop)하는 형태를 지니고 있다. 이렇게 JavaScript는 다른 함수가 실행되고 있을 때는 종료 직전까지 다른 작업이 중간에 끼어들 수 없다. 이것을 Run-to-completion이라 한다. 그렇다면 동시 실행이 불가능할까? 하지만 JavaScript는 엔진으로만 돌아가는 것이 아니다.

JavaScirpt RunTime

JavaScript 엔진 밖에서도 실행에 관여하는 요소들이 존재한다. WebApi(DOM, AJAX, SetTimeout) 와 Task Queue, EventLoop들이 있다.

Web API

브라우저에서 제공되는 API이며, AJAX나 Timeout등의 비동기 작업을 실행한다.

1. JavaScirpt에서 SetTimeout과 같은 함수를 실행
2. JavaScript엔진은 WebAPI에 SetTimeout을 요청하는 동시에 Callback까지 전달.
3. CallStack에서는 WepAPI요청 이후 SetTimeout작업이 완료되어 제거.

WebAPI는 방금 요청받은 setTimeout을 완료 후 동시에 전달받은 Callback을 Task Queue라는 곳에 넘겨준다.

Task Queue, Event Loop

Task Queue는 Callback Queue라고도 한다. 큐 형태로 WebAPI에서 넘겨받은 Callback함수를 저장한다. 이 Callback함수들은 자바스크립트 엔진의 CallStack의 모든 작업이 완료되면 순서대로 CallStack에 추가된다.

이 때

1. CallStack이 비어있지 않은지 (실행중인 작업이 존재하는지)
2. TaskQueue에 Task가 존재하는지를 판단하고
3. Task Qqueue의 작업을 CallStack에 옮기는 일을 EventLoop가 작업한다.

EventLoop는 이 작업을 처음부터 끝까지 반복하여 실행한다. 그래서 EventLoop인 것!

while (queue.waitForMessage()){
    queue.processNextMessage();
}

MDN은 EventLoop의 작업을 위와 같은 가상의 코드로 설명하고 있다.

예시 코드

setTimeout(()=>{
    console.log('all task was done');
}, 5000);

5초 뒤에 문장을 출력하는 간단한 코드다. 어떻게 비동기적으로 작동하는지 알아보자!

1. 코드 실행 후 setTimeout 함수가 실행되면서 Call Stack에는 setTimeout함수가 추가된다.
2. setTimeout 함수는 자바스크립트 엔진이 아닌, WebAPI가 처리하기에 담겨진 Callback함수를 API로 전달 후 setTimeout 작업을 요청한다.
3. Call Stack에서는 모든 작업이 완료 되었으니 setTimeout이 제거.
4. WebAPI는 setTimeout 작업을 실행하며 5000ms를 기다린다.
5. 5000ms가 지나고, Task Queue로 Callback함수를 전달한다.
6. Event Loop는 Call Stack이 비어있는지, Task Queue에 작업이 있는지 검사하는 중이며 마침 CallStack에 비어있고, Task Queue에 수행할 작업이 추가되어 있다.
7. Event Loop는 Taks Queue에 대기하던 Callback함수 하나를 Call Stack으로 보낸다.
8. Callback함수의 작업도 모두 완료되어 Pop되고 프로그램이 종료된다.

결국 여기서 알 수 있는 점은, JavaScript 엔진은 그저 주어진 코드를 실행하는 온디맨드(on demand)실행 환경이라는 것이다. 그 코드 실행의 스케줄링은 JavaScirpt엔진이 호스팅된 런타임 환경에 맡게되는 것이다.

만약에 Interval이 0이라면?

setTimeout(function(){console.log(1);}, 0);
console.log(2)

위와 같은 경우, 2->1 순서로 실행되는 것을 확인할 수 있다.

코드가 실행될 경우

1. setTimeout이 먼저 실행된 후 CallStack에는 setTimeout이 등록
2. Web API에 setTimeout 작업을 요청함과 동시에 CallStack에는 setTimeout이 삭제되고 console.log(2)가 추가.
3. console.log(2) 작업이 완료되면, TaskQueue에서 대기중이던 console.log(1)(WebAPI에서 TaskQueue로 넘겨진 callback 함수) 작업이 CallStack으로 전달(EventLoop에 의해서)
4. 실행 후 프로그램이 종료된다.

JavaScript는 정말 싱글 스레드일까?

엄밀히 말하자면 자바스크립트 엔진(메인 스레드)이 싱글 스레드인 것이다. (Call Stack) 이는 독립적으로 실행되지 않고, 웹 브라우저나 노드js와 같은 멀티 스레드 환경에 임베디드 되어 실행된다. 때문에 자바스크립트와 Web API, event loop등을 분리하여 말하기 어렵다.

간단하게 정리하자면 자바스크립트는 엔진이 싱글 스레드로 작동, 런타임 환경이 멀티 스레드를 제공하기 때문에 자바스크립트라는 언어는 _멀티 스레드 프로세스 작업_을 다룰 수 있다!

1. Promise

프로미스는 비동기 작업을 조금 더 편하게 처리할 수 있도록 ES6에 도입된 기능입니다. 이전에는 콜백함수로 처리했지만, 콜백함수로 처리할 경우 비동기 작업이 많아지면 쉽게 난잡해집니다.

function increaseAndPrint(n, callback){
    setTimeout(()=>{
        const increased = n+1;
        console.log(increased);
        if(callback){
            callback(increased);
        }
    }, 1000);
}

increaseAndPrint(0, n=>{
    increaseAndPrint(n, n=>{
        increaseAndPrint(n, n=>{
            ...console.log('end!');
        });
    });
});

비동기적으로 처리해야 하는 일이 많아질수록, 코드의 깊이가 계속 깊어지는 현상이 있습니다. Promise를 사용하게 되면 코드의 깊이가 깊어지는 현상을 방지할 수 있어요!

const array = [];
let text = '';

if (array.length===0);{
    text='비어있다.';
} else {
    text='꽉차있다.';
}

console.log(text);

->

const array = [];
let text = array.length === 0 ? '비어있다' : '꽉차있다.' ;

console.log(text);

삼항 연산자의 사용법은 다음과 같습니다.

조건 ? true : false

06 비구조화 할당 문법

const object = {a:1, b:2};
const {a, b}=object;

const array = [1, 2];
const [one, two] = array;

깊은 값 비구조화 할당

객체의 깊숙한 곳에 들어가있는 값을 꺼내는 방법을 알아보자. 예를 들어, 다음과 같은 객체가 있다고 가정해보자.

const deepObject = {
    state: {
        information: {
            name: 'beige',
            language:['korean', 'spanish', 'english']
        }
    },
    value:5
}

여기서 name, languages, value값을 꺼낼 때는 어떻게 해야 할까요?

const {name, languages}=deepObject.state.information;
const {value}=deepObject;

const extracted = {
    name(=name:name),
    languages(=languages=languages), 
    value(=value:value)
}

console.log(extracted);

만약에 key 이름으로 선언된 값이 존재한다면, 바로 매칭시켜주는 문법. (Object-shorthand)

const {
    state:{
        information: {name, languages}
    },
    value
} = deepObject;

const extracted = {
    name,
    languages,
    value
}

console.log(extacted);

07. spread, rest

spread

spread는 펼치다, 퍼뜨리다라는 의미를 갖고 잇다. 이 문법을 사용하게 되면 객체 혹은 배열을 펼칠 수 있다.

const slime={name:'slime';};
const cuteSlime={name:'slime', attribute:'cute'}
const purpleCuteSime={name:'slime', attribute:'cute', color:'purple'}

위 코드의 핵심은 기존의 것을 건들지 않고 새로운 객체를 만든다는 것이다. 이러한 상황에 사용할 수 있는 유용한 문법이 spread다.

아까 코드는 spread 문법을 통해 다음과 같이 사용할 수 있다.

const slime={name:'slime'}
const cuteSlime={...slime, attribute:'cute'}
const purpleCuteSlime={...cuteSlime, color:'purple'}

여기서 사용한 ... 문자가 바로 spread 연산자이다. spread연산자는 배열에서도 사용 가능하다. 기존의 배열을 건드리지 않고 새로운 배열에 모든 내용을 집어넣고 항목을 추가적으로 사용 가능하며, 여러번 사용도 가능하다.

rest

rest는 객체, 배열 그리고 함수의 파라미터에서 사용 가능하다.

객체에서의 rest

const {color, ...rest} = purpleCuteSlime;

rest는 객체와 배열에서 사용할 때 비구조화 할당 문법과 사용된다. 주로 위와 같이 rest라는 키워드를 사용하게 되는데, 이름이 꼭 rest일 필요는 없다.

컴퓨터가 제공하는 도구를 최대한 활용하려면 구식 방식인 텍스트 인터페이스를 사용해야 합니다. 그것이 바로 셸(shell) 입니다. 당신이 접근 가능한 플랫폼에는 한 형태로 셸이 있고, 그 중 다수의 플랫폼에는 선택적일 수 있는 몇 개의 셸이 있습니다. 세부 사항이 다양할 수 있지만, 핵심은 거의 동일합니다. 프로그램을 실행하고 입력을 제공하며 반 구조화된 방식으로 출력을 검사할 수 있습니다.

bash라고 불리는 셸로 수업을 진행합니다. 가장 널리 사용되고 있는 셸 중 하나이며, 구문은 다른 많은 셸에서 볼 수 있는 것과 유사합니다. 셸 프롬프트(prompt)(명령을 입력할 수 있는 곳)를 열려면 먼저 터미널(terminal)이 필요합니다.

사용 방법

터미널을 키게 되면 다음과 같은 프롬프트(prompt)를 볼 수 있습니다.

missing: ~$

1. missing이라는 기계에 있다.
2. 현재 작업의 디렉토리 또는 현재 자신이 어디에 있는지, 또는 ~(홈 디렉토리)를 표시.
3. $는 당신이 루트 사용자가 아니라는 것을 알려줍니다.

missing:~$ echo hello

echo라는 프로그램을 hello라는 인자와 호출하도록 명령한 것입니다. echo 프로그램은 단순하게 인자를 출력합니다. 셸은 명령을 띄어쓰기로 분할하여 첫 번째 단어로 표시된 프로그램을 실행하고, 각 후속 단어를 프로그램이 액세스할 수 있는 인수로 제공합니다. 만약에 띄어쓰기나 특수문자를 인자에 포함시키고 싶다면 '나 "로 둘러싸거나(ex: "my patats"), 혹은 띄어쓰기 앞에 \를 넣어 표기할 수 있습니다 (My\patats)

어떻게 셸이 date나 echo 프로그램을 찾을 수 있을까요? 셸은 파이썬이나 루비처럼 프로그래밍 환경이고, 그래서 변수, 조건부, 루프, 함수를 가지고 있습니다. 셸에서 명령을 실행한다는 것은, 실제로는 셀 인터프리터에다가 짧은 코드를 작성하는 것이라고 볼 수 있습니다. 셀이 명령을 실행하도록 요청되면 명령을 받을 때 프로그램을 검색해야하는 디렉토리를 나열하는 $PATH라는 환경 변수에 접근합니다.

missing:~$ echo $PATH

echo 명령을 실행하면 셸은 echo라는 프로그램을 찾아서 실행해야한다는 것을 보고, $PATH의 :로 분리된 디렉토리 목록을 검색합니다. 만약 발견하고 실행가능하다면 실행합니다. which프로그램을 사용하여 주어진 프로그램 이름에 대해 실행되는 파일을 찾을 수 있습니다. 또한 우리가 실행하고자 하는 파일에 대한 경로를 제공함으로써 $PATH를 완전히 우회할 수 있습니다.

셸에서 이동하기

/ : 파일 시스템의 루트(root). /로 시작하는 경로들을 절대(absolute) 경로라고 부릅니다.

다른 경로들은 상대경로(relative)라 부릅니다. 상대 경로는 최근 작업 디렉토리에 상대적입니다. 최근 작업 디렉토리는 pwd로 볼 수 있고, cd로 디렉토리를 이동할 수도 있습니다. 경로 표시에서 .는 현재 디렉토리, ..는 상위 디렉토리(parent director)를 뜻합니다.

우리의 셀이 현재 작업 디렉토리가 어디인지 알려준다는 것을 명심하세요. 당신은 여러 종류의 유용한 정보를 보여주는 당신만의 프롬프트를 구성할 수 있습니다.

기본적으로 프로그램을 실행하면 현재 디렉토리에서 작동합니다. 예를 들어, 일반적으로 어디선가 파일을 검색한 후에 파일을 만들면, 그 장소에 파일이 만들어집니다.

주어진 디렉토리에 어떤 것들이 있는지 보기 위해서는 ls라는 명령을 사용합니다. 대부분 명령은 행동을 수정하기 위해 시작되는 플래그와 옵션을 쓸 수 있습니다. 보통 -h 또는 -help 플래그는 사용 가능한 플래그와 옵션을 알려 주는 도움말 텍스트를 인쇄합니다. 예를 들어, ls --help는 우리에게 다음과 같은 의미가 있습니다.

이것은 각 파일이나 디렉토리 현재에 대한 더 많은 정보를 제공합니다. 시작부분에 있는 d는 missing이 디렉토리임을 나타냅니다. 그런 다음 세 개의 문자(rwx)의 세 그룹이 따라옵니다. 이들은 파일 소유자 (jungeun-p), 소유 그룹(staff), 다른 모든 사람들이 관련 항목에 대해 각각 권환을 가지고 있는지를 나타냅니다. -는 그 자리의 권한이 없다는 것을 의미합니다.

자바스크립트는 거의 모든 것은 객체라고 생각하면 된다. 객체가 아닌 것들은 정해져 있다. 바로 기본 데이터 타입인 boolean, number, string과 특별한 값인 null, undefined이다. 그 이외에 함수, 배열 등 자바스크립트의 요소는 다 객체이다.

객체란 무엇일까?

객체 = '{key:value}'형태의 프로퍼티들을 저장하는 컨테이너

• 프로퍼티 : 자바스크립트에서 객체는 프로퍼티로 구성되며, "키":"값"의 형식으로 지정해주며, 함수도 지정할 수 있다. 객체에 함수를 지정할 경우 이를 메소드라고 칭한다.

const Data = {
    car: 'pontiac',
    animal: 'Egyptian vulture',
    color: 'green'
}

여기서 key는 car, animal, color이고 value는 pontiac, egyptian vulture, green이다.

파일 철을 담고 있는 박스가 곧 Data. 그리고 그 Data안에는 3개의 파일이 있다. 이 파일이 바로 key이다. car, animal, color라는 이름의 파일이 컨테이너 안에 들어가있다. 그리고 그 안에는 여러 value들이 들어가 있다. 우리는 이 잘 정리된 객체를 통해 수없이 많은 value들을 key인덱스에 담아 빠르고 정확하게 찾을 수 있다.

Object 객체 읽고 쓰고 수정하기

1) 객체 작성

const Data = {};
Data.car = 'Pontiac';
Data.animal = 'Egytian vulture';
Data.color = 'green';

Data
'Pontiac'
'Egytian vulture'
'Green'
{ car:'Pontiac', animal: 'Egytian vulture', color:'green' }

Data를 {}중괄호 안에 선언해주었다. (객체라는 뜻) 이 빈 객체에 각각의 key를 .온점을 찍어 표현하고 콜론 뒤에 'value'를 적어주었다.

2) 객체 읽기

const Data = {
    car: 'pontiac',
    animal: 'Egytian vulture',
    color: 'green'
}
Data.car
Data.animal
Data.color
or
Data['car']
Data['animal']
Data['color']

만들어진 객체의 value를 불러올 때에는 .온점과 []대괄호를 사용한다.

.온점 : 객체를 만들 때와 마찬가지로 value를 불러올 수 있다. []대괄호 : 스페이스가 포함된 키는 대괄호로 접근하고, 숫자로 된 키값은 대괄호로 접근해야 한다. 반드시 따옴표를 넣어주어야 한다.

3) 객체에 키와 벨류값 추가하기

배열은 추가할 수 있을까? 객체는 추가할 수 있을까? 모두 가능하다.

const Data = {
    car: 'pontiac',
    animal: 'Egytian vulture',
    color: 'green'
}

Data.array = '[1,2,3]'
Data.person = {}; // person이라는 객체를 객체 안에 생성 
Data.person.name='Edie' // person이라는 객체 안에 key+value 추가 
Data.person.gender = 'female' // person이라는 객체 안에 key+value 추가

'[1,2,3]'
{}
'Edie'
'female'

const Data = {
    ...
    array: [1,2,3]
    person: {name: 'Edie', gender: 'female'}
}

만들어진 Data에 array키를 만들어 배열에 넣어준다. 그리고 다시 객체를 넣기 위해서 person이라는 키를 객체로 선언한 후, 다시 person이라는 객체 안에 key와 value값을 넣어 준다.

여기서 주의할 점은, Data.person이라는 key를 객체로 선언하지 않고 Data.person.name을 바로 만들 순 없다. _객체로 먼저 선언을 해 주어야 한다. _

4) 모든 key, value 불러오기

객체를 읽을 때 한 번에 처리하고 싶다면? for in을 사용하자.

for (key in Data) {
    console.log(key) // 'car', 'animal', 'green'
    value = Data[key]
    console.log(value) // 'Pontiac', 'Egyptian vulture', 'green'
}

5) 객체 관련 메소드

Object관련 메소드를 사용할 수 있다!

• Object.keys() 해당 객체 메소드는 인자로 전달된 객체의 모든 키들을 배열로 보여준다. ['car', 'animal', 'color']

• Object.values() 모든 value들을 배열로 보여준다. ['Pontiac', 'Egytian vulture', 'Green']

• Object.assign(target, source) 인자로 받은 객체들을 합쳐준다. 객체 3개 이상을 넣어줘도 모두 합쳐준다. source 없이 target만 써준다면 target을 그대로 클로닝 해준다.

  const DataCopy = {name: 'Ann', gender: 'female'}
  const newData = Object.assign(Data, DataCopy);
  console.log(newData)
  

{... name: 'Ann' gender: 'female' }

**6) 객체는 레퍼런스로 저장된다**

객체를 비교할 수 있을까? 같은 key, value를 각각 다른 변수명으로 저장ㅇ했다. 
그 안에서 Data.color==Data.name은 같은 value를 지녔으므로 true.
다만 key, value를 담은 변수 자체를 비교하면 false가 나온다. 

**why?** 변수에 객체 리터럴 자체를 저장하는 것이 아닐, 객체가 담긴 어느 메모리의 refernece를 저장하기 때문에 실제 Data와 DataCopy가 갖고 있는 진짜 값은 다른 것이다.  

[Object 객체의 개념과 사용 출처 ](https://velog.io/@edie_ko/JavaScript-Object-%EA%B0%9D%EC%B2%B4%EC%9D%98-%EA%B0%9C%EB%85%90%EA%B3%BC-%EC%82%AC%EC%9A%A9)

---

# Class란? 

클래스는 객체 지향 프로그래밍의 핵심이다. '객체 지향 프로그래밍'이라는 단어에서 '객체'는 JavaScript의 데이터 타입을 말하는 것이 아니라, 말 그대로 사물을 뜻한다.

하지만 **클래스는 결국 key와 value를 갖는 object를 잘 설계하기 위한 틀을 맞다.** 그런데 이 객체는 _특정로직을 갖고 있는 행동(method)과 변경 가능한 상태(멤버 변수)_ 를 갖는다. 

큰 규모의 객체 혹은 비슷한 모양의 객체를 만들어야 한다면, 객체를 매번 만들어서 사용하는 것이 아니라 class라는 큰 설계도를 통해 만들 수 있다. 

let ray = { name: 'Ray', price: 20000, getName: function(){ return this.name; }, getPrice: function(){ return this.price; }, applyDiscount: function(discount){ return this.price*discount; } }

해당 클래스를 보면 프로퍼티 value에 함수가 있다. 위에서 getPrice()라는 함수를 불러오기 위해서는, ray.getPrice()처럼 객체에 접근하듯 불러올 수 있다. 

> 접근 방식: 객체.프로퍼티

**객체 내부에서, 해당 객체의 프로퍼티에 접근하려면 'this'라는 키워드를 사용**한다. 
그래서 getPrice메소드에서 this.price로 price키에 접근할 수 있고 20,000을 가져온다.

### 생성자 Constructor

객체(object)의 설계도인 클래스(class)는 문법이 비슷하다. 대신 클래스는 constructor 라는 생성자 함수가 있다. 클래스에서 constructor 이름을 갖는 메소드는 하나여야 한다. 

> const 변수명 = new 클래스명(key, value)

이렇게 _클래스로 객체를 생성하는 과정_을 **'인스턴스화'** 라고 부른다. 그리고 그 클래스를 통해 생성된 객체를 인스턴스라고 부른다. 
*인스턴스: 클래스의 복제본 

const mornig = new CarePosition('morning', 2000000);

class Car { constructor(name, price); this.name = name; this.price = price; }

- Car는 클래스의 이름이다. 항상 대문자, CamelCase로 작성.
- Car 클래스의 instance를 생성할 때마다 consturctor 메소드가 호출된다.
- constructor() 메소드는 name, price라는 인자를 받는다.
- constructor() 메소드에서 this 키워드를 사용하는데, class의 실행범위(context)에서 this는 해당 객체(instance)를 의미한다. 
- contructor()에서 인자로 넘어오는 name, price를 사용해 Car instance의 name, price 프로퍼티에 값을 할당한다. 
- 이렇게 클래스 내에서 name, price와 같이 변경 가능한 상태값이자 class 내의 컨텍스트 어느 곳에서나 사용할 수 있는 변수를 '멤버 변수'라고 부른다. 
- 멤버 변수는 'this'라는 키워드로 접근한다.

### 인스턴스 instance

위에서 class instance를 생성했다.

>**인스턴스**
클래스를 통해 생성된 객체. 
클래스의 프로퍼티 이름과 메소드를 갖는 객체이다.
인스턴스 마다 모두 다른 프로퍼티 값을 갖고 있다.

- 인스턴스는 class 이름에 new를 붙여서 생성한다.
- 클래스 이름 우측에 () 괄호를 열고 닫고, 내부에는 constructor에서 필요한 정보를 인자로 넘겨준다. 
- Car클래스의 instance를 morning이라는 변수에 저장한다.
- 다시 Car클래스의 새로운 instance를 생성하기 위해서는 new라는 키워드가 필요한데, new 키워드는 constructor()메소드를 호출하고 새로운 instance를 return 해준다. 
- 'Morning' 이라는 string과 2000000이라는 number를 Car 생성자에게 넘겨 주었고, name, price 프로퍼티에 각각의 값이 할당된다.

### 메소드 method

메소드는 함수다. 그런데 객체가 프로퍼티 값으로 갖고 있는 것을 메소드라 부른다. Class의 method는 Object(객체)의 문법과 똑같다. 다만 객체는 프로퍼티마다 ,(comma)로 구분해줘야 했지만, 클래스는 그렇지 않다. 

class Car { constructor(name, price){ this.name=name; this.price=price; this.department = '선릉지점'; }

applyDiscount(discount) {
    return this.price*discount;
}
changeDepartment(departmentName){
    this.department=departmentName;
}

}

[JavaScript Class](https://velog.io/@edie_ko/JavaScript-Class-%ED%81%B4%EB%9E%98%EC%8A%A4)

---

### 10. 프로토타입과 클래스

#### 객체 생성자

프로토타입과 클래스에 대해서 알아보기 전에 우선 *객체 생성자*라는 것을 알아보자. 
객체 생성자는 함수를 통해서 새로운 객체를 만들고 그 안에 넣고 싶은 값 혹은 함수들을 구현할 수 있게 해준다.  

function Animal(type, name, soound) { this.type = type; this.name = name; this.sound = sound; this.say = function() { console.log(this.sound); } }

const dog = new Aniaml('dog', 'bow', 'bowwow'); const cat = new Animal('cat', 'miya', 'miyaaaa');

dog.say(); cat.say();

객체 생성자를 사용 할 때는 보통 함수의 이름을 대문자로 시작하고, 새로운 객체를 만들 때에는 new라는 키워드를 앞에 붙여주어야 한다.

dog가 가지고 있는 say함수와 cat이 가지고 있는 수행하는 코드가 똑같음에도 불구하고 객체가 생성 될 때 마다 함수도 새로 만들어져서 this.say로 설정이 되고 있다.

_같은 객체 생성자 함수를 사용하는 경우_, **특정 함수 또는 값을 재사용 할 수 있는데 그게 바로 프로토타입**이다. 

#### 프로토 타입

프로토 타입은 다음과 같이 객체 생성자 함수 아래에 .prototype.[원하는키] = 코드를 입력하여 설정할 수 있다. 

function Animal(type, name, sound){ this.type=type; this.name=name; this.sound=sound; }

Animal.prototype.say=function(){ console.log(this.sound); }

Animal.prototype.sharedValue=1;

const dog = new Animal('dog', 'bowwow', 'bow'); const cat = new Animal('cat', 'miya', 'miyaa');

console.log(dog.sharedValue); console.log(cat.sharedValue);

#### 객체 생성자 상속받기

예를 들어, 우리가 Cat과 Dog라는 새로운 객체 생성자를 만든다고 가정해보자. 해당 객체 생성자들에서 Animal의 기능을 재사용한다면, 이렇게 구현할 수 있다. 

function Animal(type, name, sound){ this.type=type; this.name=name; this.sound=sound; }

Animal.prototype.sharedValue=1;

function Dog(name, sound){ Animal.call(this, 'dog', name, sound); } Dog.prototype=Animal.prototype;

function Cat(name, sound){ Animal.call(this, 'cat', name, sound); } Cat.prototype=Animal.prototype;

const dog = new Dog('bowwow', 'bow'); const cat = new Cat('cat', 'miya'):

dog.say(); dog.cat();

새로 만든 Dog와 Cat함수에서 Animal.call을 호출해주고 있는데요, 여기서 첫번째 인자에는 this를 넣어주어야 하고 그 이후에는 Animal객체 생성자 함수에서 필요로 하는 파라미터를 넣어주어야 합니다. 

추가적으로 prototype을 공유해야 하기 때문에 상속받은 객체 생성자 함수를 만들고 나서 prototype 값을 Animal.prototype으로 설정한다. 

#### 클래스

클래스는 프로그래밍 언어안에 있는 기능이지만, 자바스크립트에는 포함되지 않았기 때문에 ES5에서는 위와 같이 객체 생성자 함수를 사용하여 비슷한 작업을 구현해 왔다.  

ES6에서는 class라는 문법이 추가되었는데, 우리가 객체 생성자로 구현했던 코드를 조금 더 명확하고, 깔끔하게 구현할 수 있으며 추가적으로 상속도 쉽게 가능하다. 

class Animal{ constructor(type, name, sound){ this.type = type; this.name = name; this.sound = sound; } say(){ console.log(this.sound); } }

const dog = new Animal('dog', 'bow', 'bowwow'); const cat = new Animal('cat', 'miya', 'miyaaa');

dog.say(); cat.say();

//bowbwow //miyaaa

class 사용시, 다른 클래스를 쉽게 상속할 수 있다. 

class Animal{ constructor(type, name, sound){ this.type=type; this.name=name; this.sound=sound; } say(){ console.log(this.sound); } }

class Dog extends Animal{ constructor(name, sound){ super('dog', name, sound) } }

class Cat extends Animal{ construtor(name, sound){ super('cat', name, sound); } }

const dog = new Dog('bow', 'bowwow') const cat = new Cat('miya', 'miyaaa')

dog.say(); cat.say();

practice!

class Food{ constructor(name){ this.name=name; this.brands = []; } addBrand(brand){ this.brands.push(brand); } print(){ console.log(${this.name}을 파는 음식점들:) console.log(this.brands.join(', ')); } }

const pizza = new Food('피자'); pizza.addBrand('파파존스'); pizza.addBrand('도미노');

const coffee = new Food('커피'); coffee.addBrand('starbucks'); coffee.addBrand('커피빈');

객체는 한 변수, 혹은 상수에 여러가지 정보를 담기 위함이었다면, 배열은 여러개의 항목들이 들어있는 리스트와 같다.

const array = [1,2,3,4,5];

배열을 선언할 때에는 이렇게 []안에 감싸주면 된다. 배열 안에는 어떤 값이던지 넣을 수 있으며, 객체 배열을 만들 수도 있다.

const objects = [{name:'dog'}, {name:'cat'}];

선언 후 n번째 항목을 조회하고 싶을 땐 다음과 같이 할 수 있다.

objects[n];
// 첫번째 항목은 0번지

const objects = [{name:'dog'}, {name:'cat'}];
console.log(objects);
console.log(objects[0]);
console.log(objects[1]);

배열에 새 항목 추가하기

배열에 새로운 항목을 추가할 때에는 배열이 지니고 있는 내장 함수인 push를 사용한다. (or concat)

objects.push({name:'hamster'});

배열의 크기 알아내기

배열의 크기를 알아낼 때에는 배열의 length 값을 확인한다.

console.log(objects.length);
// 3

8. 반복문

반복문은 특정 작업을 반복ㄱ적으로 사요할 수 있는 구문이다.

for

for문은 가장 기본적인 반복문입니다. 특정 값에 변화를 주어가며 우리가 정한 조건이 만족된다면 계속 반복한다.

for (let i=0; i<10; i++) {
    console.log(i)
}
// 0.. 9

for (초기 구문; 조건 구문; 변화 구문;)

배열과 for

for (let i=0; i<names.length; i++){
    console.log(names[i]);
}
// dog, cat, hamster

While

while은 특정 조건이 참이라면 계속 반복하는 반복문이다. for문은 특정 숫자를 가지고 숫자의 값을 비교하고, 증감해주면서 반복한다면 while은 조건을 확인만 하면서 반복한다. 때문에 조건문 내부에서 변화를 직접 주어야 한다.

let i = 0;
while (i<10){
    console.log(i);
    i++
}

for ...in

• Object.entires : [[key, value], [key, value]] 형태의 배열로 변환
• Object.keys : [key, key, key] 형태의 배열로 변환
• Object.values : [values, values, values] 형태의 배열로 변환

객체가 지닌

const doggy = {
    name: 'bowwow',
    sound: 'bowwow',
    age: 2
}

fot (let key in doggy) {
    console.log(`${key}: ${doggy[key]}`);
}

//name:bow
//VM8529:1 sound:bowwow
//VM8529:1 age:2

break, continue

반복문 안에서는 break와 continue를 통하여 반복문에서 벗어나거나, 그 다음 루프를 돌게끔 할 수 있다.

for (let i=0; i<10; i++){
    if(i===2) continue;
    console.log(i);
    if(i===5) break;
}
//1, 2, 3, 4, 5

i=2일 때 continue를 하여 console.log를 해야 하지만 코드를 수행하지 않고 바로 3으로 넘어간다. i=5일 땐 break를 통해 반복문 종료.

function sumOf(numbers){
    let sum = 0;
    for (let i=0; i<numbers.length; i++){
        sum += numbers[i];
    }
    return sum;
}

const result = sumOf[1,2,3,4,5]
console.log(result);

숫자로 이루어진 배열이 주어진다. 해당 숫자 배열 안에 있는 숫자 중 3보다 큰 숫자로만 이루어진 배열을 만들어서 반환.

function biggerThanTree(numbers){
    const array = [];
    for(i=0; i<numbers.length; i++){
        if(numbers[i]>3){
            array.push(numbers[i]);
        }
    }
    return array;
}

const numbers=[1,2,3,4,5,6,7];
console.log(biggerThanTree(numbers));

09 배열 내장함수

forEach

가장 쉬운 배열 내장함수 입니다. 기존에 우리가 배웠던 for문을 대체시킬 수 있다.

const fruits = ['banana', 'cherry', 'melon', 'kiwi']

// for
for (let i=0; i<fruits.length; i++){
    console.log(fruits[i]);
}

// forEach
fruits.forEach(fruit=>{console.log(fruit)});

forEach 함수의 파라미터로는 각 원소에 대하여 처리하고 싶은 코드를 함수로 넣어준다. 이 함수의 파라미터 hero는 각 원소를 가리키게 되는데, 이렇게 함수 형태의 파라미터를 전달하는 것을 콜백함수라고 부른다. 함수를 등록해주면 forEach가 실행.

map

배열 안의 각 원소를 변환 할 때 사용되며, 새로운 배열이 탄생.

const array = [1,2,3,4,5,6,7];
const squared =[];

//forEach
array.forEach(n=>{squared.push(n*n);});
console.log(squared);

//map
const square = n => n*n;
const squared = array.map(square);

map 함수의 파라미터로는 변화를 주는 함수를 전달해준다. 이를 변화함수라고 부른다. 현재 우리의 변화 함수 square는 파라미터 n을 받아와 이를 제곱해준다. array.map 함수를 사용할 때 square를 변화함수로 사용함으로서, 내부의 모든 값에 대하여 제곱을 해서 새로운 배열을 생성했다.

변화 함수를 꼭 이름을 붙여 선언할 필요는 없다.

const squared = array.map(n=>n*n);
console.log(squsred);

indexOf

const fruits = ['banana', 'cherry', 'melon', 'kiwi']
const index = fruits.indexOf('banana');
console.log(index);

indexOf 함수는 원하는 항목이 몇번째 원소인지 찾아주는 함수다. 배열 안에 있는 값이 숫자, 문자열 또는 불리언이라면 찾고자하는 항목이 몇번째 원소인지 알아내려면 indexOf를 사용한다. 하지만 배열 안에 있는 값이 객체이건, 배열이라면? 찾을 수가 없다.

findIndex

id가 3인 객체가 몇번째인지 찾으려면 findIndex 함수에 검사하고자 하는 조건을 반환하는 함수를 넣어서 찾을 수 있다. (객체가 몇 번째인지 반환)

const index = todos.findIndex(todo => todo.id ===3);

find

찾아낸 값 자체를 반환해준다

const todo = todos.find(todo=>todo.id ===3);
// {id:3, text:'test', done:true}

filter

filter함수는 배열에서 특정 조건을 만족하는 값들만 따로 추출하여 새로운 배열을 만든다.

const taskNotTodo = todos.filter(todo=>todo.done === false);

todos.filter(todo=> !todo.done);

filter 함수에 넣는 파라미터는 조건을 검사하는 함수를 넣어주고, 이 함수의 파라미터로 각 원소의 값을 받아오게 된다.

splice

배열에서 특정 항목을 제거할 때 사용한다.

splice(a, b) // 삭제할 인덱스, 갯수

slice

배열을 잘라낼 때 사용하는데, 기존의 배열을 건들이지 않는다.

slice(a, b) // 어디서부터 자를지, 어디까지 자를지

concat

여러 개의 배열을 하나의 배열로 합쳐준다. concat은 각 배열에 변화를 주지 않는다.

const arr1 = [1,2,3];
const arr2 = [4,5,6];
const concated = arr1.concat(arr2);

join

배열 안의 값들을 문자열 형태로 합쳐준다.

reduce

함수 잘 사용 할 줄 알면 정말 유용한 내장 함수입니다. 배열에 대하여 총합을 구해야 하는 상황이 왔다고 가정해보자.

const numbers = [1, 2, 3, 4, 5];
let sum = array.reduce((accumulator, current) => accumulator + current, 0);

reduce 함수에는 두개의 파라미터를 전달한다. 첫번째는 accumulator와 current를 파라미터로 가져와서 결과를 반환하는 콜백함수, 두번째는 reduce함수에서 사용할 초깃값.

const numbers=[1,2,3,4,5];
let sum = numbers.reduce((accumulator, current) => {
    console.log({accumulator, current});
    return accumulator + current;
},0);
console.log(sum);

배열을 처음부터 끝까지 반복하면서 우리가 전달한 콜백 함수가 호출이 되는데, 처음엔 accumulator 값이 0이다. (왜냐하면 여기서 두번째 파라미터인 초깃값으로 0을 설정했기 때문)

처음 콜백 함수 호출 -> 0 + 1 =1; -> 다음 콜백함수 호출시 accumulator =1; -> 콜백함수가 두번째 호출 -> 1 + 2=3; -> 세번째 호출시 accumulatr = 3; ... -> 15

if 문

const a=1;
if (a+1===2){
    console.log('a+1 is 2');
}

특정 조건이 만족 될 때에만 특정 코드를 실행 시킬 수 있습니다.

if(조건){
    코드
}

코드가 {}로 감싸져 있는데, 이를 코드 블록이라고 한다. 만약에 조건이 true가 된다면 지정한 코드가 실행, 아니라면 false라면 코드가 실행되지 않는다.

let과 const는 다른 블록 범위에서 똑같은 이름으로 선언할 수 있다.

const a =1;
if(true){
    const a=2;
    console.log('value a in if ' +a); // a=2
}
console.log('value a out of if ' +a); // a=1

if-else, if-else if

const a = 10;
if (a === 5) {
    console.log('5');
} else if {
    console.log('10');
} else {
    console.log('not 5 not 10');
}

switch/case

특정 값이 무엇이냐에 따라 다른 작업을 하고 싶을 때 사용한다.

const device = 'iphone';

switch(device){
    case 'iphone':
        console.log("iphone!");
        break; // 그 다음 case 코드 방지
    case 'iPad':
        console.log("IPad!");
        breake;
    case 'galaxy':
        console.log("galaxy!");
        breake;
    default: // 우리가 case로 준비하지 않는 값 
        console.log('i dont know');
}

05. 함수

함수는 특정 코드를 하나의 명령으로 실행할 수 있게 해주는 기능이다.

const a =1;
const b =2;
const sum = a+b;

// function
function add(a, b){
    return a+b;
}
const sum = add(1, 2);
console.log(sum);

함수에서는 어떤 값을 받아올지 정해주는데 이를 파라미터(매개변수)라고 한다. 함수 내부에서 return 키워드를 사용하여 함수의 결과물을 지정할 수 있다. return을 하게 되면 함수는 끝난다.

function hello(name){
    console.log('hello, '+name+'!');
    //template Literal
    console.log(`hello, ${name}!`);
}
hello('cherry');

function getGrade(score){
    if(score===100){
        return A++;
    } else if (score ===90) {
        return A;
    } ...
}

const greate = getGrade(90);
console.log(grade);

arrow function

화살표 함수 문법. function 키워드 대신 텍스트 => 문자를 사용해서 함수를 구현하는데, 화살표 좌측에는 함수의 파라미터, 화살표 우측에는 코드 블록이 들어온다.

const add = (a, b) => {
    return a+b;
}
console.log(add(1,2));

// inside return
const add = (a, b) => a+b;
console.log(add(1,2));

06. 객체

객체는 우리 변수 혹은 상수를 사용하게 될 때 하나의 이름에 여러 종류의 값을 넣을 수 있게 해줍니다.

객체를 선언할 때에는 이렇게 {} 문자 안에 원하는 값들을 넣어주면 됩니다.

key(키) : value(원하는 값)

const dog = {
    name: 'dog',
    age: 2
}

함수에서 객체를 파라미터로 받기

const Jin = {
    name: 'seokjin',
    age: '30',
    stack: 'singer'
}
const RM = {
    name: 'namjoon',
    age: '28',
    stack: 'rap'
}

function print(hero){
    const text = `${hero.stack}(${age}) is ${hero.name}.`;
    console.log(text);
}

print(Jin);
// singer(30) is seokjin
print(RM);
// rap(28) is namjoon

객체 비구조화 할당

function print(hero){
    const { stack, name, age } = hero;
    const text = `${stack}(${age}) is ${name}.`;
    console.log(text);
}

const { stack, name, age } = hero;

-> 객체에서 값들을 추출해서 상수로 선언해주는 구조. 더 나아가면, 파라미터 단계에서 객체 비구조화 할당을 할 수 있다.

function print({stack, name, age}) {
    ...
    console.log(text);
}

객체 안에 함수 넣기

객체 안에도 함수를 넣을 수 있다.

const dog = {
    name: 'dog',
       sound: 'bowwow',
      say: function say(){
        console.log(this.sound);
    }
}
dog.say();
//bowwow

여기서 함수가 객체 안에 들어가게 되면, this는 자신이 속해있는 객체를 가리키게 됩니다. 함수를 선언할 때에는 이름이 없어도 괜찮다. ex) say:function(), dog.say();

객체 안에 함수르 넣을 때, arrow function으로 선언한다면 제대로 작동하지 않는다. 왜냐하면 function으로 선언한 함수는 this가 자신이 속한 객체를 가리키게 되는데, arrow function은 자신이 종속된 인스턴스를 가리킨다.

Getter, Setter functioin

객체 안에 Getter 함수와 Setter함수를 설정하는 방법도 있다. 객체를 만들고 나면, 다음과 같이 객체 안의 값을 수정할 수도 있다.

const = numbers = {
    a :1,
    b: 2
};

numbers.a = 5;
console.log(numbers);

Getter함수와 Setter 함수를 사용하게 되면 특정 값을 바꾸거나 특정 값을 조회하려고 할 때 원하는 코드를 실행시킬 수 있다.

Getter function

const numbers = {
    a:1,
    b:2,
    get sum(){
        console.log('sum function start');
        return this.a + this.b;
    }
};
console.log(numbers.sum); // sum function start, 3
numbers.b= 5;
console.log(numbers.sum); // sum functoin start 6

numbers.sum()이 아닌, numbers.sum을 조회했을 뿐인데도 함수가 실행되며 그 결과 값이 출력된다. 이런 식으로 Getter함수는 특정 값을 조회할 때 우리가 설정한 함수로 연산되는 값을 반환합니다.

Setter function

const numbers = {
    _a:1;
    _b:2,
    sum:3,
    calculate(){
        console.log('calculate');
        this.sum = this._a+this._b;
    },
    get a(){
        return this._a;
    }
    get b(){
        return this._b;
    }
    set a(value) {
        console.log('a is change');
        this._a = value;
        this.calculate();
    }
    set b(value){
        console.log('a is change');
        this._b = value;
        this.calculate();
    }

    console.log(numbers.sum);
    numbers.a=5;
    numbers.b=7;
    numbers.a=9;
    console.log(numbers.sum);
}

Setter함수를 설정 할 때에는 함수의 앞 부분에 set 키워드를 붙인다. Setter 함수를 설정하고 나면, numbers.a=5; 설정시 5를 함수의 파라미터로 받아오게 된다. 객체 안에 _a, _b라는 숫자를 선언해 주고 이 값들을 위한 getter와 setter 함수를 설정해 주었다.

이전에 만든 객체 에서는 numbers.sum이 조회 될 때마다 덧셈이 이루어졌지만, 이제는 a or b값이 바뀔 때마다 sum 값을 연산하게 된다.

React에서는 React-Router-Dom을 이용해서 페이지를 전환하지만, 회사에선 React-Native에서는 Navigation 라이브러리인 React Navigation을 사용한다고 했다.

RN(Routing)은 브라우저처럼 상단 탭이 존재하지 않는다. 페이지 간 이동이 쉽지 않을 뿐더러, 브라우저처럼 '뒤로가기'를 제공하기 때문에 라우팅 패스를 모두 기억해야 한다. 이를 지원하는 라이브러리가 react-navigation-stack입니다. 다만 deep하게 구성 할 수록 뒤로가기시 버벅임을 인지해야 합니다.

React-navigation-stack

React Native Navigation stack 설치

setting

react navigation 설치

yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

*ios - install the pods (via Cocoapods) to complete the linking

npx pod-install ios

App.js NaviationContainer 컴포넌트를 import 해준다.

import 'react-native-gesture-handler';
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';

export default function App() {
  return (
    <NavigationContainer>{/* Rest of your app code */}</NavigationContainer>
  );
}

1. CreateStackNavigator 앱의 각 화면이 전환될 수 있는 기본 틀을 제공

2. RouteConfigs 각 화면으로 안내해주는 표지판

3. StackNavigationConfig 전체 길에 대한 안내를 담당. Modal로 띄울지, Screen으로 띄울지, user를 어딜 제일 처음 안내 할 지 같은 설정.

4. navigationOptions 세부 설정. (Header, Tab, 등등)

CreateStackNavigator

React-navigation-tab

참고자료 React Ntaive Tutorial React Navigation으로 로그인, 탭 네비게이터 화면 구성하기 React-Native Navigation(화면 전환)

import React from 'react';
import { View, Text, Image, ScrollView, TextInput } from 'react-native';

const App = () => {
  return (
    <ScrollView>
      <Text>Some text</Text>
      <View>
        <Text>Some more text</Text>
        <Image
          source={{
            uri: 'https://reactnative.dev/docs/assets/p_cat2.png',
          }}
          style={{ width: 200, height: 200 }}
        />
      </View>
      <TextInput
        style={{
          height: 40,
          borderColor: 'gray',
          borderWidth: 1
        }5t = }
        defaultValue="You can type in me"
      />
    </ScrollView>
  );
}
export default App;

React Fundamentals

components component will render a TEXT element: JSX React and React Native use JSX, a syntax that lets you write elements inside JavaScript props Props is short for “properties.” Props let you customize React components.

const Cat = (props) => {
  return (
    <View>
      <Text>I am also a {props.name}</Text>
    </View>
  )
}
const App = () => {
  return (
    <View>
      <Text>Welcome</Text>
      <Cat name="Maru" />
      <Cat name="Jelly" />
      <Cat name="Cheese" />
    </View>
  );

state While you can think of props as arguments you use to configure how components render, state is like a component’s personal data storage. State is useful for handling data that changes over time or that comes from user interaction. State gives your components memory!

const Cat = (props) => {
  const [isHungry, setIsHungry] = useState(true);
  return (
    <View>
      <Text>I am {props.name}, and I am {isHungry ? "hungry" : "full"}!</Text>
      <Button
        onPress={() => {
          setIsHungry(false);
        }}
        disabled={!isHungry}
        title={isHungry ? "pour me some milk, plsease" : "Thank you!"} />
    </View>
  )
}
const App = () => {
  return (
    <>
      <Cat name="Maru" />
      <Cat name="Jelly" />
    </>
  );
}

TextInput

TextInput is a Core Component that allows the user to enter text.

• onChangeText
• onSubmitEditting

  <TextInput
        style={{height: 40}}
        placeholder="Type here to translate!"
        onChangeText={text => setText(text)}
        defaultValue={text}
      />

ScrollView

generic scrolling container that can contain mulple components and views.

<ScrollView>
...
</ScrollView>

The ScrollView works best to present a small amount of things of a limited size.

List Views

참고자료

마지막 일기가 교육 시작한지 1개월 후에 썼으니, 약 7개월의 시간이 흘렀다고 할 수 있다. 6개월동안 참 많은 일들이 있었지만, 결과적으로 올해 초에 목표로 했던 것들은 거의 이룬 셈이다. 교육 수료, 그리고 취업.

수료가 끝난 후 운이 좋게도 3-4주 안에 취업을 하게 되었다. 내가 웹을 비롯한 앱개발의 영역도 늘려가게 될 것이라 예상치 못한 일이었지만, 좋은 기회라고 생각한다. 하루하루 축적하다보면 어제의 나보다는 분명 나아지겠지.

아직은 내 이름 앞에 놓이는 개발자라는 수식어가 낯설다. 내가 다른 영역의 직군의 업을 삼게 될 거란 것도, 회사를 다니게 될 거란 사실도 고밀도로 농축되어 순식간에 이뤄진 결과지만 앞선 미래의 불안함을 지금 당장으로 끌어다 소비하고 싶지 않다. 입사 후에는 흡수해야 할 것들, 배워야 할 것들, 이루어야 할 것들이 많다. 불안함도 크지만 불안함의 뒷면엔 설렘이라는 단어가 존재한다는 사실을 언제나 염두하기로 마음을 먹었다.

고민이 있거나 힘든 일이 있으면 엄마에게 곧잘 털어놓고는 한다. 출근 전날까지 과연 해낼 수 있을까 불안함이 더 컸는데 미래에 있을 일들을 벌써부터 고민하지 말고 하루하루에 충실하는 게 좋다는 말을 해주셨다. 매일매일 차근차근, 차곡차곡 쌓다보면 나도 모르는 순간에 적응하게 될 것이라 믿고 마음을 굳게 먹었다.

나는 신입이고, 신입이니 신입으로서 해내야 할 것들에 집중해야겠다. 어쨌거나 저쨌거나 합법적으로 나를 쫄 수 있어서(?) 기쁘다.

오늘, 내일, 일주일, 한달, 1분기, 1년, 2년, 3년. 계획을 세워 공부나 일하기를 좋아하지만 향후 1년 동안은 하루하루에만 충실할 생각이다. 걱정과 고민은 줄이고, 머리는 가볍게 행동은 빠르게.

언제나 내 첫 시작은 0이 아닌 1부터 시작되었는데. 많이 고민하고 선택한 분야이기에, 나는 오랫동안 버티고 버텨 남아있을 생각이다.

할 일은 존나 빨리 해치우면 그제서야 아름다워 지는 것이다!

👩‍🏭한달차 신입 개발자의 업무 적응기

오픈소스 모바일 애플리케이션 프레임워크. React + React Native App = real native apps(android, iOS개발 가능)

특징

• collection of "Special" React Components
• Components compiled to Native Widget (컴파일을 통해 Native 위젯으로 변환)
• Native platform APIs exposed to JavaScript (자바스크립트로 Native 플랫폼 API 사용 가능)

변환 방식

React Native -> Android(EditText), iOS(UITextField)

⚡UI는 native views로 변환되지만, 로직은 JavaScript로 실행 가능. -> NativeApp에는 NativePlatformModules/API가 존재하고, JS와 이어주는 JS Core(Virtual Machine)이 존재하기 때문.

💫Setting(Windows, Android 기준)

React Native CLI

필요한 기능이 있을 경우 모듈을 직접 사용해서 만들 수 있다.

🍫Chocolatey 설치

chocolatey는 Windows에서 필요한 패키지를 설치, 관리하는 Widdows 패키지 관리자(우분투에서의 apt-get과 비슷)

설치 방법 : https://chocolatey.org/install

PowerShell 관리자 권한으로 실행 후 명령어 입력 및 설치

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))

완료시 choco-version 확인 -> v0.10.15

• 패키지 검색 : choco search 패키지명

• 패키지 설치 : choco install 패키지명 (-y)

• 설치된 패키지 확인 : choco list --localonly

• 업데이트 : choco upgrade 패키지명

• 패키지 삭제 : choco uninstall 패키지명

  Node.js, Python, JDK 설치

  choco를 이용해서 한번에 설치 가능하다.

  choco install -y nodejs.install python2 openjdk8

  React Native CLI 설치

  $ npm install -g react-native-cli

  Android Studio, ios 설치 및 변수 설정

1. Install Android Studio
2. SDK 설정

• Android 10(Q)
• Android SDK Platform 29, 29.0.3

3. 변수 설정

   %LOCALAPPDATA%\Android\Sdk\platform-tools

   ![] (https://images.velog.io/images/jungeun-p/post/f4d735ce-5a4a-453d-9b3d-2ad3861e9fc1/image.png)

   %LOCALAPPDATA%\Android\Sdk\platform-tools

   참고자료 ios, android 공식자료

프로젝트 생성

$ yarn react-native init FirstApp(name)

Virtual Device

open ./TestProject/androidcreate a new AVD

프로젝트 실행

실행중인 터미널에 react natvie 실행 후, 추가로 오픈된 터미널에 run-android (cd android folder)

$yarn react-native start
$yarn react-native run-android 

💫Setting(Mac, IOS기준)

• terminal -> brew open

  Node & Brew download

  brew install node
  brew install watchman
  

  Xcode & CocoaPods download

  sudo gem install cocoapods

  install cli, react-native project

  npm install -g react-native-cli
  react-native init TestProject(name)

  환경변수 설정

  export ANDROID_HOME=$HOME/Library/Android/sdk
  export PATH=$PATH:$ANDROID_HOME/emulator
  export PATH=$PATH:$ANDROID_HOME/tools
  export PATH=$PATH:$ANDROID_HOME/tools/bin
  export PATH=$PATH:$ANDROID_HOME/platform-tools

  실행

  npm install
  npx react-native run-ios
  
  R -> Ctrl+C
  npx react-native start
  

• • error node delete -> pod lock delete -> npm install -> npx pod-install
• • npm upate npm install --legacy-peer-deps

비즈니스 로직과 프레젠테이션 로직을 분리하기 위한 패턴이다.

리액트는 Component단위로, 이벤트 제어와 스타일링이 자유로운 편이며 정해진 양식이 없다. 좀 더 체계적으로 잡아가기 위한 디자인패턴이라고 생각하면 좋다.

Container + Presenter

데이터 처리와 데이터 출력을 분리 (logic + presneter) Contaienr: APIRequest, ExceptionError, setState... Presenter: Only Props, UI, no logic

Container(TopAlbum Component)

import React, {Component} from 'react';
import OneAlbum from './OneAlbum.js';

export default class TopAlbum extends Component{

state = {
    currentAlbum:0
}

componentDidMount(){
    this._listMusic()
}

_listMusic = async() => {
    const albums = await.this._callApi()
    await this.setState({
        albumList:albums
    })
    this._callOneAlbum()
}

_callApi = () => {
    return fetch('api')
    .then(album=>album.json())
    .catch(err=>console.log(err))
}

_callOneAlbum = ()=> {
    const album = this.state.albumList.albums.album
    const axelel = album.map((info, index) => {
    // OneAlbum Component
    return <OneAlbum artist={info.artist.name} albumName={info.name} image={info.image[2]["#text"]} key={index}/>
    })

    return axelel
}

render() {
    return (
      <div className="columns is-mobile">
        <div className="column is-full">
          <div className="columns is-mobile is-padding">
            <div className="column">
              <h3 className="is-size-3 has-text-weight-bold is-title">Top Albums</h3>
            </div>
            <div className="column is-2 is-pulled-right is-pulled-bottom has-text-right">
              <a href="#" className="is-size-6 has-text-grey">more</a>
            </div>
          </div>
          <hr className="has-background-grey"/>
          <div className="columns is-padding is-touch is-4-touch">
            {this.state.albumList ? this._callOneAlbum() : 'Loading...'}
          </div>
        </div>
      </div>
    )
  }

}

1. listMusic함수 실행
2. listMusic에서 callApi실행 후 return값을 변수에 담는다.
3. callApi에서 API를 json형식으로 받아와서 return
4. listMusic함수에서 받아온 json 데이터를 state에 담아 callOneAlbum 함수를 부른다.
5. callOneAlbum에서 데이터를 정리 후 props로 전달.

🔽🔽🔽

화면에 보여주는 컴포넌트

Presenter(OneAlbum Component)

import React, { Component } from 'react'

export default class OneAlbum extends Component {

  static defaultProps = {
    artist: 'Artist',
    albumName: 'Album',
    image: 'Loading'
  }

  render() {
    return (
      <div className="column box">
        <a href="#" className="has-text-black-ter is-flex-mobile is-hover-scaleup">
          <figure className="image is-inline-block">
            <img src={this.props.image} alt={this.props.albumName} />
          </figure>
          <p>
            <span className="title is-size-6 is-size-4-mobile">{this.props.albumName}</span>
            <br/>
            <span className="subtitle is-size-7 is-size-5-mobile has-text-grey">{this.props.artist}</span>
          </p>
        </a>
      </div>
    )
  }
}

자료출처

😊styled-component란?

react-native 스타일링을 위한 styled-components 라이브러리.

자료출처 자료출처

Atomic Design Pattern

작은 단위의 컴포넌트를 재사용성이 강하게, 단단하게 설계함으로서 점진적 & 지속적으로 개발하기 용이한 방식

Atom(원자)

• Generic, Abstract
• 가장 작은 단위의 컴포넌트
• 어떠한 context가 주어지건, 해당하는 컴포넌트가 생성되어야 한다.
• 다양한 state를 지니고 있어야 하며 추상적이지만 포용될 수 있도록 설계. ex) button:disabled, hover, diffrenet sizes, etc.
• No 마진, No 위치값

Molecule(분자)

• LittleComplex
• 원자를 엮어 복잡한 단위의 분자 생성
• 분자만의 property를 지니고 있고, 원자에 기능을 만들 수 있다.
• 분자가 원자의 위치값 지정

Organism(유기체)

• MoreComplex
• 분자를 엮어 만들어 생성, 분자가 되지 않는 원자가 엮이기도 한다.
• 최종 컴포넌트가 최종 모습을 지닌다.
• contents에 따라 최대한 재사용성 높게 개발하는 것이 중요.
• 유기체는 분자와 원자의 위치값을 조정.

Template(템플릿)

• layout, nostyling
• 유기체와 컴포넌트의 position, placements를 정해주는 역할.
• Styling과 color가 들어가지 않는다.
• 페이지의 그리드

Page(페이지)

• Final
• 페이지는 템플릿을 사용해서 정해진 그리드에 component를 그려 display.

⚡특징

• 디자인과 맞춰서 진행.
• 잘 구현된다면 좋은 Legacy Code가 생성.
• 스토리북과 적용하면 더 큰 효과.
• 작은 단위의 component를 설계해 놓으면 개발 기간 단축 가능.

자료출처 자료출처

웹 페이지 제작시 모든 브라우저에서 깨지지 않고 의도한 대로 올바르게 호환시키는 작업.

서버 사이드 렌더링 vs 클라이언트 사이드 렌더링

전통적인 웹방식(SSR) : 브라우저에 나타나는 형태 그대로를 html로 만들어 제공, 브라우저는 html을 표시하는 방식. 페이지를 로딩할 때마다 서버로부터 리소스를 전달받아 해석하고 화면에 렌더링하는 방식

클라이언트 사이드 렌더링(CSR) : 사용자의 행동에 따라 필요한 부분만 다시 읽어들이기 때문에 서버 측에서 렌더링하여 전체 페이지를 다시 읽어들이는 것보다 빠른 인터렉션을 기대할 수 있다. JSON파일만 보내주고, html을 그리는 역할은 자바스크립트를 통해 클라이언트 측에서 수행.

적응도

사실 아침 9시부터 진행되는 이 말도 안되는 코스 스케줄에 적응할 수 있을까 걱정했지만, 인간은 적응의 동물임을 뼈저리게 느꼈다. 이제는 주말에도 6시에 눈이 떠지는 일이 익숙해질만큼 눈 뜨는 건 어렵지 않다.

수업 진도도 어쩌다보니 적응이 되어버렸다. 초반엔 이해가 가지 않는 부분을 제쳐두고 따라가려니 막막함에 스트레스를 많이 받았지만, 많이 익숙해졌다. 이해가 온전히 되었다기 보다는, 쓰는 언어나 패턴들이 눈에 보여지기 시작했다는 말이 더 알맞을 것이다. 아직 코드를 더 많이 써봐야 익숙해지겠지만 한 달 만에 수업에 대한 안정기를 찾았다는 사실만으로도 굉장히 만족한다. 난 정말 울면서 다니진 않을까 걱정을 많이 했거든.

이럴 거면 차라리 수능을 다시 보고 학위를 따는 게 낫지 않을까 싶을 만큼 공부에 매달리는 시간이 수험생 시절보다 높았다. 어떻게든 해결하고 이해하고 싶은 마음이 간절해서 앉아있는 시간이 많았는데, 이제는 어느 정도 요령이 생긴 편. 아직 갈 길은 멀었지만 익숙해지기 위해 투자했던 달이라고 생각한다. 혹여나 내 적성이 아니기에 이렇게 힘든 건 아닐까 싶어 지인들에게 솔잔히 털어놓으니, 풀어내고자 하는 의지가 이미 천직이라며 용기를 줬다. 적어도 내가 좋아하는 것들에 지고 싶지는 않다는 생각에 존버할 생각이다.

만족도

재밌다. 사실 재미가 없거나 흥미가 떨어졌다면 의욕마저 떨어졌을텐데, 새롭게 배우고 지식을 쌓는다는 행위 자체가 매력적으로 다가왔다. 실생활에서 접했던 부분들과 연결지어 생각해보면 웹개발의 모든 일환들이 이런 식으로 구현되었다는 깨달음이 재밌었다. 물론 자바는 아직 내게 미친놈이 맞다. 미친놈인데 재밌으니까 일단은 품고 존버를 한다는 말이 더 정확하다.

무엇보다 평소에 개인 포트폴리오나 개인샵을 만들었을 때, 이런 기능에 이런 부분을 보완하고 깔끔하게 떨어지는 디자인의 사이트나 플랫폼이 있었으면 좋겠다는 욕구가 항상 존재했는데 그 부분을 개인적인 역량으로 풀어낼 수 있다는 사실이 꽤 매력적으로 다가왔다. 확실히 무언가를 구현할 수 있는 익숙한 손이 되어간다는 것만으로도 재미있다.

공부를 하다보니까 평소에 내가 삶을 어떻게 다루는지 알 수 있었다. 코드를 쓰다가 막히면 될 때 까지 혼자 고민을 곱씹는다거나, 다른 사람이 풀어낸 코드가 어떻게 구현 되었는지 끊임없이 묻는다거나, 공부한 것을 혼자 정리할 시간이 필수적으로 필요한 사람이란 걸 깨닫게 되었고 인생도 그렇게 살아왔구나 싶었다. 어렵긴 하지만 코드를 배우고 익숙한 손이 되어가고 있다는 지적 쾌감이 아직까진 버틸만하다는 매개체를 선사해주는 것 같다.

보안

중간 중간에 쉬는 타임이 필요하다. 뭐 하나에 빠지면 될 때까지 파고드는 성격이라 쉽게 지친다. 정작 정해둔 공부 스케줄을 제대로 마무리 짓지 못한다거나, 다른 공부로 마무리 되는 경우가 꽤 많았다.

코드를 더 많이 쳐봐야 할 것 같다. 알고리즘이나 코딩테스트가 요하는 논리적인 구조의 이해보다는 직접적으로 코드를 구현하는 일이 훨씬 재밌다. 애초에 프론트엔드를 목표로 두었기 때문이기도 하지만, 배우면서 확실히 깨달았다. 내가 어떤 부분에 흥미를 지니고 있고, 어떤 부분이 강점인지 공부를 하면서 깨달았는데 그 부분에 대한 자신만의 확신을 종강즈음에 적립할 수 있었으면 좋겠다.

나는 사고체계가 타고나기를, 다이어그램으로 모든 생각을 정리한다. 하지만 자바를 비롯한 많은 언어들은 그런 형식으로 구현되지 않아서, 내 인식대로의 컴파일을 따로 챙겨두지 않으면 머릿속이 정말 엉망이 된다. 두 번 일을 하는 것과 다를 게 없어서 매우 빡치지만 두 번 더 공부한다는 마음으로 쓰고, 정리하고, 나누고, 비교하면서 꾸준히 해나가야겠다.

계획

나는 내가 잘 하는 걸 잘 하고 싶다. 이것만큼은 내가 자신이 있다, 혹은 이 분야 만큼은 끊임없이 배울만한 자세를 지니고 있다를 어필하는 게 내 강점이지 않을까. 그러기 위해선 실력을 쌓는 게 먼저니까, 좋아하는 것들과 잘 할 수 있는 것들을 중점적으로 왜 이 코드를 구현했는지에 대한 기록을 많이 남겨둘 생각이다. 결국 내가 짠 코드의 주인은 나이기 때문에 담담하고도 당당하게 설명할 수 있어야겠지.

에러가 뜬 코드들을 보면, 그러니까 아주 조급하지 않고 천천히 쳐다보면 문제가 보인다. 적어도 코드를 쓸 때만큼은 차분하고도 고요한 심연이 깃들지 않으면 잔실수가 많을 것 같아서 속으로 천천히를 되뇌이는 연습을 해야 겠다고 생각했다.