1. 오늘 하루 요약

1) 두 번째 페어

어제부로 첫 페어분과의 페어 프로그래밍을 마치고 오늘부터 다른 페어가 배정되었다. 이 분은 전 페어분과 성향이 달라서 페어 프로그래밍의 양상이 완전 달라지는 경험을 했다. 전에는 한 문제씩 번갈아가면서 네비게이터와 드라이버를 맡았는데, 이분은 코딩 경험이 있으셔서 네비게이터를 자청하셨다.

하루 내내 드라이버로 돌았는데, 결과물을 당장 만들어야 한다는 압박감이 없어서 그런지 페어분의 코드를 차분히 살펴볼 수 있었다. 그리고 머리가 더 잘 돌아갔다!ㅋㅋㅋ 덕분에 막힌 문제도 몇 개 풀어내는 등 코드 기여도가 높아서 오늘은 뿌듯한 마음으로 코플릿을 종료했다.

마음가짐의 문제일까, 부담감이 없는 상태를 유지하는 게 좋은 방법인 듯 하다.

2) IM 19기 후기 공유회

지금 코드스테이츠 IM 19기 후기 공유회를 들으면서 블로그를 쓰고 있는데 '블로깅 쓰는 고정 시간을 정한다'는 말씀에 뜨끔했다ㅋㅋㅋ 한 번 쓰다보면 쓰고 싶어서 계속 눌러있게 되는데(코드로는 할 말이 없는데 블로그에서는 왜 이리 할 말이 많은지ㅋㅋㅋ) 사실 시간 활용 면에서 효율적이진 않았다. TIL은 성실성을 증명하기 위한 거구나..

DEVLOG는 코드스테이츠를 통해 진행하는 프로젝트 2개를 기록

• 스프린트를 직접 나누게 되기 때문에 스프린트 단위로 진행 사항과 고민을 해결했던 방법을 기록한다.

깃헙 : 1일 1커밋 노력 (성실성을 증명할 가장 쉬운 방법)

• 평일은 토이만 잘 풀어도 1일 1커밋 가능
• 주말에는 미니 프로젝트 (스프린트에서 어려웠다고 생각한 부분을 따로 진행하는 것)

프로젝트를 진행하는 과정 (2주, 4주)
1) 아이디어 모집, 팀 결성
2) 기획(SR) : 가장 중요한 단계. 구체적이고 자세하게

- 프로젝트에 들어갈 큰 기능을 결정
- 어떤 기술 스택을 사용할지 결정
- 화면 Flow 그리기
- 스프린트(큰 기능을 마무리하는 3~4일 단위),
  테스크(스프린트를 행동할 수 있는 2~3시간 단위)를 잘게 나누기

3) 개발

- 테스크를 작업 순서대로 배치하기
 - 스프린트마다 마감 일정을 정하기
 - 스프린트마다 배포하기
 - 테스트와 디버깅하는 일정도 포함하기
 - 컨디션 조절하기

4) 발표

팀장의 역할

• 프로젝트의 전체 맥락 파악 : SR 문서 자주 살펴보기
• 팀원들이 어느 위치에 있는지 파악 : 작업의 시작과 끝을 슬랙으로 알려달라고 하기
• 메신저로 소통하는 답답함 -> 이모지로 확인 표시!

훌륭한 팀원

• 본인이 무슨 작업을 하는지 알려주기 (소통!)
• 팀원들에게 도움을 적극적으로 요청하기
• 커뮤니케이션은 공통된 채팅방에서
• 백/프론트 간에도 코드리뷰 하기 : 타인의 코드를 읽는 연습을 하자

2. 배열(Array)과 객체(Object)

1) 배열

1. 배열 : 순서(index)가 있는 값(요소, element)

대량의 정보 처리가 반복문이었다면,
대량의 정보를 보관하고 관리하는 것은 배열

index는 0부터 시작
element의 조회, 추가/삭제, 복사, 분리 가능

2. 배열의 선언

let myArray = ['hello', 1, 'world'];
let myArrayArray = [[1,2], [3,4], [5,6]];

• 대괄호(square bracket)[ ]안에 요소를 넣고 쉼표(comma),로 구분한다.
• 배열 안에 배열이 들어갈 수도 있음(2차원 배열 등). 엑셀의 행,열과 유사.

3. 배열의 조회

let myArray = ['hello', 1, 'world'];
myArray[0]

4. 배열의 변경

let myArray = ['hello', 1, 'world'];
myArray[0] = 'Hi'

• 변수 할당과 유사

5. 배열의 길이 알아내기

let myArray = ['hello', 1, 'world'];
myArray.length

6. 배열인지 확인하는 메소드

let myArray = ['hello', 1, 'world'];
typeof myArray // object로 출력되기 때문에 object와 구분하기 어려움
Array.isArray(myArray) // true

A가 대문자임에 주의할 것

7. element 추가, 삭제

let myArray = ['hello', 1, 'world'];

myArray.push(96) // 마지막에 element 추가
myArray = ['hello', 1, 'world', 96];

myArray.pop() // 마지막 element 삭제
myArray = ['hello', 1, 'world'];

myArray.unshift(96) // 첫번째에 element 추가
myArray = [96, 'hello', 1, 'world'];

myArray.shift() // 첫번째 element 삭제
myArray = ['hello', 1, 'world'];

console.table()을 이용해서 배열을 시각적(표)으로 확인할 수 있다.

