프로그래밍/수업일지 (39)

728x90

 

수업내용 정리 (Eclipse)

 

선생님이 과제로 관리자로 로그인하면 회원 목록+회원 정보를 띄우고, 일반 회원으로 로그인하면 로그인 한 회원 정보를 띄우는 것을 내주셔서 밑의 코드가 불완전하다.

 

1. wepapp

  • WEB-INF (jsp 넣는 공간 아님!!!!!!!)

 

  • jsp ㄱ 
더보기
  • index
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>index.html - 시작 페이지</h1>
	<a href="loginfrm">로그인</a>
	<a href="joinfrm">회원가입</a>
	<c:if test="${1222<2}"> 1보다 2가 크다.</c:if>
</body>
</html>

 

  • joinFrm
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	let m = '${msg}'
	if (m != '') {
		alert(m);
	}
</script>
</head>
<body>
	<h1>joinFrm.jsp - 회원가입 양식</h1>
	<form action="join" method="post" name="joinfrm">
		<table>
			<tr>
				<td>아이디</td>
				<td><input type="text" name="id"></td>
			</tr>
			<tr>
				<td>비밀번호</td>
				<td><input type="password" name="pw"></td>
			</tr>
			<tr>
				<td>이름</td>
				<td><input type="text" name="name"></td>
			</tr>
			<tr>
				<td>성별</td>
				<td align="center"><input type="radio" name="gender" value="남자">남자
					&nbsp; <input type="radio" name="gender" value="여자">여자</td>
			</tr>
			<tr align="right">
				<td colspan="2"><button>회원가입</button>&nbsp;
					<button type="reset">취소</button></td>
			</tr>
		</table>
	</form>
</body>
</html>

 

  • loginFrm
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>loginFrm.jsp - 로그인 화면</h1>
	<form action="login" method="post">
		<table>
			<tr>
				<td>아이디</td>
				<td><input type="text" name="id"></td>
			</tr>
			<tr>
				<td>비밀번호</td>
				<td><input type="password" name="pw"></td>
			</tr>
			<tr align="right">
				<td colspan="2"><button>로그인</button></td>
			</tr>
		</table>
	</form>
	<form action="joinfrm" method="post">
		<button>회원가입</button>
	</form>
</body>
</html>

 

  • main
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	let m = '${msg}'
	if (m != '') {
		alert(m);
	}
</script>
</head>
<body>
	<h1>main.jsp - 메인 화면</h1>
	<table>
		<tr>
			<td colspan="2">${accessResult}</td>
		</tr>
		<tr>
			<td colspan="2" align="right">${logout}</td>
		</tr>
	</table>
</body>
</html>

 

  • memberList
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
	console.log('${mList}');
</script>
</head>
<body>
	<h1>memberList.jsp</h1>
	<table>
		<tr>
			<th colspan="2">회원 목록</th>
		</tr>
		<tr>
			<td>회원 아이디</td>
			<td>삭제</td>
		</tr>
		<tr>
			<td></td>
			<td></td>
		</tr>
	</table>
</body>
</html>

 

 

2. Java - controller

  • HomeContoller
package controller;

import java.io.IOException;

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 common.Forward;
import service.MemberMM;
import service.MovingPage;

@WebServlet({"/login","/loginfrm","/joinfrm","/join","/logout","/main", "/memberlist", "/memberinfo"})
public class HomeContoller extends HttpServlet {
	private static final long serialVersionUID = 1L;
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		String cmd=request.getServletPath();
		System.out.println("cmd="+cmd);
		//회원관리 서비스클래스
		MemberMM mm=new MemberMM(request,response);
		//게시판관리 서비스클래스
		MovingPage mp=new MovingPage(request,response);
		
		Forward fw=null;
		if(cmd.equals("/loginfrm")) {
			fw=mp.showLoginFrm();			
		}else if(cmd.equals("/login")) {
			fw=mm.login();
		}else if(cmd.equals("/logout")) {
			fw=mm.logout();
		}else if(cmd.equals("/joinfrm")) {
			fw=mp.showJoinFrm();
		}else if(cmd.equals("/join")) {
			fw=mm.join();
		}else if(cmd.equals("/memberlist")) {
			fw=mm.getMemberlist();
		}else if(cmd.equals("/memberinfo")) {
			fw=mm.getMemberinfo();
		}
		
