학원 day55. 자바스크립트

기록 2022. 11. 22. 14:44

자바스크립트

- 브라우저 내에서 실행되는 프로그램을 개발할 수 있는 프로그래밍 언어다.

- java와 문법적 유사성이 많다.

- 인터프리터(Interpret) 프로그래밍 언어다. (자바에서 java소스를 class파일로 변환하는 것과 같은 컴파일 과정없이 소스가 실행파일로 사용된다.)

- 서블릿이나 jsp를 실행해서 응답이 와야 front-end 기술을 작동시킬 수 있다.

자바스크립트로 할 수 있는 일

- HTML 컨텐츠를 변경할 수 있다.

- 브라우저를 통해서 현재 보고 있는 웹페이지를 변경할 수 있다.

- HTML 태그의 속성을 변경할 수 있다.

- HTML 컨텐츠의 스타일을 변경할 수 있다.

- CSS 변경할 수 있다.

- 사용자 상호작용하는 프로그램을 작성할 수 있다.

- 이벤트 모델을 활용한다.

- 브라우저의 도움없이 서버와 데이터 통신을 할 수 있다.

- AJAX 기술을 활용하면 가능하다.

JavaScript의 특징

- 스크립트언어(인터프리터 언어)다. (대표적 : 파이썬)

- 객체지향프로그래밍 언어다.

- 동적데이터타입을 지원한다. (데이터타입이 가변적이다. 변수의 값이 담길 때 타입이 결정된다.)

- 자바스크립트의 함수(메소드)는 1급시민이다.

자바와 자바스크립트 차이

자바

기본자료형, 객체 : 1급 시민이다.

변수에 대입 가능하다.

매개변수의 인자로 전달이 가능하다.

메소드의 반환타입으로 사용 가능하다.

메소드 : 1급 시민이 아니다.

자바스크립트

기본자료형, 객체, 함수(메소드) : 1급 시민이다.

변수에 대입 가능하다.

매개변수의 인자로 전달이 가능하다.

메소드의 반환타입으로 사용 가능하다.

JavaScript 프로그램 작성하기

방법1. 스크립트 태그 내에서 작성하기

console.log('hello, javascript');

</script>

방법2. 별도의 자바스크립트 파일을 사용 (app.js와 같은 자바스크립트 파일을 작성)

방법3. script 태그로 웹 문서에 포함시킨다.

- 일반적으로 바디 타입의 맨 끝 부분에 작성한다. html을 먼저 실행시키고 html 마지막 부분에 작성되어야 랜더링속도가 느려지지 않는다. css의 경우, html을 랜더링하는 엔진과 css을 랜더링하는 엔진이 동시에 작동되기 때문에 css를 먼저 작성한다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자바스크립트</title>
</head>
<body>
	<h1>자바스크립트의 실행</h1>
	
	<div>
		<button onclick="run();">버튼</button>
	</div>
	
	<script type="text/javascript">
	// run() 함수를 정의함
	function run() {
		console.log("자바스크립트가 실행됨");  // java의 System.out.println();과 대응, 브라우저에 출력시킬 수 있음
	}
	</script>
</body>
</html>

- function키워드 뒤에 함수이름을 붙여서 함수를 정의할 수 있다.

- 함수(메소드)는 누군가가 실행(호출)해야지만 실행되는 거라서 화면에 아무것도 안찍힌다.

- 그런데, button 뒤에 onclick을 작성해서 이벤트를 줄 수 있다. 버튼을 클릭했을 때 run()을 실행하라는 의미다.

