들어가기 전

프로그래밍 언어 추천받기 전,

내가 왜 코딩을 하려하는지, 무엇을 만들려고 하는지에 대한 기본적 방향은 잡혀있어야 합니다.

프론트엔드가 뭔지, 백엔드 정도는 알아야 언어를 추천받을 수 있습니다.

 

0: 개발직군에 대한 이해

개발에는 다양한 분야가 있습니다:

임베디드, 웹개발, 앱개발, 데이터분석 등으로 나눠지며 이 안에서도 또 세분화되며 세분화된 분야마다 다양한 특징들을 가집니다. 

 

개발이 처음이시라면 웹개발을 추천합니다!

앱이 더 낫지 않나요? 웹을 이해한다면 앱은 금방 배울 수 있으며, 앱에서도 웹개발 기술을 사용합니다.

웹개발은 비교적 낮은 단계의 수준 (네트워크 이해, 데이터베이스) 개발 난이도이지만 굉장히 많은 수요를 가집니다.

 

웹개발에는 주로

Python, Java, Javascript 를 사용하여 위 3가지 언어에 대해서만 살펴보겠습니다.

 

임베디드, VR(AR) : c++, c#

앱개발 : swift(ios), kotlin(android)

 

 

 

1: Java (백엔드) 

어려운 정도 : ★★★

취업진입 : ★★★☆

일자리수 : ★★★★★

대한민국은 자바 공화국이라고 불립니다. 대부분 전자정부프레임워크를 자바로 통일하여 자바만 알아도 신입으로 빠르게 취업이 가능합니다.

일자리가 엄청 많아서 빠른 취업이 가능합니다. 제대로 된 3년 정도 경력을 쌓는다면 이직도 편합니다.

백엔드를 하신다면 반드시 자바를 알고 계시는 게 좋습니다.

 

2: Javascript (프론트, 백엔드)

어려운 정도 : ★★☆

취업진입 : ★★★★

일자리수 : ★★★☆

* java랑은 아무런 관계가 없습니다. 사자와 바다사자 관계입니다.

유일한 프론트엔드 언어입니다. 백엔드(node.js)도 가능하며, 미디어아트(three.js , p5.js) 등 에도 사용되는 스크립트언어입니다.

백엔드 개발자도 제2언어로 배울정도로 프론트에선 javascript 가 유일하며, 활용도가 높습니다.

컴퓨터 비전을 공부 중인데 DL활용 웹 제작에는 파이썬 장고나, 자바스크립트 노드.js를 주로 쓴다고 합니다.

비전공신입취업 시장에서는 백엔드보다 프론트가 취업하기 유리합니다. (시장이 굉장히 빠르게 바뀝니다)

개인적으로 미래를 보고 웹 개발을 한다면 자바 보다는 자바스크립트를 추천하는 바 (23년 3월 기준).

 

 

 

 

3: Python (데이터, 백엔드)

어려운 정도 : ★★

취업진입 : ★★

일자리수 : ★★★ ~ ★★★☆

데이터-통계분야 (머신러닝, 딥러닝, AI)라면 반드시 배워야 하는 언어입니다.

백엔드(flask, Django) 가능하지만 주로 스타트업에서 사용합니다(대부분 경력직) 

이쪽 분야는 대게 석사 이상을 요구하고 일자리수가 적어 취업 진입이 쉽지 않습니다. 

(언어는 쉽지만 사용할 라이브러리가 수학적 지식을 많이 요함)

하지만, 언어가 쉽고 굉장히 간결하여서 코딩테스트용으로 많이 쓰입니다.

 

미래를 본다면 점점 더 각광받는 언어가 될 거라 생각합니다.

 

 


 

 

결론

나는 취업을 위해 코딩을 배울 것이다 : 자바

나는 프론트엔드로 취업을 할 것이다 +  도저히 뭘 배워야 할지 모르겠다 : 자바스크립트

나는 취미로 배우겠다 + 데이터 쪽으로 일할 것이다 : 파이썬

 

 

 

 

 

'P-Language' 카테고리의 다른 글

[객체지향] 객체지향의사실과오해  (0) 2023.02.07

리눅스 시스템의 부팅 과정

 

바이오스 단계

  • PC의 전원 스위치를 켜서 부팅하면 제일 먼저 바이오스(BIOS, basic input/output system)가 동작
  • 바이오스는 PC에 장착된 기본적인 하드웨어(키보드, 디스크 등)의 상태를 확인한 후 부팅 장치를 선택하여 부팅 디스크의 첫 섹터에서 512바이트를 로딩
  • 이 512바이트가 마스터 부트 레코드(master boot record, MBR): 2차 부팅 프로그램(부트 로더)의 위치 저장

 

 

< systemd 서비스 >

init 프로세스와 런레벨 (중요)

 

  • init 프로세스에서 사용하던 런레벨(Run Level)의 개념에 대한 이해 필요
  • init는 시스템의 단계를 일곱 개로 정의하여 구분하고 각 단계에 따라 셸 스크립트를 실행하는데, 이 단계들을 런레벨이라고 함

 

systemd 유닛 (데몬 = 서비스)

  •  systemd는 전체 시스템을 시작하고 관리하는 데 유닛(units)이라 부르는 구성 요소를 사용
  •  systemd는 관리 대상의 이름을 ‘서비스 이름.유닛 종류’의 형태로 관리 
  •  각 유닛은 같은 이름과 종류로 구성된 설정 파일과 동일한 이름을 사용

 

systemd의 기본 개념

systemd는 Centos7부터 본격적으로 기존의init 스크립트를 대체하기 시작

거의 대부분의 서비스가systemd기반 변경

systemd는 init 방식에 비해 가진 장점

  • •소켓 기반으로 동작하여inetd 와 호환성을 유지한다.
  • •셸과 독립적으로 부팅이 가능하다.
  • •마운트 제어가 가능하다.
  • •fsck 제어가 가능하다.
  • •시스템 상태에 대한 스냅숏을 유지한다.
  • •SELinux와 통합이 가능하다.
  • •서비스에 시그널을 전달할 수 있다.
  • •셧다운 전에 사용자 세션의 안전한 종료가 가능하다.

맥북의 경우

https://devlog.jwgo.kr/2019/07/03/how-do-i-check-if-a-service-is-running-in-mac/

 

 

 

'P-Language > [Linux]' 카테고리의 다른 글

[Linux] 프로세스의 개념  (0) 2022.12.01
[Linux] 특수 접근 권한  (0) 2022.12.01

프로세스: 현재 시스템에서 실행 중인 프로그램

프로세스의 부모-자식 관계

  • 프로세스는 부모-자식 관계를 가지고 있음
  • 필요에 따라 부모 프로세스(parent process)는 자식 프로세스(child process)를 생성하고, 자식 프로세스는 또 다른 자식 프로세스 생성 가능
  • 부팅할 때 스케줄러가 실행한 프로세스인systemd와 kthreadd프로세스를 제외하면 모든 프로세스는 부모 프로세스를 가지고 있음
  • 자식 프로세스는 할 일이 끝나면 부모 프로세스에 결과를 돌려주고 종료

 

프로세스의 번호 : 각 프로세스는 고유한 번호(PID)

 

프로세스의 종류

  • 데몬 프로세스(HTTP, SSH)
    • 특정 서비스를 제공하기 위해 존재하며 리눅스 커널에 의해 실행
  • 고아 프로세스(systemd - 보통 1번 프로세스)
    • 자식 프로세스가 아직 실행 중인데 부모 프로세스가 먼저 종료된 자식 프로세스는 고아(orphan)프로세스
    • 1번 프로세스가 고아 프로세스의 새로운 부모 프로세스가 되어 고아 프로세스의 작업 종료 지원
  • 좀비 프로세스
    • 자식 프로세스가 실행을 종료했는데도 프로세스 테이블 목록에 남아 있는 경우
    • 좀비 프로세스는 프로세스 목록에defunct프로세스라고 나오기도함
    • 좀비 프로세스가 증가하면 프로세스 테이블의 용량이 부족해서 일반 프로세스가 실행되지 않을 수도 있음

 

SID 

UUID : 장치의 고유번호

 

 

프로세스 목록 보기

현재 실행 중인 프로세스의 목록을 보는 명령: ps

  • 유닉스 (SVR4)옵션 : 묶어서 사용할 수 있고, 붙임표로 시작한다(예 : -ef).
  • BSD 옵션 : 묶어서 사용할 수 있고, 붙임표로 시작하지 않는다(예 : aux).
  • GNU 옵션 : 붙임표 두 개로 시작한다(예 : --pid).

 