		if(fw!=null) {
			if(fw.isRedirect()) { //true: redirect
				response.sendRedirect(fw.getPath()); // 새로운 req, res 객체 생성 + 주소창 새 url 생성
			}else {
				request.getRequestDispatcher(fw.getPath()).forward(request, response); // 기존 req, res 객체 사용 + 주소창 갱신X
			}
		}
	}
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}
}

 

 

3. Java - service (MP, MM)

더보기
  • MovingPage (MP)
package service;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import common.Forward;

public class MovingPage {
	HttpServletRequest request;
	HttpServletResponse response;

	public MovingPage(HttpServletRequest request, HttpServletResponse response) {
		this.request = request;
		this.response = response;
	}

	public Forward showLoginFrm() {
		Forward fw = new Forward();
		// 로그인여부 판단
		if (request.getSession().getAttribute("id") != null) {
			fw.setPath("main.jsp");
			fw.setRedirect(true);
		} else {
			fw.setPath("loginFrm.jsp");
			fw.setRedirect(true);
		}
		return fw;
	}

	public Forward showJoinFrm() {
		Forward fw = new Forward();
		// 로그인여부 판단
		if (request.getSession().getAttribute("id") != null) {
			fw.setPath("main.jsp");
			fw.setRedirect(true);
		} else {
			fw.setPath("joinFrm.jsp");
			fw.setRedirect(true);
		}
		return fw;
	}

}

 

  • MemberMM (MM)
package service;

import java.util.ArrayList;
import java.util.HashMap;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;

import common.Forward;
import dao.MemberDao;

public class MemberMM {
	HttpServletRequest request;
	HttpServletResponse response;

	public MemberMM(HttpServletRequest request, HttpServletResponse response) {
		this.request = request;
		this.response = response;
	}

	public Forward login() {
		String id = request.getParameter("id");
		String pw = request.getParameter("pw");
		MemberDao mDao = new MemberDao();
		Forward fw = new Forward();
		HttpSession session = request.getSession();
		HashMap<String, String> hMap = new HashMap<>();
		hMap.put("id", id);
		hMap.put("pw", pw);
		if (mDao.login(hMap)) {
			session.setAttribute("id", id);
			;
			session.setAttribute("logout", makeLogoutHtml());
			session.setAttribute("accessResult", makeResultHtml());
			request.setAttribute("msg", "로그인 성공");
			fw.setPath("main.jsp");
			fw.setRedirect(true);
		} else {
			request.setAttribute("msg", "로그인 실패");
			fw.setPath("loginFrm.jsp");
			fw.setRedirect(false);
		}
		mDao.close();
		return fw;
	}

	private String makeLogoutHtml() {
		StringBuffer sb = new StringBuffer();
		sb.append("<div>");
		sb.append("<a href='logout'>로그아웃");
		sb.append("</div>");
		return sb.toString();
	}

	private String makeResultHtml() {
		// 관리자: admin /////// 임의의 아이디에 권한 1, 0 으로 판단
		StringBuilder sb = new StringBuilder();
		String id = request.getSession().getAttribute("id").toString();
		if (id.equals("admin")) {
			sb.append("<a href='/memberlist'>(관리자)회원목록</a>");
		} else {
			sb.append("<a href='/memberinfo?id=" + id + "'>내 정보</a>");
		}
		return sb.toString();
	}

	public Forward logout() {
		request.getSession().invalidate();
		Forward fw = new Forward();
		fw.setPath("./"); // index.jsp
		fw.setRedirect(true);
		return fw;
	}

