전체 글(334)
-
2. JSX란? (정의, 장점, 문법)
1. JSX란? - JSX(JavaScript XML) - JavaScript에 XML을 추가한 확장 문법. - 리액트로 프로젝트를 개발할 때 사용되므로, 공식적인 자바스크립트 문법은 아님 - 브라우저에서 실행하기 전, 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환 됨 ex) // 실제 작성할 JSX 예시 function App() { return ( Hello, GodDaeHee! ); } // 위와 같이 작성하면, 바벨이 다음과 같이 자바스크립트로 해석하여 준다. function App() { return React.createElement("h1", null, "Hello, GodDaeHee!"); } - JSX는 하나의 파일에 자바스크립트와 HTML을 동시에 작성하여 편리하다. 2. JSX..
2023.03.10 -
1. React 시작하기(2) - React의 주요 특징
1. React 시작하기(2) 리액트의 주요 특징 1. 리액트란? - 자바스크립트 라이브러리 - SPA(Single Page Application)를 위한 사용자 인터페이스를 구축하는데 사용됨 - 웹 모바일 앱 등의 view layer를 처리하는데 사용 됨 - 페이지를 다시 로드하지 않고 데이터를 변경할 수 있도록 가상 돔(Virtual DOM)을 사용하여 웹 어플리케이션의 퍼포먼스를 최적화한 라이브러리 더보기 SPA(Single Page Application)란? 기존 웹 서비스 - 요청시마다 서버로부터 리소스들과 데이터를 해석하고 화면에 렌더링 하는 방식 SPA - 최초에 한번 페이지를 전체를 로드하고, 특정 부분만 Ajax를 통해 데이터를 바인딩 하는 방식 위의 이미지 처럼 컴포넌트들이 모여 한 페..
2023.03.10 -
RegExp 객체
RegExp 객체 정규 표현식을 구현한 자바스크립트 표준 내장 객체 문법 new RegExp(검색패턴[, 플래그]); 1. 검색 패턴을 나타내는 정규 표현식은 따옴표나 슬래시(/)로 감싸야 함 2. 기본 검색 설정을 변경할 수 있는 플래그는 필요할 때만 전달할 수 있음 RegExp.prototype 메소드 모든 RegExp 인스턴스는 RegExp.prototype으로부터 메소드와 프로퍼티를 상속받음 이렇게 상속받은 RegExp.prototype 메소드를 사용하여 정규 표현식을 표현할 수 있음 1. RegExp.prototype.exec() 2. RegExp.prototype.test() exec() 메소드 인수로 전달된 문자열에서 특정 패턴을 검색하여, 패턴과 일치하는 문자열을 반환 만약에 패턴과 일치하..
2023.01.20 -
정규 표현식의 응용
특수 문자(special characters) 정규 표현식을 사용하여 단순한 패턴을 검색하고자 할 때는 찾고자 하는 문자열을 직접 나열하면 됨 하지만 숫자만을 검색하거나, 띄어쓰기를 찾는 등 정확히 일치하는 패턴보다 더 복잡한 조건을 사용하려면 특수 문자를 사용해야 함 특수 문자설명 \ 역슬래시(\) 다음에 일반 문자가 나오면 이스케이프 문자로 해석하고, 특수 문자가 나오면 일반 문자로 해석함. \d 숫자를 검색함. /[0-9]/와 같음. \D 숫자가 아닌 문자를 검색함. /[^0-9]/와 같음 \w 언더스코어(_)를 포함한 영문자 및 숫자를 검색함. /[A-Za-z0-9_]/와 같음. \W 언더스코어(_), 영문자, 숫자가 아닌 문자를 검색함. /[^A-Za-z0-9_]/와 같음. \s 띄어쓰기, 탭,..
2023.01.20 -
정규 표현식의 개념
정규 표현식(regular expression)이란? 문자열에서 특정한 규칙을 가지는 문자열의 집합을 찾아내기 위한 검색 패턴 이러한 검색 패턴은 모든 종류의 문자열 검색이나 교체 등의 작업에서 사용할 수 있음 정규 표현식의 생성 1. 정규 표현식 리터럴을 이용한 생성 2. RegExp 객체를 이용한 생성 문법 /검색패턴/플래그 정규 표현식 리터럴은 슬래시(/) 기호로 시작하여, 슬래시(/) 기호로 끝남 또한, 필요에 따라 플래그를 추가하여 기본 검색 설정을 변경할 수도 있음 예제 var regStr = /a+bc/; // 정규 표현식 리터럴을 이용한 생성 var regObj = new RegExp("a+bc"); // RegExp 객체를 이용한 생성 regStr; // /a+bc/ regObj; // ..
2023.01.19 -
Strict 모드
strict 모드란? ECMAScript 5에서 처음으로 소개된 strict 모드는 자바스크립트 코드에 더욱 엄격한 오류 검사를 적용해 줌 strict 모드는 스크립트나 함수의 맨 처음에 "use strict" 지시어를 사용하여 선언할 수 있음 예제 "use strict" // 전체 스크립트를 strict 모드로 설정함. try { num = 3.14; // 선언되지 않은 변수를 사용했기 때문에 오류를 발생시킴. } catch (ex) { document.getElementById("text").innerHTML = ex.name + " "; document.getElementById("text").innerHTML += ex.message; } 코딩연습 ▶ 이렇게 선언된 strict 모드는 해당 블록의..
2023.01.19