포그라운드 작업

  • 포그라운드 프로세스: 사용자가 입력한 명령이 실행되어 결과가 출력될 때까지 기다려야 하는 포그라운드 방식으로 처리되는 프로세스
  • 이를 작업 제어에서는 포그라운드 작업이라고 함
  •  
sleep 100 -> 포그라운드 작업 / sleep 명령이 끝날 때까지 기다려야 한다.

백그라운드 작업

  • 백그라운드 프로세스: 명령을 실행하면 명령의 처리가 끝나는 것과 관계없이 곧바로 프롬프트가 출력되어 사용자가 다른 작업을 계속할 수 있음
  • 작업 제어에서는 백그라운드 작업이라고 함
sleep 100 & -> 백그라운드 작업 
바로프롬프트 나옴			/ 프롬프트가 바로 나와 다른 명령을 실행할 수 있다.

다른 작업하는 동안 그 작업을 연산중 (병렬처리와 비슷)
이전 백그라운드 작업 결과가 언제나올지 모르니 리다이렉트 해주는게 좋음

 

<포그라운드, 백그라운드 프로세스와 작업 제어>

작업 제어

  • 작업 제어는 작업 전환과 작업 일시 중지, 작업 종료를 의미
  • 작업 전환: 포그라운드 작업-> 백그라운드 작업  // 백그라운드 작업->포그라운드 작업으로 전환
  • 작업 일시 중지: 작업을 잠시 중단
  • 작업 종료: 프로세스를 종료하는 것처럼 작업을 종료

 

@ jobs

- 기능 : 백그라운드 작업을 모두 보여줌, 특정 작업 번호를 지정하면 해당 작업의 정보만 보여줌

- 형식 : jobs %작업번호

 

ctrl + c 강제종료 인터럽트

ctrl + d 정상종료

ctrl + z 또는 stop %작업 번호 포그라운드 작업을 일시 중지함

bg %작업 번호 : 백그라운드로 작업시작

fg %작업 번호 : 포그라운드로 작업시작

 

 

작업 예약 

특정한 시간에 작업을 수행하도록 예약할 수 있는 두 가지 방법

  • 정해진 시간에 한 번만 수행 at
  • 정해진 시간에 반복 수행 crontab

at [옵션][시간]

  • - l 실행대기 중 명령의 전체 목록을 출력 (atq 명령과 동일)
  • -r 작업번호
  • -m 메일로알려줌
  • -f 실행할 명령을 파일로 지정

crontab [-u USERID][옵션][파일명]

  •  -e 로그인한 사용자로 예약.
  • -l crontab 파일의 목록을 출력한다.
  • -r crontab 파일을 삭제한다.

'P-Language > [Linux]' 카테고리의 다른 글

[Linux] 리눅스 시스템의 부팅  (0) 2022.12.01
[Linux] 특수 접근 권한  (0) 2022.12.01

 

특수 접근 권한

  • 접근 권한은 원래 4자리
  • 생략된 맨 앞자리는 특수 접근 권한 의미
  • 맨 앞자리 숫자가 0이면 일반적인 접근 권한이지만 이 숫자가 1, 2, 4이면 특수 접근 권한이 설정

 

  • SetUID : 맨 앞자리가 4
  • SetGID : 맨 앞자리가 2
  • 스티키 비트(sticky bit) : 맨 앞자리가 1

SetUID : 해당 프로그램을 실행하는 사용자가 프로그램을 실행하는 동안 임시로 파일의 소유자의 권한으로 프로그램을 수행

 

SetGID : 해당 프로그램을 실행하는 사용자가 프로그램을 실행하는 동안 임시로 파일의 소속 그룹의 권한으로 프로그램을 수행

 

777 ->  rwx/rwx/rwx

-> setuid : rws/rwx/rwx (소유자쪽에 s라 표시)

-> setgid : rwx/rws/rwx  (그룹쪽에 s라 표시)

 

특수 접근 권한 왜 필요해?

 

root 계정이 아니라 / 다른 계정일 경우 rwx/- /- 는 실행할 수 없다.

하지만 Setuid rws/-/-  인 경우 임시로 실행가능

 

설정하는 방법

<기호방식> (심볼릭방식)

setuid  : chmod u+s 파일이름

setgid : chmod g+s 파일이름

 

<숫자모드> (8진수방식)

setuid  : chmod 4755 파일이름

setgid : chmod 2755 파일이름

 

setuid/setgid는 보안에 취약하다 파일관리가 필요하다 / 메인관리자가 아닌 일반 

 

 

 

sticky bit(파일에 설정 못함, 디렉토리에만 설정가능) : 해당 특수 권한이 설정된 디렉토리 내에 생성된 파일들은 소유자와 root외 다른 사용자는 삭제하지 못한다.

디렉토리에 쓰기 권한이 있는 경우 디렉토리에서 파일을 만들고 삭제하고 수정할 수 있다.

: 게시판이라 생각하면 쉬움 / A가 쓴글을 B가 못지움

 

setuid 파일 찾기 : find / -perm -4000 

setgid 파일 찾기 : find / -perm -2000

sticky bit 파일 찾기 : find / -perm -1000

setuid and setguid 파일 찾기 : find / \( -perm -4000 -o -perm -2000 \) -ls

 

 

'P-Language > [Linux]' 카테고리의 다른 글

[Linux] 리눅스 시스템의 부팅  (0) 2022.12.01
[Linux] 프로세스의 개념  (0) 2022.12.01

DB 쿼리문을 돌려야하므로 테스트 실행불가

 

 

 

<form>
	<input type="text" name="u_id" />
	<input type="button" value="아이디 중복 확인" onclick="openConfirmId(this.form)"/>
 </form>
    
    
  <script>
    function openConfirmId(inputForm) {
	         if(inputForm.u_id.value == ""){
	            alert("아이디를 입력하세요.");
	            return;    // 이 함수 강제종료
	         }
	         // 검사 팝업 열기 
	         let url = "confirmId.jsp?u_id=" + inputForm.u_id.value;         
	         open(url, "confirmId", "width=300, height=200, toolbar=no, location=no, status=no, menubar=no, scrollbars=no, resizable=no"); 
	      }
  </script>

 

 

 

 

// confirmId.jsp



<%@page import="team.user.model.UserDAO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>아이디 중복확인</title>
</head>
<%
	request.setCharacterEncoding("UTF-8"); 
	// open(url...) : url = confirmId.jsp?u_id=값
	String u_id = request.getParameter("u_id");
	// DB 연결해서 사용자가 작성한 id값이 db테이블에 존재하는지 검사 
	UserDAO dao = new UserDAO(); 
	boolean result = dao.confirmId(u_id); // true 이미존재함, false 존재X -> 사용가능 
%>
<body>
<%
	if(result) { // true -> 이미 존재 -> 사용불가  %>
	<br />
	<table>
		<tr>
			<td><%= u_id%>은/는 이미 사용중인 아이디 입니다.</td>
		</tr>
	</table> <br />
	<form action="confirmId.jsp" method="post">
		<table>
			<tr>
				<td> 다른 아이디를 선택하세요. <br />
					<input type="text" name="u_id" /> 
					<input type="submit" value="아이디 중복확인" />
				</td>
			</tr>		
		</table>
	</form>
		
<%	}else { // false -> 존재 X -> 사용 가능 %>
	
	<br />
	<table>
		<tr>
			<td>입력하신 <%= u_id%>은/는 사용 가능합니다. <br />
				<input type="button" value="닫기" onclick="setU_id()" />
			</td>
		</tr>
	</table>
		
<%	}%>

	<script>
		function setU_id() {
			// 팝업을 열어준 원래 페이지의 id input태그의 value를
			// 최종 사용할 id로 변경. 
			opener.document.inputForm.u_id.value = "<%= u_id%>";
			// 현재 팝업 닫기. 
			self.close(); 
		}
	</script>
</body>
</html>
// DAO 쿼리문 매서드 