	public Forward join() {
		// 비지니스(업무) 로직
		// Dao: Data Access Object
		String id = request.getParameter("id");
		String pw = request.getParameter("pw");
		String name = request.getParameter("name");
		String gender = request.getParameter("gender");
		System.out.printf("%s,%s,%s,%s\n", id, pw, name, gender);
		// Member Bean or HashMap<k,v>
		HashMap<String, String> hMap = new HashMap<>();
		hMap.put("id", id);
		hMap.put("pw", pw);
		hMap.put("name", name);
		hMap.put("gender", gender);

		MemberDao mDao = new MemberDao(); // db접속
		boolean result;
		result = mDao.join(hMap); // db 로직-->-->insert작업--->
		mDao.close();
		Forward fw = new Forward();
		if (result) {
			System.out.println("회원가입 성공");
			request.setAttribute("msg", "회원가입성공");
			fw.setPath("loginFrm.jsp");
			fw.setRedirect(true);
		} else {
			// System.out.println("회원가입 실패");
			request.setAttribute("msg", "회원가입실패");
			fw.setPath("joinFrm.jsp");
			fw.setRedirect(false);
		}
		return fw;
	}

	public Forward getMemberlist() throws JsonProcessingException {
		MemberDao mDao = new MemberDao();
		ArrayList<String> mList = mDao.getMemberList();
		mDao.close();
		Forward fw = new Forward();
		if (mList != null) {
			// 1.makeHtml 으로 반복문?
			// 2.javaScript 로 반복문? <<- java 객체를 json 으로 변환
			// 3.jstl 으로 반복문?
			ObjectMapper om = new ObjectMapper();
			// / java 객체 -->> json 변환
			String json = om.writeValueAsString(mList);
			System.out.println("json: " + json);
			request.setAttribute("mList", json);
			fw.setPath("memberList.jsp");
			fw.setRedirect(false);
		} else {
			fw.setPath("main.jsp");
			fw.setRedirect(true);
		}
		return fw;
	}

	public Forward getMemberinfo() {
		return null;
	}

}

 

 

4. Java - dao

package dao;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.HashMap;

import common.JdbcUtil;

public class MemberDao {
	Connection con;
	PreparedStatement pstmt;
	ResultSet rs;

	public MemberDao() {
		// db 접속
		con = JdbcUtil.getConnection();
	}

	public boolean join(HashMap<String, String> hMap) {
		String sql = """
				insert into member(id,pw,name,gender)
				 value(?,?,?,?)
				""";
		int result = 0;
		try {
			pstmt = con.prepareStatement(sql);
			pstmt.setString(1, hMap.get("id"));
			pstmt.setString(2, hMap.get("pw"));
			pstmt.setString(3, hMap.get("name"));
			pstmt.setString(4, hMap.get("gender"));
			result = pstmt.executeUpdate();
			if (result > 0) {
				System.out.println("DB 회원가입 성공");
				return true;
			} else {
				System.out.println("DB 회원가입 성공");
				return false;
			}
		} catch (SQLException e) {
			System.out.println("join 예외 발생");
			e.printStackTrace();
			return false;
		}
	}

	public void close() {

	}

	public boolean login(HashMap<String, String> hMap) { // login 구문
		String sql = "select * from member where id =? ";
		try {
			pstmt = con.prepareStatement(sql);
			pstmt.setString(1, hMap.get("id"));
			rs = pstmt.executeQuery();
			if (rs.next()) {
				// 아이디 일치
				if (rs.getString("pw").equals(hMap.get("pw"))) {
					return true;
					// 비번 일치
				}
			}
		} catch (SQLException e) {
			System.out.println("dao login 예외 발생");
			e.printStackTrace();
		}
		return false;
	}

	public ArrayList<String> getMemberList() {
		ArrayList<String> mList = null;
		String sql = "select id from member";
		try {
			pstmt = con.prepareStatement(sql);
			rs = pstmt.executeQuery();
			mList = new ArrayList<>();
			while (rs.next()) {
				mList.add(rs.getString("id"));
			}
		} catch (SQLException e) {
			System.out.println("dao memberList 예외");
			e.printStackTrace();
		}
		return mList;
	}
}

 

5. Java - common (Forward, JdbcUtil - 이전에 쓰던 것들 복사)

더보기
  • Forward
package common;

//포워딩 정보
public class Forward {
	// true: redirect포워딩
	// false: (dispatcher)포워딩
	private boolean isRedirect; // false
	private String path; // 포워딩할 뷰 페이지 or url