8. 애증의 slice(), split()

slice() 관련 MDN
string.slice() : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/slice
array.slice() : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/slice

string.slice()

let str = "hello word i am dongoc";
str.slice(7) // 'ord i am dongoc' -> 7부터 마지막끼지 반환! <<<7 포함됨!!!!>>>
str.slcie(7,12) // 'ord i' -> 7부터 11까지 반환! <<<7 포함! 12 미포함!!>>>

• 즉, slice는 -> 오른쪽 방향으로 실행되고, 첫번째 매개변수는 포함, 두번째 매개변수는 미포함!
• slice는 str을 수정하지 않고 새로운 문자열을 생성함

array.slice()

let arr = ["hello", "word", "i", "am", "dongoc"];
arr.slice(1) // ["word", "i", "am", "dongoc"] -> 1부터 마지막끼지 반환! <<<1 포함됨!!!!>>>
arr.slcie(1,4) // ["word", "i", "am"] -> 1부터 3까지 반환! <<<1 포함! 4 미포함!!>>>

• 즉, slice는 -> 오른쪽 방향으로 실행되고, 첫번째 매개변수는 포함, 두번째 매개변수는 미포함!
• slice는 arr을 수정하지 않고 새로운 배열을 생성함

slice와 push(와 기타 계열이)가 배열로 반환되는지를 자꾸 헷깔린다.

string.split()

String을 지정한 구분자를 이용하여 여러 개의 문자열로 나눔

let str = "hello word i am dongoc";
str.split(" ") // ["hello", "word", "i", "am", "dongoc"]
str.split() // ["hello word i am dongoc"]

• split()은 array에 사용할 수는 없지만 array로 반환되는 점에 주의!

9. concat(), join(), toString()

concat()

두 개의 Array를 합쳐서 하나의 Array로 리턴

let arr1 = [1,2,3];
let arr2 = [5,6,7];
arr1.concat(arr2) // [1, 2, 3, 5, 6, 7] 

join()

배열의 모든 요소를 문자열로 변환하고 이어 붙여서 반환

let arr = [1,2,3];
arr.join() // "1,2,3"
arr.join("") // "123"
arr.join("-") // "1-2-3"

• 괄호 안이 공백일 경우 쉼표로 나옴을 주의하자

toString()

let arr = [1,2,3,"4","호"]
arr.toString() // '1,2,3,4,호'

• join()(괄호 안에 아무 것도 없음)과 toString()은 같은 역할을 하는 듯?
• 다만 join()이 더 활용도가 높아보인다.

10. element의 포함 여부 확인

let myArray = ['hello', 1, 'world'];

myArray.indexOf('hello') // 0
myArray.indexOf(123) // -1
myArray.indexOf('hello') !== -1 // true

myArray.includes('hello') // true

function hasElemnet(arr, element) {
  return myArray.indexOf(element) !== -1;
}
hasElement(myArray, 'hello') // true

• 단, includes('s'가 붙음에 유의하자)는 IE에 호환이 되지 않고, 포함 여부의 정보만을 확인할 수 있기 때문에 indexOf를 활용하는 것이 더 낫다.

2) 객체

1. 객체의 기본 구조

let obj = {key1: value1, key2: value2}

• 객체는 { }중괄호(curly bracket)로 표시
• key와 value 사이는 :콜론(colon)으로 표시
• 키값쌍 사이는 ,쉼표(comma)로 표시

2. 객체의 값 사용하기 : Dot notation VS Bracket notation

// 점 표기법(Dot notation)
let obj = {key: value};
obj.key; // value

// 괄호 표기법(Bracket notation)
let obj = {key: value};
obj['key']; // value

// 주의사항
obj.key === obj['key']
obj[key] !== obj['key']

• 괄호 표기법에서 key를 String으로 바꿔주지 않으면 변수로 처리됨
• key값이 동적으로 변할 때 응용할 수 있음

3. 객체 할당, 삭제

// 새롭게 할당하기
let obj = {a: 1};
obj.a = 2;
obj; // {a: 2}

// 값 삭제하기
let obj = {a: 1, b: 2};
delete obj.a;
obj; // {b: 2}

4. key 값의 여부를 조회하기 : in 연산자

let obj = {a: 1, b: 2};
'a' in obj; // true

5. 객체 순회하기 (애증의222)

참고한 블로그
객체 순회하기 : https://bit.ly/338oiA5
for in / for of : https://jsdev.kr/t/for-in-vs-for-of/2938

Object.keys() / Object.values() / Object.entries()

let obj = {a: 1, b: 2, c: 3, d: 4};

Object.keys(obj); // ['a', 'b', 'c', 'd'] 객체의 key값을 추출해 배열로 반환
Object.values(obj); // [1, 2, 3, 4] 객체의 value값을 추출해 배열로 반환
Object.entries(obj); // [['a', 1], ['b', 2], ['c', 3], ['d', 4]] 객체의 [key, value]를 배열로 반환

Object.keys().length <응용

• object의 경우 object.length를 지정하면 undefined가 됨.
• 길이를 구하기 위해서는 Object.keys().length를 사용!

for in 반복문

객체의 속성들을 반복하여 작업 수행
(key값에 접근할 수 있으나 value 값에 접근할 수는 없음)

let obj = {a: 1, b: 2, c: 3, d: 4};

for (var prop in obj) {
    console.log(prop, obj[prop]);
} // a 1, b 2, c 3, d 4