프로그래머 도전기 90일차

오늘은

 

학원 수업도 자습도 기초적인것보다

기초를 응용하고 조금 더 심화적인 것을 배우게 된것같습니다

완벽하게 이해하고 암기를 했다고는 할 수 없지만

프로젝트를 하면서

직접 써보고 많이 접해봐야 확실히 체득이 되는구나 하는 것을 느꼈기 때문에

최대한 빨리 여러 기술들을 접해보려고 합니다

 

 

 

학원 수업

 

기능
유효성 검사
isNaN(데이터) - 숫자가 아님
객체.test(데이터) - 데이터와 객체가 일치하는지 검사
document.getElementById()

객체.focus()
객체.select()
document.form이름.submit()

정규표현식
[0-9] 숫자
[a-zA-Z] 영문자
[가-힣] 한글
{숫자, 숫자} 숫자~숫자 범위

/* 상품 등록 유효성 검사 */
/* 
	상품코드 = p와 숫자 조합, 5~12자로 입력
	상품명 = 4~20자 입력
	가격 및 재고수 = 숫자만 입력

 */
const checkProduct = function(){
	/*alert("테스트...");	*/
	let pid = document.getElementById("pid");
	let pname = document.getElementById("pname");
	let price = document.getElementById("price");
	let pstock= document.getElementById("pstock");

	// 정규 표현식
	let regexPid = /^P[0-9]{4,11}/

	if(!regexPid.test(pid.value)){  // 상품코드와 정규표현식이 일치하지 않으면
		alert("상품 코드는 P를 포함하여 숫자만 사용하여 4~11자로 입력해주세요");
		pid.select();
		return false;
	}else if(pname.value.length < 4 || pname.value.length > 20) {
		alert("상품명은 4~20자로 입력해주세요");
		pname.select();
		return false;
	}else if(price.value.length == 0 || isNaN(price.value) || price.value < 0) {
		alert("가격은 숫자만 입력해주세요");
		price.select();
		return false;
	}else if(pstock.value.length == 0 || isNaN(pstock.value) || pstock.value < 0) {
		alert("재고는 숫자만 입력해주세요");
		pstock.select();
		return false;
	}else {
		document.newProduct.submit();
	}
}

장바구니 품목
개별 품목 삭제 - removecart.do

if (command.equals("/deletecart.do")) { // 장바구니 전체 삭제
        // 장바구니 품목 전체 삭제(세션 삭제)
        session.invalidate();
}

삭제하기 - deletecart.do

if (command.equals("/removecart.do")) { // 개별 품목 삭제
    String pid = request.getParameter("pid");
    // 상품 세션 유지
    List<Product> cartlist = (ArrayList<Product>) session.getAttribute("cartlist");
    // 장바구니에서 해당 품목을 찾아서 삭제
    for(int i=0; i<cartlist.size(); i++) {
        Product product = cartlist.get(i);
        if(product.getPid().equals(pid)) {
            cartlist.remove(product);  // ArrayList의 삭제메서드 내장함수 = .remove();
        }
    }
}

* 과부하
데이터베이스 연결 - 커넥션 풀(Connection Pool)
커넥션 풀 = DB에 접속하는 Connectrion 객체들을 미리 생성해 놓고
DB에 접속해야 하는 문서가 사용할 수 있게 하는 개념이다
=> DB의 접속이 필요할 대마다 새로운 Connection을 생성하지 않고
커넥션 풀에 생성된 여러 Connection 중에서 사용되고 있지 않은 Connection을 빌려 사용하고
문서의 수행이 끝나면 사용한 Connection을 반납한다

package common;

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.SQLException;

import javax.naming.InitialContext;
import javax.naming.NamingException;
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 javax.sql.DataSource;

@WebServlet("/cptest")
public class ConnPoolTest extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    public ConnPoolTest() {
        super();
    }

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		try {
			Connection conn = null;
			
			response.setContentType("text/html; charset=utf-8");
			PrintWriter out =response.getWriter();
			
			// DataSource 객체 생성
			InitialContext ctx = new InitialContext();
			DataSource ds = (DataSource)ctx.lookup("java:comp/env/jdbc/mysql");
			conn = ds.getConnection();
			out.println("커넥션 풀 설정 성공 " + conn);
			
			conn.close();  // 연결 종료
		} catch (NamingException e) {
			e.printStackTrace();
		} catch (SQLException e) {
			e.printStackTrace();
		}
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}
}

 