<html>
<head>
<meta charset="UTF-8">
<title>자바스크립트의 변수</title>
</head>
<body>
	<h1>자바스크립트의 변수</h1>
	<script type="text/javascript">
		// 변수의 선언
		// 		var 변수명;
		// 		var 변수명 = 값;
		// 		var 변수명1, 변수명2, 변수명3;
		// 		var 변수명1 = 값1, 변수명2 = 값2, 변수명3 = 값3;
		
		// 1. 변수만 선언함
		var num0;
		// 2. 변수를 선언하고, 초기화 하였음
		var num1 = 20;
		// 3. 한번에 여러 개의 변수를 선언함
		var num2, num3, num4;
		// 4. 한번에 여러 개의 변수를 선언하고, 각각 다른 값으로 초기화 하였음
		var str1 = '김유신', str2 = '강감찬', num5 = 100;
		// 5. 한번에 여러 개의 변수를 선언하고, 같은 값으로 초기화하기
		var num6 = num7 = num8 = 200;
		
		console.log("num0", num0);   // undefined <-- 초기화되지 않은 변수에는 undefined라는 예약어가 저장된다.
		console.log("num1", num1);   // 20
		console.log("num2", num2);   // undefined <-- 초기화되지 않은 변수에는 undefined라는 예약어가 저장된다.
		console.log("num3", num3);   // undefined <-- 초기화되지 않은 변수에는 undefined라는 예약어가 저장된다.
		console.log("num4", num4);   // undefined <-- 초기화되지 않은 변수에는 undefined라는 예약어가 저장된다.
		console.log("str1", str1);   // "김유신"
		console.log("str2", str2);   // "강감찬"
		console.log("num5", num5);   // 100
		console.log("num6", num6);   // 200
		console.log("num7", num7);   // 200
		console.log("num8", num8);   // 200
		
	</script>
</body>
</html>

- console.log("텍스트", 변수명);

<html>
<head>
<meta charset="UTF-8">
<title>자바스크립트 데이터타입</title>
</head>
<body>
	<h1>자바스크립트의 데이터타입</h1>
	<dl>
		<!-- 
			dt는 변수에 대입하는 값의 종류다.
		 -->
		<dt>undefined</dt><dd>변수를 초기화하지 않거나 변수에 undefined값을 대입하면 해당 변수의 데이터타입은 undefined 타입이 된다.</dd>
		<dt>null</dt><dd>변수에 null을 대입하면, 해당변수의 데이터타입은 object 타입이 된다.</dd>
		<dt>Boolean</dt><dd>변수에 true/false값을 대입하면, 해당 변수의 데이터타입은 Boolean 타입이 된다.</dd>
		<dt>String</dt><dd>변수에 문자열을 대입하면, 해당변수의 데이터타입은 String 타입이 된다.</dd>
		<dt>Number</dt><dd>변수에 정수, 실수를 대입하면, 해당 변수의 데이터타입은 Number 타입이 된다.</dd>
		<dt>Object</dt><dd>변수에 null, 배열, 객체 등을 대입하면, 해당 변수의 데이터타입은 Object 타입이 된다.</dd>
	</dl>
	<script type = "text/javascript">
		// undefined 타입 
		var a; // a의 데이터타입은 undefined이다. a의 값은 undefined이다. (타입의 이름과 값의 이름이 똑같은 경우다.)
		
		// Boolean 타입
		var b = true;
		var c = false;
		
		// String 타입
		var d = '안녕하세요';
		var e = "안녕하세요";
		
		// Number 타입, 내부적으로는 java의 double 타입과 같은 타입이다.
		var f = -100;
		var g = 0;
		var h = 200;
		var i = 3.14;
		
		// undefined와 null 차이
		// undefined
		//      undefined는 변수가 가지는 기본값이다. 
		//      변수를 선언하면 변수의 값은 undefined가 기본값이다. 
		//      undefined는 변수에 값을 할당하지 않아도 자동으로 할당되는 값이다.
		// null
		//      변수에 null을 대입할 때만 변수의 값이 null이 된다.
		// * 변수의 값이 undefined다. --> 변수를 선언하고 값을 할당하지 않았다.
		// * 변수의 값이 null이다. --> 변수를 선언하고, 의도적으로 그 변수에 null값을 할당했다.
		// 예시
		/*
			function abc(x,y) {
			console.log(x);  
			console.log(y);  
		    }
		
		    abc();      // x:undefined, y:undefined
		    abc(null);  // x:null, y:undefined
		    abc(1);     // x:1, y:undefined
		    abc(1,2);   // x:1, y:2 
		    abc(1,2,3); // x:1, y:2
		*/
		
	</script>
</body>
</html>

null은 '객체가 없음'을 나타낸다. 실제로 변수의 타입을 알려주는 type of 연산을 해보면 아래와 같은 값을 반환한다.

typeof (null) // 'object'

typeof (undefined) // 'undefined'

프로그래머의 입장에서 명시적으로 부재를 나타내고 싶다면 null을 사용하는 것이 좋다.

참고 사이트 : https://helloworldjavascript.net/pages/160-null-undefined.html

