Notice
Recent Posts
Recent Comments
Link
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | 29 | 30 | 31 |
Tags
- 컬렉션프레임워크
- exception
- 컬렉션 타입
- 한국건설관리시스템
- Java
- 오라클
- 환경설정
- oracle
- GRANT VIEW
- 예외처리
- 참조형변수
- abstract
- 어윈 사용법
- 예외미루기
- 대덕인재개발원
- EnhancedFor
- 객체 비교
- 사용자예외클래스생성
- 정수형타입
- 제네릭
- 생성자오버로드
- 자바
- 추상메서드
- 메소드오버로딩
- NestedFor
- 다형성
- 인터페이스
- 자동차수리시스템
- 집합_SET
- cursor문
Archives
- Today
- Total
거니의 velog
(3) 보강 1 본문
[이철희 선생님]
* 그동안 배운 것들 정리하고, 자주 사용하는 것들에 대한 연습. 프로젝트 하기 전에 초반에 느려 보일 수 있지만 개발 속도는 빨라질 것이다.
* 개념과 의미를 잘 파악하는데 집중할 것.
* (중요한 것에) 최선을 다하라. 항상은 번아웃에 빠질 위험성.
* DB는 통계를 통해 수치화를 근거로 삼아야 한다.
항상 개발자는 더미 데이터를 넣고 테스트를 하여 구체화해야 한다.
* 프로젝트 진행 하면서 시행착오(Trial and Error)를 많이 겪어 봐야 한다.
* 22/7 = 11 (성냥개비 배치)
https://m.blog.naver.com/zeroizer/80001020743
기발한 성냥개비 문제
성냥개비 3개로 숫자 2 모양을 두개 만듭니다.(오히려 z랑 비슷한 모양...)그리고 그 아래에 성냥개비 두개...
blog.naver.com
https://www.apachefriends.org/
XAMPP Installers and Downloads for Apache Friends
What is XAMPP? XAMPP is the most popular PHP development environment XAMPP is a completely free, easy to install Apache distribution containing MariaDB, PHP, and Perl. The XAMPP open source package has been set up to be incredibly easy to install and to us
www.apachefriends.org
* Apache - 완성형 웹서버 > 여기서 빠져 나온 것이 Tomcat
* 오픈 소스 제작 이유 : 여기 참여한 사람들의 연봉이 상상을 초월함. 이게 곧 자기 PR. 외국에서는 이걸 경력으로 쳐 준다.
* 포트번호 80 : http
* 포트번호 443 : https
*포트번호는 총 64K 개 사용 가능.
1K는 몇? 1024(2^10), 64*1024 = 65536
0 ~ 65535 범위 내로 가용 가능
- http://localhost:8272/dashboard/
- http://localhost:8272/jsstudy/
[VS Code로 작업할 예정임...]
[start.html]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hello</title>
</head>
<body>
<script>
/*
출력문을 가장 먼저 배우는 이유?
디버깅 용도로 사용하라고 알림을 띄우는데 더럽게 안쓴다.
필요하면 아낌없이 값을 찍어서 눈으로 봐야 한다!!!
console.log(); 도 남발하는 습관!
오늘 밤부터 잠잘 때 "난 최고의 프로그래머당" 자시암시 2달간!
*/
alert("안녕 세상아!");
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hello</title>
</head>
<body>
table>tr*5>td*4
<script>
/*
출력문을 가장 먼저 배우는 이유?
디버깅 용도로 사용하라고 알림을 띄우는데 더럽게 안쓴다.
필요하면 아낌없이 값을 찍어서 눈으로 봐야 한다!!!
console.log(); 도 남발하는 습관!
오늘 밤부터 잠잘 때 "난 최고의 프로그래머당" 자시암시 2달간!
*/
alert("안녕 세상아!");
</script>
</body>
</html><!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hello</title>
</head>
<body>
div#container>div.kgb*3
<script>
/*
출력문을 가장 먼저 배우는 이유?
디버깅 용도로 사용하라고 알림을 띄우는데 더럽게 안쓴다.
필요하면 아낌없이 값을 찍어서 눈으로 봐야 한다!!!
console.log(); 도 남발하는 습관!
오늘 밤부터 잠잘 때 "난 최고의 프로그래머당" 자시암시 2달간!
*/
alert("안녕 세상아!");
</script>
</body>
</html><!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hello</title>
</head>
<body>
<!--
구글에서 vscode emmet 검색하면 많이 나온다.
-->
<div id="container">
<div class="kgb"></div>
<div class="kgb"></div>
<div class="kgb"></div>
</div>
<script>
/*
출력문을 가장 먼저 배우는 이유?
디버깅 용도로 사용하라고 알림을 띄우는데 더럽게 안쓴다.
필요하면 아낌없이 값을 찍어서 눈으로 봐야 한다!!!
console.log(); 도 남발하는 습관!
오늘 밤부터 잠잘 때 "난 최고의 프로그래머당" 자시암시 2달간!
*/
alert("안녕 세상아!");
</script>
</body>
</html>[vartype.html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 자바스크립트는 동적언어당 vs 자바는 정적언어당
// 동적언어는 데이터 타입을 자동으로 할당하고, 몰래 형변환도 자동으로 해준다.
// var, let, const
var aaa = 337;
//alert(typeof(aaa)); // number
//alert(aaa + "10"); // 33710, 문자열 더하기(우선순위가 높다)랑 숫자 더하기
alert("337" - "10"); // 327, 빼기/곱하기/나누기는 연산이 없음, 자동으로 number로 형변환
var bbb = "메롱";
//alert(typeof(bbb)); // string
var ccc = false;
//alert(typeof(ccc)); // boolean
// JSON -> Javascript Object Notation (객체 표기법)
var fbi = {
name : "kgb"
};
//alert(typeof(fbi)); // object
var fbi2 = [1, 2, 3];
//alert(typeof(fbi2)); // object
// JSON -> Javascript Object Notation (객체 표기법)
</script>
</body>
</html>
[varletconst.html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// var, let, const의 차이 (let, const는 나중에 추가됨)
// var가 특별하고, let과 const는 다른 언어와 호환성이 있음
// let은 {}로 그 영역이 제한됨.
// var는 function 키워드로 그 영역이 제한됨.
// 원시타입(primative) vs 참조타입(object) 절대 알아야 함
// 원시타입 number, string, boolean => undefined, null 등은 바립시다.
// 참조(refer)타입은 객체(배열 포함)
// 객체 타입이 도입된 이유?
// 80년대 전자 산업이 발전. 이 때 하드웨어가 발전.
// 문제는 소프트웨어가 발전 속도를 못 따라갔다. 그래서 소프트웨어 공학에서 고민을 함. 어떻게 해야 하나?
// 공장에서 아이디어를 얻음. 기본 틀만 만들어 놓으면 생산품이 도출되는 것. 변형된 부분만 수정하는 방향으로 바뀜.
// 객체 지향 프로그래밍 방법론의 도입 배경.
// 초입에는 발달이 늦음. 하드웨어가 너무 비쌌다.
// 그래서 생각한 게 객체는 덩어리인데, 비싼 메모리에 원시타입은 메모리 사용량이 높아 메모리 누수 현상이 높아짐.
// 메모리 접근법을 바꾼 것임.
// call by value 원시타입인 경우의 동작, 쉬운 말로 하면 얕은 복사(두 변수의 주소 값이 다른 경우).
/*
var aaa = 272;
var bbb = aaa;
bbb = 337;
alert(aaa); // 272
*/
// 동일한 주소를 참조하므로(깊은 복사) 값이 두 변수 모두 바뀜.
// 이는 메모리의 절약을 위해 도입되었던 참조 기법이다.
// 그래서 얕은 복사를 위해 spread 연산자(...ccc)를 사용해야 한다.
// 추후에 불변성의 유지(immutable)를 위해 중요함.
var ccc = {
name: "로제"
};
var ddd = ccc; // 오른쪽이 객체인 경우 왼쪽은 그냥 별명이라 생각하면 맘 편함.
ddd.name = "제니";
alert(ccc.name); // 제니
// heap 메모리는 0000 번지부터 시작하여 상수풀을 포함하므로 프로그램 실행 내내 변하지 않는 값들을 저장.
// stack 메모리는 메모리 위에서부터 시작하여 임시적인 변수 값들을 저장하므로 메서드 실행 후에 사라지는 휘발성을 가짐.
//////////////////////////////////////////////////////////////////////
//for(var i=1; i<=10; i++) {}
//for(let i=1; i<=10; i++) {} // i is not defined
//alert("i=" + i); // 11
/*
const aaa = "통";
aaa = "치";
alert(aaa); // Uncaught TypeError: Assignment to constant variable.
*/
const black = {
name: "블랙",
role: "첩보원"
};
black.role = "개발자";
//alert(black.role); // 개발자, 값 변경 가능
black = {name: "홍길동"};
//alert(black.name); // Uncaught TypeError: Assignment to constant variable. 값 변경 불가
// {} => new Object()가 자동으로 할당되기 때문이다.
// 바닥에 본드가 붙은 박스라고 생각하면 편하다. 그 안에 있는 값은 변경이 가능하나, 박스 자체는 본드칠 때문에 바꿀 수 없는 것.
</script>
</body>
</html>Can I use... Support tables for HTML5, CSS3, etc
caniuse.com
[text01.html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" id="myTxt" value="메롱" />
<script>
//var check = document.querySelector("#myTxt").value; // 객체 안의 속성 값으로 가져오므로 원시타입의 복사 동작(call by value)이 이루어짐.
//check = "안메롱"; // 따라서 값이 바뀌지 않는 것을 확인할 수 있다.
var check = document.querySelector("#myTxt"); // 객체 형식으로 가져옴.
check.value = "안메롱"; // 객체의 참조타입으로 가져오므로 값이 바뀜(call by reference).
/* 직접 id를 가져다 쓰는 코딩은 코딩양이 많아지면 심각하게 가독성을 훼손하므로,
짧은 샘플코드를 만들 때만 사용한다!
myTxt.value = "요것도 되지용!!!";
*/
//var ck = "메롱"; // truthy
//var ck = ""; // falsy
//var ck = []; // truthy, 객체는 주소값을 가지고 있기 때문.
// 요즘 많이 쓰이는 스타일
/*
//var ck = true;
var ck = !0;
if(!ck) { // 조건은 boolean 타입이어야 해서 안보이게 boolean으로 바뀜, 이를 truthy하게 바뀐다고 한다.
alert("흥칫뿡"); // 흥칫뿡
}else {
alert("false라넹~") // 0, "", NaN, undefined, null은 falsy한 값이다.
}
*/
</script>
</body>
</html>[JSON.html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
<input type="text" name="aaa" value="흥" />
<input type="text" name="bbb" value="칫" />
<div>나는야 div</div>
<input type="checkbox" name="ccc" value="c" checked />
<input type="radio" name="ddd" value="d" checked />
<span>재밌넹</span>
<button name="mybtn" type="button">전송</button>
</form>
<div id="d1" style="color: yellow; background-color: black;">메롱</div>
<script>
var myForm = document.forms[0]; // form 태그의 객체 접근법
// form 태그 안에 사용자 입력태그 요소들만 가진 속성
var elems = myForm.elements;
for(var i=0; i<elems.length; i++) {
console.log(elems[i]);
}
/*
for(var elem of myForm) {
console.log("체크 : ", elem);
}
*/
/* 객체 속성 뽑아낼 때 사용하면 좋은 for in 문
for(변수명 in 객체) {
}
*/
/*
for(var attr in window) {
console.log("window 객체 속성 : " + attr, window[attr]);
}
*/
const d1 = document.querySelector("#d1");
alert(d1.style["color"]);
alert(d1.style["background-color"]); // 배열식 접근법으로 알림창 생성
// JSON JavaScript Object Notation 자바스크립트 객체 표기법
// XML(json땜시 망해가고 있음)은 언어다? JSON은 언어다?
// 데이터 전송 포맷의 거의 표준으로 json이 사용되고 있음.
// csv 파일 : 이름, 나이, 별명
// 배트맨, 30, 흥
/*
var jsp = {
name: "전승표",
skill: "jsp달인"
};
*/
/*
var jsp = {}; // new Object(); 와 같은 의미
jsp.name = "전승표";
jsp.skill = "jsp달인";
*/
// 배열식 접근법(연관배열이라고도 불림)을 이용한 속성 추가, 엄청 중요!
/*
var jsp = {
["name"] : "전승표",
["skill"] : "jsp달인"
};
*/
//alert("pp" + window.name + "pp");
/* 함수지향 같지만 실제로는 객체지향
var merong = "허거덕"; // 전역변수 설정의 실제 의미는 window 객체에 속성 추가!
//alert(window.merong); // 허거덕
function huk(){ // 전역함수의 정의는 실제로는 window객체에 메소드 추가
alert("헉");
}
window.huk(); // 헉
*/
/*
var jsp = {
[name] : "전승표", // window.name이라는 속성을 가지고 있으므로 오류가 나지 않았던 것.
[skill] : "jsp달인"
};
*/
// 숫자로 시작하는 변수명 불가
// 특수문자도 _, $ 만 가능
// var 345h = "왜 안됨?";
//var jsp = {};
// jsp.0 = "메롱" // ?? 왜 안됨?
// 일반적으로 배열식 접근법보다 .점 접근법을 더 많이 쓰는 이유는
// .점 접근법이 배열식 접근법보다 성능(속도)이 좋기 때문인데
// 로직 구현이 애매할 때는 배열식 접근법이 꼭 필요!
var name = "이름";
var alias = "별명"
var jsp = {
["0"] : "메롱", // 배열식 접근법을 사용하면 0도 속성명으로 추가 가능
["1"] : "되지용",
[272] : "E7E",
[name] : "속성명도 동적으로 할당 가능(name)",
[alias] : "속성명도 동적으로 할당 가능(alias)"
};
console.log("눈으로 확인 : ", jsp); // {0: '메롱', 1: '되지용'}
console.log("눈으로 확인 : ", jsp[1]); // 되지용
console.log("눈으로 확인 : ", jsp[272]); // E7E
console.log("눈으로 확인 : ", jsp[name]); // 속성명도 동적으로 할당 가능(name)
console.log("눈으로 확인 : ", jsp[alias]); // 속성명도 동적으로 할당 가능(alias)
</script>
</body>
</html>
[exam01.html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="list"></div>
<script>
var myList = document.querySelector("#list");
var members = [
{
name : "최예원",
pos : "level1"
},
{
name : "최성동",
pos : "level3"
},
{
name : "김지호",
pos : "level3"
},
{
name : "민지현",
pos : "level2"
},
{
name : "한동욱",
pos : "level3"
},
{
name : "강민택",
pos : "level4"
},
];
var levels = {
"level1" : "회장님",
"level2" : "사장님",
"level3" : "팀장님",
"level4" : "팀원님"
};
var tblStr = `<table border="1">`;
tblStr += `<tr>
<th>넘버</th>
<th>이름</th>
<th>직급</th>
</tr>`;
for(var i = 0; i < members.length; i++) {
var member = members[i];
tblStr += `<tr>
<td>${i}</td>
<td>${member.name}</td>
<td>${levels[member.pos]}</td>
</tr>`;
}
tblStr += `</table>`;
myList.innerHTML = tblStr;
</script>
</body>
</html>
'대덕인재개발원_final project' 카테고리의 다른 글
| (6) 토요일 수업 1 (0) | 2023.12.23 |
|---|---|
| (5) 보강 3 (0) | 2023.12.22 |
| (4) 보강 2 (0) | 2023.12.21 |
| (2) 공통 모듈 : FullCalender (1) | 2023.12.08 |
| (1) 주제 선정 (0) | 2023.12.06 |
'대덕인재개발원_final project' Related Articles
more