public boolean confirmId(String u_id) {
			boolean result = false;
			int u_idCount = 0;
			Connection conn = null; 
			PreparedStatement pstmt = null;
			ResultSet rs = null; 
			
			try {
				conn = getConnection(); 
				String sql = "select count(*) from signup where u_id=?";
				pstmt = conn.prepareStatement(sql);
				pstmt.setString(1, u_id);
				rs = pstmt.executeQuery();
				if(rs.next()) {
					u_idCount = rs.getInt(1);
					System.out.println("u_idCount : " + u_idCount);
					if(u_idCount == 1) {
						result = true;
					}
				}

				
			}catch(Exception e) {
				e.printStackTrace();
			}finally {
				if(rs != null) try { rs.close();} catch(SQLException e) { e.printStackTrace(); }
				if(pstmt != null) try { pstmt.close();} catch(SQLException e) { e.printStackTrace(); }
				if(conn != null) try { conn.close();} catch(SQLException e) { e.printStackTrace(); }
			}
			
			return result;
		}

체크박스 선택시 제출버튼 활성화

 

 

 

 

 

 

 

Insert title here
[필수] 체크해야 제출가능

 

 

 


<form action="#" method="#" name="#" enctype="multipart/form-data" onsubmit="#">
	<input type="checkbox" name="agreements" onClick="agreeCheck(this.form)"> [필수] 체크해야 제출가능
	<input type="submit"  name="checkButton" value="등록하기"  disabled/>
</form>

<script>
    function agreeCheck(frm){
               if (frm.checkButton.disabled==true)
                frm.checkButton.disabled=false
               else
                frm.checkButton.disabled=true
     }
</script>

 

 

여러개의 경우

https://codesandbox.io/s/agreement-l5uc6?file=/src/index.js

버튼에다가 alert만 띄우면 파라미터가 넘어가질 않는데

 

submit에 alert 효과 만들기

 

<form action="#">
	<input type="text"/>
	<input type="file"/>
    <input type="submit" value="수정하기" onClick='return confirmSubmit()'/>
</form> 
    
    
    <script>
		function confirmSubmit()
		{
		var agree=confirm("정말 수정하시겠습니까?");
		if (agree)
			return true ;
		else
			return false ;
		}
	</script>

 

 

 

[day18]

 

 

  1. Network

1) 네트워크  :  데이터를 전송할 수 있는 통신망, 전자장비들의 집합, 장비와 장비를 연결한 것.

 

노드 Node : 네트워크에 연결된 모든 장치들

호스트 Host : 노드에게 하나 이상의 서비스를 제공해주는 노드

-> 데이터 주고 받기 위해 존재 (통신)

-> 통신을 하려면 약속이 필요함 : protocol : 데이터 전송 규약

 

유형 : 네트워크 크기와 용도에 따라 LAN, WAN으로 구성

 

LAN Local Area Network : 지역망 ( 작은 망)

통신 주체인 자신과 “동일한” 네트워크간의 통신을 의미하며

작은 범위로 구성된다 -> 스위치

통신장비 : NIC(랜카드), T/P cable, Switch 

통신 프로토콜 : Ethernet < FastEthernet < GigabitEthernet

통신주소 : Mac-address : 물리주소 

 

 

 

WAN Wide Area Network : 큰망

내부 -> 외부로 통신할때 

일반적으로. ISP(kt, sk…..)로 부터 임대회선을 사용하기 때문에 구축비용은 감소하지만 통신 및 유지/보수 비용이 증가

 

자신이 포함되지 않은 “외부” 네트워크 구간을 의미하며, 비교적 큰 범위로 구성된다.

 

대표장비 : Router 라우터

통신프로토콜 : IPv4 (Internet Protocol version4)

통신주소 : IP address : 논리주소

 

 

 

 

 

 

2) IP address : Internet Protocol Address

: 통신을 하는 모든 기계는 네트워크상에서 유일하게 자신을 식별 할 수 있는

“고유주소”를 가지고 있다.

IP 주소는 32비트의 이진수로 구성, 보통 8비트 씩 4부분으로 나누어 십진수로 표현

ex)192.168.100.74

 

숫자로 된 주소는 기억하기 어려우므로 www.naver.com 과 같은 문자열로 구성된

도메인 이름으로 바꿔서 사용한다.

사용자가 도메인 이름으로 페이지를 요청하면,

DNS(Domain Name System) 서버에 의해 숫자로 구성된 IP 주소로 자동 변환.

 

IPv4 : 4개의 숫자로 구성된 32비트의 IP 주소

IPv6 : 128비트로 구성 

 

IP조수 확인 : Cmd - > ipconfig (요약)

ipconfig -all (자세히)

 

3) Port : 데이터를 주고받는 통로, 여러개의 서비스를 해줄 때

서로 충돌이 나지 않도록 포트를 구분해서 만들어 놓음.

포트번호는 개발자가 임의로 선택해 사용할 수 있으나,

기존 응용 프로그램에서 사용하는 번호나 시스템 포트 번호는 피하는 것이 좋다.

잘 알려진 포트번호 : HTTP = 80, FTP = 21, Telnet = 23

기존 잘 알려진 포트는 0 ~ 1023 사이번호를 가지며,

사용자 지정하는 번호는 이 범위를 피해서 선택하도록

 

 

윈도우 cmd > netstat -a

    맥.  sudo lsof -PiTCP -sTCP:LISTEN. https://velog.io/@taelee/%ED%98%84%EC%9E%AC-%EC%97%B4%EB%A0%A4%EC%9E%88%EB%8A%94-%ED%8F%AC%ED%8A%B8-%ED%99%95%EC%9D%B8mac)

 

 

4) Protocol : 통신 규약

컴퓨터간에 정보를 주고받을 때의 통신 방법에 대한 규칙과 약속

대표적인 표준 프로토콜의 예는 인터넷에서 사용하는 TCP/IP가 이에 해당한다.

 

5) 데이터 전송 방식

: IP 프로토콜 위에서 동작 

# 1.  TCP Transmission Control Protocol

연결형 서비스를 제공함. 신뢰성 높음.

ex) download

데이터 전송시 세그먼트 블록단위로 분할해 전송하고,

하나 전송하고 받는쪽에서 잘 받았다는 ACK 신호를 보내면

다음 블록을 전송.

 

# 2. UDP User Datagram Protocol

비연결형 서비스를 제공. 빠른 전송. 신뢰성 떨어짐

ex) streaming service

전송한 데이터가 목적지 까지 제대로 도착했는지 확인하지 않는다.

 

6) OSI 7 계층 : 모든 네트워크 통신에서 생기는 여러가지 충돌 문제를 완화하기 위하여

국제 표준기구(IOS)에서 표준화된 네트워크 구조를 제시한 기본 모델

https://shlee0882.tistory.com/110

 

2. Java.net (더 좋은게 있어서 잘 안쓴다)

InetAddress 클래스

: 자바에서 IP다루기 위한 클래스

URL 클래스

: 자바에서 URL을 다루기 위한 클래스

프로토콜 :  //호스트명:포트번호/경로명/파일명?쿼리스트링# 참조  

 

https://isplus.joins.com/2022/05/27/enter/entertainment/20220527085428908.html : URL

 

포롴토콜 : HTTPS, HTTP     https=443. http =80

ip(호스트명) : 도메인 주소 

포트번호 : 443 생략

경로명 : 접근하려는 자원이 저장된 서바상의 위치 : contect path, 루트 컨텍스트

파일명 : 접근하려는 페이지 이름

쿼리스트링 : ? 뒷부분 ( 데이터 문자형태로 전송 파라미터명 =값&파라미터명 = 값..)

 

URL !=URI

 

 

3.소켓 프로그래밍

: 소켓을 이용한 통신 프로그래밍

소켓 = 통신하는 두 응용 프로그램간의 통신 링크 각 끝단 (endpoint)

TCP/IP 프로토콜을 따르며, TCP/UDP 방식이 있다. 

 

1) TCP 소켓 : 클라이언트( 사용자, 요청자)와 서버(서비스 제공자, 호스트) 간의 1 : 1 통신

통신은 서버가 먼저 클라이언트의 접속을 기다리고, 클라이언트가 서버에 접속을 하면,

그때부터 서로 데이터를 주고 받을 수 있다.

 

 

 

 

 

 

(1) 서버 프로그램에서 포트와 연결된 서버소켓을 사용하여 클라이언트 연결 요청을 처리할 준비함.

(2) 클라이언트 프로그램은 접속할 서버의 IP주소와 포트번호를 가지고 서버소켓을 생성해서 서버에 연결 요청

서버 소켓은 클라이언트 연결을 요청받아, 서버에 새로운 소켓을 만들어 클라이언트 소켓과 연결되도록 한다.

(3) 클라이언트 끼리 서버를 통해 데이터를 주고 받는다.

(4) 연결해제

[day17]

 

  1. 입출력 : java.io 패키지

