아무래도 수입이 없는 상태에서 나한테 가장 중요한 건 가격. 근데 다영이 영어는 정말 충격적으로 저렴했다. 30분씩 주 2회 32000원 정도였다. 가격이 저렴한 만큼 별 기대는 안했는데 선생님을 잘만나서 그런지 너무 잘한 선택이라고 느껴지는 요즘이다.

얼마전에 기업면접을 봤는데 마지막에 글로벌 업무에 대해 어떻게 생각하냐는 질문을 받았다. 그래서 자신감있게 나는 오픈마인드이고 이 기업은 해외 이익 상승을 위해 전략적으로 움직인다 등 최대한 잘 말하려고 노력했다.

"방금 하신 말씀 영어로 해 주실 수 있나요?"

OMG...지금 생각해보면 충분히 말할 수 있는 부분이었는데도 당시에는 머리가 새하얘졌다;; 근데 순간적으로 전화영어쌤 목소리가 스쳐지나갔다. Hannah, You can do it.

그래서 어쩌라고 마인드로 그냥 들이받았다. 당연히 내가 한국어로 말한 문장을 모두 매끄럽게 말하지는 못했고 그냥 자신감있게 세마디정돜ㅋㅋㅋㅋㅋ

끝나고 느낀건 전화영어 해놓길 정말 잘했다는 생각이 들었다. 가격이 저렴해서 기대안했다고 했지만 선생님이 너무 잘 진행해주셔서 의기소침했던게 많이 줄었다.

만약 다영이 영어를 고민하는 사람들이 있다면 강추!! 하고 싶다. 나랑 진행하시는 선생님 성함은 'Alex Sky' 내가 버벅거려도 요점을 굉장히 잘 캐치하신다.

원래는 책에서 그날 진행할 페이지를 정하셔서 pdf파일을 보내주시면, 내가 간단하게 지문을 훑어보고 주제에 대한 대답을 하는 식인데 개인적으로 나는 그냥 내가하고싶은말;; 을 하는게 편해서 이제 책으로 진행하지 않는다..ㅋㅋㅋㅋㅋ

그리고 나 같은 경우엔 말하는데는 두려움이 없는데 맘이 급해서 문법 실수가 많아서 선생님께 틀리면 바로 지적해달라고 요청 드렸다.

본인의 문제점을 안다면 선생님께 요청사항을 말씀드리면 좋을 것 같다. 그리고 끝나고 간단한 피드백도 주신다.

To. Teacher Alex Hi, Alex😄 If you read this, I want to say thank you for your teaching. I was so frustrated about my English since I'm back to Korea. but now I can tell my speaking have improved. And Thank you not only English but also your emotional support means a lot to me. I am more confident than before :). I'm looking forward to courses in the future! see ya next time!

CSS파일을 html내에 가져오기

<link rel+=”stylesheet” href=”./css/main.css”> 

(병렬) [권장] 위의 방법으로 html에 CSS를 연결하고 또 외부의 CSS파일을 추가로 가져오고 싶을 경우,import를 사용한다.

@import url(“./box.css”); <-- CSS문서 안에서 또다른 CSS문서를 가져와 연결

단점은 main.css가 연결되기 전 까지는 box.css를 가지고 올 수 없음. 이것을 이용해서 연결을 지연시킬 수 도 있다. (직렬)

CSS 선택자(기본, 복합, 가상클래스, 가상요소, 속성) 순서대로 기억

