min

일주일 동안의 회고 + (es, es5 vs es6에 대하여...) 본문

TIL

일주일 동안의 회고 + (es, es5 vs es6에 대하여...)

minprogramming 2023. 6. 18. 13:42

<다음주 나의 목표>

: 다음주의 나의 목표는 저희 팀원들과 소통의 질과 범위를 높이는 것이다.

그게 무슨 말이냐면 내가 알고리즘을 잘 푸는 것이 목표가 아니라 다른 팀원들과 함께 성장해 나가면서 함께 문제를 풀면서 

함께 성장하는 주를 지내고 싶다.

<회고록>

오늘은 항해99측에서 wil과 es,es5 vs es6에 차이점까지 작성하라는 조언이 있었다.

나는 es에 대해서 들어본적은 있지만 누군가 나에게 물어본다면 정확하게 대답을 할 수 있는 정도는 아니였다.

그래서 이참에 es에 대해서 내가 조사한 결과랑 es5 vs es6에 대해서 정리하려고 한다.

1. es

es는 간단하게 말해서 자바스크립트 표준 규격이다.

이게 무슨 말이냐면 말 그대로 자바스크립트를 사용할 때 지켜야할 기준을 말한다.

그럼 이것이 탄생하게 된 배경은 어떻게 될까? 

자바스크립트는 웹페이지에서 동적인 역할을 담당한다.

그리고 이런 동적인 javascript를 파싱하는 친구가 바로 브라우저다.

즉 브라우저에 엔진들이 javascript를 해석하다는 것이다.

따라서 초기에는 브라우저마다 엔진이 다르고 이로 인해서 각각에 맞는 언어가 필요했다.

이 결과로 개발자들은 브라우저마다 다른 코드들을 작성해야 했다.(엄청 개발자들이 힘든게 느껴지시죠?.... ㅠㅠ)

그래서 개발자들이 브라우저마다 다른 코드들을 표준화 시켜서 하나의 언어로 만들자!! 라는 의견이 많이 나왔다.

그래서 나온 의견이 es다. 사실은 es말고도 많은 표준화 방안들이 있었다.

하지만 그당시에는 넷스케이프 사에서 만든 javascript가 선풍적인 이익을 끌고 있었기에 javascript가 표준언어로 

발탁 되었다.

 

2. es5 vs es6

위 내용을 보면 es5,es6는 결국 자바스크립트 문법의 업데이트라고 볼 수 있다.

그럼 es5에서 es6로 넘어가면서 어떤 자바스크립트 문법 업데이트가 있었는지를 간다하게 알아보겠다.

 

2-1) let,const

https://minprogramming.tistory.com/entry/%ED%95%AD%ED%95%B4-99-%EC%95%8C%EA%B3%A0%EB%A6%AC%EC%A6%98-%EC%A3%BC%EC%B0%A8-2%EC%9D%BC%EC%B0%A8

2-2 화살표함수

: 화살표함수와 일반 함수의 큰 차이점은 this의 바인딩 차이다.

화살표함수는 함수가 선언되었을 때 결정되며 일반 함수는 호출하면서 결정된다.

2-3)삼항연산자

삼항연산자의 생김새는 다음과 같다. (조건문) ? (참일때) : (거짓일때)

2-4)구조 분해 할당

const arr = [1,2]
const [a,b] = arr
console.log(a,b)

2-5)단축 평가

const peopleNumber = 5
console.log(peopleNumber || 0);

// peopleNumber가 있으면 그 값을 출력
// 없으면 0을 출력

 

2-6)전개 구문

https://minprogramming.tistory.com/entry/%ED%95%AD%ED%95%B4-99-%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D-2%EC%9D%BC%EC%B0%A8

 

[항해 99 프로그래밍 2일차]

나는 오늘 es6문법에 대해서 배웠는데 let,const에 대한 개념이 모호했다. 강의를 들어보니 var의 문제점들이 많아서 이 문제점들을 해결하기 위해서 나온 친구가 let과 const 라고 했다. 근데 나는 let

minprogramming.tistory.com

2-7)나머지 매개변수

function hello(a, b, ...args) {
  console.log(args);
}

hello(1, 2, 3, 4, 5);

2-8)템플릿 리터럴

const hello = "hello";
console.log(`${hello} friend`);
console.log(hello + " friend");

2-9)named export vs default export

1. Default Export

const hello = () => {
	console.log("hello")
}

export default hello
export default const hello = "hello"

 

3. 나의 일주일 회고록

나의 일주일은 정말 바쁘면서도 바쁘지 않은 하루였다.

스파르타 코딩클럽 자바스크립트 강의를 들으면서 모르는 부분들이 많아서 그런 부분들에서 찾아보고

블로그에 적어보고 또 팀원들과 토론하면서 내가 몰랐던 개념들에 대해서 수월하게 넘어가신 분들의 의견도 들어봤다.

그러면서 팀원들과 소통도 많이하고 배워가는 부분들도 많아서 굉장히 얻어가는 것이 많은 하루였다.

개인적으로 팀워크를 하면서 굉장히 어려웠던 점은 프로그래밍 주차에서 있었다.

이 어려움에 대해서는 내 블로그에 til를 참고하면 좋을 거 같다.

https://minprogramming.tistory.com/entry/%ED%95%AD%ED%95%B4-99-%EC%95%8C%EA%B3%A0%EB%A6%AC%EC%A6%98-%EC%A3%BC%EC%B0%A8-2%EC%9D%BC%EC%B0%A8

 

[항해 99 알고리즘 주차 2일차]

오늘은 내가 알고리즘 페어프로그래밍을 하면서 겪어던 문제점, 해결한 문제들에 대해서 살펴보도록 하겠다. 1. 페어프로그래밍하면서 겪어던 문제점 네비게이터와 드라이버의 역할이 분명하

minprogramming.tistory.com