IO = I/O = input/output 

 

  1. File 클래스 : java.io.File

  : 크기, 생성, 삭제, 변경 등등 내용 관리 가능

입출력 X 

 

1) 생성자

File(String pathname) :  파일확장자명을 포함한 전체 경로를 문자열로 주며 생성

File(File parent, String child) : parent(부모) 디렉토리안에 child 이름의 서브디렉토리나 파일을 나타내는 객체생성

File(String parent, String child) : parent(부모) 디렉토리안에 child 이름의 서브디렉토리나 파일을 나타내는 객체생성

 

File(URI uri) : file:URI를 추상경로명으로 변환하여 객체생성 

 

 

2) 객체 생성

File 참조 변수명 = new File(“전체 경로”);

c: [temp]-test.txt

File(String pathname) -> File f = new File(“c:\\temp\\test.txt);

File(String parent, String child) -> File f = new File(“c:\\temp”, “test.txt”);

* 파일은 확장자명까지 표기

 

3) 주요 메서드++

boolean mkdir() :  새로운 디렉토리(폴더) 생성

boolean createNewFile() : 빈 파일 생성. 생성하려는 파일이 이미 존재하면 생성X

String[] list() : 디레고리내의 파일과 서브 디렉토리 목록을 문자열 배열로 리턴

File[] listFiles() : 디레고리내의 파일과 서브 디렉토리 목록을 File 객체로 리턴

boolean delete() : 파일 또는 디렉토리 삭제

boolean renameTo(File dest) : dest 경로명으로 파일 이름(경로) 변경

long length() : 파일 크기 리턴

String getPath() : 경로 문자열로 리턴

String getAbsolutePath() : 절대경로를 문자열로 리턴

String getParent() : 파일이나 디렉토리의 부모디렉토리 이름 리턴

String getName() : 파일이나 디렉토리의 이름 문자열 리턴

boolean isFile() : 파일이면 true 

boolean isDirectory() : 디렉토리면 true 

long lastModified() : 마지막 변경시간 리턴

boolean exists() : 파일 또는 디렉토리가 존재하면 true

 

 

 

 

  1. Stream 스트림 ( 와이파이라 생각하면 쉬움)

: 데이터가 돌아다니는 통로 (선) -> 데이터를 목적지로 I/o 하기 위한 방법.

 

- 스트림은 다른 목적지로 데이터를 보낼때 가장 중요한 역학을 한다. 

- 스트림은 단 방향 : input 따로 output 따로

- 자바 응용 프로그램은요 입력 스트림과 출력스트림과만 연결을하고, 

입출력장치 제어하고 실질적인 입출력처리는 스트림이 진행한다.

 

입력장치 or 파일 ——> 입력 스트림 ——-> 자바 응용 프로그램

출력장치 or 파일 <——출력스트림 ——— 자바 응용프로그램

 

- 스트림을 통해 흘러가는 기본 단위는 바이트나 문자이다.

자바 스트림 객체는 바이트 단위로 입출력하는 바이트 스트림과

문자 단위로 입출력하는 문자 스트림으로 나뉜다.  

바이트 스트림을 다루는 클래스는 공통적으로 뒤에 Stream 붙고

문자 스트림을 다루는 클래스는 공통적으로 뒤에 Reader/Writer가 붙어 구분 가능.(문자하나 2바이트 취급)

 

- close() : 스트림을 열었으면 사용 후 반드시 닫아줘야 메모리 누수가 안된다, 

 

 

 

  1. 바이트 스트림

- 바이트 단위로 데이터 전송 (바이너리 데이터가 흐르는 스트림)

- 다양한 클래스 제공으로 용도에 맞게 골라 사용

- 이미지, 동영상 등 전송 가능

 

***1) InputSteam, OutputSream ***

: 추상 클래스. 바이트 단위 입출력 처리를 위한 공통기능을 가진 수퍼 클래스

 

 

2) FileOutputStream

: 파일에 출력을 하기 위한 클래스

파일에 바이너리 데이터를 저장할 수 있다.

바이너리 파일은 사람이 읽고 해석하는것이 거의 불가능. 

 

 

#1. 생성자

FileOutputStream(File file) : file이 지정하는 파일에 출력 스트림 생성

FileOutputStream(String name) : name이 지정하는 파일에 출력 스트림 생성

FileOutputStream(File file, boolean append) : append가 true면 파일 마지막부터 데이터 저장

FileOutputStream(String name, boolean append) : append가 true면 파일 마지막부터 데이터 

 

#2. 주요 메서드

void write(int b) : int 형으로 넘겨진 바이트 한개 출력

void write(byte[] b) : 배열 b의 바이트를 모두 출력

void write(byte[] b, int offset, int Len) : Len 크기만큼 offset 부터 배열 b를 출력

void flush() : 출력스트림에 남아있는 바이너리 데이터 모두 내보내기

void close() : 출력스트림 닫고, 관련된 시스템 자원 해제

 

3) FileInputStream

: 바이트 스트림으로 파일 읽는 스트림 클래스

 

#1. 생성자 

FileInputStream(File file) : file이 지정하는 파일로부터 읽어오는 스트림 생성

FileInputStream(String name) : name 지정하는 파일로부터 읽어오는 스트림 생성

 

#2. 주요 메서드

int read() :입력 스트림에서 한 바이트 읽어 int형으로 리턴

int read(byte[] b) : 최대 배열 b의 크기 만큼 바이트를 읽음

int availble() : 현재 읽을 수 있는 바이트 수 리턴

void close() : 스트림 닫고 관련 시스템 자원 해제

 

#EOF : End of File 파일의 끝

read()할때 EOF를 만나면 -1을 리턴

 

* read()의 리턴이 int 형인 이유

byte 0xFF(-1)

byte값 -1 int 로 리턴 : 0x000000FF 리턴

EOF -1 리턴 : 0xFFFFFFFF리턴 (32비트)

 

4) DataInput/OutputStream

: boolean, char, byte 등 기본타입의 값을 바이너리 형태로 출력.

바이너리 형태를 기본값으로 읽어옴

각 자료형에 맞는 값들을 입력/ 출력할 수 있는 메서드들이 존재

 

5) ObjectInputStream / ObjectOutputStream.  (잘 안쓴다 )

: 객체를 스트림에 입/출력하는데 사용하는 클래스

보조 스트림으로 사용

 

 

  1. 문자 스트림

- 자바형에서는 char형이 2바이트이기 때문에, 한글과 같은 2바이트 문자는 바이트 스트림으로 전송시 깨지는 경우가 있다.

이러한 점을 보완하기 위해 문자 스트림 제공

- 문자화되지 않는 바이너리 값은 처리불가 -> 이미지 같은것 처리불가

- 클래스들의 이름이 Reader/Writer로 끝남

- 메서드 리턴타입을 잘 보면 byte[]가 아닌 char[]을 사용하는것을 볼 수 있다.

 

1) Reader / Writer

:문자 스트림 클래스들의 부모. 추상클래스

 

2) OutputStreamWriter

: 파일에 텍스트데이터를 저장할 때 생성자 인코딩 지정하여 처리가능

인코딩을 지정하지 않으면 OS에서 디폴트로 사용하는 인코딩으로 데이터 저장.

 

#1 생성자 ( api 문서 참고)

charset = encoding : 문자셋

 

 

 

#2 주요 메서드 (바이트 스트림참고)

String getEncoding() : 인코딩값 리턴

void flush() : 스트림 비우기 ( 닫기전에 호출하기)

 

 

 

 

3) InputStreamReader

: 바이트 스트림을 문자 스트림으로 연결시켜주는 역할을 하는 보조 스트림

바이트 스트림의 데이터를 지정된 인코딩의 문자 데이터로 변환하는 작업 수행

 

#1 생성자 (api 문서 참고)

#2 주요메서드 (바이트 스트림 참고)

String getEncoding() : 인코딩값 리턴

 

  # 윈도우에서 사용하는 인코딩

MS949 :  마이크로소프트사에서 한글 국가 표준 코드를 확장해서

MS949라고 불리는 코드 체계를 만들고

윈도우 기본 문자 체계로 사용함.

 

 

4) BufferedReader

: 버퍼를 이용해서 입력의 효율을 높일 수 있도록 해주는 역할

readLine() 을 사용해서 데이터를 라인단위로 읽어 올 수 있다.

 

BufferedReader + InputStreamReader -> Scanner

 

 

6. OS

