[TIL] 개발 협업 특강과 데이터 in JavaScript

샤이니·2023년 3월 30일

Codeit TIL js

learned.log

목록 보기

10/46

오늘의 나는 무엇을 잘했을까?

루크와 첫 멘토링시간을 가졌다! 아이스브레이킹을 하고 개발자로 성장해나가는 과정에 대해 이야기했던 뜻깊은 시간이었다. 특히 진짜진짜가짜가 너무 웃겼다 ㅋㅋㅋ 멘토님과 팀원분들과 한층 더 친해진 느낌!
하루만에 Data in JavaScript를 다 들었다.. 힘들었다. 하지만 빠르게 듣고 남은 시간을 Weekly Mission에 몰두하려고 했다!

오늘의 나는 무엇을 배웠을까?

[1] git 특강 - 개발 협업

언제나 숨겨진 비용이 있다. 모든 선택은 trade off 된다.

왜 좋은 코드를 써야하는 가?

읽기 좋은 코드! 여러명과 협업 할때 중요하다. 만드는 시간보다 읽히는 빈도가 더 크기 때문이다.
좋은 코드를 위해선..
- 컨벤션
- 주석 : 코드의 배경 시직이 필요하다면 주석을 써라.
- 코드리뷰 : 비동기적 코드리뷰. 동기적으로 아예 코드를 만드는 페어프로그래밍도 있다.
Conventional commit

[2] JavaScript with Data

객체

Property - `property name : property value`

연관된 여러 값 혹은 함수를 하나로 묶고 싶을 때 객체 활용
어떠한 자료형이든 저장할 수 있다.
Property Name 주의사항!
- 첫글자는 반드시 문자, _ , $ 중 하나로 시작하기
- 띄어쓰기 금지, 하이픈(-) 금
  
  → 이런 규칙을 벗어나는 경우 ‘’로 감싸주면 된다.

객체 다루기

객체의 데이터 접근하기

점 표기법 - objectName.propertyName
- 점표기법으로는 변수를 사용할 수 없다
  - 점표기법과 괄호표기법의 차이점?
대괄호 표기법 - objectName['propertyName']
- [문자열] 이여야한다.
존재하지 않는 데이터에 접근하려 하면 undefind값이 출력된다.
객체에 데이터 추가하기 : objectName.propertyName = propertyValue
객체에 데이터 삭제하기 : delete objectName.propertyName
in 연산자 : propertyName in objectName

객체와 메소드

메소드는 어떠한 객체의 고유한 동작으로서 함수에 의미를 부여할 수 있다.

for .. in 주의사항

객체는 정수형 프로퍼티 네임을 오름차순으로 먼저 정렬하고 나머지 프로퍼티들은 추가한 순서대로 정렬합니다.
따라서 작성한 순서대로 출력되는 것이 아닌 정렬된 순서대로 출력되니 주의가 필요!
객체의 모든 프로퍼티를 대상으로 반복하는 것이기 때문에 배열에는 적합하지 않다.(사용은 가능) → for..of 쓸 것

내장 객체

Date 객체 new Data();

기준날짜 : 1970년 1월 1일 00:00:00 UTC

data 정수를 타임스탬프라고 한다.
1. 파라미터
  - 아무것도 넣지 않으면 객체를 생성한 순간의 시간이 만들어진다.
  - 숫자를 넣을 경우 1970년 1월 1일 00:00:00 UTC + 숫자ms가 지는 객체가 만들어진다.
  - 해석 가능한 문자열을 넣을 경우 해당 날짜의 객체를 만들 수 있다.
    - ‘YYYY-MM-DD’ - 자정을 기준으로
    - ‘YYYY-MM-DDThh:mm:ss ’
  - 여러개의 값
    - YYYY, MM, DD, hh, mm, ss, ms 순
    - 밑줄은 필수
    - month는 0월(=1월)부터 시작한다. 즉 1을 넣으면 2월을 출력한다!
