JavaScript 6

[React]JSX

🤔JSX란? 쉽게 말해 HTML 문법을 JavaScript 코드 내부에 쓴 것이 바로 JSX다! (JavaScript eXtension) 즉, JavaScript의 확장 버전으로 자바스크립트라고 보면된다. "React에서 HTML을 표현할 때, JSX를 사용한다. 외관상 HTML같은 마크업 언어를 리터럴로 입력하는 것으로 보이는데, 빌드 시 Babel에 의해 자바스크립트로 변환된다. 자바스크립트 코드를 HTML처럼 표현할 수 있기 때문에 용이한 개발이 가능하다." [출처]나무위키 즉, JSX는 자바스크립트 안에서 HTML 문법을 사용해서 view를 구성할 수 있게 도와주는 자바스크립트 문법이며 리액트 개발에 엄청난 도움을 주고 있다. React.js 는 일반 JavaScript 문법이 아닌 JSX 문법을..

Front-end/REACT 2022.01.01

[JavaScript ES6]전역객체

✨전역객체란? 전역 객체 object 는 전역 범위 global scope(en-US) 에 항상 존재하는 객체를 의미합니다. 자바스크립트에는 전역 객체로 선언된 객체들이 항상 존재합니다. 웹브라우저에서 스크립트가 전역 변수를 생성할 때, 전역 객체의 멤버로서 생성됩니다. ( Node.js 에서는 예외.) 전역 객체의 interface 는 스크립트가 실행되고 있는 곳의 실행 컨텍스트에 의존합니다. 웹브라우저에 있는 스크립트가 특별히 백그라운드 작업으로 시작하지 않는 코드들은 그것의 전역 객체로써 Window 를 가집니다. 이것은 Web에 있는 자바스크립트 코드의 상당수가 그렇습니다. window 객체는 브라우저에서 전역 객체입니다. 어느 전역 객체나 함수는 window 객체의 프로퍼티로서 접근될 수 있습니..

[JavaScript ES6]유효범위 (지역변수와 지역변수), 정적 유효범위

✨유효 범위(Scope)란? 자바스크립트에서 객체나 함수는 모두 변수(variable)입니다. 변수의 유효 범위(scope)란 해당 변수가 접근할 수 있는 변수, 객체 그리고 함수의 집합을 의미합니다. 🌟지역(local) 변수와 전역(global) 변수 하단의 코드를 통해 지역변수와 전역 변수를 비교해보자 let vscope = 'global'; // 전역변수 // 애플리케이션 전역에서 접근 할 수 있는 변수 function fscope(){ let vscope = 'local'; // 지역변수 //함수의 중괄호 내에서만 접근 할 수 있는 변수 console.log(vscope); } fscope(); //fscope 함수는 같은 함수 안에 있는 vscope를 출력하게된다. 🟣전역 변수(global) l..

[JavaScript ES6]객체(Object)

✨ JavaScript에서 객체(object)란? 객체는 데이터와 함수의 집합입니다. +) 일반적으로 객체는 여러 데이터와 함수로 이루어지는데, 객체 안에 있을 때는 이들을 프로퍼티와 메소드라고 부릅니다 자바스크립트는 객체 기반의 프로그래밍 언어이며, 자바스크립트를 구성하는 대부분의 모든 것은 객체입니다. 객체는 서로 연관되어있는 데이터를 담아내기 위한 그릇이라 생각해도되는데 이는 배열과 매우 유사한 모습을 보여준다. 🤔 그럼 그들의 차이점을 잠시 들여다보자 객체 배열 원하는 데이터 값(문자,숫자 등)을 지정 할 수 있다. index 값에 숫자를 저장 key = value의 쌍이 객체 안에서 저장될때 순서가 정해져있지 않다. index값의 순서가 정해져있다. 추가적으로 알아두면 좋은 정보로 인덱스로 문자..

[JavaScript ES6]배열(array)

✨배열(array)이란? 배열은 칸마다 촘촘히 박스가 모여있는 자료구조를 의미한다. 배열의 포인티는 각 칸(박스, 메모리)에 인덱스 값이 지정되어있다. ➕자료구조란? 자료구조는 비슷한 종류의 요소들을 모아서 분류한 것을 의미한다. 분류한다는 것을 예시로 몇 개 들어보겠다. 오브젝트는 서로 연관된 특징과 행동들을 묶어둔 것이라 생각하면 되며, 오브젝트들을 묶어둔 것을 자료구조라 한다. Type(문자열, 정수, 실수 등)이 있는 언어에서는 동일한 Type의 데이터만 담을 수 있다. BUT, Javascript는 타입이 동적으로 정의되기 때문에 한 자료구조에 여러 Type을 담을 수 있다. (그러나 그렇게 하진 않는다.) 👀index의 특징 배열은 요소 index로 문자열을 사용할 수 없습니다. 무조건 정수만..

[JavaScript ES6] JavaScript란? ( 주석 ,작성법(숫자,문자))

✨Javascript(ES6)란? Javascript는 자바스크립트라고 읽으며 '객체 기반의 스크립트 프로그래밍 언어'를 말한다. 미국의 넷스케이프 커뮤니케이션즈사 (Netscape Communications)가 개발한 스크립트 언어이고, 웹 브라우저에서 실행하는 스크립트 언어를 말합니다. 작고도 빠르기 때문에 웹문서를 동적으로 꾸밀 때 가장 많이 사용됩니다. 사용자로부터 이벤트나 입력을 받아 '동적'인 처리를 하기 위한 언어이다. 쉽게 말해, 어떤 버튼, 이미지, 텍스트를 눌렀을 때, 마우스의 커서를 올렸을 때, 텍스트를, 입력했을 때 등의 이벤트나 입력이 있을 때 동적인 처리를 하는 것이다. javascript는 dynamically typed language이라 불리며 그 이유는, 변수를 선언할 때..