: 하나의 소프트웨어로, 소프트웨어들을 관리하는 소프트웨어(App)

windows, linux, iOS,  android, unix, MacOS

 

자바 -> JVM : 자바 App을 관리하는 소프트웨어

 

 

7. Thread 스레드

1) 프로세스 process

현재 실행중인 프로그램이다.

프로그램이 실행하면 OS로 부터 실행에 필요한 자원(메모리) 를 할당받아 프로세스가 된다.

프로세스 = 프로그램을 수행하는데 필요한 메모리 같은 자원 + 스레드

자원을 이용하여 “실제로 작업을 수행하는것이 스레드” 이다.

 

싱글 프로세스 = 하나의 프로그램을 돌리기위해 1개의 프로세스가 실행되는것.

멀티 프로세스 = 하나의 프로그램을 돌리귀해 여러 프로세스가 실행되는것.

 

2) 멀티태스킹 multitasking : multi + tasking

태스크 task = 프로세스가 하는 일

태스킹 = 포로세스가 일을 하는것

멀티태스킹 = 하나의 프로세스가 여러일을 하는것

 

 

3) 스레드 thread

하나의 태스크를 수행하는 일꾼

프로세스 = 공장(자원 + 일꾼), 스레드 = 일꾼 

싱글스레드 = 자원 + 일꾼

멀티 스레드 = 자원 + 일꾼 + 일꾼 ….

둘 이상의 스레드를 가지고 있는것을 멀티스레드 프로세스라고 부른다

(multi-thread process)라 부른다.

 

하나의 프로세스가 가질 수 있는 스레드의 개수는 제한되어있지는 않으나

스레드가 작업을 수행하는데 개별적인 메모리 공간을 필요로 하므로

프로세스의 메모리 한계에 따라 생성될 수 있는 스레드의 수가 결정된다,

 

4) 멀티태스킹과 멀티스레딩

멀티태스킹을 실현하기 위한 2가지 방법

- 멀티 프로세싱  : 하나의 프로그램을 여러개의 프로세스로 구성 

-> 각 프로세스가 하나의 작업을 처리하도록

-> 단점 : 프로세스간 변수 공유 X -> 통신으로 공유해야함

통신이 어렵고, 문맥교환에 따른 과도한 작업량 소요될수도..

 

 

- 멀티 스레딩 : 하나의 프로그램을 동시 처리 가능하게 작업을 분할하고 

작업의 개수만큼 스레드를 생성, 스레드 하나당 하나의 작업처리하게함

자원과 메모리 공유, 문맥교환 빠름

 

활용분야

- 웹서버 시스템

- 워드, 한컴

 

5) 자바의 멀티스레딩 

JVM이 알아서 한다.

8. 스레드 만들기

# 개발자가 할일 

1) 스레드 할일 코드로 작성

2) JVM에게 스레드 생성하고 코드 실행하도록 요청

 

# 구현방법

1) Thread 클래스 상속받아 스레드 만들기

java.lang.Thread

# 1. 생성자 (문서참고)

# 2.  주요 메서드

void run() : JVM에 의해 호출 (핵심 메서드)

스레드가 해야할 작업을 구현해놀는 메서드 

개발자는 반드시 이 메서드 오버라이딩하여 스레드가 할일을 코드로 작성햐야함

이 메서드가 종료하면 스레드도 종료.

 

void start() : JVM에게 스레드 실행하도록 요청하는 메서드

void interrupt() : 스레드 강제 종료

static void yield() : 다른 스레드에게 실행을 양보

void join() : 스레드 종료할때까지 기다린다.

long getId() : 스레드 id값 리턴

String getName() : 스레드 이름 리턴

int getPriority : 스레드의 우선순위값 리턴 1~10사이 값

void setPriority(int n) : 스레드의 우선순위 n으로 변경

Thread.State getState() : 스레드의 상태값 리턴

static void sleep(long mills) : mills 밀리초동안 스레드 잠재우기

static Thread currentThread() : 현재 실행중인 스레드 객체의 레퍼런스 리턴

# 1. 스레드 클래스 상속 받은 클래스 작성

# 2. run() 메서드 오버라이딩 : 스레드가 할일 작성

# 3. 스레드 객체 생성

# 4. 스레드 시작 : start() 호출

 

 

2) Runnable 인터페이스 구현 

java.lang.Runnable

 

# 1. Runnable 인터페이스 구현하는 클래스 선언

# 2. run() 오버라이딩 : 스레드가 할일 작성

# 3. 객체 생성

Thread th = new Thread(new 우리가 만든 클래스명());

# 4. 스레드 시작 : start()

 

 

 

9. 스레드 생명 주기

1) 스레드 상태

Thread Life Cycle : 스레드 생명 주기 갖고 있고, 상태 6가지로 표현

 

NEW : 스레드 탄생. new Thread()

RUNNABLE : 스레드가 현재 실행되고 있거나, 실행 준비되어 스케줄링 기다리는 상태

WIMED_WAITING : 스레드가 sleep(n)을 호출하여 n 밀리초 동안 기다리면서 멈춘 상태.

BLOCK : 스레드가 I/O 작업을 실행하여 I/O 완료기다리면서 멈춘 상태

WAITING : 스레드가 어떤 객체에 대해 wait() 호출하여; 다른 누가 notify()로 깨워줄때 까지 무한정 기다리는 상태

 

TERMINATED :  스레드 종료한 상태

 

17. 이벤트 등록
1) 이벤트 등록 방법
addEventListener() 를 이용하여 요소에 이벤트 등록

타켓.addEventListener("이벤트종류",function(){});
이벤트 종류
load : 로딩이 완료 되었을때
resize : 윈도우창 크기 변경되었을때

keydown
keyup

change
click
focus
mousedown
mouseup
mouseout
mouseover
mousemove

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>
    </title>
</head>
<body>
  <button class="btn"> 클릭 </button>
  <button onclick="clickFunc()"> 클릭 2</button>
   <script> // 17 이벤트 등록
  
//@1 자바스크립트로 이벤트 등록
       const btn = document.querySelector(".btn");
       btn.addEventListener("click",function(){
           alert("버튼클릭");
       });
       
//@2 <button onclick="alert('버튼클릭)">클릭</button> 과 동일

//@3
       function clickFunc(){
           for(let i = 0; i <10; i++){
               if(i%2 ==0){
                   console.log("helloo"+i); 
               }
           }
       }
       
    </script>
    
</body>
</html>

16. 문서 객체 모델 (DOM, Document Object Model) : DOM 트리 

문서 노드  : 전체 문서를 가르키는 Document 객체
HTML 요소 노드 : HTML 요소를 가르키는 객체
텍스트 노드 : 텍스트를 가르키는 객체




# 노드 객체 가져오는 메서드 
document.getElementById(id값) : id 속성값으로 노드 가져오기
document.getElementsByTageName(name) : 태그명으로 노드 찾기 (배열로 리턴)
document.getElementsbyClassName(name) : class 속성값으로 노드 가져오기 (배열로 리턴)
document.querySelector(css선택자) : css 선택자로 노드 찾기 (첫번째 찾은 요소만 리턴)
document.querySelectorAll(css선택자) : css 선택자로 노드 찾기 (모든요소 배열로 리턴)

<h1>hello</h1>
# 찾은 HTML 요소 확인/수정
요소.innerText = '대치할 새로운 텍스트' : 요소 안의 내용 확인/ 수정 (태그 미포함)
요소.innerHTML = '새로운 HTML 내용' : 요소 안의 내용 확인/ 수정 (태그 포함)
요소.attribute = 새값 : 요소의 속성값 수정
요소.setAttribute(속성명, 값) : 요소의 속성값 메서드로 설정


# HTML 요소 생성/추가
document.creatElement(태그명) : HTML 태그 생성
document.appendChild(요소) : 요소 추가하기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div class="first"> div 1 
          <div>1-1</div>
          <div>1-2</div>
          <div>1-3</div>
          <div class = "test"> test div</div>
      </div>
       
        <div id ="second"> div 2</div>
        <div id ="third"> div 3</div>
        <script>   
        
            let elem0 = document.getElementsByTagName('div'); // 태그 div 로된 모든 노드 출력  
            
            let elem1 = document.getElementsByClassName('first'); // 클래스 first 로된 노드 출력 
                console.log(elem0); // HTMLCollection(7) [div.first, div, div, div, div.test, div#second, div#third, second: div#second, third: div#third]
                console.log(elem1); // HTMLCollection [div.first]
            let elem2 = document.getElementById('second');
                console.log(elem2);
    
            let elem3 = document.querySelector('div.test');
                console.log(elem3);
    
            let elem4 = document.querySelectorAll('div');
                console.log(elem4);  //NodeList(7) [div.first, div, div, div, div.test, div#second, div#third]
                for(let i = 0; i<elem4.length; i++){
                console.log(elem4[i].innerText); // 글자만 가져오기
                }
                for(let i = 0; i<elem4.length; i++){
                console.log(elem4[i].innerHTML); // html 다가져오기
                }
    
                    
    </script>
