[KH국비지원 웹개발자 과정] Day_50 키워드 JS정규표현식,부트스트랩,반응형웹

해당 포스팅은 강의 복기용으로 키워드를 기록하는 용도의 포스팅입니다.
--------------------------------------------------------------------------------------------------

jQuery실습문제 풀이)
자바스크립트와 jQuery 중 하나만 할 줄 아는게 아니라 둘 다 할 줄 알아야 함.

궁금증)
브라우저 콘솔창에 표시되는 ==$0은 무엇인지?
구글링) 가장 최근에 선택한 Element의 래퍼런스라고 한다.
console.log($0) 을 이용하면 최근에 선택한 엘리먼트가 콘솔창에 출력된다.
$1, $2, $3 은 각각 1~3번 째 전에 선택했언 엘리먼트의 래퍼런스라고 한다.

JS 기능구현 숙제)
1. 버튼을 누르면 선택한 게시물의 위치가 변화하는 예제
2. 게시판 목록에 삭제, 수정 버튼을 달고 체크박스로 체크해서 한 번에 지우기. (게시물 일괄 수정창)

정규표현식 Regular Expression

포트폴리오 만들 때 참고)
"사용자가 key를 입력할 때마다 체크하도록 구현하였습니다." 처럼 기능을 어떻게 구현하였는지 설명하는 문서를 만들면 좋은 것 같다. 이러한 기능을 이렇게 구현하였고 이러한 문제를 이렇게 해결하였습니다. 이 기능을 이렇게 구현한 이유는 이렇습니다.

플래그문자
g: global
i: ignore case
m: multiline

앵커문자
^: 문자열의 맨 앞 표시
&:문자열의 맨 뒤 표시

메타문자
[] : 대괄호 사이에 존재하는 문자들 중 하나라도 일치하면 true
\d : 숫자
\w : 숫자 포함 아무 단어 전부
\s : 공백문자, 탭, 띄어쓰기, 줄바꿈
\D : 숫자가 아닌 것
\W : 단어가 아닌 것
\S : 공백문자가 아닌 것

수량문자
https://docs.microsoft.com/ko-kr/dotnet/standard/base-types/quantifiers-in-regular-expressions
(a는 보통 메타문자 \d, \w 등)
a+ : 1번 이상 일치. {1, }과 동일
a* : 0번 이상 일치. {0, }과 동일
a? : 0번 또는 1번 일치. 없거나 있거나.
a{n} : 정확한 n번 일치
a{n,m} : n번에서 m번 사이에 일치
a{n, } : 적어도 n번 일치
a{ ,m} : 최대 m번 일치
수량자 정리된 사이트

정규식의 수량자

 

 

정규표현식을 그림으로 볼 수 있는 사이트.

Regexper

 

submit  이벤트 : 브라우저에서 서버로 데이터를 전달하는 이벤트로 기본값은 true이다. submit 이벤트를 return false로 바꾸면 서버로 데이터 전송을 막을 수 있다. 이를 이용하여 정규표현식으로 데이터를 걸러서 서버로 보낼 수 있다.

정규표현식을 따로 js파일로 관리하여 사용하는 경우가 많다고 함.

반응형 웹을 다루는 두 가지 방법
1. 미디어 쿼리 : 비교적 난이도가 높은 대신 세밀한 커스터마이징 가능
2. 부트스트랩 : 미디어 쿼리에 비해 난이도가 쉬운 편

반응형 웹은 화면사이즈에 따라 화면의 구조와 css가 변동되도록 만든 것.

부트스트랩
:html, css, js 프레임 워크이다. 부트스트랩을 적용한 후 class 이름을 변경해주면 손쉽게 부트스트랩에 만들어져있는 프레임워크를 가져다 사용할 수 있다.
부트스트랩 홈페이지에서 샘플을 찾아보고 적당한 클래스를 넣어주면  손 쉽게 화면단을 꾸밀 수 있다.