	public boolean isRedirect() {
		return isRedirect;
	}

	public void setRedirect(boolean isRedirect) {
		this.isRedirect = isRedirect;
	}

	public String getPath() {
		return path;
	}

	public void setPath(String path) {
		this.path = path;
	}

}

 

  • JdbcUtil
package common;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

public class JdbcUtil {
	static {
		try {
			Class.forName("com.mysql.cj.jdbc.Driver");
			System.out.println("드라이버 로딩 성공");
		} catch (ClassNotFoundException e) {
			System.out.println("드라이버 로딩 실패");
			e.printStackTrace();
		}
	}

	public static Connection getConnection() {
		try {
			Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/workdb", "icia", "1234");
			System.out.println("db 접속 성공");
			return con;
		} catch (SQLException e) {
			System.out.println("db 접속 실패");
			e.printStackTrace();
		}
		return null;
	}

	public static void dbClose(ResultSet rs, PreparedStatement pstmt, Connection con) {
		try {
			if (rs != null)
				rs.close();
			if (pstmt != null)
				pstmt.close();
			if (con != null)
				con.close();
			System.out.println("db연결 종료 성공");
		} catch (SQLException e) {
			System.out.println("db연결 종료 실패");
			e.printStackTrace();
		}
	}

	public static void dbCommit(Connection con) {
		try {
			con.commit();
		} catch (SQLException e) {
			System.out.println("commit fail");
			e.printStackTrace();
		}
	}

	public static void dbRollback(Connection con) {
		try {
			con.rollback();
		} catch (SQLException e) {
			System.out.println("rollback fail");
			e.printStackTrace();
		}
	}
}

 


 

전체 피드백

  • 또 고작 '/' 이 작대기 하나 까먹었다고 오류가 나서 켜지질 않았다. 조장님(특: 옆자리)이랑 열심히 찾다가 먼저 찾으셔서 알려주셨는데 너무 허망했다..

 


728x90
728x90

 

수업내용 정리 (VSCode) - 회원가입 페이지

 

로그인 관련으로 페이지 만드는 것을 팀플로 시키셔서 로그인, 회원가입, 아이디/비번 찾기, 로그인 성공 시 main에서 확인 기능 등으로 작업을 나눠서 하기로 했는데 그 중 나는 회원가입을 맡았다.

DB 연동은 하지 않기 때문에 localStorage(로컬 스토리지)에 저장하는 방식으로 이용했다.
우선 css는 확정된 것이 아니기 때문에 빼놓고 정리했다.

 

0. 미리보기

  • css 있는 버전
더보기
예시로 입혀둔 css는 로그인을 맡은 팀원의 css를 따랐다.
입력 전
입력 후

 

  • css 없는 버전
더보기
입력 전
입력 후

 

 

1. html

    <div id="join">
        <h3>Join</h3>
        <form id="joinForm" name="joinForm" method="post">
            <label for="joinId"></label> <b>ID</b>
            <button type="button" id="joinIdCh">&ensp;ID 중복 확인&ensp;</button> <br>
            <input type="text" name="joinId" id="joinId" placeholder="아이디 입력" required> <br>

            <label for="joinName"></label> <b>NAME</b> <br>
            <input type="text" name="joinName" id="joinName" placeholder="이름 입력" required> <br>

            <label for="joinPw"></label> <b>PASSWORD</b> <br>
            <input type="password" name="joinPw" id="joinPw" placeholder="비밀번호 입력" required> <br>

            <label for="checkPw"></label> <b>CHECK PASSWORD</b> <br>
            <input type="password" name="checkPw" id="checkPw" placeholder="비밀번호 재입력" required>
            <p id="chPwP"></p> <br>
            <input type="button" value="회원가입" id="joinButton"> <br>
        </form>
    </div>
  • id는 회원가입이니까 예외 경우를 제외하고는 모두 join을 붙여 작성했다.
  • 가장 큰 박스로 div를 만들어서 h3와 form을 집어넣었다.
  • form 요소 ㄱ
