[코드스테이츠] Full Pre 11기, 8번째 날

MihyunCho·2021년 3월 9일

[코드스테이츠] Full Pre 11기

목록 보기

6/18

코드스테이츠 we win 20주 Full Pre 11기 🔥

여덟번째 날

스프린트 : Week 2-1) JS로 많은 데이터 다루기 & 오늘 하루 회고

오늘은 새로운 페어와 새로운 스프린트를 하는 날! 배열과 객체에 대해서 배우고 코플릿을 풀어나가는 과정이다.
다행히 레슨에서 다루는 배열과 객체 부분은 사전에 인지하고 있었던 정도라서 레슨을 쫓아가는게 어렵지는 않았다.
다만 앞에서 누누히 말했듯 코드스테이츠는 코플릿이 매운맛🔥이다.
그래서 레슨 강의를 들으면서도 '레슨에서 순한맛 주고 코플릿에서 급 매운맛 주겠지?!' 하는 생각으로 기초를 다잡고자 열심히 듣고 Notion에 필기도 꼼꼼히 해놓았다.
매번 느끼는거지만 거창한 기술이나, 깊은 개념을 늘어놓는 강의보다 코드스테이츠의 레슨 정도가 기초 개념을 잡고 스스로 학습하여 심화 시키기엔 딱 적당하다고 생각한다 (물론 코딩 완전 초심자의 생각은 다를 수 있다)

나도 스스로 프로그래밍 공부할 때, 예를 들어 Javascript를 혼자서 독학할 때 기본 개념정도만 쌓고 무엇을 만들어 볼 생각보다는 계속해서 심화된 개념만을 공부하려고 했었다. 그러다 보니 나중에 가서는 머릿속에 확신할 수 있는 개념들은 몇가지 안되는데 내가 JS로 만들 수 있는 프로젝트는 없는 느낌을 받았다.
유튜브의 코더들이나 유명 코딩 강사들은 하나같이 똑같은 말을 했다.
'언어의 기본만 학습하시고, 무엇이든 만들어보세요'
스스로 학습한지 얼마되지 않았을 때는 '아니, 다른사람들 코드 보니까 내가 모르는 높은 차원의 개념들이 많아서, 나는 이해할수도, 만들수도 없게 생겼던데 뭘 어떻게 만들라는거지?' 이런 생각을 했었다.

개발자가 되고 싶어 시작했고, 공부한 시간도 적지않게 들었다고 생각하는데 막상 내가 제대로 된 것을 만들어 내지 못했을 때 맞이할 자괴감을 피하고 싶어서 아무것도 만드려 하지 않았던 것 같다. 지금 생각하면 너무나 안타깝고 바보같은 생각😅
나는 겁이 많아 피해를 본다 하더라도 최소한의 피해만 보고싶어하며, 늘 최고의 기회를 좇는 기회주의자 스타일이다.
그때를 지금 돌아보면 최소의 피해를 보고자 선택했던 길 전부가 도피처였고, 최고의 기회라 생각했던 것은 우물안 개구리의 하늘 정도였다.
모든 분야의 학문이든 기술이든 마찬가지겠지만, 학습하고 익혀 내 것으로 만드려면 최대의 피해도 입어보고 최악의 기회도 잡아봐야 구르고, 갈리고, 닦여 마침내 단단한 나의 지식이 된다. 이 과정을 겁내면 지식이 내 것이 되는 날은 결코 오지 않는다.
이런 사실을 깨달은지 얼마 안된 애송이지만, 이러한 진리를 깨달았다는 것에 감사하며 내일을 준비한다🙏

배열

배열은 순서가 있는 값

순서는 인덱스(index)라고 부르며, 1이 아닌 0부터 번호를 매김
대괄호를 이용해서 배열을 만들고, 각각의 원소(element)는 쉼표(comma)로 구분해준다.
값은 인덱스를 이용해 접근합니다.

2차원 배열의 예

let myNumber = [[13,30],[73,8],[44,17]];
		// myNumber의 1번째 인덱스 -> [73,8]
		// myNumber의 1번째 인덱스의 0번째 인덱스 -> 73

myNumber.length : 배열의 길이를 반환함
myNumber.push(96) : 배열끝에 괄호안의 값을 추가함
myNumber.pop() : 배열 마지막 값을 삭제함

배열의 반복

배열과 반복문을 조합하는 경우는 매우많다

반복문을 이용해 배열의 요소(element)를 한번씩 출력하려면?
- 반복의 증가값 숫자 n은 0부터 시작한다(인덱스가 0부터 시작하므로)
- 배열의 길이보다 작을 때까지 반복한다.
- 1씩 증가함