<title>자바스크립트 연산자</title>
</head>
<body>
	<h1>자바스크립트 연산자</h1>
	<script type="text/javascript">
		// 산술연산자
		//     + - * / %
		console.log(3 + 4); // 7 
		console.log(3 - 4); // -1
		console.log(3*4);   // 12
		console.log(3/4);   // 0.75 정수/정수가 실수값이 나올 수 있다.
		console.log(3%4);   // 3 나머지
		
		// 대입연산자
		//    = += -= *= /= %=
			
		// 증감연산자
		//    ++ --
		
		// 비교연산자
		//    > >= < <= == === != !==
		//    === 연산자 : 값과 타입이 모두 일치하면 true다.	
		//    !== 연산자 : 값이 다르거나 타입이 다르면 true고 그 외는 전부 false다.
		console.log(5 =='5');  // true, 문자'5'를 숫자 5로 변환해서 비교한다.
		console.log(5 == 5);   // true
		console.log(5 ==='5'); // false
		console.log(5 === 5);  // true
		
		console.log("!== 연산자"); 
		console.log(5 != '5');  // false, 같다. 문자'5'를 숫자 5로 변환해서 비교한다.
		console.log(5 != 5);    // false, 같다.
		console.log(5 !== '5'); // true, 같지 않다.
		console.log(5 !== 5);   // false, 같다.
		
		// 논리연산자
		//     ! && ||
		// 표현식1 && 표현식2 : 표현식1이 false로 판정되면 표현식2를 확인하지 않는다.
		// 표현식1 || 표현식2 : 표현식1이 true로 판정되면 표현식2을 확인하지 않는다.
		// * 자바스크립트에서 false로 판정되는 것
		//     false, undefined, null, NaN, 0, ''
		// * 자바스크립트에서 true로 판정되는 것
		//     true, 위에서 나열한 값을 제외한 모든 값은 true로 판정된다.(10, '안녕', -100는 true로 판정되는 값이다.)
		
		// * &&와 || 연산자의 좌항과 우항의 표현식이 모두 true/false 결과일 때만 최종 연산결과가 true/false다.
		console.log("논리연산자");
		var a = 10 > 100 && 10 > 5; // 좌항과 우항의 표현식이 모두 true/false 결과다.
		console.log("a", a); // false
		
		// * &&와 || 연산자의 좌항과 우항의 표현식 중에서 하나라도 
		// true/false 결과가 아닌 항이 있으면 최종 연산결과는 true/false가 아닐 수 있다.
		var b = null && 10 > 5;
		console.log("b", b); // null, 좌항이 null이다. -> null은 false로 판정되는 값이다. -> b의 최종값은 null이다.(null이 false로 판정되는 값이므로)
		
		var c = '1000' && 10 > 5;
		console.log("c", c); // true
		
		var c = '1000' || '1';
		console.log("c", c);  // '1000', 좌항이 '1000'이다. -> '1000'은 true로 판정되는 값이다. -> c의 최종값을 '1000'이다.
		
		/*
			이름 : <input type="text" name="userId">
			var x = document.querySelector("[name=userId]").value; // 입력필드의 입력값을 조회한다.
			if (x === '') {
				alert("아이디를 입력하세요");
				return;
			}
			if (!x) {
				alert("아이디를 입력하세요");
				return;
			}
		*/
		
		
		</script>
</body>

* console.log(3/4); // 0.75

자바스크립트와 자바의 차이점으로 자바에서는 정수/정수 = 정수이지만, 자바스크립트에서는 정수/정수가 실수가 나올 수 있는 점을 기억하자!

=== 연산자 : 값과 타입이 모두 일치하면 true다.
!== 연산자 : 값이 다르거나 타입이 다르면 true고 그 외는 전부 false다.

&&와 || 연산자의 좌항과 우항의 표현식이 모두 true/false 결과일 때만 최종 연산결과가 true/false다.
예시 :
var a = 10 > 100 && 10 > 5; // 좌항과 우항의 표현식이 모두 true/false 결과다.
console.log("a", a); // false

var b = null && 10 > 5;
console.log("b", b); // null, 좌항이 null이다. -> null은 false로 판정되는 값이다. -> b의 최종값은 null이다.

=> null이 false로 판정되는 값이므로 false로 변환되지 않고 null이 나오는 것이다.

NaN은 not a number라는 뜻이다.