더보기
  • ID
            <label for="joinId"></label> <b>ID</b>
            <button type="button" id="joinIdCh">&ensp;ID 중복 확인&ensp;</button> <br>
            <input type="text" name="joinId" id="joinId" placeholder="아이디 입력" required> <br>
  • ID는 중복 될 수 없도록 했기 때문에 중복인지 확인할 수 있도록 하기 위해 버튼을 만들었다.
  • &ensp;는 띄어쓰기를 두 번 주어 공간을 주고 싶었기 때문에 양 끝에 집어넣었다.
  • 사용자가 입력할 수 있는 칸인 input:text에는 placeholder 속성을 넣어 "아이디 입력"이라는 안내 문구를 작성했다.

 

 

  • NAME
            <label for="joinName"></label> <b>NAME</b> <br>
            <input type="text" name="joinName" id="joinName" placeholder="이름 입력" required> <br>
  •  ID와 동일하게 placeholder 속성으로 "이름 입력"이라는 안내 문구를 작성했다.

 

 

  • PW
            <label for="joinPw"></label> <b>PASSWORD</b> <br>
            <input type="password" name="joinPw" id="joinPw" placeholder="비밀번호 입력" required> <br>

            <label for="checkPw"></label> <b>CHECK PASSWORD</b> <br>
            <input type="password" name="checkPw" id="checkPw" placeholder="비밀번호 재입력" required>
            <p id="chPwP"></p> <br>
  • 비밀번호와 비밀번호 확인용 칸에도 placeholder 속성으로 각 각 안내 문구를 작성했다.
  • 마지막 줄의 p요소(id="chPwp")는 joinPw와 checkPw를 대조했을 때, 문구를 출력하려고 만들었다.
  • 길이나 문자열에 따로 제한을 두진 않았다.

 

  • JOIN BUTTON
            <input type="button" value="회원가입" id="joinButton"> <br>
  • 위 ID, NAME, PW 항목이 모두 작성하고 가입할 수 있는 버튼을 만들었다. jquery 함수를 사용할 것이기 때문에 onclick은 사용하지 않았다.

 

 

2. js

  • 우선 id 중복 체크를 했는지 확인하기 위해 전역 변수를 하나 선언했다.
        var idch = false;

 

  • 회원가입 ㄱ 
더보기
        $('#joinButton').click(function () {
            let id = document.getElementById('joinId').value;
            let name = document.getElementById('joinName').value;
            let pw = document.getElementById('joinPw').value;
            let chPw = document.getElementById('checkPw').value;
            if (id == "") {
                // 아이디 공란 체크
                alert('아이디를 입력해주세요.')
                $('#joinId').focus();
                return false;
            } else if (idch == false) {
                // 아이디 중복 체크
                alert('아이디 중복 체크를 해주세요.')
                $('#joinIdch').focus();
                return false;
            } else if (name == "") {
                // 이름 공란 체크
                alert('이름을 입력해주세요.')
                $('#joinName').focus();
                return false;
            } else if (pw == "") {
                // 비밀번호 공란 체크
                alert('비밀번호를 입력해주세요.')
                $('#joinPw').focus();
                return false;
            } else if (chPw == "") {
                // 비밀번호 재입력 공란 체크
                alert('비밀번호 재입력을 확인해주세요.')
                $('#checkPw').focus();
                return false;
            } else if(pw==chPw){
                // 비밀번호 일치 체크
                $('#chPwP').html('비밀번호가 일치하지 않습니다.');
            }

            let userInfo = {
                id: id,
                name: name,
                pw: pw
            }
            localStorage.setItem(id, JSON.stringify(userInfo))
            alert('회원가입 성공!')
        });
  • joinButton 버튼 클릭 시 함수 호출
  • joinId, joinName, joinPw, checkPw의 값을 가져와서 각 변수에 담아놨다.
  • 그리고 변수가 비어있으면 아이디부터 차례로 입력해달라는 메세지를 띄우고 커서를 비어있는 칸으로 이동하도록 했다.
  • 아이디 중복 체크 및 비밀번호 일치 체크까지 하고 나면 배열 변수를 하나 만들어 localStorage에 id를 키로 주고, 배열을 값으로 해서 정보를 저장하도록 했다.
  • 정보 저장에 성공하면 회원가입 성공 메세지를 띄웠다.

 

  • 중복 아이디 체크 ㄱ 