• 기본 선택자(전체 선택자) (*) : 모든 요소를 선택[Universal Selector]
• 태그 선택자 : 별다른 기호 없이 태그이름이 OO인 것을 선택(li태그 전체를 선택) [Type Selector]
• 클래스 선택자 (.) : ‘ .’ 을 앞에 붙이는 것으로 표현
• ID 선택자 (#) : ‘#’를 앞에 붙이는 것으로 표현

복합 선택자

일치 선택자[Basic selector]: 만약 span.orange 라고 표현하면 span태그의 orange라는 값이 있다면 적용 // 만약 위치를 바꾼다면  브라우저가 인식을 못하기 때문에 태그선택자를 사용할때는 앞에 붙인다.

자식 선택자[Child selector]: ‘ >’ 기호를 사용하며 , ABC > XYZ 일 경우 선택자 ABC의 자식요소 XYZ를 선택 (ex. ul > .orange {})

하위(후손) 선택자[Descendant Combinator]: 띄어쓰기가 선택자의 기호 
(ex. div .orange{ })

인접 형제 선택자[Adjacent sibling combinator): ‘+’기호를 사용
선택자 ABC의 다음 형제 요소 XYZ하나를 선택 (ex. .orange + li { } 일 경우 orange클래스를 가지고 있는 요소의 ‘다음’ li 태그 하나)


일반 형제 선택자[General sibling combinator]: ‘~’기호를 사용하며 
선택자 ABC 다음 형제 요소 XYZ 모두를 선택

#선택자 가상 클래스 선택자

• 일반적인 동작들은 JS에서 담당하지만, CSS에서도 극히 일부분이 있다.

  “ .box:hover “에서 ':hover'가 가상 클래스임. 어떠한 행동을 했을 때 동작하는 개념

:hover - 마우스를 올렸을 때를 선택
:active -  클릭하고 있는 동안만을 선택
:focus - 어떠한 요소가 포커스되면 선택( Focus가 될 수 있는 요소는 따로 있는데 HTML 대화형 콘텐츠가 해당) input, a, button, label 등
** tabindex속성을 통해 Focus가 되도록 만들어 줄 수 있다. 
ex) <div class =”box” tabindex=”-1”> -1이 아닌 다른 값을 넣는 것은 흐름을 방해할 수 있어 권장X**

:first-child - ABC:first-child 선택자 ABC가 형제요소 중 첫째라면 선택.

:last-child 형제 요소중 막내라면 선택
:nth-child(n) - 형제 요소 중 (n)째 라면 선택 
ex. .fruits *:nth-child(2) ← fruits라는 클래스를 가진 요소의 하위요소중 둘째를 선택
.fruits *:nth-child(2n) <- n키워드를 사용할 수도 있는데 (n은 0부터 시작) 2에다 n을 곱한다는 뜻이됨 즉, 짝수 째 요소들을 선택한다는 뜻
.fruits *:nth-child(2n+1) <- 홀수째 를 선택한다는 뜻
.fruits *:nth-child(2n+2) <- n은 0부터 시작하기때문에 첫번째 요소는 건너뛰고 3번째부터 선택한다는 뜻.  
.fruits *:nth-child(-n+3) <- 앞에서 세 개의 요소를 나타낸다. [=-0+3, -1+3, -2+3]

:not(xyz) - ABC:not(XYZ) 선택자 XYZ가 아닌 ABC요소 선택

가상요소 선택자

::콜론이 두개가 붙는다. 가상의 요소를 만들어서 실제로 삽입할 수 있음 자주 사용됨

::before 선택자 요소의 내부 앞에 내용을 삽입/ 가상의 인라인 요소를 만들어서 내부의 앞쪽에 어떤 내용을 실제로 삽입

.box::before   

이렇게 사용한다.

::after 선택자 요소의 내부 뒤에 내용을 삽입

가상요소 선택자를 사용할 때는 항상 content를 사용/ 속성을 사용하지 않더라도 content를 추가하고 봐야함.

.box::after { content: “뒤!” ;}
사용하지 않더라도 .box::after{ content:””;}

가상요소 선택자는 인라인 요소이기 때문에 width, height 를 지정해도 적용 x 이렇게 쓰고 싶을 때에는 display: block; 으로 블록요소로 전환해주어야함.

속성 선택자

'[ ]'를 기호로 씀. [ABC] 속성 ABC를 포함한 요소선택