</body>    
</html>

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width : 100px;
            height: 100px;
            text-align: center;
        }
    
    </style>
</head>
<body>
       <h1>hello</h1>
       
       <script> // 16번 
        const newTag = document.createElement('div'); // div태그 스크립트로 생성
           newTag.innerText = 'JavaScript';
           newTag.setAttribute("class","box");
           newTag.style.background = "red";
           newTag.style.color = "white";
           
          document.body.appendChild(newTag);

        </script>

</body>
</html>

4) history 객체
: 브라우저에서 뒤로가기 앞으로가기 기능을 코드로 실행시키는 기능 제공

# 속성들 메서드
back() : 뒤로가기
forward() : 앞으로가기
go(이동숫자) : 이동 숫자를 -2로 입력하면 뒤로가기 2번 / 양수이면 앞으로가기

5) navigator 객체
: 현재 사용자의 브라우저 정보와 운영체제 정보를 제공

# 속성
appVersion : 사용자 브라우저 버전 정보 리턴
language : 사용자 브라우저가 사용하는 언어. 한글 'ko'
product : 사용자 브라우저 엔진 이름.
platform : 사용자 컴퓨터 운영체제 정보 제공.
onLine : 사용자 온라인 상태 여부 제공.
userAgent : 사용자 브라우저와 운영체제의 종합 정보 제공

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>
    </title>
</head>
<body><!-- 15-4 -->
           <h1> page 1</h1>
           <button onclick = "location.href='js25.html'"> 2 page로 이동</button>
           <button onclick="history.forward()"> 앞으로가기</button>
           <button onclick="history.go(1)"> 앞으로가기 go + 1</button>
    
     <script> 
        
             // 15- 5 네비
             let userAgent = navigator.userAgent;
             document.write(userAgent);
        
    </script>
    
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
   <h1>page2</h1>
   <button onclick="history.back()">뒤로가기</button>
    
</body>
</html>


userAgent 출력문 :
     Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) 
Chrome/102.0.0.0 Safari/537.36


화면출력문 내용
Mozilla/5.0 기본 플랫폼
(Windows NT 10.0; Win64; x64)  운영체제 정보
AppleWebKit/537.36 (KHTML, like Gecko)   사용중인 브라우저 엔진 이름
Chrome/102.0.0.0  사용중인 브라우저 이름 / 버전
 Safari/537.36      같은 엔진을 사용중이며 호환 가능한 다른 브라우저





15. 브라우저 객체 모델 (BOM, Browser Object Model)
: 브라우저에 내장된 객체가 계층적 구조로 이루어져있는 것을 말함



1) window 객체

# 메서드
*open("URL", "새창 이름", "새창 옵션들") : 팝업창
* 새창 옵션들 *
width  : 창 너비
height  : 창 높이
left : 창 x 축 좌표
top : 창 y 축 좌표
scrollbars : 스크롤바 숨김 / 노출 설정. no/yes
location : url 주소 입력하는 영역 숨김/노출 설정
status   : 상태 표시줄 영역 숨김/ 노출 설정
toolbars : 도구 상자 영역 숨김/ 노출 설정

alert(data)  : 경고창에 data 보여주기
confirm("질문") : 질문 확인/취소. 확인 : true 리턴, 취소 : false 리턴
prompt("질문", "기본 답변")  :입력창
moveTo(x,y) : 지정한 새창의 위치를 이동
resizeTo(width, height) : 창크기 변경
*setIntervar(funtion(){}, 시간간격) : 지속적으로 지정한 시간간격을 두고 함수실행

*clearInterval() : 인터벌 삭제
*setTimeout(funtion(){...}, 시간간격)  : 지정한 시간 이후 함수 한번 실행
*clearTimeout() : 타임아웃 삭제

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
   <button onclick="window.clearInterval(inter)"> 정지 </button>
 <button onclick="window.clearTimeout(out)"> 타임아웃 취소 </button>
         <script> //15 - 1
       
       // 5초후 타임아웃 콘솔창에뜸
        let out = window.setTimeout(function(){
            console.log("타임아웃!!!!");
            
        }, 5000);
        
        /*
        // 콘솔창에 1초마다 숫자만들기
           let num = 0;
            let inter= window.setInterval(function(){
                num++;
                console.log(num);
            },1000);
       */
        

        /*   // 네버버어라는 네이버창을 해당 크기에 맞게 띄움
            window.open("http://naver.com","네버버어","width=350, height=400, left=50, top 50, location=no, scrollbars=no,status=no");
        */
        /*   // 미리만들어둔 js22pop 파일을 popup이란 이름으로 해당 크기에 맞게 띄움
            window.open("js22pop.html","popup", "width=300, height=300, left=100,top=100, location=no ");
        */
        /*   // 지금 배고픈가요라는 질문창을 띄움
            let result = window.confirm("지금 배고픈가요?");
            console.log(result);
        */

    
    </script>
</body>
</html>

2) 스크린 객체
: 사용자의 모니터 정보를 제공하는 객체

screen.속성;

width  : 화면 너비값 리턴
height  : 화면 높이값 리턴
availWidth  : 작업표시줄 제외한 화면 너비값
availHeight : 작업표시줄 제외한 화면 높이값
colorDepth : 사용자 모니터가 표현 가능한 컬러bit리턴

3) location 객체
(브라우저 주소창 관련)

# 속성과 메서드 
**href** : 주소 영역의 주소를 설정하거나 리턴
hostname : url의 호스트이름을 설정하거나 리턴
host : url의 호스트이름과 포트번호를 리턴
protocol : 프로토콜 리턴
search : url의 쿼리스트링 리턴 (쿼리스트링 = 주소의 ? 뒷부분)
reload() : 브라우저 새로고침

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body> <button onclick="location.href='js22pop.html'"> 새로고침 </button>
    <script> // 15 -2 
    
        console.log(screen.width);    // 1920	
        console.log(screen.height);	   // 1080
        console.log(screen.availWidth); //1920
        console.log(screen.availHeight); //1040
        console.log(screen.colorDepth); 	//24

    
        //15 -3
        let hrefval = location.href;
        console.log(hrefval);     //http://127.0.0.1:51856/Js/js23.html
        
        console.log(location.hostname); // ip
        console.log(location.host);     //ip + 포트
        console.log(location.protocol);     //http(s)
        console.log(location.search);       //주소창? 뒤 리턴
        
        let tout = setTimeout(function(){
            //location.href = "js22pop.html";
            location.reload();
            
        },3000);   // 3초마다 새로고침
        
        
    </script>
</body>
</html>

14. 내장 객체 (Built-in Object)

1) 객체 생성
변수명 = new 생성함수();

2) Date 객체
: 날짜나 시간 관련 정보 필요할 때 사용

#1. 객체 생성
변수 = new Date(); 
변수 = new Date("연/월/일");  문자열
변수 = new Date(연, 월-1, 일, (시간, 분, 초, 밀리초 등 더 쓸 수 있다)); 

#2. 메서드

- 정보 가져오기
getFullYear()  : 연도 정보
getMonth()     : 월 정보 ( 0월~11월) 
getDate() : 일 정보
getDay() : 요일 (일:0~ 토:6)
getHour() : 시간정보
getMinutes() : 분
getSeconds() : 초
getMilliseconds() : 밀리초
getTime() : 1970.1.0.0.0부터 경과된 시간을 밀리초로 리턴

- 정보 수집
setFullYear()  : 연도 수정
setMonth()     : 월 수정 ( 0월~11월) 
setDate() : 일 수정
- : 요일은 날짜 바꾸면 자동으로 바뀜 (일:0~ 토:6)
setHour() : 시간정보 수정
setMinutes() : 분 수정
setSeconds() : 초 수정
setMilliseconds() : 밀리초 수정
setTime() : 1970.1.0.0.0부터 경과된 시간을 밀리초로 수정

3) Math 객체
수학 관련 기능과 속성을 제공하는 객체

