프로그래머스 코딩테스트 연습 Lv.1 문제들을 풀면서 좋은 팀원들을 만나 같이 공부해서 그런지 큰 흥미를 느꼈다.
안 풀려서 한 문제를 2시간까지 붙잡고 있었던 적도 있는데 구글링하다가 풀린 경우도 있고 끝까지 못 풀어서 답을 본 적도 있다.
내 풀이랑 다른 사람의 풀이를 비교하는 것도 재밌고 사람들마다 답이 다 다르다는 것도 신기하다. ㅎㅎ
목요일(8/11)에 알고리즘주차가 끝나고 금요일(8/12)부터는 리액트 입문 주차가 시작되었다.
새로운 팀원들을 만나서 같이 공부하게 됐는데 팀장을 맡게 되어 당황했지만 이번주는 거의 개인 공부라 다행이다.
본격적인 React 공부 시작 전에 Javascript에 대해 짚고 넘어갔는데 이번 WIL의 키워드는 이것이다.
React: JavaScript의 ES란?, ES5/ES6 문법 차이ES = ECMAScript
JavaScript가 넷스케이프 커뮤니케이션즈로부터 개발되고 나서, MS에서 JScript를 개발하였다. 두 언어는 서로 호환되지 못하는 경우가 있어 크로스 브라우징 이슈가 발생했는데 이 크로스 브라우징 이슈를 해결하기 위해 JavaScript를 표준화를 했다. 그게 바로 ECMAScript 이다. 우리가 흔히 사용하는 ES5, ES6은 버전 숫자를 붙여 ECMAScript를 줄여쓰는 말이다. ES5는 2009년에 발표되었고 ES6는 2015년에 발표되었다.
ES5와 ES6의 대표적인 차이
- 템플릿 리터럴
- 화살표 함수
- this
- let, const
- 모듈
- 클래스
1. 템플릿 리터럴
백틱(`)으로 문자열을 감싸 표현하는 기능
템플릿 리터럴을 사용하면 플레이스 홀더(${variable})를 사용하여 백틱 내부에 문자열과 함께 표현식을 넣을 수 있다.var name = "현진"; var age = 25; console.log(`저의 이름은 ${name}이고, 나이는 ${age}살 입니다.`);
2. 화살표 함수
화살표 함수로 함수 선언법이 좀 더 간단해졌다.
var str = (arg1, arg2) => { console.log("용민"); };//화살표 함수에 인자(argument)가 하나밖에 없다면 괄호를 생략할 수 있다. var str = arg1 => console.log(arg1);
3. this
ES6에서의 this 는 자신을 둘러싸고 있는 this를 바라보기 때문에 따로 바인딩이나 변수에 담을 필요 없다.
4. let, const
ES5에선 var 밖에 존재하지 않았다. ES6에서 let, const 추가
- var 는 변수를 선언할 때 사용되는 키워드로, 재할당과 재선언에 굉장히 자유롭다. (나중에 값이 바뀌게 될 가능성이 큼)
- let은 한번 선언된 변수에 동일한 이름으로 선언할 수 없다.
하지만, 값은 재할당 할 수 있다.- const는 한번 초기화된 변수에 재할당/재선언할 수 없다.
- let, const는 블록레벨스코프!
5. module
ES5 이전에는 각 기능별로 JS 파일을 나누고 개발 및 관리하는 것이 불가능했다.
ES6 부터는 import/export 로 모듈을 관리할 수 있다.
6. class
ES5에선 class라는 키워드는 없었지만 프로토타입을 통해 실현 가능했다.
ES6에서는 class 키워드를 사용해서 선언할 수 있다.
나는 이미 ES6 이후에 Javascript 공부를 시작했기 때문에 자연스럽게 ES6문법을 사용하고 있었는데, ES5와 ES6의 차이를 보니 사용하기 훨씬 더 편리해졌구나 싶다.
아직도 개념들이 명확하게 잡히지 않아 머릿속에 조각조각 들어오는 느낌이지만 확실한 건 계속 반복해서 접할수록 친숙해진다는 것이다.
화살표 함수를 조금 더 적극적으로 사용해보고 싶고, 변수를 선언할 때는 const를 기본으로 사용하되 값이 변화될 수 있는 건 let으로 하는 게 좋다는 걸 알게 됐다.
얼른 강의도 듣고 문서도 참고해서 개인 과제를 완성하고 싶다.🫥
