이수연의 티스토리

Ternary Operator삼항 연산자는 if / else 와 같은 단순화된 조건 연산자 입니다. Syntax: condition ? :  if (authenticated) { renderApp();} else { renderLogin();} 삼항 연산자를 사용한 동일한 예는 다음과 같다.authenticated ? renderApp() : renderLogin();

ModulesJavaScript 모듈을 사용하면 코드를 여러 개의 파일로 나눌 수 있다. 이렇게 하면 코드베이스를 유지관리하기 더 쉬워진다. import ES 모듈 및 export 명령문을 사용한다 export어떤 파일에서나 함수나 변수를 내보낼 수 있다. person.js라는 이름의 파일을 만들고 내보내고 싶은 내용을 채워보며 예시를 작성하겠다.export에는 Namde 내보내기와 Default 내보내기의 두 가지 유형이 있다. Named ExportsIn-line individually: preson.jsexport const name = "Jesse"export const age = 40 All at once at the bottom: preson.jsconst name = "Jesse"const ..

Spread OperatorJavaScript의 스프레드 연산자( . . . )를 사용하면 기존 배열이나 객체의 전체 또는 일부를 다른 배열이나 객체로 빠르게 복사할 수 있다. const numbersOne = [1, 2, 3];const numbersTwo = [4, 5, 6];const numbersCombined = [...numbersOne, ...numbersTwo]; 스프레드 연산자는 종종 구조 분해와 함께 사용된다. 첫 번째와 두 번째 항목을 numbers 변수에 할당하고 나머지는 배열에 넣습니다.const numbers = [1, 2, 3, 4, 5, 6];const [one, two, ...rest] = numbers; 객체에도 스프레드 연산자를 사용할 수 있다.const myVehicl..

Destructuring구조 분해를 설명하기 위해 샌드위치 만드는 방법으로 비유를 해보도록 하겠다. 샌드위치를 만들기 위해 냉장고에 모든 것을 꺼내지 않는다. 샌드위치에 들어가는 재료만 꺼내면 된다. 구조 분해도 똑같다. 우리가 작업하는 배열이나 객체가 있을 수 있지만, 이것들에 포함된 일부 항목만 필요할 때도 있다. 구조 분해를 통하면 필요한 것만 쉽게 추출할 수 있어 간편하다. Destructing Arraysconst vehicles = ['mustang', 'f-150', 'expedition'];const car = vehicles[0];const truck = vehicles[1];const suv = vehicles[2]; 배열을 구조 분해할 때 변수를 선언하는 순서가 중요하다.const v..

Array MethodsJavaScript 배열 메서드는 다양한데 그 중  React에서 가장 유용한 방법 중 하나는 .map()배열 방식이다..map() 방법을 사용하면 배열의 각 항목에 함수를 실행하고 결과로 새 배열을 반환할 수 있다. 또한 map() 목록을 생성하는 데 사용이 가능하다. const myArray = ['apple', 'banana', 'orange'];const myList = myArray.map((item) => {item})

VariablesES6 이전에는 변수를 정의하는 방법이 하나뿐이였다. var 키워드를 사용하는 것. 변수를 정의하지 않으면 전역 객체에 할당된다. strict 모드가 아니면 변수가 정의되지 않으면 오류가 발생 이제 ES6은 var, let, const 세 가지 방법으로 정의할 수 있다. var x = 5.6; var함수 외부에서 사용하면 전역 범위에 속한다.var함수 내부에서 사용하면 해당 함수에 속한다.var블록 내부(예: for 루프)에서 사용하는 경우 해당 변수는 해당 블록 외부에서도 사용할 수 있다. let x = 5.6; let는 의 블록 범위 버전이며 var, 정의된 블록(또는 표현식)으로 제한된다.let블록 내부(예: for 루프)에서 사용하는 경우 해당 변수는 해당 루프 내부에서만 사용할 ..

ClassesES6에서는 클래스가 도입되어있다. 클래스는 함수의 한 유형이지만, 키워드를 사용하여 function 초기화하는 대신 키워드를 사용하고 class 속성은 constructor() 메서드 내부에 할당한다. class Car { constructor(name) { this.brand = name; }} 클래스 네임은 대소문자를 주의해야한다. class Car { constructor(name) { this.brand = name; }}const mycar = new Car("Ford"); 생성자 함수는 객체가 초기화될 때 자동으로 호출된다. 클래스의 메서드 클래스의 사용자 정의 메서드를 추가할 수 있다. class Car { constructor(name) { this...

ES6은 무엇인가?ES6은 ECMAScript 6을 의미한다.ECMAScript 는 JavaScript를 표준화하기 위해 만들어졌으며, ES6는 ECMAScript의 6번째 버전으로 2015년에 공개되었으며, ECMAScript 2015라고 한다.ES6를 배우는 순서ClassesArrow FuctionsVariables (let, const, var)Array Merhods like .map()DestructuringModulesTernary OperatorSpread Operator