프론트엔드/JS (15) 썸네일형 리스트형 JS Level Up(3) - 정규표현식 정규표현식(Regular Expression) 정규표현식이란 문자열을 검색하고 대체하는 데 사용 가능한 일종의 형식 언어(패턴)입니다. 정규표현식은 크게 다음과 같은 역할을 수행합니다 1. 문자 검색(search) 2. 문자 대체(replace) 3. 문자 추출(extract) 정규표현식 테스트 사이트 https://regex101.com/ https://regexr.com/ JS 정규식 생성 1. 생성자 함수 방식 RegExp 생성자 함수를 호출하여 사용할 수 있습니다. 2. 리터럴(Literal) 방식 정규표현식은 / 로 감싸진 패턴을 리터럴로 사요합니다. JS 정규식 메소드 메소드 의미 정규식.exec(문자열) 일치하는 하나의 정보(array) 반환 정규식.test(문자열) 일치 여부(boolean.. JS Level Up(2) - 데이터 실습 가져오기, 내보내기 default export는 이름을 따로 지정 안 해도 되는 기본 통로입니다. named export는 이름을 지정한 후 내보낼 수 있습니다. 어떤 파일들은 가져오는 것만 있고(main.js), 어떤 파일은 내보내기만 있습니다(module.js). default 통로에 이름을 지정 안 해도 됨으로 함수의 getType을 지워도 상관없습니다. 다른 파일에서 불러올 때도 import abc from './getType' 로 해도 상관없습니다. default가 없으면 이름을 지어서 내보내야 합니다. 이때, 다른 파일에서 불러오려고 하면 { } 안에 똑같은 이름을 적어야 됩니다. 모듈이름을 as 를 통해 다른 이름을 불러서 파일에 사용할 수 있습니다. 또한 모든 함수를 한꺼번에 불러 오고 싶.. JS Level Up(1) - 데이터 특정 기호를 통해 데이터를 손쉽게 만드는 방식은 리터럴 방식입니다. 예를 들면, " ", ' ', { }, [ ] 등 기호들이 있습니다. 문자 String 명령어 참조 자주 사용된 메소드 메소드 의미 string.length 해당 문자열의 길이 string.indexOf('a') a라는 문자가 몇 번째인지 string.slice(0, 3) 문자열의 0~3번째 문자 출력 string.replace('a', 'b') 문자열 중 a를 b로 교체 string.match(/.+(?=@)/)[0] @기호 앞 부분을 출력 string.trim() 한 문자열 앞뒤의 모든 공백을 제거 string.match 같은 경우, 안에는 정규식 표현입니다. 추후 설명하겠습니다. 숫자와 수학 const integer = parseI.. JS 클래스 생성자 함수(prototype) 예시를 보겠습니다. skye라는 변수가 선언되며, 중괄호가 시작하고 닫히는 객체 데이터가 할당되어져 있습니다. 그리고 객체 데이터가 아래쪽 console.log 를 통해서 출력합니다. 객체 데이터를 자세히 살펴보겠습니다. firstName, lastName은 속성입니다. 속성이 함수로 할당되어 있으면 메소드라고 불리니, getFullName은 메소드입니다. 속성과 메소드를 통틀어서 멤버(Member)라고도 불립니다. getFullName 메소드 return부분을 다시 보겠습니다. 따움표로 완성되지 않고 백틱으로 완성했습니다. 백틱 사이에는 다른 데이터가 보간되서 들어갑니다. 보간된 데이터에는 this.firstName이 있습니다. this는 즉, 현재 소속된 함수가 실행된.. JS 함수 반복적으로 사용할 함수는 변수에 담아서 사용하는 것이 좋습니다. 함수 내 return은 밖으로 내보내는 뜻도 있지만 여기까지 종료라는 뜻이 있습니다. return 뒤에 다른 연산등이 있더라도 실행 안 됩니다. 함수에 매개변수를 굳이 지정 안 해도 됩니다. JS에서 자동으로 arguments로 명시됩니다. 화살표 함수 화살표 함수는 일반 함수의 축약형으로 나타납니다. 필수 조건이 있습니다. 화살표 함수에서는 명령어는 단 하나여야 합니다. 또한 중괄호 및 return 도 생략할 수 있습니다. (예시 doubleArrow1, doubleArrow3) 매개 변수가 1개일 경우, 매개변수의 소괄호를 생략할 수 있습니다.(예시 doubleArrow2) object 객체는 중괄호로 감싸서 표현하며 화살표 함수도 중괄.. JS 시작하기(4) - 변수 유효범위 및 형 변환 변수 유효범위(Variable Scope) 변수는 var, let, const 3개로 구성되어 있습니다. var는 전역 변수고, 값을 중복적으로 할당할 수 있습니다. let은 지역 변수고, 값을 중복적으로 할당할 수 있습니다. const도 지역변수지만, 값을 중복적으로 할당할 수 없습니다. 형 변환(type conversion) truthy인 모든 값들은 다 참으로 생각합니다. falsy인 모든 값들은 거짓으로 생각합니다. 그래서 if조건문 중 결국에 참을 출력합니다. JS 시작하기(3) - 조건문, 반복문 조건문 if else 첫 조건부터 비교하고 조건 부합하면 나머지는 실행 안 됩니다. 조건문 switch else if조건들이 많으면 switch를 사용할 수 있습니다. case는 경우라는 뜻이죠. 즉, a라는 인수가 0인 경우, 2인경우 등등. 실행해야할 내용 작성 완료하면 break를 걸어줘야 이번 case가 끝난다는 걸 알려줍니다. default는 위에 case들 말고 다른 경우에 실행해야하는 경우를 말합니다. break를 걸 필요 없습니다. 반복문 for 현재 i가 0이며, i가 3보다 작을 때까지, i가 1씩 증가한다. 증가할 때마다 console에 i를 출력하는 것입니다. JS 시작하기(3) - 연산자 산술 연산자(arithmetic operator) 더하기, 빼기, 곱하기, 나누기, 나머지 입니다. 할당 연산자(assignment operator) 2를 a에 할당하겠다는 의미로 = 를 사용했습니다. 앞서 산술 연산자까지 사용하면 긴 코드 대신 간략하게 출력할 수 있습니다. 비교 연산자(comparision operator) 비교 연사자 중 주의해야할 점은 = 같은 경우 =는 반드시 뒤에 붙어야 합니다. 논리 연산자(logical operator) && and 연산자, 비교 대상이 모두 같아야 true나옵니다. || or 연산자, 비교 대상이 하나가 true라면 true나옵니다. ! not 연산자, 대상 현재 값의 반대 값이 나옵니다. 삼항 연산자(ternary operator) a ? "A" : "B.. JS 시작하기(2) - 데이터 타입 확인 일반적으로 typeof를 사용하면 데이터 타입을 확인할 수 있지만 null, object, array등은 모두 object로 나옵니다. 그래서 함수를 사용해서 더 정확한 타입을 구해봅니다. 이제 정확하게 나옵니다. 방금 함수는 현재 main.js에서만 사용될 수 있고 다른 js파일에서 사용할 수 없습니다. 다른 파일에서도 사용할 수 있게 별도로 관리할 예정입니다. 함수를 관리하는 파일에 해당 함수 앞에 export default를 추가합니다. 즉, 함수 그대로 내보내기를 의미합니다. 해당 함수 필요한 파일에 import 이름 from "경로" 를 통해 가져와서 사용합니다. JS 시작하기(1) - 개요(ECMAScript) 및 프로젝트 초기화 ECMAScript와 JavaScript ECMA스크립트(ECMAScript, 또는 ES)란, Ecma International이 ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어를 말한다. 자바스크립트를 표준화하기 위해 만들어졌다. 앞으로 ES6, ES2016등등 보일 겁니다. JS버전으로 생각하시면 됩니다. IE등은 JS 5버전 이하만 지원하며 그 후 새로운 브라우저들은 다 JS 6이상 버전을 지원합니다. 바벨이란 플러그인을 통해 JS 6이상 최신버전들을 5버전 문법으로 변경할 수 있으며 구 브라우저들에도 작동시킬 수 있습니다. JS 프로젝트 초기화 VSCode Terminal에서 npm init -y npm install parcel-bundle -D 를 각각 순서대.. 이전 1 2 다음
