[스파르타코딩클럽 2주차 ] 1.Javascript 새로 알게된 내용 정리

rimu·2020년 3월 16일

시작 전 잡담

이미 몇 차례 공부했던 자바스크립트 개념이지만 왜 항상 새롭고... 예제를 맞닥뜨리면 내 머리는 하얘지는것인가...하하하하. 난 학교다닐때도 수학 공부할때 응용력이 꽝이었는데 개발공부하며 다시 그때 느낌이 생각났다. 개념을 공부하고 실전문제풀이할때의 그 속은 기분...😃ㅎㅎㅎㅎ 어쨌든 다시 생각해보면 개념을 진짜 그냥 개념으로만 알고 있었다는거니까 다시 공부해가며 자신감을 만들어가는수밖에 없다. 고고고!

1. 변수선언과 자바스크립트 역사에 관한 ssul.

자바스크립트의 역사에서 초기 변수선언방식은 var (variable의 약자) 뿐이었다. 그러다 자바스크립트가 발전함에 따라 두가지 변수선언방식이 더 추가되었는데 그게 바로 const와 let이다. 이 세가지 변수선언방식의 차이는 개발자 신입 면접때 단골로 등장하는 질문이라고 할만큼 중요하다고 한다! 🙋

const는 변수값이 절대로 바뀌지않는 값일때 사용한다.
let은 변수값이 바뀔 수 있을 때 사용한다.
var = const + let의 개념이 혼용되어서 쓰인다.

그렇다면 변수를 선언할때 언제든 값이 바뀌어도되는 let을 사용하는게 가장 좋은 방식일까? Nope.
개발에 있어서 const가 가지는 장점이 굉장히 크다.
let은 변수값을 언제든 바꿀 수 있기 때문에 메모리를 많이 사용하고, 성능 퍼포먼스적인 점에서 let을 남용하는건 절대로 좋지 않다. 그리고 개발하는과정에서 값이 절대로 바뀌면 안되는 경우도 존재하는데 이 때 let으로 변수를 선언했다면 값이 실수로 바뀌게 되어 에러가 날 수 있다. 그래서 let을 보편적으로 쓰는게 무조건 좋다고 할 수 없다. 기본적으로 const으로 변수를 선언하고 필요할때마다 let을 사용하여 변수값을 바꿀 수 있게 하는 게 좋다.

자바스크립트 문법은 매년 바뀐다. 왜 이렇게 자주 바뀌냐고?
자바스크립트는 오픈소스인데 명확한 뼈대가 아직 없다고 봐야한다.
언어가 계속 발전하는중에 있어서 문법이 계속 바뀌고 새로운 기능이 추가된다. let, const는 2016년 이후부터 사용하게 된 변수선언방식이다.
그걸 출시하는 기관이 ECMA라는 곳이고 버전이 바뀔때마다 ES4,ES5,ES6 라는 식으로 버전이 업데이트된다. 지금 현업에서 가장 많이 사용하는 방식은 ES5와 ES6이기 때문에 이 버전을 공부해야하는데 지금 단계에서는 크게 신경 쓸 필요는 없다.

2. 자료형: Array(배열)과 Object(객체)

자바스크립트 뿐만 아니라 모든 언어에서는 자료(데이터)를 저장하는 방식에 대한 문법이 존재한다. 데이터를 저장하는 방식은 프로그래밍에 있어서 정말 중요한 개념! 왜냐? 클라이언트가 서버에서 데이터를 받을때 이 정보가 배열이나 객체 형식으로 들어온다. 그렇기 때문에 변수다음으로 이 자료형 구조를 많이 쓰게 되기 때문에 정리를 잘 해두어야 한다.

Array(배열)

배열은 데이터를 순서에 따라 열거하여 저장하는 방식이다.

새로운 빈 배열 만들기

let a = [ ] 혹은
let a = new Array( )

기본적으로 내장된 배열에 관한 함수

.push( ); 새로운 아이템을 배열의 가장 마지막에 추가한다.
.unshift( ); 새로운 아이템을 배열의 가장 처음에 추가한다.
.length( ); 배열의 길이구하기
빈 배열인지 확인하거나 반복문이나 조건문을 만들때 다양하게 활용된다.
.split( ); 문자열을 특정 기준으로 쪼개어 배열로 만들어준다.
.filter( ); 특정한 함수를 배열에 들어있는 모든 아이템에 각각 적용하여 실행한다.
.map( );
.indexOf( );