좌항과 우항의 표현식이 모두 true/false 결과가 나오는 식 외의 연산결과는 값 자체가 들어있을 확률이 높다.

자바에서는 두개의 메소드 호출만 가능하지만

자바스크립트에서는 아래 코드가 모두 가능하다.

Document
브라우저 내장 객체다.
HTML 문서를 표현한 Document 객체가 저장되어 있다.
주요 메소드
getElementById(아이디)
지정된 아이디에 해당하는 태그를 표현하는 Element 객체를 반환한다.
getElementsByTagName(태그명)
지정된 태그명에 해당하는 모든 Element 객체를 포함하고 있는 HTMLCollection 객체를 반환한다.
HTMLCollection객체는 배열과 비슷한 객체다.
querySelector(선택자)
지정된 선택자에 해당하는 첫번째 Element 객체를 반환한다.
querySele ctorAll(선택자)
지정된 선택자에 해당하는 모든 Element 객체를 포함하고 있는 HTMLCollection 객체를 반환한다.
Element
태그를 표현하는 객체다.
태그명, 태그의 속성, 태그의 텍스트 컨텐츠, 태그의 프로퍼티 값과 다양한 메소드를 포함하고 있다.

<html>
<head>
<meta charset="UTF-8">
<title>자바스크립트의 if문</title>
</head>
<body>
	<h1>자바스크립트의 if문</h1>
	
	<h3>시험 성적</h3>
	<form>
		<div>
			<label>국어점수</label> :<input type="number" name="kor" />
		</div>
		<div>
			<label>영어점수</label> :<input type="number" name="eng" />
		</div>
		<div>
			<label>수학점수</label> :<input type="number" name="math" />
		</div>
		<button type="button" onclick="checkScore();">판정하기</button>
	</form>
	
	<script type="text/javascript">
		function checkScore(){
             
        var korScore = document.querySelector("[name=kor]").value; // 선택할거다.name속성의 값이 kor인 것을
        var engScore = document.querySelector("[name=eng]").value;
        var mathScore = document.querySelector("[name=math]").value;

        var totalScore = parseInt(korScore) + parseInt(engScore) + parseInt(mathScore);
        var avgScore = totalScore/3;

        console.log("총점", totalScore); 
        console.log("평균", avgScore);

        if (avgScore >= 60) {
            console.log("합격입니다.");
        } else {
            console.log("불합격입니다.");
        }
    }

    var x = 80;
    if (x >= 60) {
        console.log("합격입니다.");
    } else {
        console.log("불합격입니다.");
    } 	
	</script>
</body>
</html>

document는 html문서 자체를 표현하는 객체이고 그 객체 안에 querySelector라는게 있다.

querySelector는 특정한 태그를 고를 수 있는 것이다.

html문서 안의 name이 kor이라는 엘리먼트 객체를 조회하라. element 객체안의 value라는 프로퍼티(속성, 객체의 멤버변수) 안에 들어있는 값을 가져온 것이다.

값이 궁금할 때는 .value를 붙인다.

그런데 값이 글자로 표현되니까 계산을 하기 위해서는 자바스크립트 안에 내장되어 있는 parseInt를 사용한다.

-> 여기서 x가 엘리먼트라고 하는 것이다. 엘리먼트는 태그를 표현하는 객체로 태그명, 태그의 속성, 태그의 텍스트 컨텐츠, 태그의 프로퍼티 값을 포함하고 있다.

자바스크립트는 querySelector로 찾고 조작한다.

엘리먼트를 찾아야 한다. 태그를 찾아야 한다. 태그의 속성을 확인한다.

자바로 설명해보자면, property는 객체의 멤버변수라고 할 수 있다.

자바스크립트는 멤버변수에 대한 접근제한자가 없다. 전부다 공개이다. 연산자로 다이렉트접근 가능하다.

sample6.jsp:27번 라인에서 오류 났음을 알 수 있다. sample6.jsp:27를 클릭하면 에러난 소스코드를 보여줘서 어디가 틀렸는지 확인할 수 있다.

태그에 올 수 없는 속성이 오면 이클립스에서 노란 밑줄이 생긴다.

name 속성을 가지는 엘리먼트

form 태그와 모든 폼 입력요소는 name 속성을 가진다. (name은 주로 camel표기법으로 쓰임)
<form name="loginForm">
<input type="text" name="email" />
<select name="skill">
<textarea name="content">