더보기
        $('#joinIdCh').click(function () {
            let duplicateId = document.getElementById('joinId').value;
            if (duplicateId == "") {
                // 아이디 공란 체크
                alert('아이디를 입력해주세요.')
                $('#joinId').focus();
                return false;
            }

            let localInfo = localStorage.getItem(duplicateId)
            if (localInfo == null) {
                idch = true
                alert('아이디 사용 가능!')
            } else {
                alert('아이디가 중복됩니다.')
                $('#joinId').focus();
            }
        })
  • joinIdCh 버튼 클릭 시 함수 호출
  • joinId에서 값을 가져와서 값이 있는지 체크하고, 없으면 joinId에 커서가 이동하도록 했다.
  • joinId에 값이 있다면 localStorage에 joinId의 값에 해당하는 배열을 찾아 가져온다.

 

  • 배열이 있다면 idch의 값을 true로 바꾸고 아이디 사용 가능 메시지를 띄운다.
  • 배열이 비어있다면 아이디가 중복된다는 메시지를 띄우고, joinId에 커서가 이동하도록 했다.

 

  • 비밀번호 일치 체크 ㄱ 
더보기
        $('#checkPw').keyup(function () {
            let pw = document.getElementById('joinPw').value;
            let chPw = document.getElementById('checkPw').value;
            if (pw == "") {
                $('#chPwP').html('비밀번호를 입력해주세요.');
            } else if (pw != chPw) {
                $('#chPwP').html('비밀번호가 일치하지 않습니다.');
            } else {
                $('#chPwP').html('비밀번호 일치');
            }
        })
  • chekPw에 값이 입력되면 함수 호출
  • joinPw, checkPw의 값을 가져와 변수에 저장해두고 joinPw가 비어있을 경우, 비밀번호를 입력하라는 메시지를 띄운다.
  • joinPw에 값이 있을 경우, checkPw와 값을 비교하고 다르면 일치하지 않다는 메시지를 띄운다.
  • 같으면 비밀번호가 일치한다는 메시지를 띄운다.

 

  • 비밀번호 재입력부터 값이 채워져있을 경우 ㄱ 
더보기
        $('#joinPw').keyup(function () {
            let pw = document.getElementById('joinPw').value;
            let chPw = document.getElementById('checkPw').value;
            if (chPw != "" && chPw != pw) {
                $('#chPwP').html('비밀번호가 일치하지 않습니다.');
            } else if(chPw != "" && chPw == pw) {
                $('#chPwP').html('비밀번호 일치');
            }
        })
  • joinPw에 값이 입력되면 함수 호출
  • joinPw, checkPw의 값을 변수에 저장해두고, checkPw가 값이 있고, joinPw와 비교했을 때 다르면 일치하지 않다는 메시지를 띄운다.
  • 값이 같다면 일치한다는 메시지를 띄운다.

 

  • input 전부 값이 채워지면 색 채우고 값이 빠지면 다시 색 빼기 ㄱ 
더보기
        $('#join').keyup(function () {
            let id = document.getElementById('joinId').value;
            let name = document.getElementById('joinName').value;
            let pw = document.getElementById('joinPw').value;
            let chPw = document.getElementById('checkPw').value;
            if (id != "" && name != "" && pw != "" && chPw != "") {
                $('#joinButton').css('background-color', '#6A24FE').css('color', '#fff')
            } else {
                $('#joinButton').css('background-color', '#F8F8F8').css('color', '#000')
            }
        })
  • join에 값이 입력되면 함수를 호출
  • 든 값을 체크해야 하기 때문에 div를 이용했다.
  • joinId, joinName, joinPw, checkPw의 값을 가져와서 각 변수에 담아놨다.
  • 각 변수들이 공란이 아닐 경우 joinButton의 배경색과 글자색을 #6A24FE, #ffffff로 변경했다.
  • 아닐 경우, #f8f8f8, #000000으로 변경했다.

 


 

