반응형 개념공부/FrontEnd8 [Regex] 정규표현식 정규표현식이란? 정규표현식은, 문자열에서 특정 문자 조합을 찾기위한 패턴이다. 특정한 조건의 문자를 '검색'하거나 '치환'하는 과정을 매우 간편하게 처리할 수 있도록 하는 방법이다. Groups and ranges (그룹, 레인지) | 또는 () 그룹 [] 문자셋, 괄호안의 어떤 문자든 [^] 부정 문자셋, 괄호안의 어떤 문자도 아닐 때 (?:) 찾지만 기억하지는 않음 - 그룹 Quantifiers (수량) ? 없거나 있거나 (zero or one) * 없거나 있거나 많거나 (zero or more) + 하나 또는 많이 (one or more) {n} n번 반복 {min,max} 최소, 그리고 최대 Boundary-type (단어 경계) \b 단어 경계 \B 단어 경계가 아님 ^ 단어의 시작 $ 단어의 .. 2022. 3. 28. React 개념 및 TIC TAC TOE 만들기 React 기초 React란? 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaSrcript 라이브러리 "컴포넌트"라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 도움 개별 컴포넌트는 props라는 매개변수를 받아오고 render 함수를 통해 표시할 뷰 계층 구조를 반환 render 함수란? 화면에서 보고자 하는 내용을 반환하는 함수. 다수의 React 개발자는 "JSX"라는 특수한 문법을 사용하여 React의 구조를 보다 쉽게 작성 JSX란? JSX는 HTML보다는 JavaScript에 가깝기 때문에, React DOM은 카멜표기법을 사용. 카멜표기법이란? class -> className / tabindex -> tabIndex 컴포넌트(Component.. 2021. 12. 27. Javascript 객체 및 객체의 종류 객체의 종류 - 내장 객체 자바스크립트 엔진에 내장되어 있어 필요한 경우에 생성해서 사용할 수 있음 기본형 : 참조 변수(인스턴스 이름) = new 생성 함수(); * 날짜 정보 객체 var t = new Date(); 특정 날짜 정보 객체 생성 방법 var t = new Date("2002/5/31"); var t = new Date(2002,4,31); 날짜 정보를 가져올 때(GET) 날짜 정보를 수정할 때(SET) getFullYear() 연도 정보를 가져옴 setFullYear() 연도 정보만 수정함 getMonth() 월 정보를 가져옴(현재 월 -1) setMonth() 월 정보만 수정함(월-1) getDate() 일 정보를 가져옴 setDate() 일 정보만 수정함 getDay() 요일 정보를.. 2021. 12. 13. CSS3 선택자 기본 CSS3 선택자란? - 특정한 HTML 태그를 선택할 때 사용하는 기능 - 해당 태그에 원하는 스타일 또는 기능을 적용하기 위해 사용 ex) h1{ color : red; } = 선택자 { 스타일 속성 : 스타일 값; } 이러한 코드를 CSS 블록이라고 부르고 style 태그 내부에 입력해 사용. 전체 선택자 선택자 형태 설명 * HTML 페이지 내부의 모든 태그 선택 - 모든 웹 페이지에서 빠지지 않고 사용하는 선택자. - body 태그 뿐만 아니라 html, head, title, style 태그까지 전부 선택하여 적용 함. 태그 선택자 선택자 형태 설명 태그 특정한 태그를 선택 - 특정 종류의 태그를 모두 선택할 때 사용하는 선택자. ex) h1 { color : red; } , p { color .. 2021. 12. 13. HTML5 개요 및 기본 태그 태그와 속성 - 태그 : HTML 페이지에서 객체를 만들 때 사용하는 것. 단독으로 사용하는 태그는 처럼 XHTML5 표기법을 사용한다. - 속성 : 태그에 추가 정보를 부여할 때 사용하는 것. HELLO HTML5 (title : 속성 이름, header : 속성 값) (src : 속성 이름, image.png : 속성 값) HTML5 페이지 구조 : 웹 브라우저가 현재 웹 페이지가 HTML5 문서임을 인식하게 함. : HTML페이지의 루트 요소, 모든 HTML 태그는 html 태그 내부에 작성한다. - lang 속성 국가 속성값 국가 속성값 한국 ko 미국 en 일본 ja 러시아 ru 중국 zh 독일 de lang속성은 구글과 같은 검색 엔진이 웹 페이지를 탐색할 때 해당 웹페이지가 어떤 언어로 만들.. 2021. 12. 10. [Vue.js] Vue.js란 무엇인가? Vue란? Vue.js는 웹 개발을 단순화하고 정리하기 위해 개발된 대중적인 자바스크립트 프론트엔드 프레임워크이다. 더보기 과거의 웹 사이트 전통적인 웹 사이트는 지금보다 문서 하나에 전달되는 파일의 용량이 적었다. 그래서 어떤 요소를 한번 클릭하면 완전히 새로운 페이지를 서버에서 전송해 주곤 했다. 그래도 상관 없었다. 그러나 현대에 이르러 점차 웹 사이트가 고도화됨에 따라 한 페이지에 해당하는 페이지 용량이 커져갔고, 매번 새로운 페이지를 전달하는 게 점점 버거워지게 되었다. SPA란 이러한 문제를 해결하기 위해 등장한 것이 SPA(Single Page Application)이다. 이름에서도 파악할 수 있듯이, 어떤 웹 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현하는 것.. 2021. 11. 4. [JavaScript] `(백틱) 을 이용한 Template literals ${} 데이터 추출 홈페이지를 만드는데 HTML에서는 잘 돌아가던 코드가 JSP에서는 안돌아가서 무슨 문제지 하다가 해결해서 나중에 까먹지 않기 위해 정리한다. 먼저 ` 이렇게 생긴 친구들을 백틱이라 부르는데 키보드에서 Tab 위에 위에 있는 숫자 자판 1 옆에 있는 친구이다. 자바스트립트 ES6 부터는 백틱 기호를 사용한 문자열을 템플릿 리터럴이라고 부른다. 쉽게 말해, 템플릿 리터럴은 새로운 문자연결 표기방식이라고 보시면 된다. console.log(language + "처음이죠?" + "Hello World" + language + "참 쉽죠?"); 문자열을 연결하고 출력하려면 따옴표와 더하기(+) 기호를 사용해 위와 같이 사용해야 했다. 템플릿 문자열에서는 ${}(플레이스 홀더place holder라고 부릅니다)를 .. 2021. 11. 3. [JavaScript] 숫자,문자가 섞인 문자열에서 숫자만 추출하기 이번에 Spring을 이용한 아파트 실거래가 검색 홈페이지를 만들면서 xml데이터를 추출할 일이 있었다. 원하는 가격 내 검색기능을 구현하기 위해 데이터에 들어있는 실 거래가와, 사용자가 입력한 최소, 최대값을 비교해서 Client에게 뿌려주게 하려 했다. 하지만 실거래가 데이터가 13,000 , 25,000, 5,000 이런식으로 문자열과 숫자가 섞인 데이터였다. ParseInt()를 이용하여 실거래가를 int형으로 변환하려고 했으나 ','가 섞여있어서 이상한 데이터가 나왔다. 이를 해결하기 위해 JavaScript에서 제공하는 함수인 replace와 정규식을 이용하여 숫자와 문자가 섞인 데이터에서 숫자만 뽑아와서 비교해주는 기능을 작성하였다. 숫자가 아닌 문자를 모두 선택하는 정규식인 /[^0-9]/.. 2021. 11. 3. 이전 1 다음