DNS(Domain Name Service)
= 도메인(웹주소) 이름(문자)을 IP(숫자)로 바꿔(변환)주는 서비스

커넥션 풀 - JNDI(Java Naming and Directory Interface)
- 설정: 톰캣 context.xml에 등록 - 참조문서: 톰캣 Documentation
- 네이밍 서비스
  = 논리적인 이름을 디렉터리 서비스의 파일 또는 자바 객체,
     서버등과 연결해 주는 서비스를 말함
     ex) .lookup("도메인 주소");

    <Resource
      name="jdbc/mysql"
         type="javax.sql.DataSource" 
         driverClassName="cohttp://m.mysql.cj.jdbc.Driver"
         url="jdbc:mysql://localhost:3306/jwebdb?serverTime=Asia/Seoul"
         username="jweb" 
         password="pwjweb" 
         maxActive="100"
         maxWait="1"
    />

 

 

 

 

 

 

JavaScript 공부

 

* async/await
- promise를 직관적으로 만들어줌

 

 

* async

function hello(){
    return 'hello';
}

// async = promise를 반환하는 비동기처리 함수가 된다
async function helloAsync(){
    // Promise<string> 반환
    return 'hello Async';
}

console.log(hello());  // 결과값 = hello 출력
console.log(helloAsync());  // 결과값 = Promise{<pending>} 출력 => .then() 사용가능
helloAsync().then((res)=>{  // 결과값이 .then()의 res에 전달
    console.log(res);       // hello Async 문자열 출력
});

// async 키워드를 붙여준 함수의 결과값
// = 비동기 작업 객체 promise의 resolve의 결과값이 된다

 

 

* await

function delay(ms) {
    return new Promise((resolve) =>{
        setTimeout(resolve, ms); // setTimeout의 콜백 함수안에 resolve를 호출하는 것 말고는 없다면
                                 // 콜백함수 자체로 resolve를 전달해도 된다
    });
}

// async function helloAsync(){
//     return delay(3000).then(()=>{   
//         return "hello Async";     
//     });
// }
// 수행하는 작업에 비해 코드가 거창해짐 => 이런 경우에 await 사용

async function helloAsync(){
    await delay(3000);     // await 키워드를 비동기함수 호출 앞에 붙이면 
    return "hello Async";  // 비동기함수가 동기적인 함수처럼 작동을 하게된다
}                          // await 키워드는 async 키워드가 붙은 함수 내에서만 사용 가능

async function main (){
    const res = await helloAsync();
    console.log(res);
}

main();

 

 

* API(Application Programming Interface)
= 응용 프로그램 프로그래밍 인터페이스
=> 응용 프로그램에서 사용할 수 있도록
     운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든
     인터페이스를 뜻한다
     주로 파일 제어, 창 제어, 화상 처리, 문자 제어 등을 위한 인터페이스를 제공한다
=> BROWSER      - 데이터 요청Request ->   SERVER   - 데이터 검색Query(질의) ->     DATABASE
     (CLIENT)    <- Response요청 데이터 전달 -        <- Query Result데이터 찾기 - 

API 호출 = 데이터 요청, 요청 데이터 전달 부분
=> 프로그램한테 데이터를 받기 위해 말을 건다는 의미
(우리가 개발할 부분 = client + API 호출 부분)
=> 함수와 비슷하지만 다른 부분 = 응답을 언제 받을지 확실히 알 수 없다는 점

인증된 요청에 한해서 응답을 하는 경우가 대부분
=> open sources
    https://jsonplaceholder.typicode.com/ => Resources
API를 호출하는 경우 주소를 알아야 함 = 누구한테 말을 거는지 알아야 하는 것과 동일
ex) https://jsonplaceholder.typicode.com/posts

 

// let response = fetch("https://jsonplaceholder.typicode.com/posts");
// fetch() = API 호출을 할 수 있도록 도와주는 내장함수 => Promise<Response> 반환
// = 비동기처리, .then()을 통해 사용 가능
// response.then((res) => 
//     console.log(res)
// );
// response 성공 객체 자체를 반환함 = 응답에 대한 여러 정보 포함

async function getData (){
    let rawResponse = await fetch("https://jsonplaceholder.typicode.com/posts");
    let jsonResponse = await rawResponse.json();
    console.log(jsonResponse);
}
getData();
// JSON 데이터 추출가능

 

 

 

 

 

 

 

 

 

2023. 12. 21 (목)