📝 회원 목록 조회

---

💡 VS Code

🔎 index.jsp

...
				<h3>회원 목록 조회</h3>

                <p>일정 시간 마다 비동기로 회원 목록(회원 번호, 이메일, 닉네임) 조회</p>

                <table border="1">
                    <thead>
                        <tr>
                            <th>회원 번호</th>
                            <th>이메일</th>
                            <th>닉네임</th>
                        </tr>
                    </thead>


                    <tbody id="memberList">

                        <tr>
                            <td>1</td>
                            <td>user01@kh.or.kr</td>
                            <td>유저일</td>
                        </tr>

                        <tr>
                            <td>2</td>
                            <td>user02@kh.or.kr</td>
                            <td>유저이</td>
                        </tr>

                        <tr>
                            <td>3</td>
                            <td>user03@kh.or.kr</td>
                            <td>유저삼</td>
                        </tr>

                    </tbody>
                </table>
...

---

🔎 main.js

// *** 일정 시간마다 회원 목록 조회 ***

function selectAll(){ // 회원 전체 조회 함수

    // ajax 코드
    $.ajax({
        // /community/index.jsp
        url : "member/selectAll",
        dataType : "json", // 응답 데이터의 형식을 "json"으로 지정
                           // -> 자동으로 JS 객체로 변환됨

        success : function(list){
            // console.log(list)

            // 1) #memberList 내용 삭제
            const memberList = document.getElementById("memberList");

            memberList.innerText = "";

            // 2) list를 for문을 이용해서 반복 접근
            for(let item of list){
                // item == 회원 1명의 정보가 담긴 JS 객체

                // 3) tr 요소 생성
                const tr = document.createElement("tr");

                // 4) td 요소 생성 + 내용 추가 * 3
                const td1 = document.createElement("td");
                td1.innerText = item.memberNo; // 회원 번호

                const td2 = document.createElement("td");
                td2.innerText = item.memberEmail; // 회원 이메일

                const td3 = document.createElement("td");
                td3.innerText = item.memberNickname; // 회원 닉네임

                // 5) tr 요소에 td 요소 3개 추가
                tr.append(td1, td2, td3);

                // 6) memberList에 tr 추가
                memberList.append(tr);
            }


        },

        error : function(){
            console.log("에러 발생");
        }

    });
}

// 즉시 실행 함수
(function(){

    selectAll(); // 함수 호출 -> 회원 목록을 먼저 조회

    // window.setInterval(함수, 딜레이(ms))
    window.setInterval(selectAll, 10000); // 10초
    // 함수 이름만 작성 -> 함수 코드가 대입
    // -> 10초마다 selectAll 함수 수행

    // setInterval()은 지연 -> 수행 -> 지연 -> 수행 ... 반복
    // --> 처음에 함수가 수행되지 않아서 공백인 상태가 있음

})();

---

💡 Eclipse

🔎 selectAllServlet.java

package edu.kh.community.member.controller;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.google.gson.Gson;

import edu.kh.community.member.model.service.MemberService;
import edu.kh.community.member.model.vo.Member;

@WebServlet("/member/selectAll")
public class selectAllServlet extends HttpServlet {

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		
		try {
			
			MemberService service = new MemberService();
			
			List<Member> list = service.selectAll();
			
			// Gson 라이브러리를 이용해서 JSON 형태로 변환 후 응답
			new Gson().toJson(list, resp.getWriter());
			
		}catch(Exception e) {
			e.printStackTrace();
		}
	}
}

---

🔎 MemberService.java

	/** 회원 목록 조회 Service
	 * @return list
	 * @throws Exception
	 */
	public List<Member> selectAll() throws Exception{
		
		Connection conn = getConnection();
		
		List<Member> list = dao.selectAll(conn);

		close(conn);
		
		return list;
	}

---

🔎 MemberDAO.java

	/** 회원 목록 조회 DAO
	 * @param conn
	 * @return list
	 * @throws Exception
	 */
	public List<Member> selectAll(Connection conn) throws Exception{
		
		List<Member> list = new ArrayList<>();
		
		try {

			String sql = prop.getProperty("selectAll");
			
			stmt = conn.createStatement();
			
			rs = stmt.executeQuery(sql);
			
			while(rs.next()) {
				
				Member mem = new Member();

				mem.setMemberNo( rs.getInt(1) );
				mem.setMemberEmail( rs.getString(2) );
				mem.setMemberNickname( rs.getString(3) );
				
				list.add(mem); // 리스트 추가
			}
			
		} finally {
			close(rs);
			close(stmt);
		}
		
		return list;
	}

---

🔎 member-sql.xml

	<!-- 회원 목록 조회 -->
	<entry key="selectAll">
		SELECT MEMBER_NO, MEMBER_EMAIL, MEMBER_NICK
		FROM MEMBER
		WHERE SECESSION_FL = 'N'
		ORDER BY MEMBER_NO
	</entry>

---

💡 출력 화면