[코딩 부트캠프 2주차] 백문이 불여일타
TIL
첫 번째 TIL(Today I learned)에 이어서 2주 차 TIL을 남겨본다.
(TIL이 아니라 During the Week, I learned가 된 것 같지만... 일단은 이게 내 최선이다.)
1주 차에는 매주 화, 목에 있는 세션을 위주로 학습하고 알고리듬 문제를 풀어나간 반면에 2주 차에 들어서는 세션 위주의 학습 + 알고리듬 문제 풀이 + 예습 형식의 자습으로 학습 방식을 변경했다.
의도적으로 학습 방식을 변경할 생각은 없었는데 자연스럽게 알고리듬 문제를 풀다 보니 1주 차에 배운 내용을 넘어서는 부분을 마주하게 되었고, 이때 구글링을 통해서 관련된 글을 읽는다거나 부트캠프에서 제공하는 학습 영상/슬라이드를 살펴보면서 예습을 해나가게 되었다.
새로 알게 된 내용은 '아~ 그렇구나.'하고 머리에서 금세 없어지길래 콘솔 창을 열어서 똑같이 쳐보고, 또 나만의 말로 다시 한번 정리하는 과정이 자연스레 이어졌다.
덕분에 회사에 있는 시간을 빼고 가능한 모든 여가 시간을 쪼개서 빡세게 공부 중이다.
의도치 않게 시작된 자습과 TIL 노트, 점점 빡세지는 학습 과정작년쯤 어디서 데이터 분석에는 파이썬이 필요하다는 소리를 듣고선 나도 파이썬을 배워보겠노라 전공서적처럼 두터운 파이썬 책 한 권을 사들고, 유튜브의 왼손코딩을 열심히 들었던 적이 있다.
책을 반 이상 읽어 내려갔고 배우고자 하는 의지도 넘쳤지만 결과적으로는 업무에 적용을 1도 못하고 중도 포기했다. 출퇴근길에 파이썬 코드를 읽을 땐 '아, 이 모든 것이 이해가 간다!' 했지만 막상 책상에 앉아서 뭔가를 구현해보려고 하니 손으로 쳐본 게 하나도 없고 머리도 뒤죽박죽이 되었던 기억이 있다.
얼마 전 학습 세션 때 [백문이 불여일타]라는 얘기가 나왔었는데, 프로그래밍은 역시 눈으로 보고 머리로 이해하는 것만큼 내 손가락으로 일일이 쳐보고 나만의 말로 적어서 정리해두는 게 필요한 것 같다.
2주차 TIL
String Method / Array Method
함수형 프로그래밍에 대해
How To Debug
코딩 Tips
[String Method]
1. string의 특징 :
문자열 string에서는 index로 접근해서 읽기는 가능하지만(read), 재할당(write)이 불가능 → read only
1) index를 이용해서 문자열로 새로 할당 ok
2) index를 이용해서 이미 존재하는 문자열에 재할당 no
3) string을 바꾸는 방법은 index를 이용하지 않고 문자열 자체를 다시 넣어주는 수밖에 없다.
string의 method는 모두 immutable : method를 사용해도 원본이 변하지 않음
cf) array method는 원본이 바뀌기도 함 mutable/immutable 섞여있음
str + 다른 타입 → 무조건 string으로 처리됨
.length : string의 property로 문자열 수 확인 cf)array, string 등에 모두 존재
.indexOf(찾을 문자) : 문자열을 찾아서 해당 문자열이 시작하는 index를 보여주는 기능, arguments로 찾을 문자를 넣으면 return value로 해당 문자의 index를 보여줌, 내용이 없는 경우는 -1로 표현
.includes(찾을값) : 배열이 특정 요소를 포함하고 있는지를 참/거짓으로 판별해서 반환
- indexOf는 includes처럼 포함 여부를 파악하면서 위치까지 알려주기 때문에 indexOf를 사용하는 것이 더 좋음
- IE에서는 사용 불가
.split(seperator) // arguments로 separator를 넣어주면 return value로 문자열을 separator 기준으로 나눠서 배열로 떨어짐
- separator를 넣어주지 않으면 기본으로 , 기준으로 나뉨
- csv 타입에서 사용하면 좋음
.substring(start, end)// 글자를 잘라주는 역할 문자열의 시작과 끝 index를 arguments로 넣어주면 return value로 시작 index를 포함해서 끝 index 전까지의 문자열을 보여줌, 시작과 끝 index는 거꾸로 써줘도 됨, 음수는 0으로 표시됨
- ex) str.substring(3, 5) === str.substring(5, 3)
- ** substring에서 시작 인덱스가 음수 값이면 0으로 바꾸어주지만, slice는 시작 인덱스가 음수 값이면 빈 문자열 리턴
. toLowerCase(), toUpperCase() // 소문자로, 대문자로 바꿔줌
.trim() // 문자열 양 끝의 공백을 제거 공백 문자는(space, tab, NBSP 등을 가리킴)
- ex) var greeting = ' Hello world! ';
- console.log(greeting.trim()); // → expected output: "Hello world!";
- 공백 문자 : 탭 문자 (\t), carriage return (\r\n), 문자 (\n)
.match(정규표현식) //
- arguments : 정규표현식
- return value:
1) 문자열이 정규식과 일치하면, 일치하는 전체 문자열을 첫 번째 요소로 포함하는 Array 반환
2) 정규식과 일치하는 문자열이 없으면 null이 반환
3) arguments를 전달하지 않고 사용하면 빈 문자열 [“ “] 형태의 Array가 반환됨
.replace() // 어떤 패턴이 일치하는 일부 또는 모든 부분이 교체된 새로운 문자열 반환
- 형식: var newStr = str.replace(일정한 패턴, 치환할 내용)
1) 일정한 패턴의 유형 : 정규식 또는 substr
2) 치환할 내용의 유형 : newStr 또는 함수
[함수형 프로그래밍]
1. 함수형 프로그래밍의 특징
인자(arguments)로 함수를 넘길 수 있다.
형태: 함수(callback함수);
callback 함수는 argument로 넘겨주는 내부 함수를 가리킴
2. 함수형 프로그래밍이 필요한 이유
for 구문을 잘 알고,
callback의 개념을 이해한 후
callback이 적용되는 arr.method(forEach, map, reduce, filter) 등을 사용할 줄 알면
→ 함수에 함수를 적용하여 많은 작업을 한꺼번에 진행 가능
[Array Method]
Array Method의 Mutable과 Immutable
- String Method와 달리 Array Method에는 immutable과 mutable이 존재
- 대표적 mutable array method: arr.push(), arr.pop(), arr.shift(), arr.unshift(), arr.splice(), arr.reverse(), arr.sort(), arr.fill()
Array.isArray() : () 안이 array 인지 확인하는 방법
- typeof [1,2,3]은 array가 아니라 object로 나온다. ∵ array는 object의 일부이기 때문
- [1,2,3] === [1,2,3] 은 false가 된다.
{1,2} === {1,2} 도 false이다.
∵ 객체와 배열 reference type(자료형)이기 때문에 strict equal로 공통 유무를 구분할 수 없다.
arr.forEach(function (currentElement, index, oroginalArray))
- Immutable
- element의 길이만큼 argument인 function이 반복되는 함수
- 전달 인자(argument)로 function이 들어가고,
callback 함수 안에서 사용하는 element는 3개:currentElement, index, oroginalArray(순서는 고정)
- return value: undefined(return을 해주지 않고 반복만 함)
arr.map(function (currentElement, index, oroginalArray))
- immutable
- 전달 인자(argument)로 function이 들어가고,
callback 함수 안에서 사용하는 element는 3개:currentElement, index, oroginalArray(순서는 고정)
- 주 사용목적: 기존 배열과 동일한 형태이나 요소의 형태가 다르게 될 때 사용
- forEach와 비슷하지만 callback 함수 안에 return을 넣어줘야 하는 점이 상이
arr.filter(function (currentElement, index, oroginalArray))
- Immutable
- 전달 인자(argument)로 function이 들어가고,
callback 함수 안에서 사용하는 element는 3개:currentElement, index, oroginalArray(순서는 고정)
- callback 함수의 조건이 통과하면 return이 되는 함수
- 주 사용목적: 조건에 따라 특정 element를 걸러야 할 때 사용
- callback 함수 안에는 boolean type(true or false)의 return 값이 필요
arr.push(newElement)
-Mutable
-추가된 array 길이를 return 하고 newElement가 배열의 마지막 element로 추가됨
- return value: array의 length(숫자)
ex) let arr = [1, 2];
let ret = arr.push(3); // -> [1, 2, 3]이 반환되지 않고 3이 반환됨([1, 2, 3]의 length를 불러옴
arr.pop()
- Mutable
- 배열의 가장 마지막 요소를 제거할 때 사용
- return value: 제거된 element가 보임
arr.slice([begin [, end] ] ) ** [ ] 안의 값은 optional 한 요소
- Immutable
- String에서는 str.substring을 사용하는 것처럼 Array에서는 arr.slice를 사용하는 것이 좋음
※ str.substring(시작, 끝)과 str.substring(끝, 시작)이 같은 것으로 처리되나 arr.slice에서는 시작해서 자를 위치까지의 순서가 바뀌면 안 됨!!
- shallow copy(통째로 복사해서 새로 할당하는 방법)에 용이한 함수
ex) let arr = [1, 2];
let arrClone = arr.slice() // [1, 2]가 새로 할당됨
arr.splice(start [, deleteCount [, item [, item2 [, …] ] ] ] )
- Mutable
- 배열 중간 값을 삭제하거나 교체할 때 사용
1) 용례 1: 중간 값을 삭제하고 싶을 때
2) 용례 2: 중간 값을 추가하고 싶을 때
3) 용례 3: 중간 값을 변경하고 싶을 때
- element 순서 고정 : 시작 index, 삭제할 개수, 추가할 값
- deleteCount가 0이면 삭제하지 않고 중간에 추가하는 역할만 수행
arr.reduce(callback [, initialValue] )
- Immutable
- callback 함수의 element 형식: accumulator(누적 값), currentValue(현재 값), currentIndex(현재 위치), originalArray(원래 배열)
- callback 함수 조건에 따라 누적시켜서 하나의 결과를 만들 때 사용
(reduce는 모든 element를 계산해서 하나의 특정 값으로 만들 때 사용)
cf) forEach는 반복만 진행할 때 사용, filter는 몇 개를 걸러낼 때 사용
- initialValue를 이용한 reduce: reduce 안에 초기값 initialValue가 있으면 initialValue를 이용해서 1번 반복을 실행한 상태에서 배열의 length만큼 반복이 실행됨
- return value: accumulator : accumulator의 타입은 초기값에 따라 달라짐
arr.join([separator = ‘,’])
- Immutable
- return value: separator로 element를 연결할 문자열(string)
- separator() // -> 공백으로 넣으면 기본적으로 , 를 넣고 string 형식으로 붙여줌
- separator(‘’) // -> separator가 빈칸이어서 모든 element가 한꺼번에 붙음
cf) str.split()을 하면 array 형식으로 변경/ arr.join()을 하면 string 형식으로 변경=-- arr.join(‘+’).split(‘+’) ; // 원본 array 그대로 출력됨
arr.indexOf()
- Immutable
- str.indexOf와 같은 형태
- array에서 element가 있는지 존재 여부 확인이 필요할 때 사용
- 유사 method: arr.includes, arr.find, arr.method
→ indexOf는 위의 유사 method와 달리 있는지 없는지를 거르고 그 후에 어디에 있는지도 알려줌
3. 그 밖에 찾아본 array method
arr.concat()
- Immutable
- 배열과 배열을 합칠 때 사용
arr.every / arr.some
- Immutable
- every: 모든 조건이 충족하면 true, 아니면 false, 빈 배열은 무조건 true
- some: 하나라도 조건이 충족하면 true, 아니면 false, 빈 배열은 무조건 false
arr.shift / arr.unshift
- Mutable
- shift: 배열의 맨 앞 요소 삭제, return value: 삭제한 값
- unshif(newElement) : 배열의 맨 앞요소 추가, return value: 배열의 개수
arr.reverse
- Mutable
- 배열의 요소 순서가 뒤집어진 배열 반환
arr.sort([compareFunction])
- Mutable
- 비교 함수에 의한 값을 기준으로 배열의 element를 정렬할 때 사용
- ()로 실행하면 오름차순 정렬
arr.fill([value [, start [, end ] ] ] )
- Mutable
- 시작 ~ 특정 위치까지 어떤 값으로 채우기를 원할 때 사용
- ()로 실행하면 전체 element를 undefined로 바꿈
- value(채워 넣을 값), start(시작 위치), end(종료 위치)
1) start는 지정하지 않으면 기본값이 0
2) start가 음수이면 시작 index는 음수+arr.length
3) end는 지정하지 않으면 기본값이 arr.length
4) end가 음수이면 종료 index는 음수+arr.length
Array Method 중 꼭 외울 내용
- .length
- Array.isArray()
- arr.foreach
- arr.map
- arr.push
- arr.slice
- arr.reduce
- arr.sort
[Debugging]
디버깅: 문제 해결을 위한 방법
1. 문법 에러인지 보기 (syntax error : 문법 오류가 있는 위치 확인)
2. 로직 에러인지 보기
1) 문제가 발생했을 것이라고 생각되는 부분을 가설로 선정하고
2) 가설이 맞는지 틀린 지 실험을 통해 가설 검증
(1) console.log를 이용해서 확인
(2) 테스트 주도 개발 진행 (TDD)
유용한 테스트 방법
1) 경우의 수를 정리
2) 경우의 수에 대해 하나씩 기댓값과 실제값을 비교 → 유닛 테스트, 테스트 주도 개발 방법론이라고 함
유닛 테스트의 예시:
it("메시지", function() {
expect(적용을 할 내용).to.be.equal(원하는 값);
});
주석처리
① // 한 줄 주석
② //** 주석을 여러 줄에 이어 쓰기 */
③ 주석 처리하고 싶은 곳 드래그해서 Ctrl + /
[코딩 Tips]
객체는 길이와 순서가 없지만, 배열은 길이와 순서가 있다.
ex) arr = [1, 2, 3, 4]
delete arr[0] 처리를 하면 [ , 2, 3, 4] 처리가 된다.
∵ 0번째 index만 없어진 것이지 1번째부터 index는 그대로 순서를 가지기 때문
index의 순서를 앞에서부터 -1로 모두 변경하고 싶으면 .shift()를 사용하는 것이 맞다.
let과 const의 차이?
- let을 이용해서 변수를 선언한 후에는 재할당이 가능
- const을 이용해서 변수를 선언하면 재할당이 불가능
for or/ for in/ if in 정리
- for of : 순차 탐색(iterable)이 가능한 곳에서 사용 가능
- for in : 하나씩 value를 찍고 싶을 때 사용 가능:
obj에 사용할 때 주의할 점: obj는 순서가 없음, 출력되는 대로 순서가 아니기 때문에 for in을 이용해서 나오는 값이 순서가 다를 때 이를 유의해야 함
- if in : obj에서 키 값이 있는지 없는지 확인할 때 사용 가능
반복문 안에서 console.log로 디버깅할 때 주의점: return 전에 써야 tracking 가능
typesafeness: javascript는 typesafe하지 않아서 이 부분을 보완하기 위해서 typescript라는 웹프래이밍을 사용하기도 함
3항 연산자란?
- 형식: (조건문) ? (true 일 때 리턴) : (false 일 때 리턴)
- ex1) let value = true? 3 : 5 // → value는 3
- ex2) let value2 = (‘hello’.length === 5) ? ‘ok’ , ‘no // → value2는 ‘ok’
Chaining : 각각의 값을 새로운 배열을 선언해 할당하지 않고, method를 연이어 사용해서 최종 값을 불러오는 것이 가능하고 이 방법이 좋은 코딩 방법
array literal : 빈 배열을 만들고 push 하는 것 대신에 [변수 1, 변수 2]를 바로 return 하는 것이 과정과 속도를 줄이는 좋은 방법
- 1단계 : let arr = [] → 2단계 : arr = [변수 1, 변수 2]; → 3단계 : return arr;
- 1단계 : return [변수 1, 변수 2]