Math.상수
Math.메서드()

4) Array 객체 : https://itcreator.tistory.com/36
5) String 객체
: 문자형 데이터를 취급하는 객체

변수 = "문자열"; 변수 = '문자열';
변수 = new String("문자열");

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script> // 14-2 ~ 3설명
            let today = new Date();
            console.log(today);
        
            //let christmas = new Date("2022-12-25"); 값 동일
            let christmas = new Date("2022/12/25"); 
            console.log(christmas);
        
            let offday = new Date(2022, 6, 6); //7월 6일
            console.log(offday);
        
            // 메서드
            let month = today.getMonth(); // -1 해서 줌
            console.log(month+1);
        
            let day = today.getDay();
            console.log(day);
        
            let date = today.getDate();
            console.log(date);
        
            let time = today.getTime();
            console.log(time);
            console.log(christmas);
        
            christmas.setFullYear(2023);  // 년도 수정
            console.log(christmas);
        
            christmas.setDate(24);      // 날짜 수정
            console.log(christmas);
        
        
            //14-3 Math
          //  let rd = parseInt(Math.random()*10); / 0~9 사이값 
         //   console.log(rd*100);
        
            // 14-5 String
            let str = "hello javascript"
            console.log(str.charAt(0)); // h 가져옴
            console.log(str.indexOf('j')); //6 (띄워쓰기도 문자)
            console.log(str.match("hello")); // 같은 문자열이 있나?
            console.log(str.substr(3, 5)); // lo ja (시작인덱스, 글자수)
            console.log(str.substring(3, 5)); // lo (시작인덱스, 끝인덱스):끝인덱스 전까지 
            console.log(str.replace("hello","awesome")); //awesome javascript
            console.log(str.split(" ")); //['hello', 'javascript']
    </script>
</body>
</html>

13. 자바스크립트 객체
: 프로퍼티와 메서드로 이루어짐 
프로퍼티(변수의 일종) : 프로퍼티(키)와 프로퍼티값(value)로 구성
프로퍼티키는 일반적으로 문자로 구성하고 값은 원하는 값
메서드 : 객체 안에 있는 함수를 가르킴

   
HTML 태그 속성(attribute)과 속성값을 가진다
CSS  프로퍼티와 프로퍼티값
JavaScript  프로퍼티와 프로퍼티값, 그리고 메서드로 이루어짐




1) 사용자 객체 
JS 객체 생성 방법
#1. 객체 리터럴 방식 : 객체 구분 기호 : {}
변수 = {
프로퍼티명 : 값, 
프로퍼티명 : 값,.....
};
객체 자체의 주소값이 바뀌어야만 let으로 변수에 담고
객체 자체의 주소값은 안바뀌고 안에만 바꾼다면 const 변수에 주로 담음

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
   <script>  //13 객체 리터럴 방식
            const user= {name :"pika",age : 10}; // , 을 통해 객체구나 생각!
            console.log(user);
            console.log(user.age);
            console.log(user.name);
       
            console.log(user.test); // 없는 프로퍼티 읽으려하면 undefined 리턴함.
       
       
            // 빈 객체 만들기
            const obj = {};
    //   자바로 치자면 class test {}
    //   obj = new test {}
    
            // 프로퍼티 추가, 삭제  (자바에서 hashmap이랑 비슷함)
       obj.addr = "서울시 서초구";
       console.log(obj);
       delete obj.addr;
       console.log(obj);
       
            // in 연산자로 프로퍼티 있는지 확인
       console.log("name" in user);  //true 출력
       console.log("test" in user);  // false 출력
       console.log("toString" in user);  // true 출력
       
    </script>
    
</body>
</html>

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
    <script>
            // 13. 리터럴 객체  (익명함수)
                let person = {
                    name : "pika",
                    age : 10,
                    getData : function(){
                        console.log("hello method");
                    }, 
                    test : {a: 10, b : "haha", c : [1,2,3,4], d : function(abc){}}
                };
    
            console.log(person);
            console.log(person.age); //변수 출력
            person.getData(); // 메서드 호출
            
        console.log(person.test.a);
        // 3 출력
        console.log(person.test.c[2]);
        console.log(person.test.d(10));
        
            // 프로퍼티 (변수) 추가 : 없는 이름의 프로퍼티명에 값대입
        person.height = 170;
            // 메서드 추가 : 없는 이름의 프로퍼티명에 익명함수 대입
        person.getSum = function(a,b){
            return a + b;
        };
        console.log(person);
        console.log(person.height);
        console.log(person.getSum(10,20));
        
    </script>  
</body>
</html>

 


#2. new Object()로 생성하는 방식
const 변수 = new Object();
변수.age = 10;
변수.name = "hello";

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>    // 13- 2 new object로 객체생성
                    const person = new Object();
                    person.name = "pikapika";
                    person.age = 100;
                    person.getNum = function(){
                        console.log("getNum 메서드호출");
                        return "haha";
                    };
                
                    console.log(person);
                    let result = person.getNum();
                    console.log(result);
 
    </script>
</body>
</html>



#3. 생성자 함수로 생성하는 방식
# 생성자 정의
fuction 생성자명(){ // 생성자명은 첫글자 대문자
....
}
# 객체 생성해서 사용
const 변수 = new 생성자명();
변수.~~~~~
#4. ES6와 클래스

class 클래스명 { // 클래스명 첫글자 대문자
constructor(){// 생성자
....
}
}

const 변수 = new 클래스명();

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
       <script> // 13 -3 
          /*  function Person(name, age){  //대문자
                console.log("Person 객체생성");
                this.name = name;
                this.age = age;
            }
        
            const pika = new Person("pika", 10);
           console.log(pika);
           
          */
                // 13 -4
            class Person{
                constructor(name){
                    console.log("hello");
                    this.name = name;
                }
            }
           class Student extends Person{
               constructor(name, age){
                   super(name);
                   this.age = age;
               }
           }
           
           //const p = new Person("pika");
           // console.log(p);
           
            const stu = new Student("kobugi", 100);
            console.log(stu);
    </script>
    
</body>
</html>

 

12. 자바스크립트 변수 선언 방식
: 변수 선언 방식에는 var / let / const 와 같이 3가지로 선언 가능 (ES6부터 가능)
-> 변수 이름 충돌로 인하여...


ECMAScript ES6 = ECMAScript 표준의 6번째 에디션 (2015)

* 블록스코프 : {} if, for, function
함수스코프 : 블록스코프 중 함수 범위를 갖는 스코프

1) var  : 함수스코프 : 같은 이름의 변수 재선언 가능.  (var a = 10; var a = 20; 이렇게 선언가능)
2) let  : 블록스코프 : 같은 이름의 변수 재선언 불가능. 값수정 가능 (자바와 동일)
3) const: 블록스코프 : 재선언 불가능. 값수정 불가능 -> 상수
const는 선언과 동시에 값을 할당해야함. 아니면 에러 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
    <script>  //12 자바 변수
        //var
        /*var name = "피카츄";
        console.log(name);
    
        var name = "꼬부기";
        console.log(name);
        */
        
        //let
     /*   let name =  "피카츄";
        console.log(name);
        
        let name = "꼬부기";  //실행 불가
        console.log(name);
       
        name = "haha"
        console.log(name);   // 수정가능
        */
        
        //const
        const name = "피카츄"
        console.log(name);
        
      //  const name = "꼬부기" // 실행 불가
       // console.log(name);
        
        name = "sdsdf"   // 수정 불가
        console.log(name);
        
          var a;
         var b;
         const c = a;
         
    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
    <script>
        /*
            // var 함수 스코프
            var foo = "문자문자"
            if(typeof foo == "String"){
                var result = true;
            }else{
                var result = false;
            }
            
            console.log(result); //true 나옴 (사용가능)
        */
        
            var foo = "문자문자"
            if(typeof foo == "String"){
                let result = true;   //
            }else{
                let result = false;
            }
            
            console.log(result); // 에러뜸 ( 사용불가)
    
    </script>
    
</body>
</html>

11. 함수 리터럴과 익명함수
1) 리터럴
: 자바 스크립트에서 데이터를 만드는 방법은 크게 두가지로,
리터럴 방식과 객체 방식 두가지가 있다.


타입 리터럴 방식  
숫자  var num=10;  var num = new Number(10);
문자 var name="abc" var name = new String("abc");
불린 var play= true; var play = new Boolean(true);
배열  var arr=[1,2,3];  var arr = new Array(1,2,3);