2. 메소드
  - getTime() : 1970년 1월 1일 00:00:00 UTC부터 몇 밀리초가 지났는지 가져온다.
  - getFullYear()
  - getDay() - 요일. 일(0) ~ 토요일(6)
  - getDate() - 날짜
  - etc…
  - set으로 시작하는 메소드로 생성된 Date객체의 정보를 수정할 수 있다.
  - toLocaleDateString(),toLocaleTimeString(),toLocaleString()
    - 사용자의 브라우저에 설정된 국가의 표기에 맞춰 날짜와 시간을 보여준다.
  - Date.now() - 새로운 객체를 만들지 않아도 바로 현 시점의 날짜 값을 얻어낼 수 있다.
3. 형변환 가능 → 즉 연산가능
4. 다양한 타임스탬프 형식 - 표준이 몇가지 있다.

배열 (Array)

객체이다.

let arr = [0,1,2]
arr[4] = 4
console.log(arr) // 0,1,2,empty,4. empty는 undefined

delete arr[2] // 0,1,empty,empty,4

배열 메소드

.splice(startIndex, deleteCount, 추가할값, 추가할값...)

let arr = [0,1,2,3,4,5]
arr.splice(4) // [0,1,2,3]
arr.splice(2, 1, "g","k") //[0, 1, "g", "k", 3]
arr.splice(1, **0**, "하이루") // 1번 인덱스 뒤에 하이루 추가. 삭제는 X

.shift() : 배열의 첫 요소 삭제
.pop() : 배열의 마지막 요소 삭제
.unshift() : 배열의 첫 요소로 추가
.push() : 배열의 마지막 요소로 값 추가
.indexOf(item): 배열에 item이 있는 index 리턴
- 없다면 -1 리턴
- 여러번 포함되어 있다면 처음 발견된 인덱스가 리턴
.lastIndexOf() : indexOf의 뒤에서부터 탐색하는 버전.
- 여러번 포함되어있을 때 젤 뒤에 있는 인덱스가 리턴된다
.includes(item) : 배열에 item이 포함되어있는지 판단. T or F
.reverse() : 배열 순서를 아예 뒤집기. 반환이 아니고 해당 배열을 뒤집는 것이다.

for..of 반복문

배열의 값을 불러온다.

자료형 심화

지수표기법 - e를 활용

10의 거듭제곱을 곱한다.
- 1e9 === 1*10^9

숫자형 메소드

toFixed(n) : n의 범위는 0~100
- 소수점 뒤 자리수를 고정시켜주는 메소드. 반올림한다. 부족하면 0 붙인다.
- 메소드의 반환되는 값은 string이기 때문에 더하기 연산을 하기 전 Number로 형변환 해줘야한다.
- Number(value) === +value
  - + 기호를 값 앞에 붙이면 Number 형으로 형변환된다.
toString(n) : n의 범위는 2~36
- n의 진법으로 해당 숫자의 진법을 바꿔
일반적으로 숫자형 메소드를 사용할 때 변수에 사용하는 것이 아닌 숫자에 직접 적용(ex 255.toString(2))하면 error
- .을 2번 찍어줘야한다. 255..toString(2)
- 숫자를 괄호로 감싼 후 사용해야한다. (255).toString(2)

Math 객체

Math.abs(x) // 절대값
Math.max(a,b,c,d,e,f) // 최댓값
Math.pow(x, y)// 거듭제곱
Math.sqrt(x) // 제곱근
Math.round(x) // 반올림
Math.floor(x) // 버림
Math.ceil(x) // 올림
Math.random() // 0이상 1 미만 랜던값 리턴
//등등..

문자열 심화

배열의 대부분의 메소드 사용 가능.

문자열은 immutable 자료형이다. (배열은 mutable 자료형)

→ 따라서 splice 같은 메소드는 사용 XX

.toUpperCase() , .toLowerCase()
.trim() : 양 옆 공백 제거
.slice(start, end) : end는 포함 안한다.
- end 생략시 start부터 끝까지 가져온다.
- 둘다 생략시 문자열 전체를 가져온다.