더 많은 애들을 공부하고시포요 : W3School Array

객체(Object)

객체는 데이터를 일정한 형식에 따라 key-value를 한쌍으로 묶어 저장하는 데이터 저장 형식이다. 여러개의 key-value가 하나의 객체 안에 들어가기도 한다.

let rimu = {'name': 'sori',
            'nationality': 'korean', 
            'favFood': 'hamburger'}

새로운 키밸류값 집어넣기

rimu ['gender'] = 'female'
대괄호인것 유의하기!

객체와 배열이 결합된 형식 + 값을 찾아내는 방식

결국 실전에서 가장 많이 나오는 방식은 객체와 배열이 결합된 형식이다.
자주보면서 눈에 익숙하게 만들어두기.
값을 찾아내는 방식은 체인이 걸리는것처럼 하나씩 타고 들어간다.
아래 예시에서 names [2]['name'] 의 값을 찾압보자.

names = [{'name':'bob','age':20},{'name':'carry','age':38}]

// names[0]['name']의 값은? 'bob'
// names[1]['name']의 값은? 'carry'

new_name = {'name':'john','age':7}
names.push(new_name)

//새로운값이 추가된 names
names = [{'name':'bob','age':20},
        {'name':'carry','age':38},
        {'name':'john','age':7}]
// names[2]['name']의 값은? 'john'

3. Boolean (참 / 거짓) 자료형

주로 조건문과 같이 쓰이는 참/거짓 판별 데이터타입 이다.

== 과 === 의 차이

개발자 신입 면접때 자주 물어보는 또 하나의 단골 질문이 바로 ==와 ===라고 할 만큼 중요한 차이가 있다.

자바스크립트의 예전언어는 좀 멍청한 언어였다고 한다.😧
(이 멍충이를 머리싸매고 공부하는 오조억배 더 멍충한 나.....입틀막)
다음의 예시를 보자.

10 == '10' // true 
10 === '10' //false

==를 사용하면 ’10’과 10이 같다고 판단하고 오류가 나버리는 것을 알 수 있다. 기존의 자바스크립트에서는 데이터타입을 구분하여 비교하는 능력이 없었기 때문에 이런 결과가 나왔다.
하지만 언어가 발전하면서 데이터의 타입을 구분하여 인식하는 기능이 추가되었고(ES5) 그게 바로 === / !==이다.

참고: false / 0 / null / undefined
자바스크립트는 이 네가지 데이터값을 다 같은 값으로 인식한다.
그래서 ==으로 비교하면 데이터타입을 무시하고 비교하기 때문에 true가 나온다.

4. Function (함수)

4-1. 기본

함수는 어떤 기능을 정의해서 반복적으로 사용하기 위해 쓰는데, 함수를 만들때 고려할 것은 항상 입력값을 넣고 그에 대한 출력값을 어떤 형식으로 할지 정하면 된다.

function name(입력값) {
	return 입력값 + 10 ;
}

name(10) // 결과 20 
// 입력값에 대한 출력값은 return으로 받아준다.

4-2.리턴이 있는 함수 vs 없는 함수

이불장수가 이불을 가지고 시장에서 가서 이불을 팔 때,
이 이불을 가져가는 개념이 리턴이다.

하지만 모든 함수에서 리턴이 필요한 건 아니다.
가령 콘솔에 결과를 찍어내는 정도라면 리턴 없이도 결과가 나온다.
하지만 리턴이 꼭 필요한 함수에서는 리턴이 없을때 에러가 난다.
이불장수가 이불 없이 이불 팔러 나간 겪이다.
함수에서 그 출력값을 반환해줘야지만 그 다음 단계로 진행이 가능하기 때문이다. 리턴이 없다면 출력값을 받지 못해 undefined라는 결과가 나온다.

참고 함수 인자(입력값)의 기본값
입력값에 기본값을 주면,
함수를 실행할때 입력값을 주지 않아도 오류가 나지 않는다.

function test(a=30, b=10, c=10){
return a + b + c; 
}
test(); //50

여기서 기본값은 인자 하나에만 줘도 문제가 없다.
또, 기본값이 있는 상태에서 함수에 새로운 입력값들을 줘도 함수가 작동한다.

참고 Arrow Function (화살표 함수)
함수의 표현식을 간단화하여 다음과 같은 형태의 화살표 함수로 만들 수도 있다. 실무에서는 일반 함수 표현식과 화살표 함수 둘 다 자주 사용한다.

