[코딩 부트캠프 1주차] TIL을 쓰다
코딩 부트캠프를 시작하기 전에 먼저 이 과정을 겪어낸(?) 분들의 글을 정말 많이 읽었다. 내 성격상, 머리에 그려지지 않는 어떤 과정을 겪어야 한다는 것은 매우 도전적인 일이었기 때문이다.
이런저런 경험기를 보면서 많은 도움을 받았고 나도 생생하게 그 과정을 써 내려가겠노라 다짐했지만, 사실 이 글을 쓰고 있는 이 시점은 벌써 5주 차 과정을 마무리하는 때이다.
그리고 그때 떠오른 명언
박명수의 명언 “늦었다고 생각할 때가 진짜 너무 늦었다” 출처: 무한도전지금도 늦었지만, 더 늦기 전에 매주 배운 것들을 정리해보기로 했다.
내가 선택한 코딩 부트캠프는 코드스테이츠의 프리코스이다. 생각건대 이 부트캠프의 키워드는 자기 주도 학습, 빠른 시간 내의 집중적인 커리큘럼, 협업과 배운 것에 대한 내재화 이쯤이지 않을까 싶다.
아니나 다를까 첫 주부터 어마어마하게 진도를 뺐다. 이미 개강 며칠 전 메일로 도착했던 체크리스트에서 시작하기 전 해보면 좋을 내용들을 한가득 보내왔던 터라 각오는 했지만 정말 한 주가 바삐 흘러갔다.
코드스테이츠에서 받은 개강 전 체크리스트프리코스라지만 부트캠프는 빠르고 많이 배우는 것에서 멈추지 않는다. 배운 것들을 가지고 계속해서 동기들과 화상으로 논의하게 하고, TIL(Today I learned: 오늘 내가 배운 내용들)을 쓰며 기록하게 한다.
TIL을 쓰면서 좋은 점 하나는 다음 학습 방향이 정리된다는 것이다.
매주 화, 목요일에 있는 세션을 마치고 나면 더 공부해야 할 것들이 리스트로 쌓인다.
이해하지 못한 것들, 관련되어서 더 찾아봐야 할 것들, 다시 한번 풀어볼 알고리듬 문제 등...
그러면 관련된 내용들을 계속해서 구글링한다. 교재 없이 몇 시간이고 공부를 할 수 있다.
요즘 나는 퇴근 후 나도 몰랐던 세상으로 점점 빠져들고 있다.
**본론으로 가기 전에 드리는 부탁
아래 내용부터는 코스를 진행하며 노트한 것들을 정리한 내용이라 정보적이지 않을 수 있고, 틀린 내용이 있을 수도 있습니다. 혹 수정해야 할 내용을 찾게 된다면 댓글로 알려주세요! 코딩 공부에 큰 도움이 될 것 같습니다.
그래서 내가 1주 차에 배운 것
협업 툴: Github, Slack, Zoom 익히기
변수/ 조건문 / 함수
배열/ 반복문/ 객체
For Loop 복습
[변수 parameter]
let 은 1번만 선언 가능
= 는 같다는 것이 아니라 대입한다는 뜻
파이 같은 수학에서 사용하는 특정 값은 이미 js에서 불러올 수 있는 방법이 있다 ex) 파이 → Math.PI;
변수의 특징
1) 변수는 숫자로 시작할 수 없다. ex) let 222, let 2num 등이 불가능
2) 변수에 띄어쓰기는 불가능
3) 변수명에 여러 단어가 있으면 붙여서 쓰고 각 단어의 앞을 대문자로 쓴다 Camel Case
4) 한글로도 변수명은 만들 수 있지만 가능한 영어로 쓰는 것 권장
5) 변수는 동일한 변수를 이용해서 대입할 수 있음 ex) sum = sum + 2;
6) 할당이 없는 변수가 있을 수 있음 ex) let value; // -> undefined
선언은 let + 변수명 + ; 형식으로 가능하고 이 상황에서는 'undefined'(정의된 적 없음)으로 표현되고 할당이 되지 않은 상태를 가리킴
다양한 변수의 타입
1) 원시형 변수(primitive types) : 값을 그대로 할당.
copying a primitive → 원본은 변하지 않고 복사본만 변함
① 숫자 number
② 문자 string
③ Boolean: 참/거짓 판단, true와 false만 값을 가짐
④ null
⑤ undefined
2) 자료형 변수(reference types = complex type = container type) : 기본형 데이터의 집합.
copying a reference → 복사 시 원본도 변함
① 객체 object : key와 값이 쌍으로 있음
② 배열 array : list를 가리킴
③ 함수 function
④ 정규 표현식 regexp
읽어볼 글: 자바스크립트의 타입 보기
[조건문 conditional sentence]
조건문: 어떠한 조건을 판별하는 기준을 만드는 것, 비교 연산자(comparison operator)가 필요
비교 연산자: 결과가 항상 boolean으로 true or false로 표현됨
비교 연산자 종류: 초과, 미만, 이상, 이하 - 숫자로만 비교/ 같다, 다르다 - 숫자나 문자열로 비교
===와 !== : 다른 언어와 달리 js에서는 trip equal을 사용.
이유: double equal은 엄격한 타입 비교를 하지 않기 때문, triple equal은 타입까지 비교함
==와 === 차이
https://dorey.github.io/JavaScript-Equality-Table/
조건문 작성 방식
{ : curly bracket이라고 부름
if (조건1) {
// 조건 1이 통과할 경우
}
else if (조건2) {
// 조건 1이 통과하지 않고 조건 2가 통과할 경우
} else {
// 모든 조건이 통과하지 않는 경우
}
논리 연산자(logical operator): and, or, not
1) && : 둘 다 모두 해당할 때
2) || : 둘 중 하나만 해당할 때
3) ! : truthy와 falsy 여부를 반전시킬 때
둘 중에 하나이기만 하면 통과시킨다.
1) true || true // true
2) true || false // true
3) false || false // false
4) true && true // true
5) true && false // false
6) false && false // false
7) !false // true
8) !(3>2) // false
9) !undefined // true -> undefined 자체는 false(falsy)
10) !'Hello' // false -> 문자열 자체가 true(truthy)
falsy로 정해있는 6가지 값: 아래 조건에서는 if 구문이 실행하지 않음
1) if(false)
2) if(null)
3) if(undefined)
4) if(0)
5) if(NaN)
6) if(' ')
[함수 function]
함수의 과정: 입력 -> 함수 -> 출력
y=f(x)
computer science에서 함수는 지시사항의 묶음
js에서 함수 사용은 함수 이름(입력값) 형식으로 이용
함수 function 안에 넣는 값을 전달 인자 arguments 라고 부르고, 함수에 사용되는 값을 매개변수 parameter라고 부름
함수가 아무것도 리턴하지 않으면 함수 호출의 결과가 undefined가 됨
[배열 array]
배열은 순서가 있는 값
인덱스(index) : 배열의 순서, 0부터 시작
요소(element) : 배열의 값
배열 작성 방식: 선언 배열명 = [요소1, 요소2, 요소3 ... ]
[ : square bracket이라고 부름
배열 안에 배열이 있는 경우는 n차원 bracket을 쓴다.
ex1) let myNumber = [[13, 30], [73, 8], [44, 17]]; // 0,1,2번째에 2차원 bracket을 사용한 경우
ex2) myNumber[1][0]; //-->13 [1]은 1st deapth 그 후 [0]으로 2nd deapth 접근해서 요소를 찾음
method를 이용한 배열 수정
method 작성 방식: 배열.method()
. 온점은 속성(property)이라고 부름
온점 뒤 부분은 명령()이라고 부름 ex) arr.push('a'); arr.pop( ) 등
① element 마지막 추가 → 배열.push(추가할값);
② element 마지막 삭제 → 배열.pop(); // pop의 경우 ( ) 안에 값을 넣지 않고 넣어도 적용 안됨,
중간 위치의 다른 요소를 제거하고 싶으면 splice라는 다른 method를 사용해야 함
읽어볼 글: splice method
[반복문 iteration]
같거나 비슷한 코드를 여러 번 실행시켜야 할 경우에 쓰는 구문
반복문 작성 방식
① for 구문 작성 방식 :
for (초기화, 조건식, 증감문) {
//반복하여 실행할 내용
}
② while 구문 작성 방식
초기화
while(조건식) {
// 반복하여 실행할 내용
증감문
}
++ : 증감 연산자(1씩 커진다는 뜻)
반복문의 현황을 보는 방법
for(let i=0; i<myNum.length; i++) {
console.log('--------------');
console.log('현재 sum 값', sum);
sum += myNum[i];
console.log('현재 element 값', myNum[i]);
console.log('최종적으로 더해진 값', sum);
console.log('--------------');
}
console.log(sum);
[객체 object]
객체는 키와 값 쌍(key-value pair)로 이루어짐
객체 선언 방식
let 함수 = {
키 : 값,
키 : 값
…
};
값 위치에는 또 다른 객체가 들어갈 수도 있음
객체의 값을 활용하는 방법:
① dot notation: 객체명.속성을 호출하면 키에 해당하는 값이 출력됨 ex) user.writer;
② bracket notation: 객체명[string 형식으로 키값]; 호출 ex) user['writer'];
Q. 왜 bracket notation에서는 string 형식을 사용해야 하는가?
A: bracket notation에서 string 형식으로 키값을 호출하지 않으면 해당하는 key 값이 선언되지 않은 변수(reference error)로 인식되기 때문이다.
ex) let nameList = {
name1 : 'sooji',
name2 : 'hyunji'
}
nameList.name1; // 'sooji'가 호출
nameList['name1']; // 'sooji'가 호출
let name1 = 'name2'; // name1이 변수로서 선언
nameList.name1; // 'sooji'가 호출
nameList[name1]; // 'hyunji'가 호출 name1이 변수로 인식되기 때문에
Q. 그럼 그냥 dot notation만 쓰지 bracket notation은 왜 있는 건가?
A. 그럼에도 bracket notation을 쓰는 이유는 "키 이름이 변수 형태로 저장되었을 때"가 있기 때문이다.
함수를 정의하는 상황에서 배열의 키값이 변수가 될 때가 있다. 그때는 dot notation으로 배열 안에서 변수를 적용하려고 하면 인식하지 못하고 bracket notation 안에 변수를 넣고 배열에 해당하는 키 밸류 페어를 호출해야 한다.
ex) let names = {
name1 : 'sooji',
name2 : 'hyunji'
}
function nameArr(key) {
return names[key] // 여기에서 return names.key 방식으로는 변수가 적용되지 않음!!
}
nameArr('name1') // --> 'sooji'가 출력되어야 함
nameArr('name2') // --> 'hyunji'가 출력되어야 함
주의할 내용
시나리오①
let tweet = {
writer: 'stevelee',
createAt: '2019-09-10 12:03:33',
content: '프리코스 재밌어요!'
};
let writer = 'content';
tweet[writer]; // → '프리코스 재밌어요!'가 호출
시나리오②
let arr = [1, 2, 3, 4]
arr.length
arr["length"] // → 4가 호출, 이유 없이 그냥 js에서 그런 것이다.
시나리오③
tweet['content'] === tweet.content; // true
tweet[content] !== tweet.content // false 왜냐하면 content를 변수로 인식하기 때문
객체 안의 키-밸류 페어 삭제
1) delete 객체명.키 // true로 나오고 해당 키와 값이 사라짐
2) delete 객체명['키'] // true로 나오고 해당 키와 값이 사라짐
in 연산자를 이용해서 키가 있는지 확인
'확인하고 싶은 키' in 객체명 형식 ex) 'content' in tweet; // true, 'updateAt' in tweet; // false
[For Loop 복습]
1. for 루프 구문
형식: for (초기값, 조건식, 증감)
특징: 초기값에 여러 개(ex: i=0, j=0) , 조건식에 여러 개(ex: a === 0 && b===1) 추가 가능
2. for in 루프 구문
형식: for(초기값 in 반복 구간)
특징: 객체의 속성들을 순회하기 위한 구문
3. for of 루프 구문
형식: for(초기값 of 반복 구간)
특징:
- 배열의 요소들, 즉 data를 순회하기 위한 구문
- ES6에서 새로이 만들어진 컬렉션
- Array뿐 아니라 Map, Set 객체도 반복 가능
배열에서 반복문을 사용할 때,
① for (let value in array) : 배열의 index에 접근하는 것이고, 각각 string 형식이다.
(접근한 index는 숫자가 아니다)
② for (let value of array) : 배열의 element에 접근하는 것이고, 각각 string 형식이다.
▶ 배열에는 for of 구문이 적절하다.
객체에서 반복문을 사용할 때,
① for (let prop in obj) : 객체의 key에 접근하는 것이고, 각각 string 형식이다.
※ 객체에서 for in 구문을 쓰는 경우 확장 속성(prototype에 있는 내장 함수나 직접 입력해두었던 함수 등)을 포함하여 무작위적으로 반복이 일어나기 때문에 이를 유의하고 사용해야 한다.
② for (let prop of obj) : 동작하지 않는다, 대안으로 for (let prop of Object.keys(obj))로 동작 가능
∵ for of 루프는 [Symbol.iterator] 메소드를 사용하는 iterable object에 있는 컬렉션이다.
▶ 객체에는 for in 구문이 적절하다.