value 속성을 가지는 엘리먼트 - 모든 input 태그, option태그는 value속성을 가진다.
(단, <input type="file">은 value속성으로 값을 설정할 수 없다.)
<input type="text" name="age" value="40" />
<option value="seoul"> 서울 </option>

checked 속성을 가지는 엘리먼트 - 라디오버튼, 체크박스만 checked="checked" 속성을 가진다.
<input type="radio" name="gender" value="female" checked="checked"> 여성
<input type="checkbox" name="skill" value="java" checked="checked"> 자바

selected 속성을 가지는 엘리먼트 - option 태그만 selected="selected" 속성을 가진다.
<option value="seoul" selected="selected"> 서울</option>

<html>
<head>
<meta charset="UTF-8">
<title>자바스크립트 if문 연습</title>
</head>
<body>
	<h1>자바스크립트 if문 연습</h1>
	
	<form id="form-login" method="post" action="login.jsp">
		<div>
			<label>아이디</label> : <input type="text" name="id" />
		</div>
		<div>
			<label>비밀번호</label> : <input type="password" name="pwd" />
		</div>
		<button type="button" onclick="checkInputField();">로그인</button>
	</form>
	
	<script type="text/javascript">
		// 1. 로그인 버튼을 클릭했을 때 checkInputFiled() 함수가 실행되어야 한다.
		function checkInputField() {
		// 2. name속성이 id인 엘리먼트의 입력값을 조회해서 변수 userId에 대입한다.
		var userId = document.querySelector("[name=id]").value;
		// 3. name속성이 pwd인 엘리먼트의 입력값을 조회해서 변수 userPassword에 대입한다.
		var userPassword = document.querySelector("[name=pwd]").value;		
		// 4. 변수 userId에 대입된 값이 ''와 일치하면 '아이디는 필수입력값입니다.'경고창을 표시한다.
		// * 경고창은 alert("메세지") 스크립트 내장함수를 사용한다.
		if (userId === '') {
			alert("아이디는 필수입력값입니다.");
			return;        // 빠른종료 return 빼먹지 말것!!
		}
		// 5. 변수 userPassword에 대입된 값이 ''와 일치하면 "비밀번호는 필수입력값입니다." 경고창을 표시한다.
		if (userPassword === '') {
			alert("비밀번호는 필수입력값입니다.");
			return; 
		}
		// 6. 아이디, 비밀번호 모두 입력했으면 form 입력값을 서버로 제출한다.
		// id속성값이 form-login인 엘리먼트를 조회해서 formElement 변수에 대입한다.
		var formElement = document.querySelector("#form-login");
		// formElement에 대입된 Element객체는 form태그를 표현하는 엘리먼트객체다.
		// form태그를 표현하는 엘리먼트객체는 폼 입력값을 서버로 제출시키는 submit() 메소드를 가지고 있다.
		formElement.submit();
	}
	</script>
</body>
</html>

<html>
<head>
<meta charset="UTF-8">
<title>자바스크립트의 반복문</title>
</head>
<body>
	<h1>자바스크립트의 for문</h1>
	
	<!-- 
		자바스크립트의 반복문
			for(초기식; 조건식; 증감식) { 
				수행문;
			}
			
			while (조건식) {
			     수행문;
			}     	
	 -->
	
	<div id="box-buttons"></div>

	<script type="text/javascript">
	   // 1부터 10까지 출력하기
	   for (var num = 1; num<= 10; num++) {
		   console.log("num->", num);
	   }
	   
	   // id속성값이 box-buttons인 엘리먼트를 조회하고, 그 엘리먼트에 버튼을 5개 추가하기
	   
	   // 1. button 태그를 담는 변수를 선언하고, 초기화한다.
	   var buttons = "";
	   // 2. for문을 사용해서 <button>버튼</button>태그를 htmlContent에 계속 추가한다.
	   for (var num = 1; num <= 5; num++) {
		   buttons += "<button>버튼</button>";
	   }
	   // 3. 아이디 속성값이 box-buttons인 엘리먼트를 찾아서 divElement에 대입한다.
	   var divElement = document.querySelector("#box-buttons");
	   // 4. divElement의 innerHTML 프로퍼티에 buttons 변수에 저장된 버튼태그들을 추가한다.
	   divElement.innerHTML = buttons;
	</script>
</body>
</html>