기본형과 참조형

기본형 (Primitive Type) : Number, String, Boolean, Null, Undefined
참조형 (Reference Type) : Object
- 배열 복사하기
  - .slice()사용!
- 객체 복사하기
  - Object 객체의 .assign() 메소드 사용
```
let course 2 = Object.assign({}, course1) 
//course2로 course1 값 복사
```
  - for…in 함수 사용!
- 이것들을 사용해도 객체나 배열 안에 중첩해서 객체나 배열이 또 있으면 그 요소는 주소값이 복사된다. 주의할 것.

const, 변수와 상수 사이

const로 선언한 변수는 재할당이 불가능하다. error

가능한 것!!!!
```
const x = {name : 'Codeit'}
x.birth = 2017;
```
- const로 선언한 변수에 객체나 배열이 할당되었다.
  - 이때 객체의 프로퍼티나 배열이 요소들이 변경되는 경우는 변수가 가진 주소값을 변경하는 것이 아니기 때문에 값이 충분히 변할 수 있따!!

Var이 사라진 이유

중복 선언 허용 → let으로 이렇게 하면 error뜸

var myVariable = 'codeit';
console.log(myVariable);
var myVariable = 'Codeit!';
console.log(myVariable);

함수 Scope - function내에서 선언 된 것을 제외하고는 다 전역!
- fucntion 내에서는 지역변수. 즉 함수를 기준으로만 적용되는 스코프이니 함수 스코프이다.
Hoisting 문제
```
console.log(myVariable);
var myVariable = 2;
console.log(myVariable);
// undefined
// 2
```
- 변수가 끌어올려 지는 현상
- 함수 스코프를 기준으로 선언되기 이전에도 변수에 접근 가능하다.

오늘의 나는 어떤 어려움이 있었을까?

TIL도 밀리고, 팀 데일리 미션도 마무리를 못했다😓 무리하게 나눠서 들어도 되는 강의를 한번에 들으려고 하다보니 시간 분배를 잘못한 것 같다..
점표기법에서 변수 사용이 안된다는 것을 몰라서 실습을 하며 왜 안돼??? 를 500번 외쳤다. 간단히 구글링 하니 나오던 것..^^ JS 기초가 정말정말정말 부족하다는 것을 깨달았다.

내일의 나는 무엇을 해야할까?

샤이니

이전 포스트

[TIL] Git 뿌수기와 무서운 경험

다음 포스트

[TIL] 개발 협업 특강과 데이터 in JavaScript

learned.log

오늘의 나는 무엇을 잘했을까?

오늘의 나는 무엇을 배웠을까?

[1] git 특강 - 개발 협업

[2] JavaScript with Data

객체

Property - `property name : property value`

객체 다루기

내장 객체

배열 (Array)

배열 메소드

자료형 심화

Math 객체

문자열 심화

기본형과 참조형

const, 변수와 상수 사이

Var이 사라진 이유

오늘의 나는 어떤 어려움이 있었을까?

내일의 나는 무엇을 해야할까?

[TIL] Git 뿌수기와 무서운 경험

[TIL] Git Merge와 JS 렉시컬 스코프

0개의 댓글

[TIL] 개발 협업 특강과 데이터 in JavaScript

learned.log

오늘의 나는 무엇을 잘했을까?

오늘의 나는 무엇을 배웠을까?

[1] git 특강 - 개발 협업

[2] JavaScript with Data

객체

Property - property name : property value

객체 다루기

내장 객체

배열 (Array)

배열 메소드

자료형 심화

Math 객체

문자열 심화

기본형과 참조형

const, 변수와 상수 사이

Var이 사라진 이유

오늘의 나는 어떤 어려움이 있었을까?

내일의 나는 무엇을 해야할까?

[TIL] Git 뿌수기와 무서운 경험

[TIL] Git Merge와 JS 렉시컬 스코프

0개의 댓글

Property - `property name : property value`