1.채팅 프로그램 구현을 위한 기술적 요소 3가지를 나열하고 채팅 프로그래밍을 구현하시오. - 채팅 코드 외우기......ㅠㅠ
socket
네트워크 상에서 서로 다른 호스트 사이의 통신을 위한 수단이다. (일종의 전화기...? 객체?)
▷ ServerSocket
서버 역할을 하는 소켓 객체. 클라이언트의 연결 요청을 기다리면서(반복문 - for문이나 while문 으로 무한 루프를 하고 있다.) 연결 요청에 대한 수락을 담당한다.
▷ Socket
클라이언트와 서버 간의 통신을 담당한다.
thread
- Thread는 어떠한 프로그램 안의 또다른 프로그램으로 프로세스(메모리를 할당받아 실행 중인 프로그램)라 하며 프로세스 내에 존재한다.
- 실행 중에 멈출 수 있으며, 동시 수행(multi-thread)이 가능하다.
쓰레드를 사용하는 이유는 채팅 서버에서 여러 명의 유저들이 실시간으로 채팅을 입력하기 때문이다. 즉, 여러 프로세스가 동시간대에 같이 실행되고 있기 떄문에 이를 Thread로 실행한다.
IO stream
컴퓨터 내부 또는 외부와의 장치와 프로그램간에 데이터를 주고 받을 때(입력과 출력) 일종의 빨대(연결통로?)이다.
채팅 프로그램에는 DataInputStream과 DataOutputStream이 사용된다.
DataInputStream과 DataOutputStream에는 자바의 기본 자료형 데이터를 바이트 스트림으로 입출력할 수 있도록 해주는 메소드들이 있고, 채팅시 입력 받은 내용을 입출력하기 위해 사용한다.
서버 코드
import java.io.DataInputStream;
import java.io.DataOutputStream;
import java.net.ServerSocket;
import java.net.Socket;
import java.util.Scanner;
class Receiver extends Thread{
Socket socket;
DataInputStream in;
String name;
Receiver(Socket socket){
this.socket = socket;
try {
in = new DataInputStream(socket.getInputStream());
} catch (Exception e) {
}
}
public void run() {
Scanner scanner = new Scanner(System.in);
while(in != null) {
try {
System.out.println(in.readUTF());
} catch (Exception e) {
}
}
}
}
class Sender extends Thread{
Socket socket;
DataOutputStream out;
String name;
Sender(Socket socket){
this.socket = socket;
try {
out = new DataOutputStream(socket.getOutputStream());
name = "["+socket.getInetAddress()+":"+socket.getPort()+"]";
} catch (Exception e) {
}
}
public void run() {
Scanner scanner = new Scanner(System.in);
while(out != null) {
try {
out.writeUTF(name + scanner.nextLine());
// 채팅 창에 쓴 내용을 보내기 위해 nextLine. 엔터치면 입력 완료되는 형태
} catch (Exception e) {
}
}
}
}
public class TcpIpServer {
public static void main(String[] args) {
ServerSocket serverSocket = null;
Socket socket = null;
try {
// 포트 번호 7777, 전화기 생성.
// 7777번호를 만들어 거기서 기다리겠다는 의미.
serverSocket = new ServerSocket(7777);
socket = serverSocket.accept();
Sender sender = new Sender(socket);
Receiver receiver = new Receiver(socket);
sender.start();
receiver.start();
} catch (Exception e) {
}
}
}
클라이언트 코드
import java.net.Socket;
public class TcpIpClient {
public static void main(String[] args) {
String serverIP = "127.0.0.1"; // 자기 자신 IP 주소
Socket socket = null;
try {
socket = new Socket(serverIP, 7777);
// 내 서버 찾아가서 7777을 불러온다..???
System.out.println("서버에 연결되었습니다.");
Sender sender = new Sender(socket);
Receiver receiver = new Receiver(socket);
sender.start();
receiver.start();
} catch (Exception e) {
}
}
}
2.미디어 쿼리란 무엇인가요?
화면크기 별로 다르게 css(style 속성)을 적용하는 것이다.
사용 예시는 아래를 코드를 참고하자.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0"/>
<title></title>
<style>
/*max값 까지 표현되는 스타일*/
@media screen and (max-width:767px) {
#content_wrap #content p { font-size:2em; font-weight:bold; color: red;}
}
/*min 값 부터 max 값 까지 표현되는 스타일*/
@media screen and (min-width:768px) and (max-width:959px) {
#content_wrap #content p { font-size:1.5em; font-weight:bold; text-decoration: underline;}
}
@media screen and (min-width:960px) {
#content_wrap #content p { font-size:1em; font-weight:bold; color: seagreen;}
}
* { margin:0; padding:0; }
li { list-style:none; }
#wrap { width:80%; margin:0 auto; }
#header { border:1px solid #cccccc; height:100px; }
#header > h1 { text-align:center; }
#nav { border:1px solid #cccccc; }
#nav ul { overflow:hidden; }
#nav ul li { float:left; padding:5px 30px; text-align:center; height:60px; line-height:60px; border:1px solid #cccccc; }
#content_wrap { border:1px solid #cccccc; }
#content_wrap #content { padding:10px; }
#content_wrap #content > h2 { border-bottom:1px solid #cccccc; margin-bottom:10px; }
#footer { height:100px; line-height:100px; text-align:center; font-size:1.5em; font-weight:bold; margin:0 auto; border:1px solid #cccccc; }
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<h1>HEADER</h1>
</div>
<div id="nav">
<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
</ul>
</div>
<div id="content_wrap">
<div id="content">
<h2>서울산업진흥원 설립목적</h2>
<p>
서울산업진흥원은 서울특별시에 소재하고 있는 중소기업에 대한 종합적이고 체계적인 지원사업을 통하여 중소기업의 경영여건 개선과 경쟁력강화에 기여함을 목적으로 지역균형개발 및 지방중소기업육성에 관한 법률 제49조와 동법 시행령 제63조, 민법 제3장 및 서울산업진흥원 설립운영조례에 따라 설립되었습니다.
서울산업진흥원은 서울특별시에 소재하고 있는 중소기업에 대한 종합적이고 체계적인 지원사업을 통하여 중소기업의 경영여건 개선과 경쟁력강화에 기여함을 목적으로 지역균형개발 및 지방중소기업육성에 관한 법률 제49조와 동법 시행령 제63조, 민법 제3장 및 서울산업진흥원 설립운영조례에 따라 설립되었습니다.
서울산업진흥원은 서울특별시에 소재하고 있는 중소기업에 대한 종합적이고 체계적인 지원사업을 통하여 중소기업의 경영여건 개선과 경쟁력강화에 기여함을 목적으로 지역균형개발 및 지방중소기업육성에 관한 법률 제49조와 동법 시행령 제63조, 민법 제3장 및 서울산업진흥원 설립운영조례에 따라 설립되었습니다.
서울산업진흥원은 서울특별시에 소재하고 있는 중소기업에 대한 종합적이고 체계적인 지원사업을 통하여 중소기업의 경영여건 개선과 경쟁력강화에 기여함을 목적으로 지역균형개발 및 지방중소기업육성에 관한 법률 제49조와 동법 시행령 제63조, 민법 제3장 및 서울산업진흥원 설립운영조례에 따라 설립되었습니다.
서울산업진흥원은 서울특별시에 소재하고 있는 중소기업에 대한 종합적이고 체계적인 지원사업을 통하여 중소기업의 경영여건 개선과 경쟁력강화에 기여함을 목적으로 지역균형개발 및 지방중소기업육성에 관한 법률 제49조와 동법 시행령 제63조, 민법 제3장 및 서울산업진흥원 설립운영조례에 따라 설립되었습니다.
서울산업진흥원은 서울특별시에 소재하고 있는 중소기업에 대한 종합적이고 체계적인 지원사업을 통하여 중소기업의 경영여건 개선과 경쟁력강화에 기여함을 목적으로 지역균형개발 및 지방중소기업육성에 관한 법률 제49조와 동법 시행령 제63조, 민법 제3장 및 서울산업진흥원 설립운영조례에 따라 설립되었습니다.
</p>
</div>
</div>
<div id="footer">
서울산업진흥원
</div>
</div>
</body>
</html>
@media screen and (min-width:768px) and (max-width:959px) { }
@media - 미디어 쿼리라는 뜻 screen은 미디어 유형으로 컴퓨터 화면 또는 스마트 기기화면임을 뜻한다. min-width는 min 너비 값 부터 max-width는 max 너비 값 까지
meta name="viewport" 는 모바일웹이나 반응형웹에서 각각의 기기장치를 인식할 때 사용하는 중요한 태그로 기기 크기별로 값을 설정하겠다는 선언이다. content="width=device-width는 화면 넓이는 기기화면 넓이를 따르겠다는 뜻이다. initial-scale=1은 브라우저에서 페이지를 처음로드 할 때 초기 확대 / 축소 수준을 설정하는 것으로 1인 경우 기본값(확대 축소하지 않은 꽉 찬 화면)을 뜻한다.
