항해99 개발일지

항해99 2주차 WIL

변기원 2022. 3. 21. 08:12

이번주는 알고리즘 기초1주차를 끝내고 드디어 리액트기초에 진입했다.

알고리즘 기초를 혼자하면서 뭘 배울수 있을지 살짝 걱정이 되었지만

약 45문제정도를 풀어보면서 수시로 콘솔에 찍어보고 기능을 구현하다보니 어느새 손에 익고

구글에 검색하는게 어색하지 않게 되었다.

그리고 기본적인 for,if는 수도없이 작성해봤고 배열과 문자열에 대한 메소드도 많이 공부하면서

자바스크립트로 기능을 구현하는데 많이 익숙해진 것 같다.

이번주는 map, forEach, filter, while, 3항연산자 등 다양한 메소드를 많이 배울 수 있었다.

리액트는 처음 시작하면서 엄청 어색했다. 바닐라자바스크립트로 유튜브 클론코딩도 해보고 꽤 많이 해보면서 익숙해졌는데

자바스크립트와 이렇게까지 다를줄은.. 가상돔 개념부터, 클래스형컴포넌트, 함수형컴포넌트, Ref, State 등..

아직까지 적응은 안되지만 사실 걱정하진않는다. 내일부터 개인과제를 해내기 위해 계속 실수하다보면 3일후쯤엔 

또 리액트에도 익숙해지겠지!

 

ECMA Script 6

이번주 키워드는 ES5,ES6이다. ES가 뭘까. ECMA Script의 약자로써 ECMA라는 기관에서 정한 표준의 javascript이다.

나는 개발 공부를 2021년 말에 처음 시작했는데 그때도 ES6, ES6 하는 얘기를 많이 들었다. 최신일까? 최신은 아니다. 

현재 2021년에 추가된 ES12까지 나온것 같다. 그럼 왜 아직도 ES6를 그렇게 상징적으로 중요하게 생각하는걸까?

그 이유는 es5가 2009년에 업데이트 된 이후로 6년만에 첫 업데이트가 es6였고, 그 이후로 많은게 바뀌어서 수많은 개발자들이 

es6이전과 이후로 구분을 하게되는 것 같다. 그래서 es6이후를 퉁쳐서 모던자바스크립트 라고 부른다고 한다.

실제로 2015년 이후 매년 업데이트가 꾸준히 되고 있다.

나는 이번에 es5와 es6를 비교해보고자 한다.

1.변수 선언방식 추가 (let, const)

나는 원래 변수선언방식이 세가지인줄 알았다. 처음 배울때 지금 구분하려 하지말고 왠만하면 그냥 var 말고 let을 쓰라고 해서 그런가보다 하고 let을 쓰다가 대부분 const를 쓰는 방식으로 습관이 들었다. 그리고 재할당이 필요한 경우만 let을 쓴다.

처음배울땐 그냥 그런가보다 했는데, 지금은 한번 이해해보려 한다. var가 있는데 왜 let과 const가 추가된걸까? 

var를 안쓰게 된 이유를 알아보자

var test1 = "hi";
var test1 = "hello";

console.log(test1);  //result: "hello"

어..? 줄곧 const나 let을 써온 나에겐 이건 뭐지 싶었다.

이렇게 되면 코드가 길어지거나 다른 팀원들과 협업을 할때 변수명이 새로 선언되어 결과가 달라질 수 있다.

왜냐하면 변수명을 만드는게 꽤 고민되는 일이고 하다보면 자주 사용하는 변수명을 또 사용하게 될 여지가 충분하기 때문이다.

let을 사용하면 이런경우 에러를 통해 알려준다.

has already been declared.. 세상 친절

두번째는 함수레벨 스코프다.

var는 함수레벨 스코프를 가지고 let과 const는 블록레벨 스코프를 가진다. 무슨차이일까

for (var i = 0; i < 3; i++) {}
console.log(i); // result: 3

for (let i = 0; i < 3; i++) {}
console.log(i); // result: i is not defined
const test = () => {
  for (let i = 0; i < 10; i++) {
    var test1 = 0;
  }
  console.log(test1);
};
test(); //result:0

const test = () => {
  for (let i = 0; i < 10; i++) {
    let test1 = 0;
  }
  console.log(test1);
};
test(); //result:test1 is not defined

var는 함수스코프를 가져서 함수 내 어디든 전역으로 변수를 할당한 반면

let이나 const는 블록스코프를 가져서 함수 안이라고 해도 for문의 블록 내부에서 선언된 경우는 그 안에서만 참조할 수 있다. 

 

이렇게 재선언이 가능하고 함수스코프를 가지는 두가지 이유만으로 꽤 많은 문제를 일으킬 수  있다.

전역스코프를 가진 변수가 남발되면 어플리케이션 전체의 유효범위를 가지므로 늦게까지 메모리에 남아 공간낭비 및 에러를 유발한다.

또한 변수를 참조하는 과정에서도 스코프의 종점에 존재하여 늦게 검색된다고 한다.

이러한 단점을 극복하기 위해 생겨난 것이 let과 const이고 둘다 블록스코프를 가지며 재선언이 불가능하다고 한다.

단 let은 재할당이 가능하기 때문에 말그대로 변수로 쓸때는 let을 쓰고 재할당조차 불가능한 const는 사실상 말그대로 상수다.

절대 변하지 않는 값을 const로 쓴다.

 

2. Arrow Function 추가

엄청나게 편리해서 잘 쓰고있는 화살표함수가 원래 있었던게 아니고 ES6에 추가된거라니..

화살표함수는 선언방식도 편리하고 경우에따라 (), {}, return도 생략 가능하다.

 

3. 클래스 추가

실제로 사용해본적은 없지만 객체를 생성하는 함수인 class가 추가되었다. 

많은 개발자들이 붕어빵과 붕어빵틀에 비유하곤 하는데 솔직히 전혀 이해가 되지 않았었다.

근데 지금 생각해보면 혹시 사용자나 서버에서 받은 데이터를 객체형식으로 만들고 싶지 않았을까?

데이터만 딱 입력하면 항상 똑같은 틀을 갖춘 객체가 뿅 나오게 만들고 싶어서 class가 필요했던건 아닐까..?

class fish {
  constructor(a, b, c) {
    this.cost = a;
    this.flavor = b;
    this.color = c;
  }
}
const mine = new fish(30000, "피자", "빨간색");
console.log(mine); // result: fish { cost: 30000, flavor: '피자', color: '빨간색' }
const yours = new fish(34000, "초코", "초코색");
console.log(yours);// result: fish { cost: 34000, flavor: '초코', color: '초코색' }

es5 에도 이렇게 객체를 생성하는 함수가 필요해서 똑똑한 개발자들은 뭔가 다른 방법을 사용해왔던 것 같다.

그런 요구사항들이 계속 있었기 때문에 class가 정식으로 생긴 것으로 알고있다.

우리는 역사상 가장 개발하기 편하고 좋은 환경에 있는것이다.

4. Promise 추가

비동기처리를 할때 콜백이 여러번 중첩되는 상황을 피하기 위해 promise가 추가되었다

 

이외에도 템플릿 리터럴같이 당연하게 쓰고 있었던 것들이 비교적 최근에 업데이트 된 것들이였다니 놀랍다.