TIL :템플릿, 제로초 JS강의

pr에는

리뷰어가 코드의 문맥을 빠르게 파악할 수 있도록 PR의 내용에서 충분한 정보를 전달해야 한다.

• 무슨 이유로 코드를 변경했는지
• 어떤 위험이나 장애가 발견되었는지
• 어떤 부분에 리뷰어가 집중하면 좋을지
• 관련 스크린샷
• 테스트 계획 또는 완료 사항

Pull Request Template란?

PR에 포함될 내용들을 정의하고, 생성할 때마다 자동으로 틀을 만들어 주는 것.

 

이슈에 템플릿이 만들어져 있었다.

팀장님이 만들어 놓으셨는데 issues 만들어 놓으신 거 보니 깔끔하게 너무 잘하셨다..! 역시..팀장님!

내 이슈도 다시 적으러 가야지..~

 

🌼 별 찍기

별 찍기 i를 0으로 고정해 놓고 별을 5-4-3-2-1으로 찍을 때

 

🌼 배열 기본

 

객체는 값을 모아둔 또 다른 값. 객체의 종류에는 배열, 함수, 배열이나 함수가 아닌 객체로 나눌 수 있다.

배열 내부에 든 값을 요소라고 한다. 요소의 개수를 구하는 방법을 제공해 줌 

[1,2,3].length; //3

 

배열의 요소 추가

배열의 마지막 요소 인덱스가 배열.length - 1이므로 다른 요소를 추가하려면 배열.length에 값을 넣으면 된다.

배열 제일 앞에 추가하려면 unshift

제일 뒤에 요소 추가 push

 

🌼 배열 메서드(수정, 조회)

 

배열의 요소 수정하기

배열에서 요소 제거하기

배열에서 맨 앞 요쇼 제거하기

배열의 중간 요소 제거하기 (splice)

splice(지우고 싶은 인덱스, 몇 개를 지울지)

두 번째 숫자가 없으면 싹 다 지운다. 

splice는 값을 지우기만 하는 것이 아니라 지워진 자리에 다른 값을 넣을 수도 있다.

중간에 아무것도 안지우고 끼워넣는 것도 가능하다.

---

배열에서 요소 찾기(includes)

true ,false가 나오는 애들은 주로 조건문이나 반복문에 넣는다. 

찾고자 하는 값이 몇 번째 인덱스에 위치하는지(indexOf)

lastIndexOf는 뒤에서 부터 찾는다. 

찾는게 없으면 -1이 나온다.

배열 반복하기

배열은 값들을 나열한 것이기 때문에 반복문과 같이 사용하는 경우가 많다.

---

 

🌼 배열 메서드 응용하기 

 

const arr= ['가','라','다','라','마','라'];

indexOf와 splice이용해서 '라' 제거하기

 

---

🌼 배열 at 메서드 (Array.prototype.at method javascript)

 

베열의 특정 위치를 가져오는 메서드

arr[3]이랑 같은거 아닌가?? => at은 -를 넣을 수 있다

arr[-1]은 안되고  arr.at(-1)은 된다. 

뒤에서 부터 위치를 찾을 수 있다

arr[arr.length -1]이랑 같음

arr.at(-1) = 3; 같은건 할 수 없음!

 

🌼 함수

 

함수는 일정한 동작을 수행하는 코드를 의미한다. 

함수 선언문 function a(){} 

또는 함수 표현식const b= function(){}; 또는

화살표함수const b = () =>{}; 

 

a(); 함수 호출한다.  호출해야 함수 내부가 실행된다. 

 

console.log 나 parseInt 같은 명령 뒤에 ()를 붙여 사용했다. 이것들도 함수이기 때문이다. 

 

return 값이 undefined이다.

리턴은 함수의 종료이자 값을 반환.

 

명시적으로 return 문을 사용하지 않는다면 항상 함수 동작문 끝에 return undefined가 있다고 생각하면 된다. 

값을 따로따로 1,5 이렇게 반환할 수는 없고

배열로 묶어서 반환한다. 리턴 값은 하나만 가능하다. 

---

🌼 매개변수와 인수(parameter, argument)

 

 

함수를 선언할 때는 parameter 매개변수

함수를 호출할 때는 argument 인수

 

parameter = " argument  "

짝지어지지 않은 건 undefined가 나온다.

이렇게  매개변수와 인수의 개수가 일치하지 않을 수 있다. 따라서 매개변수의 개수로 인수의 개수를 예측할 수 없다.

만약 인수가 몇 개 들어왔는지 궁금하다면 console.log(arguments)로 알 수 있다.

 

🌼 객체 리터럴 기본

 

배열과 객체의 차이는 이름(속성)이다.

속성을 쓸 때 숫자로 시작하거나 뛰어쓰기가 있거나 특수문자가 들어가면 "문자열" 속성을 써야 한다.

속성 값에 접근할 때 

obj.name / obj[name] 둘 다 사용가능한데 "문자열" 속성은 대괄호만 써야 한다. 

대괄호 안에 ' ' 써줘야 한다. 아니면 변수로 인식

속성 추가 변경

 

배열과 함수가 객체인 이유

배열과 함수가 객체인 이유는 객체의 성질을 모두 다 사용할 수 있기 때문이다.

배열과 함수에도 속성들을 추가할 수도 있고 수정 및 제거할 수도 있다. 객체는 함수와 배열을 포함하는 개념이라서 {} 사용해 만든 객체를 객체 리터럴이라고 따로 부르는 것이다. 

메서드 이해하기

객체의 속성 값으로 함수를 넣었을 때 이 속성을 메서드라고 한다. 

즉 객체 안에 있는 함수!!

지금까지 콘솔 창에 결과를 출력하려고 사용했던 함수가 바로 console객체의 log 메서드이다. 

 console객체와 log 메서드는 웹 브라우저가 기본으로 만들어둔 객체이므로 따로 선언하지 않아도 쓸 수 있다.

---

🌼 객체의 비교(원시값과의 차이점)

 

{} === {} //false

객체는 모양이 같아도 생성할 때마다 새로운 객체가 생성된다. 따라서 같은 객체인지 비교하고 싶으면 기존 객체를 변수에 저장해야 한다.

객체의 참조

객체를 저장한 변수를 다른 변수에 대입하면 두 변수 모두 같은 객체를 저장하는 셈이 된다.

이러한 상활일 때, 변수 a와 b가 같은 객체를 참조하고 있다고 표현한다. 

 

🌼 옵셔널 체이닝 

 

🌼 순서도를 그리는 이유

절차를 쭉 나열되면 순서도가 되고 그걸 코드로 옮기면 프로그램이 되는 것이다. 

프로그램 절차의 개수는 정해져 있어야 한다. (사람 수가 바뀐다고 절차가 바뀌고 그럼 안됌)

절차를 세울 때는 모든 가능성을 고려해야 한다. 

예시는 절차를 검증하는데 사용한다.