2) 함수 리터럴
: 함수 이름을 주지 않고 만들면 됨.

#1. 일반적인 방법
function hello(){
.....
}

#2. *리터럴*
var hello = function(name){
....
}
#3. 객체방식(잘안씀)
var hello = new function("name","실행할 명령문들");

3) 익명함수
: 리터럴 방식의 함수를 익명함수라 한다.
호이스팅 불가능
일반함수 : 재사용 많이   할 경우 
익명함수 : 재사용 비중이 적거나, 값처럼 정의해서 넘겨줘야할 경우

익명 함수 활용 전  익명 함수 활용 후
function hello(){
    alert("안녕하세요");
}
$("#btn").click(hello);
$("#btn").click(function(){
    alert("안녕하세요");
});

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    
    <button id="btn">클릭</button>
    <script>
        // 리터럴
        var hello = function(name) {
            console.log(name + "님 배고프신가요?");
        }
        
        hello("토피"); 
        
        // 익명함수 
        $(document).ready(function(){
            $("#btn").click(function(){
                alert("안녕하세요");
            });        
        }); 
   
    </script>
    
</body>
</html>

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
    <script>
        //console.log(a);
    
        //a = 10;  // 전역변수로 선언+대입 해줌 
        //console.log(a);
    
        var a = "global";
        
        function f() {
            a = "local"; // 함수 안에서 var 생략하면 전역으로 선언됨.
            console.log("f : " + a);
        }
        f(); 

        console.log(a);
        
    </script>
     
</body>
</html>

10. 함수
1) 함수 function  //자바에서는 메서드와 같은 역할
특성 기능을 하는 코드들을 묶어서 독립된 부품으로 만들어 재사용하고자 할때
호출하여 사용하는 기능

2) 구조 
# 정의(매개변수x, 리턴 x)
function 함수명(){
//실행코드들...
}
#호출
함수명();

# 정의(매개변수O, 리턴 x)
function 함수명(변수명, 변수명,....){
//실행코드들...
return 값;
}
#호출
변수 = 함수명(인자,인자,...);

 

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
   <script>
        // 함수정의
        function test(){
            document.write("hello <br/>");
            document.write("hello <br/>");
            document.write("hello <br/>");
            
        }
        // 함수 실행
       test();
        
        function test2(name, age){
            document.write("당신의 이름은" + name + "이고, 나이는 "+ age + "살 입니다");
            }
       test2("피카츄",20);
       test2("홀길동",100);

    </script>
    
</body>
</html>

 

 

 


3) 스코프
   : 변수 또는 함수의 유효범위 말함

            #1. 전역 변수 Global Variable
선언위치 : 함수밖, {}밖
사용범위 : 자바스크립트 전체 영역

             #2. 지역 변수 Local Variable
선언위치 : 함수안 
사용범위 : 함수안

* 함수 내에서 동일 이름의 변수에 대한 우선순위 : 지역 > 전역

            #3. 전역 함수
전역변수와 동일

             #4. 지역 함수
정의 위치 : 함수안
사용 범위 : 정의된 함수를 품고 있는 함수안

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>
    </title>
</head>
<body>
    
    <script>
        var num = 10; // 전역변수
        console.log(num);
        
        function test(){
            console.log("function : " + num); // 전역 num 10출력
             num = 20; //함수안에서 var 생략하면 전역으로 선언됨;
            
            //var num = 20; //지역변수
           
            console.log("function : " + num); //지역변수 20 나옴
            
            //var num = 100; //지역
            //console.log("function : " + num);
        }
    
       // test()  //실행시 16번째 num 이 실행되어 전역변수로 20이 선언됨
        
        console.log(num);  
    </script>
    
</body>
</html>

 

 

 

test() 실행시 전역변수 값이 바뀜

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
   <script>
       // 전역함수
       function func(){
            console.log("전역함수!!");
        }
        
       //전역
    function outerFunc(){
        //지역
        function innerFunc(){
            console.log("")
        }
        
        innerFunc();
    }
    func();
    outerFunc;   
    // innerFunc; 실행안됨    
    
    </script>
    
</body>
</html>


4) 변수에 함수 저장하기
:자바스크립트에서는 함수도 변수에 저장가능.
변수에 함수를 저장하면 변수 이름을 함수처럼 사용할 수 있다.

var 변수명 = 함수명;
-> 변수명();

 

5) 매개변수 값으로 함수 사용하기
: 매개변수도 변수이기 때문에 함수를 담을 수 있다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>
    </title>
</head>
<body>
    <script>
        /* 함수를 변수에 담을 수 있다.
        function hello(name){
            console.log("hellooo"+ name);
        }
        hello("김김김");
            var func = hello;
        func("피카츄");
        */
         
        // 함수를 매개변수에 담을 수 있다.
        function hello1(){
            console.log("hello!!!");
        }
        function hello2(){
            console.log("hello22222");
        }
        //매개변수를 함수로 실행하는 함수
      //중요
        function execute(func){
            func();
        }
        execute(hello1);
        execute(hello2);
    
    </script>
    
</body>
</html>




6) 리턴값으로 함수 사용하기
: 함수는 어떤 값이든 리턴가능. 즉, 함수를 리턴할 수도 있다.

 

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
   <script>  // 10-6 설명
    function getHello(){
        function hello(user){
            console.log(user + "님 방문을 환영합니다.");
        }
        return hello;  // 함수 이름을 리턴 
    }
    var result = getHello(); // 힘수를 리턴받아 변수에 저장
       result();
       result("홍길동");
    
    </script>
    
</body>
</html>

9. 배열 array
: 다양한 데이터 타입의 값 저장 가능

1) 배열 생성
#1. 배열 객체 생성
var 참조변수명 = new Array();

변수명[0] = 값;


#2. 배열 객체 생성 + 초기값
var 참조변수명 = new Array(값1, 값2, 값3,....);

  #3. *배열 리털로 생성
var 참조변수명 = []; // 빈 배열
var 참조변수명 = [값, 값2, .....];

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
       //배열 #1
        var arr1 = new Array();
        arr1[0] = 10;
        arr1[1] = "abc";
        arr1[2] = true;
        
        console.log(arr1);
    

        //#2
        var arr2 = new Array(10, 'abcd', false);
        console.log(arr2);
       
        arr2[0]= 200;
        console.log(arr2); 
        
        //#3
       var arr3 = [];
        console.log(arr3);
 
    </script>
</body>
</html>

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
  <script>
    var arr = [100, "abc", true];
      
      arr[3] = -20;
      console.log(arr);
      
      arr[5] = 1000;   //arr[4] 에는 empty가 생김
      console.log(arr); //[100, 'abc', true, -20, empty, 1000]
      
      
      // 배열의 길이
      console.log(arr.length); // 6
        
      //데이터 배열 맨 뒤에 추가 : push()
      arr.push(2000);   
      console.log(arr);     //[100, 'abc', true, -20, empty, 1000, 2000]
      //데이터 배열 맨 앞에 추가 : unshift()
      arr.unshift(2000);
      console.log(arr);    //[2000, 100, 'abc', true, -20, empty, 1000, 2000]
      
      
      // 배열 마지막 데이터값 꺼내서 리턴하고 배열에서는 삭제 : pop()   
      console.log("pop() : " + arr.pop());    //pop() : 2000
      console.log(arr);                   //[2000, 100, 'abc', true, -20, empty, 1000]
      // 배열 앞 데이터값 꺼내서 리턴하고 배열에서는 삭제 : shift()
      console.log("shift() : " + arr.shift());   //shift() : 2000
      console.log(arr);         //[100, 'abc', true, -20, empty, 1000]
      
      // 연결문자 삽입 : join("연결문자")
      var res = arr.join("-")
      console.log(res);  //100-abc-true
      
      // 배열 결합 : concat(배열)
      
      // 베열잘라내기 : slice(startIndex, endIndex)
      res = arr.slice(0,2);
      console.log(res); //[100,'abc']
      
      
      var arr2 = ["bb", "BB", "aa", "AA", 7,2 ,"하늘소","아메라카노", true] 
      // 오름차순 정렬 : sort()
      res = arr2.sort();
      console.log(res);       //[2,7,"AA", "BB","aa","bb",true, "아메리카노", "하늘소]
      
      // 배열 역순 : reverse()
      res = res.reverse();
      console.log(res);       // ['하늘소', '아메라카노', true, 'bb', 'aa', 'BB', 'AA', 7, 2]
      
    </script>
    
</body>
</html>

+ Recent posts