• 프로젝트 진행하면서 레포에 관한 merge, commit 등 에러를 최소화하기 위하 여 git branch 사용에 익숙해 질 필요가 있다고 판단하였다. 팀원 한분이 git pull이 정상적으로 작동되지 않았고, 먼저 혼자 해결방법을 여러 방편으로 찾아 보았으나 해결방법을 모색하지 못했고, fork한 repository를 삭제 후 다시 clone을 통해 진행하려고 하였으나 fork한 repository인지 확인하지 못하고 original 프로젝트 repository를 삭제하여 문제가 발생하였다.

Project 이슈로 인한 긍정적인 방향

• 결과는 좋지 못했으나 실전에 앞서 미리 연습하고 숙지하려고 한 것에 의의를 두고 지나간 문제에 서로 비난하지 말고 격려하며 앞으로의 일에 집중한 점이 더 힘이 되었다.

Project 진행에 아쉬웠고 개선할 부분

• 프로젝트 진행에 혹시 모를 여러가지 이슈와 팀장 부재시 대비를 위해 레포지토리에 팀원 초대 할 당시 권한을 모두 admin으로 주었던 부분은 팀장만 admin 권한을 가지고 팀원들은 write권한을 가져 실수가 반복되지 않도록 한다.
• 레포지토리를 삭제할 때 조금 더 신중하게 생각을 해서 진행했어야 했으나 숙지가 잘 되지않은 상황에서 성급한 결정으로 인해 팀이 전체적으로 혼선을 겪음
• 서로 커뮤니케이션이 원활하게 잘 진행되고 있다고 생각하였으나 세심하게 서로를 상황을 숙지하지 못함
• 프로젝트를 시작하기에 앞서 사전에 git 사용법을 숙지하지 못함

개선점

• 레포지토리 admin 권한은 팀장, 팀원은 write 권한으로 진행
• 팀원들중에 문제가 발생시 바로 상황을 팀원 전체와 공유
• 사소한 것들도 쉽게 넘기지 않고 꼼꼼하게 살펴볼 것

• 클래스와 인스턴스라는 용어를 이해할 수 있다.
  • new 키워드의 사용법을 이해할 수 있다.
  • class 키워드의 사용법을 이해할 수 있다.
  • 현실 세계의 모델을 바탕으로 클래스의 메소드와 속성을 디자인할 수 있다.
• 객체 지향 프로그래밍 특징을 이해할 수 있다.
  • 캡슐화
  • 상속
  • 추상화
  • 다형성
• JavaScript에서 객체 지향 프로그래밍을 구현할 수 있다.
  • Prototype이 무엇인지 이해할 수 있다
• 객체 지향 프로그래밍의 상속(Inheritance)의 개념을 이해하고 코드로 작성할 수 있다.
  • 상속관계를 가진 현실 세계의 모델을 코드로 작성할 수 있다.
  • 클래스 상속의 원리를 이해할 수 있다.
  • Prototype chain을 이해하고 설명할 수 있다. (proto)

객체

• 객체 지향 프로그래밍(OOP, Object-oriented programming)은 하나의 모델이 되는 청사진(blueprint)을 만들고(=> class), 그 청사진을 바탕으로 한 객체를 만드는(=> instance object) 프로그래밍 패턴이다. 절차 지향 프로그래밍과는 다르게 데이터와 기능을 한 곳에 묶어서 처리한다.

• 	절차지향	객체지향
  특성	컴퓨터의 처리구조와 유사	사람의 사고방식에 가까움
  메모리 사용	적음	많음
  처리 속도	빠름	느림
  재활용성	낮음	높음
  코드 이해	어려움	쉬움
  디버깅	어려움	쉬움
  ex) 메모리 관리가 중요하다면 -> 메모리를 적게 쓰는 절차지향
  ex) 사람들과의 협업이 필요하다면 -> 코드 이해가 쉬운 객체지향

• 속성과 메소드가 하나의 '객체'라는 개념에 포함되며 이는 자바스크립트 내장 타입인 object 와는 다르게 클래스(Class) 라는 이름으로 불린다.

매소드 호출