[ABC=”XYZ”] 속성 ABC을 포함하고 값이 XYZ인 요소 선택

자식, 하위 요소까지 영향을 미침 <- 스타일 상속 모든 것이 상속되는 것은 아님

**상속되는 CSS속성들 font-style, font-weight, font-size, line-height, font-family, color, text-align등등 (모두 글자/문자 관련 속성들이지만, 모든 글자/문자 속성은 아님!)

강제 상속

실질적으로 상속안되는 속성들도 임의로 상속이 되도록 하는 것 상속 안되는 속성에 inherit 을 값으로 주면서 부모 요소로부터 강제 상속받게 할 수 있음.

선택자 우선순위

같은 요소가 여러 선언의 대상이 된 경우, 어떤 선언의 CSS속성을 우선 적용할지 결정 점수가 높은 선언이 우선함 점수가 같으면, 가장 마지막에 코드로 작성한 선언이 우선함.

• !important (무한점수) > 인라인 선언(1000점) > # (100점) > . ( 10점) > 태그선택자 (1점) > * (0점) > 상속

^ 위의 그림에서 우선순위가 큰 순서대로 정렬하면 !important > 인라인 선언(orange) > ID 선택자 (#) > Class 선택자( .) > 태그 선택자 > 전체선택자(*) > 상속 (우선순위 점수를 따로 계산하지 않음)

:hover처럼 가상 클래스 선택자도 클래스이기 때문에 10점 부여 ::before 가상 요소 선택자는 태그 선택자의 점수를 가짐 1점 부여 마지막 줄에 :not은 가상 선택자이기는 하지만 부정한 상태로 선택하기 때문에 .box만 계산하여 10점 부여

CSS 속성(properties)

-html의 속성은 Attributes, JS의 속성은 properties

width : 가로너비,  따로 값을 지정하지 않으면 auto, 가로 전체에 뿌려줌
height: 세로너비, 따로 값을 지정하지 않으면 auto, 0으로 보이지 않음.
span: 대표적인 인라인 요소, 본질적으로 아무것도 나타내지 않는 콘텐츠 영역을 설정하는 요소(기본값은 가로세로너비가 모두 내부 컨텐츠 크기에 맞춰 줄어듬)
div: 대표적인 블록 요소, 본질적으로 아무것도 나타내지 않는 콘텐츠 영역을 설정하는 요소(부모요소의 크기 만큼 가로넓이는 자동으로 늘어나고, 세로 넓이는 자동으로 줄어듬(세로너비는 span과 동일)
max-width, max-height : 요소가 가질 수 있는 최대 가로/세로 너비 기본값은 none(최대너비 제한 없음)
min-width, min-height: 요소가 작아질 수 있는 최소 가로/세로 너비 기본값은 0; 숫자 0은 따로 단위를 붙일 필요가 없음

values = []
values.append(('alghost', 'fastone'))
values.append(('yskim', 'fastcampus'))
values.append(('jelee', 'fastfive'))

datafile = open('result.csv', 'w')

for line in values:
    data = ','.join(line)
    datafile.write(data+'\n')
datafile.close()

result.csv 파일에는 alghost,fastone yskim,fastcampus jelee,fastfive

이렇게 저장이됨.

패키지설치 활용

pip install [패키지 이름] pip는 의존되는 패키지도 같이 설치 해줌.

파이썬 패키지가 관리되는 곳 - pypi.org

##패키지란? 특정 기능을 여러 클래스로 구성해놓은 코드집합 대부분의 패키지는 문서가 있음 => 레퍼런스 문서

openpyxl -> 엑셀을 다루는 패키지 중 하나

권한 문제 있을 경우 -> sudo pip install [패키지이름]

##패키지 설치 확인 import로 확인 가능 터미널에서 python 실행 ex) import openpyxl

##엑셀 파일 읽어오기 사람이 데이터 확인 - 데이터가 들어있는 파일 찾아서 열기 - 데이터가 들어있는 시트로 이동 - 데이터가 있는 위치(예:a4)로가서 데이터 확인

프로그램이 데이터 확인 - 데이터가 들어있는 파일명으로 클래스 변수 생성 - 클래스 변수에서 시트이름으로 원하는 시트 가져옴 - 데이터가 있는 위치의 데이터를 확인

#셀 하나씩 지정해서 가져오기
from openpyxl import load_workbook
'''load_workbook함수 가져옴'''
wb = load_workbook('simple_data.xlsx')
'''엑셀파일의 내용을 모두 읽어서 클래스 변수 wb로 만들어줌'''
data = wb.active
'''이것은 시트를 선택하는 과정'''
'''active는 load_workbook의 변수인데 가장 마지막에 활성화된 시트를 가져옴 '''

print(data['A1'].value)
print(data['A2'].value)
print(data['B1'].value)
print(data['B2'].value)
'''원하는 셀을 가져오고 싶을 때는 인덱싱을 사용할 수 있음. '''
'''셀은 가지고 있는 정보가 많음 값도 있지만(폰트,배경색,테두리 등등)
여기서는 값을 가지고 오려고 value를 씀'''

##여러개의 셀을 한번에 가져오기 -열과 행을 지정해서 가져오기

from openpyxl import load_workbook
wb = load_workbook('simple_data.xlsx')
data = wb.active

row = data['2']
for cell in row:
    print(cell.value)

print('-'*20)

col = data['A']
for cell in col:
    print(cell.value)

-여러행,여러열 가져오기(+시트지정)
from openpyxl import load_workbook
wb = load_workbook('simple_data.xlsx')
data = wb['sheet_test']
'''시트를 지정할때는 대괄호를 사용해서 인덱싱, 이때 시트의 이름 사용'''
area = data['A1:B2']
'''영역을 지정 A1과 B2까지 사각형을 만들어서 가져옴'''

for row in area:
    for cell in row:
        print(cell.value)
'''첫번째 for문은 row에 A1과 B1이 들어있는 튜플을 가져오고,
 두번째 for문은 cell에 a1과 b1각각을 가져옴    '''
print('-'*20)

cols = data['A:B']
for col in cols:
    for cell in col:
        print(cell.value)
'''A:B 열을 지정'''
print('-'*20)

rows = data['1:2']
‘’’여기에 print(rows)를 하면 어떻게 튜플이 지정되어 나오는지 볼수 있음’’’
for row in rows:
    for cell in row:
        print(cell.value)
'''1:2행을 지정'''

##엑셀파일에 내용쓰기 프로그램이 엑셀에 데이터를 쓸 때 - 데이터를 쓸 엑셀파일의 파일명으로 클래스 변수 생성 or 파일명 없이 클래스 변수 생성- 클래스 변수에서 시트이름으로 원하는 시트 가져오거나 생성 - 원하는 위치에 데이터 쓰고 저장

from openpyxl import Workbook

wb = Workbook()
ws = wb.create_sheet('sheet_test2')
'''create_sheet함수로 시트 생성 이 함수는 시트를 생성하고 반환도 해줌'''

ws['A1'] = 'alghost'
ws['B1'] = 'test'

wb.save('result.xlsx')
'''save 함수로 파일로 저장'''

-하나하나가 아니라 행 단위로 값을 넣을 때
from openpyxl import Workbook

wb = Workbook()
ws = wb.create_sheet('sheet_test3')

ws.append(['Number', 'Name'])
'''첫번째 열이 Number, 두번째가 Name'''
for i in range(10):
    ws.append([i, str(i) + ' data'])
    '''Number에는 1...9까지 아래로 찍히고 Name에는 0 data...9data까지 들어감'''

wb.save('result2.xlsx')

##큰 엑셀 파일 읽기 load_workbook의 문제점 : 모든 엑셀파일을 한번에 가져옴

from openpyxl import load_workbook

wb = load_workbook('test_data.xlsx', read_only=True)
'''load_workbook의 인자 값에는 read_only가 있는데 True로 설정시 
읽기전용파일을 만들어줌'''
data = wb.active
'''데이터를 행으로 순서에 따라 가져와야함'''
'''iter_rows는 한행씩 꺼내줌 A1->B1->C1 순서로'''
for row in data.iter_rows(max_col=1, max_row=2):
    for cell in row:
        print(cell.value)
'''max_row, max_row, max_col, min_col로 영역지정 가능'''

#메일 발송 원리 SMTP 서버 - 메일 보내는 서버주소 POP 서버 주소 -메일 받는 주소 SMTP 서버 포트 - SMTP주소로 갈 때 쓸 길 번호 POP 서버 포트 - POP 주소로 갈 때 쓸 길 번호 계정 정보 : 아이디, 비밀번호

메일을 보내기 위해서는 서버가 원하는 형태의 모습으로 가공 보내는 사람, 받는 사람, 제목, 내용 등 SMTP서버에 로그인 SMTP 서버로 데이터 전송

-for..of / for… in 의 차이

for..in (객체 순환) for...of ( 배열 값 순환)

-break와 continue 반복문에서 벗어나거나 계속하는 것

for (let i = 0; i < 10; i++){
 if (i === 2) continue;
 console.log(i);
}

출력값은 1 3 4 5 6 7 8 9 continue는 조건에 따라 밑 코드를 생략한다.

*if문이 한줄이라면 { } 블럭으로 묶어주지 않아도 정상적으로 실행 가능

for (let i = 0; i < 10; i++){
 if (i === 2) ;
 console.log(i);
 if(i === 5) break;
}

break는 끝내버린다.

break는 끝나는거, continue는 그 다음거.

-주어진 배열에서 3보다 큰 수만 출력하기 빈배열만들기 -> for문으로 검사 -> if문으로 3보다 크면 새배열에 넣기 -> 리턴

#내장 함수 -forEach

function biggerThanThree(numbers) {
 let big = [];
 for (let i = 0; i < numbers.length; i ++){
   if (numbers[i] > 3){
     big.push(numbers[i]);
   }
 }
 return big;
}

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

배열 출력함수 간결하게 하기(forEach)

const superheroes = [
 '아이언맨', '캡틴 아메리카', '토르', '닥터 스트레인지'
]

function print(hero){
 console.log(hero);
}
superheroes.forEach(print);


배열 출력함수 간결하게 하기(이름 없는 함수로 바로 선언하여  출력)

const superheroes = [
 '아이언맨', '캡틴 아메리카', '토르', '닥터 스트레인지'
]
superheroes.forEach(function(hero){
 console.log(hero);
});

배열 출력함수 간결하게 하기( 화살표 함수)

const superheroes = [
 '아이언맨', '캡틴 아메리카', '토르', '닥터 스트레인지'
]
superheroes.forEach(hero => {
 console.log(hero);
});

-map 함수

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

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

console.log(squared);

map 같은 경우 배열이 있을 때 전체적으로 변환을 하고 싶을 때 사용하는 내장 함수

const items = [
 {id: 1,  text: 'hello'},
 {id: 2, text: 'bye'}
];
// 위에 객체들의 문자열만 배열로 만들고 싶을 때

const texts = items.map(item => item.text);
console.log(texts);

-indexOf

//배열에서 원하는 항목이 어디에 있는지 알려주는 함수

const superheroes = ['아이언맨', '토르' ,'캡틴 아메리카', '닥터 스트레인지']
const index = superheroes.indexOf('토르');
console.log(index);

-findIndex

//특정한 값이 아닌 어떤 조건으로 찾고 싶을때)
const todos = [
 {id: 1, text: '자바스크립트 입문', done: true},
 {id: 2, text: '객체와 배열 배우기', done: true},
 {id: 3, text: '함수 배우기', done: true},
 {id: 4, text: '배열 내장함수 배우기', done: false}
]

const index = todos.findIndex(todo => todo.id === 3);
console.log(index); // 출력값은 2, id 3의 인덱스 출력

-find(배열안의 값을 반환)

//find도 조건으로 찾음 그 값을 반환
const todos = [
 {id: 1, text: '자바스크립트 입문', done: true},
 {id: 2, text: '객체와 배열 배우기', done: true},
 {id: 3, text: '함수 배우기', done: true},
 {id: 4, text: '배열 내장함수 배우기', done: false}
]
const index = todos.find(todo => todo.done === false);
console.log(index);
//출력값 : {id: 4, text: "배열 내장함수 배우기", done: false}

-filter

//filter 특정 조건을 만족하는 원소를 찾아 그 원소로 새로운 배열을 만듦.
const todos = [
 {id: 1, text: '자바스크립트 입문', done: true},
 {id: 2, text: '객체와 배열 배우기', done: true},
 {id: 3, text: '함수 배우기', done: true},
 {id: 4, text: '배열 내장함수 배우기', done: false}
]
const taskNotDone = todos.filter(todo => !todo.done);
// !todo.done은 결국 false를 뜻함. 더 간결하게 만들 수 있음.
//기존의 배열을 건드리지 않고 새로운 배열을 만들어냄.
console.log(taskNotDone);
/* 출력값은
(1) [Object]
0: Object
id: 4
text: "배열 내장함수 배우기"
done: false */

-splice와 slice

//splice는 원소를 제거할 때 사용, 제거하는 과정에서 해당원소가 몇번째인지 명시해야함. 기존의 배열을 건드림
const numbers = [10, 20, 30, 40];
const index = numbers.indexOf(30);
const spliced = numbers.splice(index, 2);
//index부터 2개, 즉 30,40을 지우겠다는 뜻.
console.log(numbers);
//출력값 10, 20
console.log(spliced);
//출력값 30,40 (제거한 원소들)

//slice는 배열을 잘라내는데 기존의 배열을 건드리지 않음.
const numbers = [10, 20, 30, 40];
const sliced = numbers.slice(0, 2);
//인덱스 0부터 인덱스 2 '전'까지 자름(기존의 배열을 건드리지 않음)
console.log(sliced);
// [10, 20]
console.log(numbers);
//[10, 20, 30, 40]

운영체제 역사

-1980 개인용 컴퓨터 시대 CLI(command Line Interface):터미널 환경 GUI(Graphical User Interface): GUI 환경

-1990 응용 프로그램 시대 by GUI 환경, 개인용 컴퓨터 사용자 증대 +엑셀, 워드, 프로세서 등 +WINDOWS OS 대중화

네트워크 기술 발전 -월드와이드 WWW 인터넷 대중화 오픈소스 운동 활성화 시작 UNIX 계열 OS 활성화

-2000년대 이후 1.오픈소스 활성화 리눅스 운영체제, Apache(웹서버), MYSQL(데이터베이스)

요즘.. 안드로이드, 딥러닝, 데이터사이언스, IOT관련, 가상머신, 대용량 병렬 처리 활성화

정리

1950년대: OS없음 (프로그램이 시스템 자원 직접제어) 1960년대 :배치 처리 시스템 1970년대: GUI, 개인용 컴퓨터 1990년대: 다양한 응용 프로그램, 인터넷 발달, 오픈소스 운동 활성화 2000년대 : 오픈소스 활성화, 가상머신, 대용량 병렬 처리

시스템 콜 시스템 호출 인터페이스 운영체제가 각 기능을 사용할 수 있도록 시스템 콜이라는 명령 또는 함수를 제공

프로세스 스케줄링

멀티 프로그래밍의 목적 - 최대한 CPU를 많이 활용하도록 하는 시스템 시간대비 cpu 활용도를 높이자. 응용프로그램을 짧은 시간 안에 실행 완료를 시킬 수 있다.

정리

실제로는 시분할 시스템, 멀티 프로그래밍, 멀티 태스킹은 유사한 의미로 통용된다.

시분할 시스템: 다중 사용자 지원, 컴퓨터 응답시간을 최소화하는 시스템 멀티 태스킹: 단일 CPU에서 하나의 응용 프로그램을 병렬로 실행하게 해서 실행속도를 높이는 기법 멀티 프로그래밍 : 최대한 CPU를 일정 시간당 많이 활용하는 시스템

비구조할당(객체구조분해)를 이용하면 좀 더 단순하게 작성이 가능.(아래 코드)

function print(hero) {
 const { name, actor, weapon } = hero;
 const text = `${name}(${actor}) 는 ${weapon} 을 사용합니다.`;
 console.log(text);
}

더 나아가, 함수 파라미터를 안에서도 사용 가능.

function print({ name, actor, weapon }) {
 const text = `${name}(${actor}) 는 ${weapon} 을 사용합니다.`;
 console.log(text);
}

const { name } = ironMan;
console.log (name);

이렇게도 사용할 수 있다.

-객체안에 함수 넣기

const dog = {
   name: '댕댕이',
   sound: '멍멍',
   say: function say(){
     console.log(this.sound);
   }
};

여기서 함수의 작성 형식은

   say: function(){
     console.log(this.sound);

이렇게도 가능하고

say(){
     console.log(this.sound);

이렇게 해도 정상적으로 작동을 함.

반면에,

화살표 함수로

say:() => {
   console.log(this.sound)
}

한다면 this가 뭔지 찾지 못함.

function으로 만든 함수는 this는 자기가 속해 있는 곳을 가르키지만 화살표 함수에서는 this를 자기가 어디 속해있는지 모름

함수에 있는 this는 자기가 속해있는 곳을 가르키게 되지만, 화살표 함수로 사용하게 되면, 화살표 함수 내부에서는 this가 어딘지 모름.

함수를 바깥으로 꺼내게 되면 꺼내는 순간 this와의 관계가 사라짐.

(아직 이해못함)

-객체 안에 GET 과 SET

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

 get sum() {
     console.log('sum 함수 실행');
     return this.a + this.b;
   }
};

console.log(numbers.sum);

-GETTER 함수 sum이 함수인데도 마지막 줄에 console.log(numbers.sum());라고 하지않고 조회만 했는데도 함수는 실행이 됨.

이처럼 get함수는 특정값을 호출하지 않고 조회하려고 할 때 특정코드를 실행시키고 연산된 값을 받아서 사용하는 것을 의미한다.

getter 함수는 특정 값을 조회하려고 할 때 특정 코드를 실행시키고 연산된 값을 받아서 사용한다. getter 함수는 파라미터 값을 가질 수 없다.

-SETTER 함수

setter 함수는 특정 값이 변경되어 질 때마다 함수를 실행하는데 사용한다. setter 함수는 한개의 파라미터를 가져야 한다.

const dog = {
 _name : '멍멍이',

 get name (){
   console.log('_name을 조회함');
   return this._name;
 },
 //set함수를 쓸 때는 파라미터로 어떤 값을 무조건 설정해줘야함.
 set name(value){
   console.log('이름 체인지' + value);
   this._name = value;
   }
};

console.log(dog.name);
dog.name = '뭉뭉이';
console.log(dog.name);

/* 결과값

_name을 조회함
멍멍이
이름 체인지뭉뭉이
_name을 조회함
뭉뭉이  */

-(내피셜) 자바에서는 함수 호출 할 때 함수(); 이렇게 했었는데 자바 스크립트에서는 numbers.a = 5; 이면 컴파일러에서 자동으로 set을 호출한다(왜냐하면 이건 누가봐도 값 저장 이기 때문에.Get은 조회할 때 쓰고, Set은 값 설정할 때 쓰는거라 컴파일러가 알아서 판단하고 불러옴!)

***헷갈리지 말것! JS에서는 numbers.a < -- 이게 꼭 변수만을 뜻하는게 아님.

나는 처음에 numbers.a =5; 가 꼭 a라는 변수에 5를 대입하는 것 같아서 엄청 헷갈렸었다..

여기서의 numbers.a = 5는 set a(value)에서 5를 (value)라는 파라미터에 넘겨주는 것이다.

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){
   this._a = value;
   this.calculate();
 },
 set b(value){
   this._b = value;
   this.calculate();
 }
};

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

-배열

객체는 한 변수 또는 상수 안에 여러가지 정보를 담기 위함 이었다면, 배열은 여러개의 항목들이 들어있는 리스트와 같은데 나열이 되어있음. JS의 배열에는 안의 모든 원소들이 다 똑같은 형태일 필요는 없다. 첫번째는 숫자, 두번째는 문자열, 세번째는 객체를 넣어도 상관X

#배열 내부함수 배열이름.length와 배열이름.push

const array = [1, "blah", {}, 4, 5];
console.log(array[0]);

const objects = [{ name: "멍멍이" }, { name: "야옹이" }];

console.log(objects[0]);
console.log(objects[1]);

// 배열에 새로운 항목 추가하기
//배열 내장함수인 push를 이용

console.log(objects.length);

objects.push({
 name: "먕먕이"
});

console.log(objects[2]);
console.log(objects.length);

//console.log(objects.length);
//배열 안에 몇개가 있는지 알려줌.

#for문을 이용한 배열 출력

// for문과 배열

const names = ["멍멍이", "야옹이", "먕먕이"];

console.log(names.length);
// 배열의 인덱스는 항상 [0]부터 시작
for (let i = 0; i < names.length; i++){
 console.log(names[i]);
}

-git 다운로드 https://gitforwindows.org (강사님이 알려주셨는데 환경 변수등이 모두 세팅된 다운로드 링크라고 한다.)

git과 github은 다름. 깃은 버전컨트롤 시스템 깃허브는 저장소

나는 window OS라서 깃 설치 후 bash라는 프로그램을 실행시켰는데, 터미널이 열렸다. 리눅스는 학부때 아주쪼오금 다뤄봐서 어렵지 않게 명령어들을 사용할 수 있었다.

-터미널 명령어 목록 cp 복사 (cp 파일이름 경로 mv 이동 or 이름변경 (mv test.txt 옮길폴더이름 rm 삭제 ( rm 삭제할 파일 이름 (폴더 삭제시 -rf 옵션) cat 텍스트 파일 출력 ( cat 파일 이름

vi vim에디터 열기 ( vi 열 파일 이름 vi 에디터에서 jkhl로 커서이동 :w 저장 / :wq 저장하고 나가기 / :q 나가기 / q! 저장안하고 나가기

vi 연습 가능한 사이트 vim 어드벤처

깃 허브에서 새로운 repository를 만들었는데 만들때 -git ignore - node -git lisence - MIT (MIT를 라이센스로 설정할 경우 자유롭게 수정, 재배포가 가능하다고 한다.)

깃 허브에서 새로운 repo 생성하면 bash에서 git clone 명령어로 불러온다.

프로세스를 간단히 정리하면 branch 생성 - 파일생성, 수정 - git add - git commit - git push origin 브랜치명 - 최종 수정이 끝나면 merge - 터미널에서 git pull origin

git pull origin은 '원격'main과 '로컬'main을 동기화 시켜주는 것 같은데 아직 100퍼센트 이해못함. (+ pull의 목적은 이 프로젝트를 내가 수정해서 커밋하고 push하는 동안 다른 사람도 수정했을테니까 이 모든 수정 사항을 내 로컬로 가져오는 것이라고 한다.)