ES6 당신을 더 나은 프로그래머로 만들어 줄 수 있는 8가지 자바스크립트 트릭 자바스크립트 코드를 최적화하는 방법에는 여러가지가 있습니다. 기사에선 작업시 자주 사용하는 8가지 javascript tricks을 요약해서 알려드립니다. 이런 방식은 고전적인 최적화 방식이고 우리는 'MAP'을 사용해 음식명을 저장할 수 있습니다. 이제 만약 당신이 그룹 1에 있는 음식을 주문한다고 가정해봅시다. 어떻게 찾을 수 있을까요. 여기 데이터가 있습니다. 명백하게 filter와 m... JavaScriptES6ES6 [Javascript] Tagged Template Strings 이전에 이라는 형태로 문자열에 변수를 삽입하는 방법을 배웠었습니다. 오늘 다룰 문법은 템플릿 문자을 발전시킨 Tagged Template Strings(Literals)에 대해서 알아보도록 하겠습니다. Tagged Template Strings는 함수형태로 이용할 수 있는 템플릿 문자열입니다. 이때, 템플릿 문자열에서 변수와 문자를 구분지을 수 있다는 특징이 있습니다. 이전에 템플릿 문자열을... 템플릿 문자열자바스크립트JavaScript문자열ES6tagged template stringsES6 [javascript] for, for in, for of 결과 상위의 추가된 값에 대해서도 출력이 된다. 결과 결과 string에서도 사용가능하다. 결과... JavaScriptES6ES6 [면접대비 예상꼬리질문] var, let, const의 차이점 var, let, const의 차이점에 대해서 설명해주세요. ES6 이전 변수 선언문 var에는 치명적인 문제가 있었는데, 바로 중복 변수 선언이다. 중복 변수 선언이란? 동일한 변수명을 재 선언할 수 있게 하는 것인데, 이 문제를 해결하기 위해서 ES6에는 let과 const가 도입됐다. 중복 변수 선언이 뭐가 문제죠? 위와 같은 예에서는 큰 문제가 아니지만, 프로젝트의 규모가 커지면 개발... letES6constvarJavaScriptES6 [면접대비 예상꼬리질문] Template Literal이란? 모든 질문들은 실제 질문 받은 것이 아닌 저의 뇌피셜로 만든 질문입니다. Literal이란 선언과 동시에 값을 적용해 생성하는 방식입니다. 그렇다면 Template Literal은 무엇인가요? Template Literal은 ES6에서 적용된 문법으로 백틱과 ${}(딸러중괄호)을 통하여 간편하게 변수를 문자열 안에 삽입할 수 있는 방식입니다. Template Literal 방식 제외하고는 어... tagged Template LiteralES6template literalJavaScriptES6 [면접대비 예상꼬리질문] Default Parameters(기본 매개 변수)와 배열 및 객체 비구조화, Import & Export란? 모든 질문들은 실제 질문 받은 것이 아닌 저의 뇌피셜로 만든 질문입니다. JavaScript는 기본 매개 변수를 선언할 수 있나요? 네. ES6에서 제공한 문법으로 기본 매개 변수를 선언할 수 있습니다. 기본 매개 변수를 선언할 때 주의해야 할 점은 무엇이 있죠? 다른 언어에서는 디폴트 파라미터의 값을 오른쪽 파라미터부터 순서대로 채워야 하지만 JavaScript는 순서 상관없이 선언할 수 ... ES6Default parametersdestructingJavaScriptDefault parameters [면접대비 예상꼬리질문] Promise에 대해서 알고있나요? 비동기 처리가 뭔가요? 자바스크립트에서는 어떤 비동기 처리 방식이 있나요? async/await 어떤 경우에 비동기 처리를 해야할까요? CallBack 함수가 있는 상태인데 Promise와 async/await는 왜 생겼을까요? • Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태 • Fulfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태 ... ES6promiseJavaScriptES6 [JS] Computed properties 가 필요한 경우 Computed properties name이 필요한 경우? object의 key를 string형태로 작성하는 것을 말한다. hong.name 말고, hong['name'] 로 작성해야할 때가 뭐가 있을 까? key의 값을 받아와야 할 때! 즉, key값이 변수로 들어가야 할 때이다.... 자바스크립트ES6ES6 [React Document] JSX 소개 이 포스팅은 글을 보면서 React를 습득하면서 내용을 정리하기 위해 작성하는 포스팅입니다. React를 시작하기전에는 위와 같은 코드를 Vanillajs 에서 본적이 없었습니다. 위의 문법은 문자열도 아니고, HTML도 아닙니다. [F12]를 누르고 console창에 위의 코드를 입력한다면 다음과 같이 SyntaxError가 발생합니다. 왜냐하면 Vanillajs에서는 변수에 요소를 넣을수... ReactES5ES6JavaScriptES5 JS - let과 const 하지만 let의 경우에는 Block Scope를 가지기 때문에 그럴 필요가 없다. const는 constant variable의 약자이며 상수 변수라는 의미를 가진 말그대로 상수이기 때문에 재할당이 불가능하다. 상수 변수인 const에 참조 타입의 데이터를 할당하면 const의 내부 property는 상수가 아니다. 다시말해 내부 property는 변경이 가능하다. OBJ가 할당된 주소값은 ... TILJavaScriptES6ES6 Spread & Rest syntax 일반적으로 spread operator의 경우 해당 객체의 정보를 복제할 때 많이 쓰인다. 한국어로 번역하자면 흩뿌리는 연산자? 로 객체의 환경을 먼저 분해한 후, 값들을 새로운 선언에 대입할 수 있다. newPeople 이 만들어지는 과정은 먼저 people의 값을 참조한 후 ... 에 의해 [] || {} 는 분해되게 된다. 남은 값들은 다시금 newPeople의 [] || {} 에 의해... JavaScriptES6SyntaxES6 Ecma Script 문법 (2) 지난 번에는 es6문법에서 비교적 개념 이해가 쉬우며, 코드 사용법에 대한 변화정도에 대해서 설명했었다. 이번에는 개인적으로 내가 es6문법을 공부할 때 가장 이해하기 어려웠던(지금도 정확하게 이해가 잘 되지 않는 다 사실...) this키워드, closure, 그리고 call, apply, bind에 대해서 정리해보고자 한다. 호출되는 함수가 실행될 때, this가 있다면, 이 키워드가 가... thisbindES6applyclosureecma scriptcallES6 ES6 & String,Array Method 배열이 특정 요소를 포함하고 있는지 판별합니다. 🧩 문자안에 특정 값이 있는지 점검하기. 문자열을 주어진 횟수만큼 반복해 붙인 새로운 문자열을 반환합니다. 🧩 반복되는 문자를 처리하기 startsWith() : 어떤 문자열이 특정 문자로 시작하는지 확인하여 결과를 true 혹은 false로 반환합니다. endsWith() : 어떤 문자열에서 특정 문자열로 끝나는지를 확인할 수 있으며, 그 결... fillfindIndexstartswithArray.from배열JavaScriptES6includes()endswithfindArray.of()repeatArray.from
당신을 더 나은 프로그래머로 만들어 줄 수 있는 8가지 자바스크립트 트릭 자바스크립트 코드를 최적화하는 방법에는 여러가지가 있습니다. 기사에선 작업시 자주 사용하는 8가지 javascript tricks을 요약해서 알려드립니다. 이런 방식은 고전적인 최적화 방식이고 우리는 'MAP'을 사용해 음식명을 저장할 수 있습니다. 이제 만약 당신이 그룹 1에 있는 음식을 주문한다고 가정해봅시다. 어떻게 찾을 수 있을까요. 여기 데이터가 있습니다. 명백하게 filter와 m... JavaScriptES6ES6 [Javascript] Tagged Template Strings 이전에 이라는 형태로 문자열에 변수를 삽입하는 방법을 배웠었습니다. 오늘 다룰 문법은 템플릿 문자을 발전시킨 Tagged Template Strings(Literals)에 대해서 알아보도록 하겠습니다. Tagged Template Strings는 함수형태로 이용할 수 있는 템플릿 문자열입니다. 이때, 템플릿 문자열에서 변수와 문자를 구분지을 수 있다는 특징이 있습니다. 이전에 템플릿 문자열을... 템플릿 문자열자바스크립트JavaScript문자열ES6tagged template stringsES6 [javascript] for, for in, for of 결과 상위의 추가된 값에 대해서도 출력이 된다. 결과 결과 string에서도 사용가능하다. 결과... JavaScriptES6ES6 [면접대비 예상꼬리질문] var, let, const의 차이점 var, let, const의 차이점에 대해서 설명해주세요. ES6 이전 변수 선언문 var에는 치명적인 문제가 있었는데, 바로 중복 변수 선언이다. 중복 변수 선언이란? 동일한 변수명을 재 선언할 수 있게 하는 것인데, 이 문제를 해결하기 위해서 ES6에는 let과 const가 도입됐다. 중복 변수 선언이 뭐가 문제죠? 위와 같은 예에서는 큰 문제가 아니지만, 프로젝트의 규모가 커지면 개발... letES6constvarJavaScriptES6 [면접대비 예상꼬리질문] Template Literal이란? 모든 질문들은 실제 질문 받은 것이 아닌 저의 뇌피셜로 만든 질문입니다. Literal이란 선언과 동시에 값을 적용해 생성하는 방식입니다. 그렇다면 Template Literal은 무엇인가요? Template Literal은 ES6에서 적용된 문법으로 백틱과 ${}(딸러중괄호)을 통하여 간편하게 변수를 문자열 안에 삽입할 수 있는 방식입니다. Template Literal 방식 제외하고는 어... tagged Template LiteralES6template literalJavaScriptES6 [면접대비 예상꼬리질문] Default Parameters(기본 매개 변수)와 배열 및 객체 비구조화, Import & Export란? 모든 질문들은 실제 질문 받은 것이 아닌 저의 뇌피셜로 만든 질문입니다. JavaScript는 기본 매개 변수를 선언할 수 있나요? 네. ES6에서 제공한 문법으로 기본 매개 변수를 선언할 수 있습니다. 기본 매개 변수를 선언할 때 주의해야 할 점은 무엇이 있죠? 다른 언어에서는 디폴트 파라미터의 값을 오른쪽 파라미터부터 순서대로 채워야 하지만 JavaScript는 순서 상관없이 선언할 수 ... ES6Default parametersdestructingJavaScriptDefault parameters [면접대비 예상꼬리질문] Promise에 대해서 알고있나요? 비동기 처리가 뭔가요? 자바스크립트에서는 어떤 비동기 처리 방식이 있나요? async/await 어떤 경우에 비동기 처리를 해야할까요? CallBack 함수가 있는 상태인데 Promise와 async/await는 왜 생겼을까요? • Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태 • Fulfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태 ... ES6promiseJavaScriptES6 [JS] Computed properties 가 필요한 경우 Computed properties name이 필요한 경우? object의 key를 string형태로 작성하는 것을 말한다. hong.name 말고, hong['name'] 로 작성해야할 때가 뭐가 있을 까? key의 값을 받아와야 할 때! 즉, key값이 변수로 들어가야 할 때이다.... 자바스크립트ES6ES6 [React Document] JSX 소개 이 포스팅은 글을 보면서 React를 습득하면서 내용을 정리하기 위해 작성하는 포스팅입니다. React를 시작하기전에는 위와 같은 코드를 Vanillajs 에서 본적이 없었습니다. 위의 문법은 문자열도 아니고, HTML도 아닙니다. [F12]를 누르고 console창에 위의 코드를 입력한다면 다음과 같이 SyntaxError가 발생합니다. 왜냐하면 Vanillajs에서는 변수에 요소를 넣을수... ReactES5ES6JavaScriptES5 JS - let과 const 하지만 let의 경우에는 Block Scope를 가지기 때문에 그럴 필요가 없다. const는 constant variable의 약자이며 상수 변수라는 의미를 가진 말그대로 상수이기 때문에 재할당이 불가능하다. 상수 변수인 const에 참조 타입의 데이터를 할당하면 const의 내부 property는 상수가 아니다. 다시말해 내부 property는 변경이 가능하다. OBJ가 할당된 주소값은 ... TILJavaScriptES6ES6 Spread & Rest syntax 일반적으로 spread operator의 경우 해당 객체의 정보를 복제할 때 많이 쓰인다. 한국어로 번역하자면 흩뿌리는 연산자? 로 객체의 환경을 먼저 분해한 후, 값들을 새로운 선언에 대입할 수 있다. newPeople 이 만들어지는 과정은 먼저 people의 값을 참조한 후 ... 에 의해 [] || {} 는 분해되게 된다. 남은 값들은 다시금 newPeople의 [] || {} 에 의해... JavaScriptES6SyntaxES6 Ecma Script 문법 (2) 지난 번에는 es6문법에서 비교적 개념 이해가 쉬우며, 코드 사용법에 대한 변화정도에 대해서 설명했었다. 이번에는 개인적으로 내가 es6문법을 공부할 때 가장 이해하기 어려웠던(지금도 정확하게 이해가 잘 되지 않는 다 사실...) this키워드, closure, 그리고 call, apply, bind에 대해서 정리해보고자 한다. 호출되는 함수가 실행될 때, this가 있다면, 이 키워드가 가... thisbindES6applyclosureecma scriptcallES6 ES6 & String,Array Method 배열이 특정 요소를 포함하고 있는지 판별합니다. 🧩 문자안에 특정 값이 있는지 점검하기. 문자열을 주어진 횟수만큼 반복해 붙인 새로운 문자열을 반환합니다. 🧩 반복되는 문자를 처리하기 startsWith() : 어떤 문자열이 특정 문자로 시작하는지 확인하여 결과를 true 혹은 false로 반환합니다. endsWith() : 어떤 문자열에서 특정 문자열로 끝나는지를 확인할 수 있으며, 그 결... fillfindIndexstartswithArray.from배열JavaScriptES6includes()endswithfindArray.of()repeatArray.from