프리코스 4주 회고

처음 자바스크립트를 접한 지난 4주는 체력적으로나 정신적으로 꽤 소모적이었다. 모든게 생소했고 매일 새로 배운 내용을 바탕으로 해결해야할 과제들이 있었다.

페어 프로그래밍이라는 시스템은 부담스럽기도 했지만, 결과적으로 장점이 더 많았던거 같다. 필수로 참여해야했던 페어프로그래밍에 할애하는 시간이 꽤 많았다. 진도를 따라가기도 벅찼던 나에겐 어느순간부터는 페어와 노트북화면을 통해 마주하는 긴긴 시간이 참으로 부담스러웠다. 하지만, 혼자라면 피했을법한 많은 문제들을 페어라는 존재 덕분에 피하지 않고 어떻게든 마주하게되었다는 점이 내겐 페어 프로그래밍의 제일 큰 장점이다. 스스로에게 아쉬웠던 점은, 그렇게 페어를 통해 새로 배운 내용을 다시 되짚어 보며 복습하지 않고 넘어간 것인데, 하루 종일 화면만 보고 있으면 피로가 더 빨리 누적됐던 것 같다. 운동을 통해 기초체력을 단련하는 것도 큰 도움이 될 것 같다.

 

이해하지 못한 개념:

앞으로 주어진 일주일 시간 동안 공부해보고 싶은 내용이다.

객체와 DOM.

먼저 지금까지 이해한 바로는 html을 객체화 시켜서 웹사이트가 동적으로 작동이 가능하게 만드는 것인데..

dom만의 syntax들이 따로 있다는게 어려웠다.

json파일의 데이터를 불러오는 법.  script를 통해 js파일을 불러오는 법 등이 아직 정리가 되지 않았다.

 

dom methods:

- In the DOM, all HTML elements are defined as objects. The programming interface is the properties and methods of each object. A property is a value that you can get or set (like changing the content of an HTML element). A method is an action you can do (like add or deleting an HTML element).

 

 

이해한 개념 정리:

 

1. 데이터 타입: 자바스크립트에는 데이터타입이 있고 각 데이터 타입에 맞게 코드를 작성해야한다.

 

7가지 데이터 타입:

• 원시타입(primitive data type):의 값은 변경 불가능한 값(immutable value)이며 pass-by-value(값에 의한 전달) 이다.
  • 숫자(number)
  • 문자열(string): 텍스트 데이터를 나타내고 일반적인 표기법은 작은 따옴표 안에 텍스트를 넣어 사용
  • null: case-sensitive하기 때문에 Null, NULL 등과는 다름. 소문자로만 쓸 것. typeof 연산자 사용불가. 일치 연산자 (===)쓸 것
  • boolean: 논리적 참, 거짓을 나타내는 2가지 값(true, false)만 있다. 빈 문자열과 null, undefined, 숫자 0은 falsy한 값.
  • undefined: 선언 이후 값을 할당하지 않은 변수의 값은 undefined가 됨.
  • symbol
• 객체타입(object/reference type)
  • object (array도 이 안에 포함 되어있다? Arrays are regular objects for which there is a particular relationship between integer-key-ed properties and the length property.)

2. 조건문

비교 연산자(comparison operator: >, <, <=, >=, ===, !==)를 사용해 조건을 판별하는 기준을 만들고 그 결과는 반드시 boolean 값인 true 또는 false가 돼야한다.

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

두 가지 조건이 한 번에 적용되는 경우엔 논리 연산자(logical operator: &&(and), ||(or), !(not))를 사용한다.

 

기억해야 할 6가지 falsy 값: false, null, undefined, 0, NaN, ''(빈 문자열)

 

논리 연산자 결과에는 boolean이 아닌 값이 들어갈 수 있다.

||(or)연산자는 truthy한 값을 만나면, 그 값을 출력하고 그 후로는 평가하지 않는다.

예)

undefined || 10 // 10

5 || 10              // 5 앞에서 5라는 truthy한 값이 나와버렸기 때문에 뒤의 10은 평가 되지 않음.

5 || console.log('실행되지 않음') // 5

둘다 falsy하면, 뒤에 있는 값을 출력한다

예)

undefined || false // false

 

3. 함수(Function): 컴퓨터에 일을 시키기 위한 지시사항의 묶음

입력: x -> 함수: f(x) -> 출력: y 의 과정으로 이루어짐. y = f(x)

 

• 함수 선언식(function declaration binds a function to a name or an identifier)

function myFunction(input) {
  //컴퓨터에게 시킬 일
}

함수에서 사용할 입력값은 매개변수(parameter)라고 부르고, 바뀔 수 있는 변수지만 let등의 키워드 없이 사용할 수 있다.

• 함수 표현식(function expression)

let myFunction = function(input) {
  // 컴퓨터에게 시킬 일
}

//매개변수가 2개 이상인 경우의 예로 집까지 가는 데 걸리는 시간을 계산하는 함수 예
let timeToGoHome = function(speed, distance) {
  let time = distance / speed;
  console.log(time);
}
//사람마다 속도가 다르고, 집까지의 거리가 다르기 때문에 2개의 매개변수를 지정

위의 경우, 함수 과정에서 콘솔에 5라고 찍히지만, 함수 바깥으로 결과를 가져오지 못한다. 바깥으로 가져오려면? return 키워드를 쓰면 된다.

let timeToGoHome = function(speed, distance) {
  let time = distance / speed;
  return time;
}

let myTime = timeToGoHome(20, 100);
console.log(myTime); // 5 return이 있어서 함수 밖으로 결과가 반환됨.

 

4. Scope: 변수 접근 규칙에 따른 유효 범위; defines where variables cna be accessed or referenced

자바스크립트는 기본적으로 함수가 선언되는 동시에 자신만의 scope를 가진다.

Local scope(지역변수) vs. Global scope(전역변수)

안쪽 scope에서 바깥 변수/함수를 접근하는 것은 가능하지만, 반대로 바깥쪽 scope에서 안쪽 변수/함수를 접근하는 것은 불가능하다.

Global scope는 최상단의 scope로 전역 변수는 어디서든 접근 가능. 지역 변수는 함수 내에서 전역 변수보다 더 높은 우선순위를 가짐.

 

5. 배열(Arrays)

 

6. Loops

 

7. Iterators

 

8. 객체(Objects)