• 매소드 호출은 객체.메소드() 과 같이 객체 내에 메소드를 호출하는 방법을 의미하며 매소드 호출 방식은 화살표 함수를 쓰지 않는다.

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

• Singletion 패턴은 단 하나의 객체만 만들 수 있다. 똑같은 기능을 하는 카운터가 여러개 필요하다면 코드를 그대로 복사/붙여넣기는 재사용성이 떨어지므로 클로저 모듈 패턴을 이용한다.

객체 지향 프로그래밍(oop)의 특성

1. 캡슐화 : 데이터(속성)와 기능(메소드)을 하나의 객체 안에 넣어서 묶는 것이다.
2. 추상화 : 내부 구현은 복잡하지만 실제로 노출되는 부분은 단순하다.
3. 다향성 : 똑같은 메소드라 하더라도, 다른 방식으로 구현될 수 있다.
4. 상속 : 부모 클래스의 특징을 자식 클래스가 물려받는 것이다.

spa 단점

route

Achievement Goals

• truthy와 falsy 가 조건문에서 작동하는 방식을 이해할 수 있다.
• 비교연산자를 통한 엄격한 비교(=== , !==)에 대해 이해할 수 있다.
• if 와 else if , else를 이해하고 무리없이 활용할 수 있다.
• 논리연산자를 (&&, ||, ! ...)을 통해 복잡한 조건을 간결하게 작성할 수 있다.

다양한 비교 연산자

