본문 바로가기

JavaScript19

React 주요 개념 JSX JSX는 자바스크립트(JavaScript) 문법의 확장판입니다. JSX는 react에서의 요소(Element)를 제공합니다. JSX 문법을 react에서 사용하게 된 배경에는 react.createElement()가 가지고 있는 문제점을 개선하기 위함입니다. 하단 예시를 참고해 주세요. JSX // JSX Style 홈 마이페이지 로그아웃 React.createElement() // React.createElement() Style React.createElement( "header", {id: "intro"}, React.createElement( "ul", {className: "nav"}, React.createElement( "li", "홈" ), React.createElement( "li", ..
JavaScript 타입별 정리 Undefined 전역 undefined 속성은 undefined 원시타입을 나타내며 전역 스코프 변수입니다. 값을 할당하지 않은 변수는 undefiend 자료형이되며 메서드와 변수 선언도 변수값이 지정되어 있지 않은 경우 호출시 undefiend를 반환합니다. 함수는 값을 명시적으로 반환하지 않으면 undefined를 반환합니다. var x; if (x === undefined) { // true } var x; if (typeof x === 'undefined') { // true } // y를 선언한 적 없음 if (typeof y === 'undefined') { // 오류 없이 true로 평가 } if(y === undefined) { // ReferenceError }
Javascript 변수(Variables) Javascript에서 새로운 변수를 선언할 때 var, let, const 키워드가 사용 가능합니다. 변수는 애플리케이션에서 한번 쓰고 버리는 값이 아닌 일정 기간 유지할 필요가 있는 값에 사용하며 변수를 사용하면 값의 의미가 명확해져 코드 가독성 증가에 도움이 됩니다. 변수명을 지정할때 변수의 존재 목적에 알맞은 변수명을 지정해야 이후 유지보수 시 도움이 됩니다. var abc = '2025-01-22'; // bad case var today = '2025-01-22'; // good case 변수명은 식별자(identifier)로 불리기도 하며 명명 규칙이 존재한다. 반드시 영문자(특수문자 제외), underscore ( _ ), 또는 달러 기호($)로 시작하여야 한다. 이어지는 문자에는 숫자(0..
JavaScript 타입별 정리 Object (2) 객체 프로퍼티 프로퍼티 키 프로퍼티 키는 일반적으로 문자열(빈 문자열 포함)을 지정한다. 프로퍼티 키에 문자열이나 symbol 값 이외의 값을 지정하면 암묵적으로 타입이 변환되어 문자열이 된다. 또한 문자열 타입의 값으로 수렴될 수 있는 표현식도 가능하다. 프로퍼티 키는 문자열이므로 따옴표(‘’ 또는 ““)를 사용한다. 하지만 자바스크립트에서 사용 가능한 유효한 이름인 경우, 따옴표를 생략할 수 있다. 반대로 말하면 자바스크립트에서 사용 가능한 유효한 이름이 아닌 경우, 반드시 따옴표를 사용하여야 한다. 프로퍼티 값은 모든 값과 표현식이 올 수 있으며 프로퍼티 값이 함수인 경우 이를 메소드라 한다. var person = { 'first-name': 'test', 'last-name': 'Lee', ge..
JavaScript 예약어 모음 자바스크립트에서, 몇몇 식별자는 예약어여서 변수나 함수 이름으로 사용할 수가 없습니다. 사용할 수 없는 예약어 목록은 아래와 같습니다. abstract arguments boolean break byte case catch char class* const continue debugger default delete do double else enum* eval export* extends* false final finally float for function goto if implements import* in instanceof int interface let long native new null package private protected public return short static super* ..
JavaScript 타입별 정리 Object (1) 자바스크립트는 객체(object) 기반의 스크립트 언어이며 자바스크립트를 이루고 있는 거의 “모든 것”이 객체이다. 원시 타입(Primitives)을 제외한 나머지 값들(함수, 배열, 정규표현식 등)은 모두 객체이다. 자바스크립트의 객체는 키(key)와 값(value)으로 구성된 프로퍼티(Property)들의 집합이다. 프로퍼티의 값으로 자바스크립트에서 사용할 수 있는 모든 값을 사용할 수 있다. 자바스크립트의 함수는 일급 객체이므로 값으로 취급할 수 있다. 따라서 프로퍼티 값으로 함수를 사용할 수도 있으며 프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메소드라 부른다. 이와 같이 객체는 데이터를 의미하는 프로퍼티(property)와 데이터를 참조하고 조작할 수 있는 동작(behavior)을 의..
JavaScript 타입별 정리 Symbol JavaScript에서 Symbol은 ES6에서 새롭게 추가된 7번째 타입으로 변경 불가능한 원시 타입의 값이다. 심볼은 주로 이름의 충돌 위험이 없는 유일한 객체의 프로퍼티 키(property key)를 만들기 위해 사용한다. 심볼의 값은 객체 프로퍼티에 대한 식별자로 이것이 심볼 데이터 형식의 유일한 목적입니다. const symbol1 = Symbol(); const symbol2 = Symbol(42); const symbol3 = Symbol('foo'); console.log(typeof symbol1); // expected output: "symbol" console.log(symbol2 === 42); // expected output: false console.log(symbol3.to..
JavaScript 타입별 정리 Boolean javascript에서 boolean은 원시타입중 하나로 값이 true 또는 false로 이루어진 자료형입니다. 값이 없거나 0, -0, null, false, NaN, undefined, 빈 문자열인 경우 객체의 초기값은 false가 되며 문자열 "false"를 포함한 그 외 모든 다른 값은 초기 값이 true가 됩니다. 값이 undefiend, null이 아닌 모든 객체는 조건문에서 true로 계산됩니다. 이는 값이 false인 Boolean 객체도 포함합니다. 즉 아래 if 문의 조건은 참입니다. var boolean_object = new Boolean(false); if (boolean_object) { // True // in } 그러나 원시타입의 Boolean값에는 적용되지 않습니다. 따라서..
JavaScript 타입별 정리 Strings JavaScript에서 문자열은 유니코드 문자들이 연결되어 만들어진 것입니다. 이는 국제화(i18n, internationalization) 하려 하는 누구에게라도 환영받을만한 소식입니다. 좀 더 정확히 말하자면, 각각이 16비트 숫자로 표현된 UTF-16 코드 유닛이 길게 이어져있는 것입니다. 각 유니코드 문자는 1개나 2개의 코드 유닛으로 표현됩니다. 유니코드는 세계 각국의 서로 다른 언어와 쓰기 방식, 기호 등을 모아 번호를 할당하고 문자를 정의하는 표준 문자 집합입니다. 각각의 문자에 번호를 매김으로써 프로그래머는 문자 인코딩을 제작할 수 있고, 컴퓨터는 그 인코딩을 사용해 같은 파일 또는 프로그램 내에서 어떠한 언어 조합을 사용하더라도 저장, 처리, 전송할 수 있습니다. 유니코드 이전에는 여러가..