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
- NestedFor
- 예외미루기
- 다형성
- 오라클
- 자동차수리시스템
- 컬렉션 타입
- cursor문
- 환경설정
- 추상메서드
- abstract
- 메소드오버로딩
- exception
- 인터페이스
- oracle
- 제네릭
- 컬렉션프레임워크
- GRANT VIEW
- 참조형변수
- 정수형타입
- EnhancedFor
- 예외처리
- 사용자예외클래스생성
- Java
- 한국건설관리시스템
- 자바
- 대덕인재개발원
- 생성자오버로드
- 집합_SET
- 어윈 사용법
- 객체 비교
Archives
- Today
- Total
거니의 velog
(4) 보강 2 본문
* CS 상식
[OS] => MS_DOS, 윈도우, 리눅스, MAC => 모든 조상은 UNIX
- 윈도우는 빌게이츠가 만듦. 대학생 때 당시 Basic을 만듦. 비주얼 베이직을 구매.
- 스타브잡스 아버지가 자동차 튜닝하시던 분. 사용자 편의성과 편리성에 매우 민감하게 작용했던 이유. 디자인에 성능에 예민.
- 이 둘의 결정적 계기를 만난 것이 제록스. 비밀 프로젝트 => 터치 스크린 제작. 운좋게 이 둘 다 제록스 프로젝트에 참여. 컴퓨터와 연결되어서 구조를 형성했어야 하기 때문.
- 명령어를 직접 치는 것보다, GUI로 변경되는 것에 대한 아이디어 착안.
- 특히, 빌게이츠는 초창기 컴퓨터가 8비트 체제였는데 따라서 성능의 한계가 명확했다. 왜 맨날 8비트인가? 한마디에 16, 32, 64비트로 올라가게 됨.
<유닉스>
- OS에 맞게 HW/SW를 개발함.
- 검사가 엄격한 대신 성능이 좋음
- 초창기 프로그램의 안정성이 높았음
<윈도우>
- OS는 SW의 호환성 정책. 시장성은 이게 더 좋았음.
<리눅스>
- 토발즈가 제작.
- redhat, centos, ubuntu 등등....
- 우분투는 Docker 가상 컨테이너 기술로 유행을 타고 있는 중.
- 현재는 윈도우 서버가 시장 점유율이 가장 높음. 왜?
- 서버 구축 시 유닉스, 리눅스, 윈도우 서버 중 거의 윈도우를 선택하게 되어 있음. 유닉스는 비싸고, 리눅스는 상시 관리, 윈도우는 안정성이 떨어지지만 돈을 내고 AS(유지보수)가 가능.
<IT의 최고 천재?>
- 폰 노이만 : 컴퓨터 구조를 결정한 사람. [폰 노이만 구조]로 설계함.
- 역사 이래 유일하게 어셈블리어를 읽은 사람.
- 제자들이 컴파일러를 제작. 폰 노이만한테 끌려가서 혼남.
- 컴퓨터 구조 : 하버드 구조 / 폰 노이만 구조 2대 체제
- CPU(연산장치) / 메모리(데이터)를 분리하는 구조가 폰 노이만 구조.
이 둘을 합친 것을 하버드 구조[cpu와 메모리 사이의 속도차이가 나서 잘 사용하지 않음]라 부름.
[function.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>
// 자바스크립트에서 함수는 그냥 달고 함께 살아야 하는 것, 중요하다 그런말 필요 없음.
////////////////////////////////////////////////////////////////////////////////
// function은 왜 쓰나용? 왜 써야만 하나용?
// DRY원칙 (Do not Repeat Yourself) 반복하지 마랑! => 함수의 재사용성과 (인터페이스처럼) 가독성을 향상시키기 위함.
////////////////////////////////////////////////////////////////////////////////
// 함수 호출 - Hoisting 현상
//f_fbi();
/*
// 함수 선언법
function f_fbi(){
alert("난 함수얌");
}
*/
// 표현식
var ppp = 1 + 2 + 4 - 9; // 연산을 통해 최종 결과가 1개로 귀결
// 표현식(expression)을 이용한 함수 선언, Hoisting(호이스팅) 먹지 않음
const f_fbi = function() {
//alert("나도 함수얌"); // Uncaught ReferenceError: Cannot access 'f_fbi' before initialization, Hoisting 방지
//return; // 함수 종료, 시스템적으로 설명하면 "제어권을 넘긴다"고 표현.
//return "박상협";
//alert("저는 뜨나용?"); // 실행 안 됨.
// return 뒤에 어떤 데이터 타입이 와도 상관이 없다.
return function f_msg(p_merong){
alert(p_merong);
// return; 이 생략되어 있다.
}
return; // 쓰건 안쓰건 맨 끝에 return이 생략되어 있음.
}
// 함수 호출
//f_fbi(); // 잘 실행됨
//alert(f_fbi()); // 나도 함수얌 => undefined(return 때문)
//alert(f_fbi()); // 나도 함수얌 => 박상협이 return
alert(f_fbi()('낙훈장')); // 낙훈장 => undefined(f_msg() 안에 return이 생략되어 있기 때문에)
</script>
</body>
</html>[function2.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>
// return에 어떤 데이터 타입을 써도 상관없듯이
// 함수의 매개변수도 어떤 데이터타입이 와도 상관없음
// callback 스타일은 현재 거의 모든 언어에서 간략하고
// 가독성이 좋고, 플렉서블하다는 이유로 각광받고 있으니,
// 꼭 눈으로 따라 갈 수 있을 정도는 해 놓아야 함!
// 익명 함수
// 표현식을 이용하면 함수 이름없이(anonymous function) 생성 가능
/*
(function(pParam){ // 표준식
alert("메롱 : " + pParam);
})("하지웅 하지원");
*/
// 함수 호출 => 즉각 실행 함수
// 언제 쓰는가? : 초기화가 필요한 핵심코드를 블락으로 만들고 싶거나
// 한번의 연산을 실행한 결과가 필요한 경우, 메모리 절약을 위해서
// 보통 자바스크립트 라이브러리들에 한번 이상 들어가 있음
/*
+function(pParam){
alert("메롱 : " + pParam);
}("하지웅 하지원");
-function(pParam){
alert("메롱 : " + pParam);
}("하지웅 하지원");
!function(pParam){ // 표준식
alert("메롱 : " + pParam);
}("하지웅 하지원");
*/
/*
*function(pParam){ // 제너레이터 함수 예약어이므로 사용 불가
alert("메롱 : " + pParam);
}("하지웅 하지원");
*/
// ()와 !을 이용해서 표현하는 것이 권장사항(암묵적)
var names = ["김민채", "정소현", "강진석", "송시운"];
const $ = {}; // 빈 객체 생성, 멋지게 namespace(자바로 치면 package)용
$.each = function(pArr, pCallback) {
for(var i=0; i<pArr.length; i++) { // 배열 돌리깅!
pCallback(i, pArr[i]); // 매개변수로 넘어온 함수 호출!
}
}
$.each(names, function(pIndex, pValue){
//alert(`체킁 : ${pIndex} : ${pValue}`);
});
/*
const each = function(pArr, pCallback) {
for(var i=0; i<pArr.length; i++) { // 배열 돌리깅!
pCallback(i, pArr[i]); // 매개변수로 넘어온 함수 호출!
}
}
each(names, function(pIndex, pValue){
alert(`체킁 : ${pIndex} : ${pValue}`);
});
*/
////////////////////////////////////////////////
/*
const f_check2 = function(pCallback){
pCallback();
}
f_check2(function(){
alert("보통 날 콜백함수라 불러용~");
});
*/
/*
pCallback = function(){
alert("보통 날 콜백함수라 불러용~");
}
*/
////////////////////////////////////////////////
const f_check = function(pName) {
/*
var msg = "";
if(pName == "이건정"){
msg = "동네아저씨";
}else {
msg = "도시아저씨";
}
return msg;
*/
// return을 잘 쓰면 굳이 else가 필요하진 않당!
if(pName == "이건정"){
return "동네아저씨";
}
return "도시아저씨";
}
//alert(f_check("이건정")); // 동네아저씨
//alert(f_check("강민택")); // 도시아저씨
</script>
</body>
</html>[whatisthis.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>
// this? 이것? 나? 대명사
// call, apply, bind 란 함수객체의 메소드를 추가로 제공!
// 개발자가 직접 this를 강제 제어할 수 있게 해줘서 칭찬받음!
/*
const f_ck = function(){
console.log("체킁 : ", this); // window 객체
}
var f_ck = function () {
console.log("체킁 : ", this); // window 객체
};
*/
var f_ck = function (pParam1, pParam2) {
alert(pParam2);
console.log("체킁 : ", this, "매개변수 : ", pParam1); // window 객체
};
//f_ck();
//window.f_ck(); // Uncaught TypeError: window.f_ck is not a function
var hcy = {
name: "홍창용",
};
hcy.check = f_ck;
// f_ck는 참조형 함수이므로 참조!!(hcy.check : alias 처리됨)
// prototype의 기본적 특성때문. 원형을 변경시키지 않고 참조타입으로 속성이나 메서드를 추가하는 것이 기본 설계.
//hcy.check(); // 여기서 this는 hcy
// 요따구론 못 쓰겠당! 나 힘들당!
/*
hcy.check.call(document);
hcy.check.call({ name: "민채", age: 20, role: "드라마 여주인공" });
hcy.check.call(
{ name: "민채", age: 20, role: "드라마 여주인공" },
"김민채"
);
*/
var kmc = { name: "민채", age: 20, role: "드라마 여주인공" };
hcy.check.call(kmc, "김민채", "안졸려용");
// apply는 call과 기능적으로는 완전히 똑같고
// 단지 매개변수글을 꼬옥 배열에 담아서 1개로 넘겨줘야 함
hcy.check.apply(kmc, ["김민채", "아우 졸려용"]);
</script>
</body>
</html>[bind.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>
<button id="myBtn">눌러방</button>
<script>
// call, apply, bind라는 단어는 잘 기억해 둘 것
// 요즘에는 쓸 필요가 생기는 상황이 점점 더 늘어가고 있음!
// 왜냐하면 프론트에서 이젠 비즈니스 로직까지 다 처리하는 경우가 늘었기 때문이다.
/*
// document.write 넘 길어 줄여쓰고 시퍼 맹금
const myPrint = function (pMsg) {
document.write(pMsg);
};
*/
//document.write(`<h1>나야 나!</h1>`);
//document.write(`<h1>넌 누구임?</h1>`);
//var myPrint = document.write; // 참조를 이용, Uncaught TypeError: Illegal invocation
var myPrint = document.write.bind(document); // 참조를 이용, this로 바인딩할 객체를 window에서 document로 바꾸는 작업을 한다.
window.myPrint(`<h1>나야 나!</h1>`); // 이 때, this가 window를 가리키므로 this 값이 바뀌었을 가능성이 높다.
myPrint(`<h1>넌 누구임?</h1>`); // 이제, this가 document를 가리키므로 오류가 생기지 않는다.
//////////////////////////////////////////////////////////
var myBtn = document.querySelector("#myBtn");
const f_click = function (pName) {
document.write(`<h1>난 최고의 프로그래머당!</h1>`); // 내부적으로 새 문서를 다시 작성하는 코드가 됨.
console.log("체킁 : ", this);
console.log("체킁 : ", this.name);
//alert(`${pName} 안농 잘 지냈엉?`);
};
// 이벤트 등록!
//myBtn.addEventListener("click", f_click()); // undefiend
//myBtn.addEventListener("click", f_click); // object PointerEvent
// bind는 call하고 문법은 똑같음
// bind는 내부적으로 매개변수가 들어간 함수를 만들고,
// 그 함수의 포인터 FP (함수이름의 의미)를 되돌려주고, 실행하진 않는다.
// 다시 콜을 해야 실행됨.
// call은 바로 함수를 실행한다는 차이점이 있다.
myBtn.addEventListener(
"click",
f_click.bind({ name: "나 민채" }, "흥칫뿡") // 흥칫뿡 안농 잘 지냈엉?
);
</script>
</body>
</html>[event.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>
<style>
#grand {
position: relative;
left: 30px;
width: 400px;
height: 400px;
border: 3px solid gold;
}
#mom {
position: relative;
left: 70px;
width: 200px;
height: 200px;
border: 3px solid pink;
}
#me {
position: relative;
left: 50px;
width: 100px;
height: 100px;
border: 3px solid black;
}
</style>
</head>
<body>
<!-- action="" : 현재 주소(브라우저 주소 표시줄에 보이는 주소)가 default 값 -->
<!-- <form action="" onsubmit="return false"> 아예 전송이 되지 않음 -->
<!-- <form action="" onsubmit="return true"> -->
<!-- <form action="" onsubmit="return f_submit()"> -->
<form action="" id="myForm">
<input type="text" name="sname" value="김민채" /><br />
<input type="text" name="sage" value="20" /><br />
<button type="submit">떤쏭</button>
<!-- http://localhost:8272/jsstudy/event.html?sname=%EA%B9%80%EB%AF%BC%EC%B1%84&sage=20 -->
</form>
<script>
const myForm = document.querySelector("#myForm");
myForm.addEventListener("submit", function () {
event.preventDefault(); // 그냥 submit built-in 막기
var sAge = document.forms[0].sage.value;
if (sAge > 30) {
alert("안되용! 입장 불강");
return; // 종료
}
myForm.submit(); // 떤송 form의 submit 메소드 호출!
});
// true false를 이용한 전송/안 전송
function f_submit() {
var sAge = document.forms[0].sage.value;
if (sAge > 30) {
alert("안되용! 입장 불강");
return false;
}
return true;
}
</script>
<!--
빌트인 이벤트 ex) a 태그의 href의 get 방식 페이지 리다이렉트 이동 방식
내가 넣지 않은 기능인 built-in
-->
<!-- <a href="//naver.com" onclick="f_href()">Neighbor</a><br /> -->
<a href="#" onclick="f_href()">Neighbor</a><br />
<a href="javascript:void(0)" onclick="f_href()">Neighbor</a><br />
<button type="button" onclick="f_click1()">눌러방1</button>
<button type="button" id="myBtn2">눌러방2</button>
<button type="button" id="myBtn3">눌러방3</button>
<div id="grand" onclick="f_grand()">
나 할머닝
<div id="mom" onclick="f_mom()">
나 엄마
<div id="me" onclick="f_me()">나 서강민</div>
</div>
</div>
<script>
function f_href() {
event.preventDefault(); // built-in 기능 막깅
alert("민채는 LG냉장고!");
}
// 상위 객체 (parent) 에 이벤트가 전달되는 것을 이벤트 버블링이라 부른다.
// 이래서는 사생활이 보호가 안되서 삶이 힘들고 엄마 할머니랑 사이가 틀어질 수 있다.
function f_grand() {
alert("나 할미당");
}
function f_mom() {
event.stopPropagation(); // 이벤트 전파 막깅!, 이벤트 캡처링(capture)
alert("나 엄마양");
}
function f_me() {
event.stopPropagation(); // 이벤트 전파 막깅!
alert("나 강민이당");
}
// 이벤트 등록법 3가지
// inline, on이벤트명, addEventListener
const myBtn2 = document.querySelector("#myBtn2");
const myBtn3 = document.querySelector("#myBtn3");
// 등록법 3번, 권장 방식!!!
myBtn3.addEventListener("click", function () {
alert("김선욱 만만세");
});
myBtn3.addEventListener("click", function () {
alert("장낙훈 더 만만세");
});
myBtn3.addEventListener("click", function () {
alert("김영진 더더더 만만세");
}); // 3개의 이벤트가 모두 실행된다.
// 이벤트 큐에 등록되어 덮어쓰기 되지 않는다.
// 왜 추가됨? 프론트 영역이 커지면서 개발자들 간의 이벤트 중첩 현상이 많아짐.
// 다 자기 할일을 마음대로 추가할 수 있도록 리스너 이벤트로 인터페이스의 다중 상속 방식을 도입한 것.
// 등록법 2번, on이벤트명은 나중꺼이 아페꺼이를 더퍼버림(중요)
myBtn2.onclick = function () {
alert("나 최룡이얌");
};
myBtn2.onclick = function () {
alert("전 민균이에용"); // 이게 실행됨. 나중에 나온 코드가 앞의 코드를 덮어쓰기한다.
};
// 등록법 1번
const f_click1 = function () {
alert("난 일반적이얌, 디버깅에 편리하징");
};
</script>
</body>
</html>'대덕인재개발원_final project' 카테고리의 다른 글
| (6) 토요일 수업 1 (0) | 2023.12.23 |
|---|---|
| (5) 보강 3 (0) | 2023.12.22 |
| (3) 보강 1 (0) | 2023.12.20 |
| (2) 공통 모듈 : FullCalender (1) | 2023.12.08 |
| (1) 주제 선정 (0) | 2023.12.06 |
'대덕인재개발원_final project' Related Articles
more
