[0429] 자바 웹 개발 과정🌞

Let's TECH🧐·2021년 4월 29일

Java web

자바 웹 개발 과정

목록 보기

7/31

⭐Back-end

Oracle

정규 표현식을 이용한 패턴 연산

[]
- 괄호 안의 어떤 문자와도 대응되는 패턴 타입이다.
- 하이픈을 이용해 문자의 범위를 지정해줄 수 있다.
  ex) [a-d]: [abcd]
\d
- 숫자 문자에 대응된다.
- [0-9]와 동일
\w
- 밑줄 문자를 포함한 영숫자 문자에 대응된다.
- [A-Za-z0-9_]와 동일
{n,m}
- 앞 문자가 최소 n개, 최대 m개가 나타나는 부분에 대응된다.
  ex) a{1,3}: a, aa, aaa에 해당
^, $
- ^: 입력의 시작 부분에 대응
- $: 입력의 끝 부분에 대응
*, +, ?
- *: 앞의 표현식이 0회 이상 연속으로 반복되는 부분과 대응된다.
- +: 앞의 표현식이 1회 이상 연속으로 반복되는 부분과 대응된다.
- ?: 앞의 표현식이 0 또는 1회 등장하는 부분과 대응된다.
()
- 괄호 안의 문자에 대응되고, 그것을 기억한다.

예제 1) 정규식을 이용한 전화번호 패턴 만들기

01[016789]-\d{3,4}-\d{4}
-> 010-333-3421 (O)
-> 017-1231-1543 (O)
-> 012-1231-1543 (X)
-> 019-12313-1543 (X)

예제 2) 정규식을 이용한 이메일 주소 패턴 만들기

^[a-zA-Z]\w*@[a-zA-Z]\w*.(com|net|org)$
-> a@gmail.com (O)
-> aamj0226@naver.com (O)
-> 0321@daum.dsfs (X)
-> aa@02.com (X)

SQL에서 정규식 사용하기

SELECT * FROM NOTICE WHERE REGEXP_LIKE(TITLE, '01[016789]-\d{3,4|-\d{4}'); --제목에 해당 정규식 패턴이 들어간 게시글 찾기

제목에 아래 정규식 패턴이 들어간 게시글 찾기

ROWNUM 그리고 행 제한하기

출력되는 행을 제한하기 위해 ROWNUM을 사용할 수 있다.

SELECT ROWNUM, NOTICE.* FROM NOTICE WHERE ROWNUM BETWEEN 1 AND 5; --ROWNUM이 1부터 5까지인 행 찾기

ROWNUM이 1부터 5까지인 행 찾기

⭐Front-end

HTML, CSS

아래 컨텐츠를 구현하기 위해 HTML 코드를 작성해보자.

HTML

<section class="open-lecture-content">
    <h1>강의 목록</h1>
    <ul>
        <li>
            <a href="">오라클 프로그래밍</a> 
            <img src="../images/course/img-oracle-sm.png">
            <span>
                <span>99000원</span>
                <span><span>10000</span>원</span>
            </span>
            <span>newlec</span>
            <span>수정일: 2017-01-01</span>
        <li>
</section>

CSS

.open-lecture-content li>* {
    margin-left: 10px;
}

.open-lecture-content li>img {
    width: 100px;
    margin-left: 0;
    
    float: left; // 왼쪽 정렬하기
}

JavaScript

AJAX란?

JavaScript의 라이브러리 중 하나이며 Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자이다.
브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법
JavaScript를 사용한 비동기 통신, 클라이언트와 서버 간에 XML 데이터를 주고받는 기술
한마디로, 자바스크립트를 통해서 서버에 데이터를 요청하는 것을 말한다.

AJAX를 사용해 데이터(ex1.txt) 요청하기

HTML

<section id="ex10">
        <h1>AJAX</h1>
        <div>
            <input class="btn-request" type="button" value="request">
        </div>
</section>

ex1.txt

test data

JavaScript

window.addEventListener("load", function() {
    var section = document.querySelector("#ex10");
    var requestBtn = section.querySelector(".btn-request");
  
  	requestBtn.onclick = function(e) {
      	var request = new window.XMLHttpRequest();
      	request.open("GET", "ex1.txt", false); // GET 요청으로 ex1.txt 데이터를 동기 형식으로 요청할 것임을 명시
      	request.send(null);
    };
});