const name = (입력값) => {
	return 입력값 + 10 ;
}

5. 반복문

프로그래밍과 반복문은 뗄래야 뗄 수 없는 관계에 있다. 프로그래밍의 목적이 결국 반복적인 기능을 자동화하는데에 있기 때문!
반복문의 기본 문법은 다음과 같다.

for (시작 ; 끝 ; 실행내용) {
실행에 따른 출력값
}

반복문을 사용하여 0부터 99까지를 콘솔에 출력하는 방법은 다음과 같이 단 세줄로 끝낼 수 있다.

for (let i = 0; i < 100; i++) {
	console.log(i)
}

심화: for in 문 (나중에 추가로 정리하기. 아래코드 에러)
for문을 더 간단하게 사용하는 방법이 바로 for in 문이다.

   let a = [0,1,2,3,4,5,6];
      let loop = for (i in a) {
          console.log(i)
      }
console.log(loop);

하지만 대부분의 반복문은 이렇게 단순히 숫자를 찍어내는 형식이 아니라 배열,객체와 결합된 형태로 쓰인다. 다음의 예제를 보자.

Q1. 아래의 배열에서 아이템을 하나씩 출력하려면?
Q2. 점수가 70점 이상인 사람의 이름만 출력하는 방법은?

let scores = [
	{'name':'철수', 'score':90},
	{'name':'영희', 'score':85},
	{'name':'민수', 'score':70},
 	{'name':'형준', 'score':50},
  	{'name':'기남', 'score':68},
  	{'name':'동희', 'score':30},
]

//Q1.배열안에 있는 아이템을 하나씩 출력하기  
for(i = 0; i < scores.length; i++){
  console.log(scores[i])
}

//Q2. 70점 이상인 사람 이름 출력하기
for(let i = 0; i<scores.length; i++){
  if(scores[i]['score'] >= 70){
    console.log(scores[i]['name'])
  }
}
//더 간단한 방법
scores.filter((item) => item['score'] >= 70)['name']

스파르타코딩클럽 2주차의 회고

혼자 공부할때에는 공부의 속도를 내 스스로 조절해가며 하기 때문에 이해가 안되면 그 상태에서 멈추고 세월아 내월아 공부하곤 했었다. 당연히 그게 나에게 더 낫다고 생각해왔는데 혼자 하는 공부가 이미 두달차가 되니깐 여기에 익숙해진 나머지 현장에서 실강을 듣고 다른 사람들과 같이 코딩을 하는거에 대한 두려움이 쌓였다. 확실히 오프라인 수업에 들어가서 이미 학습을 한 부분임에도 불구하고 따라가기가 벅차다는걸 느끼고 심리적으로 압박이 오기도 했다. 그래도 이런 압박에 길들여지는 연습을 하는게 좋은 거 같다. 어쨌든 개발이란건 골방에 쳐박혀서 혼자 하는 이상 절대 늘지 않는다. 계속적으로 다른 사람들과 함께하는 텐션에 익숙해지고 개발을 잘 하는 멘토가 이끌어주는걸 따라가야 한다. 코드 리뷰도 받고.
스파르타코딩클럽은 말그대로 코딩을 처음 해보는 사람들이 뚝딱거리면서 어떻게든 내가 원하는걸 구현해본다는것에 의미가 있어서 나쁘지 않은 것 같다. 사실 1주차를 듣고 정말 제로베이스로 가르치고 5시간동안 html/css/bootstrap/git까지 숨돌릴 배우는걸 보고 그냥 환불하고 동영상강의를 더 들을까 고민을 많이 했는데, 2주차까지 와보니까 어쨌든 도움이 되고 있다는걸 느낀다. 멘토님도 강의자료 외에 실제 현업 이야기도 많이 해주시고 그냥 시니어 개발자한테 직접 배우는 느낌이 꽤 좋다.
물론 5시간을 풀로 앉아서 집중하는건 정말 힘들다. 오랜만에 느껴보는 머리통이 터질거같은 느낌... 🤯하루에 8시간씩 6개월 공부하는 취성패 국비지원 학원으로 안 가길 다시 한번 잘했다고 느꼈다.
무튼 6주차부터 시작하는 토이 프로젝트에서 난 뭘 만들지 한번 고민해봐야겠다.헿