``` javascript if (조건1) { // 조건1이 통과할 경우 } else if (조건2) { // 조건1이 통과하지 않고 // 조건2가 통과할 경우 } else { // 모든 조건이 통과하지 않는 경우 }

and 연산자는 falsy 한 값을 만나면 그 값을 출력 undefined && 10 // undefined 5 && false // false

Achievement Goals

• 프로그래밍은 데이터 처리를 하는 것임을 이해한다.
• 변수 사용은 데이터를 편리하게 저장하고 꺼내 쓰는 것임을 이해한다.
• 변수의 선언과 값의 할당에 대해서 설명하고 코드로 작성할 수 있다.
• 값으로 변환된 표현문이 변수에 할당되어 담기는 과정을 설명할 수 있어야 한다.
• 자바스크립트에서 변수의 선언과 값의 할당에 대해서 설명할 수 있다.
• 변수 선언과 값 할당에 사용되는 용어에 대해서 정확하게 알 수 있다.
• =가 "같다"라는 의미가 아니라 할당연산자임을 이해할 수 있다.
• num = num + 1이 "같다"라는 의미가 아니라 값을 할당하는 것임을 설명할 수 있다.

선언(declaration)

선언이란 보관함을 확보 즉 저장공간을 확보하는 것을 의미한다.

• let, const, var 3가지의 방법이 있다.

1. let userName; // let은 재선언 x 재할당 o 

2. const myBirthday; // const는 재선언 x 재할당 x  

3. var message; / var는 재선언 o 재할당 o 

• 반드시 영문자, 숫자, 그리고 _만 사용하여야 한다.

  • let Anything1234; (O) / let 조영현; (X)

• 첫글자는 숫자로 시작할 수 없다.

  • let 1234Anything; (X)

• 여러 단어를 연결할 변수 이름은 중간에 대문자를 섞어서 명명한다.**

  • let getAnything; (O)

• 미리 예약된 키워드를 사용할 수 없다.

  • let const; (X) : const는 상수를 선언하는 키워드이므로 사용할 수 없다.

• 대소문자를 구분하여 작성하여야 한다.

  • let Anything ≠ let anything

• 변수의 이름은 변수의 용도와 의미에 부합해야 한다.

  • let age; : 나이를 담는 변수임을 암시

• 한번에 여러 변수를 선언하는 것도 가능하다

let userName = 'Tom', age = 20, message = 'Hello'; // A타입 한줄에 여러 변수를 작성.

let userName = 'Tom', 
    age = 20, 
    message = 'Hello'; // B타입 한줄에 하나의 변수를 작성.

A타입과 B타입은 서로 기술적인 차이가 있지 않으며, A타입이 다소 짧지만 가독성을 위해 B타입을 권장한다.

할당(assignment)

등호기호 " = " 는 할당연산자로 "같다" 라는 뜻이 아닌 데이터를 저장한다는 의미로 사용된다.

userName = 'Tom';

선언과 할당을 같이 사용하면 아래와 같이 작성할 수 있다.

let userName = 'Tom';

let sum = 1;
sum = sum + 2;
sum = sum + 3; // 동일한 변수를 이용해 대입할 수 있다.

let sadius = 5;
pi * radius * radius; // 반지름이 5인 원의 넓이

let areaOfCircle = pi * radius * radius; // 결과물을 다시 변수로 담을 수 있다.

- 문제 -

임의의 값을 입력받아 수(number)의 형태로 리턴해야 합니다.

입출력 예시

let output = convertToNumber('123');
console.log(output); // --> 123

let output2 = convertToNumber('hello');
console.log(output2); // --> NaN

let output3 = convertToNumber('3.141952');
console.log(output3); // --> 3.141952

코드 작성

function convertToNumber(anything) {
  let anything = Number(anything);
    return anything;
}

매개변수(parameter) anything을 Number() 함수를 이용해 숫자로 결과 값을 받는 코드를 작성했다. 하지만 문법 오류 즉 매개변수 anything이 중복 선언이 되었다고 나왔다.

function convertToNumber(anything) {
 let result = Number(anything);
    return result;
} // 이처럼 result를 새로 선언을 하여 값으로 할당을 해주어도 되지만

function convertToNumber(anything) {
  return Number(anything);
} //매개변수가 하나이기에 새로 선언을 해주지 않고 바로 'Number()' 함수 값을 받는 코드로 작성을 해주니 훨씬 간편하고 직관적인 코드라 더 낫다고 생각한다.

타입

Achievement Goals

• 자바스크립트에서 원시 자료형과 참조 자료형이 무엇인지 알 수 있다.
• 원시 자료형 string, number, boolean, undefined의 의미를 이해할 수 있다.
• 타입마다 다른 속성과 메소드가 있다는 것을 이해할 수 있다.
• typeof 를 활용하여 특정 값의 타입을 확인할 수 있다.
• 비교 시 엄밀한 비교( === 과 !== )의 필요성을 이해할 수 있다.

숫자형(number type)

let n = 123;

문자형(string)

1. let str = "Hello"; // 큰따옴표, Hello
2. let str2 = 'Hello'; // 작은따옴표, Hello
3. let name = "Tom";
console.log(`${str}, ${name}!`); // 역 따옴표(백틱) Hello, Tom!

• 큰따옴표와 작은따옴표는 ‘기본적인’ 따옴표로, 자바스크립트에서는 이 둘에 차이를 두지 않는다.
• 역 따옴표로 변수나 표현식을 감싼 후 ${ } 안에 넣어주면 원하는 변수나 표현식을 문자열 중간에 넣을 수 있다.

불리언(Boolean)

불리언은 논리타입으로 긍정을 의미하는 true와 부정을 의미하는 false 두가지 값 밖에 없다.

undefined

undefined는 '값이 할당되지 않은 상태’를 나타낼 때 사용하며,

변수는 선언했지만 값을 할당하지 않았다면 해당 변수에 undefined가 자동으로 할당된다.

undefined 또한 데이터형인 동시에 값인 것으로 볼 수 있다.

null

JavaScript에선 null을 변수에 할당이 이루어졌지만 ‘존재하지 않는 (nothing) ’ 값 , ‘비어 있는(empty)’ 값 , ‘알 수 없는(unknown)’ 값 을 나타내는 데 사용한다.

let age = null; // 값이 없음을 명하시하는 경우 null 또한 데이터형인 동시에 값이라고 할 수 있다.

typeof

typeof 연산자는 두가지 형태의 문법을 지원하며 변수를 호출하면 인수의 자료형을 반환한다.

typeof undefined // "undefined"

typeof 0 // "number"

typeof true // "boolean"

typeof "foo" // "string"

typeof Math // "object"  

typeof null // "object"