for(let n = 0; n < myNum.length; n++)  {
	myNum[n];
}

myNum의 모든 element를 누적해서 더하기 위해 필요한 조건과, 반복할 구문은?

let myNum = [10, 20, 40, 10];
let sum = 0;
for(let n = 0; n < myNum.length; n++) {
	sum += myNum[n]; // sum = sum + myNum;
}

배열인지 아닌지 확인하기

자바스크립트의 특정 값이 배열인지 아닌지 판별할 수 있는 Array.isArray에 대해 배우기.

let words = ['피','땀','눈물'];
Array.isArray(words);
// true를 반환
Array.usArray([1,2,3]);
// true를 반환

Array.isArray는 배열인지 아닌지를 판별하여 boolean값으로 반환함 (true / false)

배열 요소 추가 및 삭제하기

배열의 요소(element)를 push, pop를 활용하여 추가 및 삭제 해보기.

let arr =['code','states'];
console.table(arr) // 표로 index와 value값이 잘 보이도록 시각화 되어 반환함

arr.push('pre') // 배열의 마지막에 추가
arr = ['code','states','pre'];

arr.pop(); // 'pre' -> 삭제된 값이 반환됨 // 배열의 마지막 값을 삭제
arr =['code','states'];

let arr =['code','states'];

arr.shift() // 'code' -> 삭제된 값을 반환함
arr =['states']; // 배열의 가장 앞쪽 값을 삭제함

arr.unshift('creative'); // 2 -> 실행 후 현재 배열에 있는 요소의 갯수를 반환
arr =['creative','states']; // 배열의 가장 앞쪽에 값이 추가됨

배열 요소 포함 여부 확인하기

자바스크립트의 특정 값이 배열에 포함되어 있는지 확인할 수 있는 indexOf, includes에 대해 알기.

let words = ['Radagast','the','Brown'];
words.indexOf('the') // 1 -> 해당 값이 들어있는 인덱스 번호를 반환함
words.indexOf('없는단어') // -1 -> 배열에 없는 값은 -1을 반환함

// 해당 값이 배열에 있는지 없는지를 검사하고 싶을 때
words.indexOf('Brown') !== -1  // true -> true가 나오면 있는 것.
words.indexOf('없는단어') !== -1 // false -> 없는 것.

대소문자를 구분하기 때문에 유의하여 검사해야함.

let words = ['Radagast','the','Brown'];
words.includes('the') // true
words.includes('없는단어') // false

호환성 여부 : internet explorer에서 사용할 수 없음 → 실제로 해당 코드를 만나면 작동 하지 않고 에러발생

객체

회원 주소록을 만들어본다고 가정할 때

let userFirstName = 'Steve';
let userLastName = 'Lee';
let userEmail = 'steve@codestates.com';
let userCity = 'Seoul';

let user2FirstName = 'Steve';
let user2LastName = 'Lee';
let user2Email = 'steve@codestates.com';
let user2City = 'Seoul';

서로 관계성도 없고 수많은 변수를 만들어야 하는 불편함이 있음

let user = [
	'Steve',
	'lee',
	'steve@codestates.com',
	'Seoul'
]

배열로 쓰면 관계성은 있어보이지만, 각각 인덱스에 어떤 값이 있는지 알지 못한다면 사용하기 불편함
객체를 사용하면 아래 코드와 같이 사용할 수 있다.

객체는 key : value 로 이루어져 있다.

let user = {
	firstName : 'Steve',
	lastName : 'Lee',
	email: 'steva@codestate.com',
	city: 'Seoul'
}

// Dot notation
user.firstName; // 'Steve'
user.city; // 'Seoul'

// Bracket notation   !문자열 없이 넣으면 변수로 취급하여 에러를 발생시킴
user['firstName']  // 'Steve'
user['city'] // 'Seoul'

key값이 변한다면 Bracket notation을 써야함.

dot/bracket notation을 이용해 값을 추가할 수도 있다.
delete 키워드를 이용해 삭제가 가능하다

let user = {
	firstName : 'Steve',
	lastName : 'Lee',
	email: 'steva@codestate.com',
	city: 'Seoul'
}

delete user.city;

/*
let user = {
	firstName : 'Steve',
	lastName : 'Lee',
	email: 'steva@codestate.com
}
*/

in 연산자를 이용해 해당하는 키가 있는지 확인할 수 있다.

let user = {
	firstName : 'Steve',
	lastName : 'Lee',
	email: 'steva@codestate.com',
	city: 'Seoul'
}

'city' in user; // true
'birth' in user; // false