전체 피드백

  • 빈 칸인 상태로 내가 생각해내려고 하니 앞이 캄캄했다. 빨리 css를 집어넣고 싶어서 그것 때문에 더 우왕좌왕한 것도 있었던 것 같다. 생각나는(하고싶은) 것은 대충 메모장에 적어두거나 하고 하나에만 집중하기!!
  • 안 익숙해서 어쩔 수 없이 거의 검색을 해가면서 한 것 같다. 빨리 익숙해지려면 다른 페이지도 만들어보고 그래야겠다..
  • 나도 잘은 모르지만 이것저것 해보고 그러다 어쩌다보니 다른 사람에게 조금 도움이 된 것 같다! 다행! (+도움이 되지 못했던 것은 집에 와서 한가지 해결해서 월요일에 가서 알려줘야겠다.)
  • 40일차는 병결, 41일차는 조퇴로 인해 수업일지를 작성하지 못했다. 건강관리 잘하기..!

 


728x90
728x90

 

수업내용 정리 (VSCode - JS)

 

1. Json

  <script>
    const user = {
      name: 'kim',
      age: 30,
      emails: ['thekim@gmail.com', 'neo@naver.com']
    }
    console.log(user)

    // const str=JSON.stringify(user)
    // console.log('str', str);
    // console.log(typeof str);
    // const obj=JSON.parse(str)
    // console.log('obj', obj);
    //개발자도구 application
    //로컬스토리지- 사이트에 종속된 반영구 데이터 저장소
    //세션스토리지- 페이지 닫으면 사라지는 데이터 저장소
    //setItem은 값을 문자로 저장해야 한다.
    //localStorage.setItem('user',user) //user객체를 문자화해야 한다.
    localStorage.setItem('user', JSON.stringify(user))
    //console.log(localStorage.getItem('user'))
    console.log('jsObj:', JSON.parse(localStorage.getItem('user')))
    //localStorage.removeItem('user') 
    //localStorage 데이터 수정
    const str = localStorage.getItem('user')
    const obj = JSON.parse(str)
    obj.age = 22
    console.log(obj);
    localStorage.setItem('user', JSON.stringify(obj))
  </script>

 

 

2. 구조 분해 할당

  <script>
    //구조 분해 할당(Destructuring assignment)
    //비구조화 할당
    const user = {
      name: 'kim',
      age: 30,
      email: 'thekim@gmail.com'
    }
    //let name=user.name
    //let age=user.age
    //let email=user.email   불편함..

    //속성이 많을 때 필요한것만 순서상관없이 추출시 유리
    //address속성값이 없다면 'Korea'가 기본값이 된다.
    const {
      age,
      name: irum,
      address = 'Korea'
    } = user
    console.log(age)
    console.log(name)
    //위를 구조분해할당 없이 추출해서 age, name변수에 저장해 볼것
    console.log(`사용자의 이름은 ${irum}입니다`);
    console.log(`${irum}의 나이는 ${age}세입니다`);
    console.log(`${irum}의 이메일은 ${user.mail}입니다`);
    console.log(address);

    showNameAgeInfo(user)

    function showNameAgeInfo({
      name,
      age
    }) {
      console.log(`name=${name},  age=${age}`);
    }

    const fruits = ['Apple', 'Banana', 'Cherry']
    //fruits가 배열이므로 []로 구조분해할것
    //const [a,b,c,d='Mango']=fruits  //순서대로 추출함 
    //console.log(a,b,c,d)  //Apple Banana Cherry undefined
    // const [,b]=fruits  //두번째요소 Banana만 추출함 
    // console.log(b)  //Banana
    const [, , b] = fruits //세번째요소 Cherry만 추출함 
    console.log(b) //Cherry
  </script>

 

 