-> innerHTML에 넣고싶은것을 넣을 수 있다. 태그 안에다가 다른 태그를 넣을 때 사용한다.

while문의 활용

<html>
<head>
<meta charset="UTF-8">
<title>자바스크립트의 반복문</title>
</head>
<body>
	<h1>반복문 안에서 break와 continue 사용하기</h1>

	<script type="text/javascript">
		// break문을 사용해서 반복문 탈출하기
		for(var num = 1; num <= 10; num++) {
			if (num == 5) {
				break;  // 반복문을 탈출한다.
			}	
			console.log("num ->",num);
		}
		// 출력결과 : 1 2 3 4 
		
		// continue문을 사용해서 반복문의 처음으로 돌아가기
		for(var num = 1; num <= 10; num++) {
			if (num == 5) {
				continue;  // 남아있는 수행문을 수행하지 않고, 증감식으로 이동해서 다음번 반복을 이어간다.
			}	
			console.log("num ->", num);
		}
		// 출력결과 : 1 2 3 4 6 7 8 9 10
	</script>
</body>
</html>

★ 자바스크립트의 배열

<html>
<head>
<meta charset="UTF-8">
<title>자바스크립트의 배열</title>
</head>
<body>
	<h1>자바스크립트의 배열</h1>
	
	<script type="text/javascript">
		/* 
			자바스크립트의 배열객체
				- 가변길이 배열이다.  (자바의 배열길이는 불변)
				- 다양한 메소드를 지원한다.
			
			배열객체의 생성
			1. 빈 배열객체 생성
			   var x = [];
			2. 값이 포함되어 있는 배열객체 생성
			   var x = [값, 값, 값, 값];
			
			배열객체에 값 추가하기
			1. 배열객체를 생성하고, 배열객체에 값을 추가하기
			   var x = [];   // 길이가 0인 배열
			   x[0] = 10;
			   x[1] = 20;
			   x[2] = 30;
			   x[3] = 40;
			   x[4] = 100;
			   // x = [10, 20, 30, 40, 100]
			2. 배열객체를 생성하고, 배열객체에 값을 추가하기
			   var x = [];
			   x[0] = 10;
			   x[4] = 100;
			   // x = [10, undefined, undefined, undefined, 100] 
			3. 배열객체를 생성하고, 배열객체에 값 추가하기 (인덱스 없이 하는 방법)
			   var x = [100, 200, 300];
			   x.push(10);   // ArrayList의 add(E e) 메소드와 동일하다.
			   x.push(20);
			   x.push(30);
			   // x = [100, 200, 300, 10, 20, 30]
			4. 배열객체를 생성하고, 배열객체에 값 추가하기   
			   var x = [100, 200, 300];	
			   x.unshift(10); // 배열의 맨 앞에 추가한다.
			   x.unshift(20); 
			   x.unshift(30); 
			   // x = [30, 20, 10, 100, 200, 300]
		*/	
		// 빈 배열객체를 생성해서 items1에 대입한다. items1은 빈 배열객체를 참조하는 참조변수이다.
		var items1 = [];
		items1[0] = 100;
		items1[1] = 200;
		items1[2] = 300;
		console.log("첫번째 배열", items1);		
		
		var items2 = [];
		items2.push(100);
		items2.push(200);
		items2.push(300);
		console.log("두번째 배열", items2);	
		
		var items3 = [];
		items3.unshift(100);
		items3.unshift(200);
		items3.unshift(300);
		console.log("세번째 배열", items3);
		
		var items4 = [];
		items4[0] = 100;
		items4[2] = 300;
		items4[9] = 200;
		console.log("네번째 배열", items4);
	</script>

</body>
</html>

저작자표시

'기록' 카테고리의 다른 글

학원 day57. DOM, BOM (0)	2022.11.24
학원 day56. JavaScript 객체, 함수, 이벤트 (0)	2022.11.23
학원 day54. 스트림, 첨부파일 다운로드, 파일에 텍스트 기록 (0)	2022.11.21
학원 day53. 서블릿, 필터, 첨부파일 업로드 (0)	2022.11.18
학원 day52. merge into문, 장바구니 리스트 삭제하기, include, 암호화 (0)	2022.11.18

ABOUT ME

개발 일기 개발 일기

'기록' 카테고리의 다른 글

티스토리툴바

ABOUT ME

'기록' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바