3. 전개 연산자

  <script>
    //전개 연산자(Spread)
    const fruits = ['Apple', 'Banana', 'Cherry', 'Orange']
    console.log(fruits)
    console.log(...fruits)
    //console.log('Apple','Banana', 'Cherry')와 동일하게 호출
    //c(last매개변수)는 ['Cherry','Orange'] 인자를 받는다                             
    // function toObject(a,b,...c){  
    //   return{
    //     //a: a, b: b, c: c
    //     a, b, c   //키,값변수가 같으면 1번만 명시해도 됨 
    //   }
    // }
    const toObject = (a, b, ...c) => ({
      a,
      b,
      c
    })
    console.log(toObject(...fruits)); //호출 인자가 많을 때 유리함
    //console.log(toObject(fruits[0],fruits[1],fruits[2],fruits[3])); 와 동일하게 호출
  </script>

 

 

4. 불변성

  <script>
    //데이터 불변성(Immutability)
    //원시 데이터 : String, Number, Boolean, undefined, null
    //(값이 같으면 같은 참조값을 갖는다.)
    //(결국, 원시 데이터는 참조값보다는 상수처럼 이해하면 된다.)
    //참조형 데이터: Object, Array, Function
    //(참조형은 불변성이 없다.)
    //(결국, 참조형의 새로운 객체는 새로운 참조값을 갖는다. )
    //----------------------------------------------
    //1번지:      2번지:      3번지:      4번지:
    //----------------------------------------------
    // let a=1
    // let b=4
    // console.log(a,b, a===b)
    // b=a  //참조값이 복사된다.
    // console.log(a,b, a===b)
    // b=7  //7의 참조값이 복사된다. 
    // console.log(a,b, a===b)
    // let c=1
    // console.log(a,b, b===c)
    let a = {
      k: 1
    }
    let b = {
      k: 1
    }
    console.log(a, b, a === b)
    a.k = 7
    b = a //객체값복사가 아니라 참조값이 복사된다.(주의)
    console.log(a, b, a === b)
    a.k = 2 //b객체의 k속성값도 2로 변경되니 주의하자.
    console.log(a, b, a === b)
    let c = b
    console.log(a, b, c, a === c)
    a.k = 9
    console.log(a, b, c, a === c)
  </script>

 

 

5. 얕은 복사와 깊은 복사

  <script>
    //얕은 복사(Shallow copy), 깊은 복사(Deep copy)
    const user = {
      name: "kim",
      age: 40,
      emails: ['thekim@gmail.com']
    }
    //const copyUser =user  //얕은복사
    //const copyUser =Object.assign({}, user)  //깊은복사
    let copyUser = {
      ...user
    } //전개연산자 활용 깊은복사같지만 emails는 얕은복사가 된다.
    let copyUser = {
      name: user.name,
      age: user.age,
      email: user.emails
    }
    console.log(copyUser)
    console.log(copyUser === user) //false 깊은 복사
    console.log(copyUser.email === user.emails) //true 그러나 emails는 얕은복사

    user.age = 22
    console.log('user', user)
    console.log('copyUser', copyUser)
    console.log('-------------');
    console.log('-------------');
    user.emails.push('neo@naver.com')
    console.log(user.emails, copyUser.emails); //얕은복사이므로 같은요소값이 출력됨
    console.log('user', user);
    console.log('copyUser', copyUser);
    //deep copy는 lodash 라이브러리의 cloneDeep()를 이용해서 쉽게 할수 있지만
    //실력을 위해 직접구현해 보자 
    copyUser = {}
    deepCopy(user, copyUser)
    console.log('deepCopy call after')
    console.log(user.emails === copyUser.emails); //깊은복사가 되어 false
    user.emails.push('xxx@naver.com')
    console.log('user', user); //['thekim@gmail.com','neo@naver.com','xxx@naver.com']
    console.log('copyUser', copyUser); //['thekim@gmail.com','neo@naver.com']

    function deepCopy(source, target) {
      target.name = source.name
      target.age = source.age
      target.emails = []
      //문제> source.emails 배열의 값을 순차적으로 target.emails배열로 복사하시오
      for (let email of source.emails) {
        target.emails.push(email)
      }
      //source.emails.forEach(email => target.emails.push(email));
      //target.emails.push(...source.emails)
    }
  </script>

 


  • 37일차는 오후에 조퇴를 하는 바람에 일지가 없다.

 


728x90
1 2 3 4 ··· 13