coding__

[Network Fundamentals]

-현재 교육장 또는 홈 네트워크(공유기 또는 백본 포함) 정보 dns(hosts) 변경을 통한 변조 등을 확인하고 재구축 또는 재설정.

백본이란?

백본 네트워크는 소형 네트워크들을 묶어 대규모 파이프라인을 통해 극도로 높은 대역폭으로 다른 네트워크들의 집합과 연결되는 네트워크를 백본이라고 부른다.

dns란?

dns란 도메인 이름 시스템을 이야기 하며 웹에서 정리하는 전화번호부 같은 역할.

network란?컴퓨터 또는 시스템이 서로 연결되어 공유 또는 통신을 할 수 있게 만든 체계.

internet 

-internet service에는 www,ftp,telnet, e-mail 등이 있다.

ftp란?

FTP란 파일 전송 프로토콜 (File Transfer Protocol)의 약자입니다. 기본적으로 '프로토콜'은 전자기기 간에 데이터를 교환하기 위한 통신 규약을 의미합니다. FTP는 TCP/IP 네트워크(인터넷)상의 장치가 파일을 전송할 때 사용하는 규약입니다

TCP란?

컴퓨터가 다른 컴퓨터와 데이터 통신을 하기 위한 규약(프로토콜)의 일종이다. 전송 4계층

텔넷(telnet)이란 사용자의 컴퓨터에서 네트워크를 이용하여 원격지에 떨어져 있는 서버에 접속하여 자료를 교환할 수 있는 프로토콜을 말한다. 텔넷은 통신(tel)과 네트워크(net)라는 두 단어의 축소이며 인터넷에서 사용되는 주요 네트워크 프로토콜 중 하나이다.

-the benefit of network

* share(device, database, software, internet service)

예) share printer(printer server), share directory/files, microsoft office, hangul, winroute/ics/nat

*communication

battle net(bettle net server)

*managment

*resource management

*구형 시스템 활용

라우터란? 

라우터(router 혹은 라우팅 기능을 갖는 공유기)는 컴퓨터 네트워크 간에 데이터 패킷을 전송하는 네트워크 장치다. 패킷의 위치를 추출하여, 그 위치에 대한 최적의 경로를 지정하며, 이 경로를 따라 데이터 패킷을 다음 장치로 전달한다.

ICS란 산업 공정의 운영 또는 자동화에 사용되는 모든 기기와 기구 및 관련 소프트웨어와 네트워크를 말한다.

- 회선 공유 방식에 따른 network 분류

*circuit 교환 방식(telephone)

*packet 교환 방식(ethernet)

이더넷(영어: Ethernet)은 컴퓨터 네트워크 기술의 하나로, 일반적으로 LAN, MAN 및 WAN에서 가장 많이 활용되는 기술 규격

패킷이란?패킷(packet)은 네트워크를 통해 전송하기 쉽도록 자른 데이터의 전송 단위=트럭이다 생각하면 쉬움

osi 7 계층

* 7계층 : 응용(웹브라우저)

* 6계층 : 표현(http)

* 5계층 : 세션(연결유지)

* 4계층 : 전송(포트)

* 3계층 : 네트워크(ip)

* 2계층 : 데이터 링크(mac)

* 1계층 : 물리(device and cable)

from lan(지역 범위 네트워크) to wan(넓은 범위 네트워크)

-isp(skt,kt, u+)의 서비스 종류, 속도, 가격, 인지도 고려하여 선택한다.

-network 문제 발생 시 점검 순서

 * local

* switch and node

* gateway(컴퓨터 네트워크에서 게이트웨이(Gateway) 란 한 네트워크(segment)에서 다른 네트워크로 이동하기 위하여 거쳐야 하는 지점)

*target system at wan

[tcp/ip]

-프로토콜이란? 

* 통신상에서 두 장치간의 정보 교환 시 통신 방식을 정해 놓은 일종의 규칙.

* 전달한 신호 절차, 종류, 순서, 정보 정의

tcp/ip, netbeul, ipx/spx, appletalk 등이 있다.

ㅇ netbeul : LAN 내 컴퓨터들이 상호 통신할 수 있게 해주는 NetBIOS 규격 보다 향상된 확장판
     - NetBIOS 규격에서는 지정되지 않았던 프레임 형식을 규정

-[좌] tcp/ip 프로토콜

* 인터넷 표준 프로토콜

* osi 7 계층의 tcp와 ip가 혼합된 형태로 프로토콜의 베이스 프로토콜

[우]tcp/ip 데이터 전송 과정

ip address class

subent mask

gateway ip

class 당 예약되어 사용할 수 없는 ip

-사설 ip

* A 10.0.0.0

* B 172.16.0.0~172.31.0.0

* C 192.168.0.0~192.168.255.0

-Packet 전송 방식

* unicast(host간 1:1 패킷 전송)

* Multicast(멀티 캐스트 그룹에 속한 모든 호스트에 packet 전송 또는 class d)

*Broadcast(Network ip 내의 모든 호스트에 packet 전송)

[internet service]

-www

-dns

-smtp/pop3

-ssh

-sftp, ftp 등

[network tool for diagnosis and mangemant]

-ipconfig/ifconfig, ping, netstat, traceroute/tracert, ...

[nos]

- microsoft windows network(protocal, file/print sharing 등) 설치와 대표적인 service(액티브 디렉토리, dns, dhcp, iis 등)

- 리눅스 네트워크 설치와 대표적인 서비스

-DOCKER, VM CLOUD 란?

* DHCP란?

호스트의 IP주소와 각종 TCP/IP 프로토콜의 기본 설정을 클라이언트에게 자동적으로 제공해주는 프로토콜

[server]

-web server는 다음과 같은 요청된 정적 리소스에 대한 응답을 위한 시스템을 말하며 대표적으로

nginx, apache web 등이 있다.

*html

*css

*javascript

*image 등

-was는 3tier 구조에서 client와 server의 중간에서 다음과 같은 busincess logic 처리를 위한 시스템을 말하며 대표적으로 tomcat(apache), websphere(ibm), weblogic(bea), nas(sun), toinb(shift), zeus(tmax), resin(caucho) 등이 있다.

* DB Connection과 cache 기능을 지원하여 access 속도 향상

* cpu 성능을 최대화 하기 위한 system processing 속도 개선

* 부하분산을 위한 load balancing 기능

* 다기능(멀티)을 운영할 수 있는 분산 처리 기능 제공

Data의 신뢰성 확보를 위한 동기화 동시 처리 보장

-부하 분산과 확장성을 위한 server(web+was+database) 설계

-web server, was의 설치, 운영 그리고 연동

1. 먼저 vsc를 설치하기 전 컴퓨터에 파이썬을 설치한다.

https://www.python.org/

2. vsc(비쥬얼 스튜디오 코드)를 설치한다.

https://code.visualstudio.com/

3. vsc에서 ctrl+shift+x 를 누르거나 퍼즐 모양을 누른다음 python을 설치한다.

설치 후 파이썬 파일은 파일명.py로 저장하면 된다.

https://github.com/SGABF/SGAFirstProject

소스 코드는 깃허브에 가서 볼 수있다. SGAProject - WebContent - Main 부터 코드를 보면 된다. 많은 노력이 들어간 첫 프로젝트라 애정이 간다.

bmi 계산기와 검색바, 메모 할 수있는 달력(풀캘린더 사용)이 있는 건강 관리 홈페이지이다.

나는 팀에서 퍼블리셔 역할과 프론트엔드 역할을 맡았다. 앞단을 꾸미는 일을 거의 전부 했었는데 그 과정에서 html 템플렛을 사용하면서, 우리식으로 변환 하기도 하였다. 아쉬운 부분은 디테일이 부족하다 였지만 정해진 기간 내로 끝낼려노력했다. 기획부터 제작까지 팀원들과 원활하게 커뮤니케이션이 되어 완성 할 수 있었다. SGA팀에게 감사함을 전한다. 

미니 프로젝트를 기획 할 당시에 썼던 계획서 이다.

드디어 끝이 났다 !! 팀 미니 프로젝트가 최종완료 되었다.

jsp관계도(현재 진행하고 있는 미니 프로젝트)

style.css

@charset "UTF-8";

td {
	font-family: 'Gowun Batang', serif;
	
}

input[type="button"]{
	width:100px;
	height:80px;
}

calc.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");
%>
<!DOCTYPE html>
<html>
<head>
<!-- -->
<link
	href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
	rel="stylesheet"
	integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
	crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
	href="https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@700&display=swap"
	rel="stylesheet">
<meta charset="UTF-8">
<title>Calc</title>
<link href="style.css" rel="stylesheet">
<style type="text/css">
#heightbar, #weightbar {
	width: 200px;
}
</style>
<script
	src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">


	check = 0;
	
	//신장과 체중쪽에 왔다갔다하면서 버튼이 입력되게 하는 스크립트
	function ClickNum(btnVal) {
		if (check == 0) {
			document.getElementById("heightbar").value += btnVal;
		} else {
			document.getElementById("weightbar").value += btnVal;
		}
	}

	//더하기 빼기
    function add() { 
        if (check == 0) { // 신장 300 이상을 예외
            var tmp = document.getElementById("heightbar").value;
                tmp++;
                document.getElementById("heightbar").value = tmp;
        }else{ // 체중 300 이상을 예외
            var tmp = document.getElementById("weightbar").value;
            tmp++;
            document.getElementById("weightbar").value = tmp;
        }
    }

    function minus() { 
        if (check == 0) { // 신장 음수 값 예외처리 
           	//    value=("0");
//            }else{
	            var tmp = document.getElementById("heightbar").value;
             if(tmp==null || tmp.length<=0 || tmp==0){
                alert("잘못된 값을 입력하셨습니다.");
             }else{
            	 tmp--;
	            	document.getElementById("heightbar").value = tmp;
             }
           
        } else { // 체중 음수값 예외처리  10kg 미만
            var tmp = document.getElementById("weightbar").value;
             if(tmp==null || tmp.length<=0 || tmp==0){
                alert("잘못된 값을 입력하셨습니다.");
             }else{
            tmp--;
            document.getElementById("weightbar").value = tmp;
          } 
       }

    }

	//신장과 체중 버튼 위치가 계속 변경되는 스크립트
	function ChangeMode() {
		if (check == 0) {
			check = 1
		} else {
			check = 0
		}
	}

	//전체 삭제
	function Clear() {
		document.getElementById("heightbar").value = "";
		document.getElementById("weightbar").value = "";
	}
	
// 	//BMI   
// 	function getBMI(result){
// //	       hp = 0;
// //	       result = document.getElementById("weightbar").value / (document.getElementById("heightbar").value*document.getElementById("heightbar").value);
// 	      hp = document.getElementById("heightbar").value/100;
// 	      result = Math.floor((document.getElementById("weightbar").value/(hp * hp))*10)/10; 
// 	      if (result>=25) { 
// 	         // BMI수치가 25보다 크다면
// 	         alert("BMI지수는 " + result + "이며\n비만도 결과는 비만입니다.");
// 	         // BMI수치가 23보다 크다면
// 	      }else if (result>=23) {
// 	         alert("BMI지수는 " + result + "이며\n비만도 결과는 과체중입니다.");
// 	         // BMI수치가 18.5보다 크다면
// 	      }else if (result>=18.5) {
// 	         alert("BMI지수는 " + result + "이며\n비만도 결과는 정상입니다.");
// 	         // BMI수치가 그 나머지 값이라면
// 	      }else {
// 	         alert("BMI지수는 " + result + "이며\n비만도 결과는 저체중입니다.");
// 	      }
// 	   }

	//한글자씩 지우기
		$(function () {
			$("#remove").click(function(){
				if(check==0){
					var value = $("#heightbar").val();
						if(value!=null && value.length>0){
				// 원본에서 맨뒤의 1글자를 제하고 잘라낸다.
						value = value.substring(0, value.length-1);
				// 그 값으로 내용을 변경한다.
						$("#heightbar").val(value);
					}
				}else{
						var value = $("#weightbar").val();
							if(value!=null && value.length>0){
						// 원본에서 맨뒤의 1글자를 제하고 잘라낸다.
							value = value.substring(0, value.length-1);
						// 그 값으로 내용을 변경한다.
							$("#weightbar").val(value);
							
						}
					}
			});
	});

	function Check() {
	      var value = $("#heightbar").val();
	      var value2 = $("#weightbar").val();
	      
	      if(value<=100 || value>=250 || value==null || value2<=0 || value2>=250 || value2==null){
	         alert('정확한 수치를 입력하십시오');
	         return false;
	      }
	      return true;
	   }
			   		
	
</script>
</head>
<body>
	<form action="${pageContext.request.contextPath}/Calc/BmiResult.jsp" onsubmit="return Check();"
		method="post">
		      <table class="bg-success p-2 text-dark bg-opacity-10">
         <tr>
            <td colspan="4" style="text-align:center; font-size: 25px;"><div class="d-grid gap-2 col-4 mx-auto">BMI 계산기</div></td>
         </tr>
         <tr>
            <td colspan="4" style="vertical-align: middle; text-align: center;">
               성별 : 
               <input type="radio" value="남자" id="gender" name="gender" checked="checked">남자 &nbsp; 
               <input type="radio" value="여자" id="gender" name="gender">여자
            </td>
         </tr>
         <tr>
            <td colspan="2" style="text-align: center">신장 : 
            <input type="text" id="heightbar" name="heightbar" readonly="readonly" class="form-control" placeholder="키(cm)를 입력해주세요 'cm'는 제외." aria-label="default input example" style="width: 400px; text-align: left;" />
            </td>
         </tr>
         <tr>
            <td colspan="2" style="text-align: center">체중 : 
            <input type="text" id="weightbar" name="weightbar" readonly="readonly" class="form-control" placeholder="체중(kg)을 입력해주세요 'kg'는 제외." aria-label="default input example" style="width: 400px; text-align: left;" />
            </td>
         </tr>
         <tr>
            <td><input type="button" value="AC" id="c" name="c" onClick="Clear()" class="btn btn-outline-dark" style="width:200px;"/></td>
            <td><input type="button" value="Input Change" id="target" name="target" onclick="ChangeMode()" class="btn btn-outline-dark" style="width:200px;"/></td>
         </tr>
      </table>
      <table>
         <tr>
            <td>
               <input type="button" value="7" id="7" name="7" class="btn btn-success" style="width:100px;" onClick="ClickNum(this.id)" />
            </td>
            <td>
               <input type="button" value="8" id="8" name="8" class="btn btn-success" style="width:100px;" onClick="ClickNum(this.id)" />
            </td>
            <td>
               <input type="button" value="9" id="9" name="9" class="btn btn-success" style="width:100px;" onClick="ClickNum(this.id)" />
            </td>
            <td>
               <input type="button" value="+" id="+" name="+" class="btn btn-outline-success" style="width:100px;" onClick="add(this.id)" />
            </td>
         </tr>
      </table>
      <table>
         <tr>
            <td>
               <input type="button" value="4" id="4" name="4" class="btn btn-success" style="width:100px;"onClick="ClickNum(this.id)" />
            </td>
            <td>
               <input type="button" value="5" id="5" name="5" class="btn btn-success" style="width:100px;"onClick="ClickNum(this.id)" />
            </td>
            <td>
               <input type="button" value="6" id="6" name="6" class="btn btn-success" style="width:100px;"onClick="ClickNum(this.id)" />
            </td>
            <td>
               <input type="button" value="-" id="-" name="-" class="btn btn-outline-success" style="width:100px;"onClick="minus(this.id)" />
            </td>
         </tr>
      </table>
      <table>
         <tr>
            <td>
               <input type="button" value="1" id="1" name="1" class="btn btn-success" style="width:100px;" onClick="ClickNum(this.id)"/>
            </td>
            <td>
               <input type="button" value="2" id="2" name="2" class="btn btn-success" style="width:100px;"onClick="ClickNum(this.id)" />
            </td>
            <td>
               <input type="button" value="3" id="3" name="3" class="btn btn-success" style="width:100px;"onClick="ClickNum(this.id)" />
            </td>
            <td rowspan="2">
               <button value="maker" id="maker" name="maker" style="width:100px; height:80px;"class="btn btn-outline-dark" onClick="alert('만든이 : \n이수진 정한결 최동오');">Maker</button>
            </td>
         </tr>
      </table>
      <table>
         <tr>
            <td>
               <input type="button" value="0" id="0" name="0" class="btn btn-success" onClick="ClickNum(this.id)" style="width:202px;"/>
            </td>
            <td>
               <input type="button" value="Del" id="remove" name="remove" style="width:100px;"class="btn btn-outline-dark">
            </td>
            <td>
               <input type="submit" value="결과" id="result" name="result" class="btn btn-outline-dark" style="width:100px; height: 80px; onClick="Check()"/>
            </td>
         </tr>
      </table>
	</form>
	<script type="text/javascript" src="/WebContent/Calc/js/bootstrap.js"></script>

</body>
</html>

Calc_alert_ver.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Calc</title>
<style type="text/css">
	#heightbar, #weightbar{
		width: 200px;
	}
</style>
<script type="text/javascript">
	var check = 0;
	
	window.onload = function(){
		// onfocus : 포커스를 가지면
		document.querySelector("#heightbar").onfocus = function(){
			// 0번 박스에 있으면 0을
			check=0;
		}
		document.querySelector("#weightbar").onfocus = function(){
			// 1번 박스에 있으면 1를 가진다.
			check=1;
		}
		document.getElementById("remove").onclick = function(){
			// 입력된 내용을 가져온다
			var obj = document.querySelector(check); 
			var value = obj.value;
			// 내용이 있을때만
			if(value!=null && value.length>0){
				// 원본에서 맨뒤의 1글자를 제하고 잘라낸다.
				value = value.substring(0, value.length-1);
				// 그 값으로 내용을 변경한다.
				obj.value = value;
			}
		}
	}
	
	//신장과 체중쪽에 왔다갔다하면서 버튼이 입력되게 하는 스크립트
	function ClickNum(btnVal){
		if(check == 0){
			document.getElementById("heightbar").value += btnVal;
		}else{
			document.getElementById("weightbar").value += btnVal;
		}
	}
	
	//신장과 체중 버튼 위치가 계속 변경되는 스크립트
	function ChangeMode(){
		if(check == 0){
			check = 1
		}else{
			check = 0
		}
	}
	
	//전체 삭제
	function Clear(){
		document.getElementById("heightbar").value = "";
		document.getElementById("weightbar").value = "";
	}
	
	
// 	//getBMI
// 	function getBMI(){
// 		var result = heightbar + weightbar;
// 		if(result%.2f>=25) { 
// 			// BMI수치가 25보다 크다면
// 			alert("BMI지수는 " + result%.2f + "이며\n비만도 결과는 비만입니다.");
// 			// BMI수치가 23보다 크다면
// 		}else if (result>=23) {
// 			alert("BMI지수는 " + result%.2f + "이며\n비만도 결과는 과체중입니다.");
// 			// BMI수치가 18.5보다 크다면
// 		}else if (result>=18.5) {
// 			alert("BMI지수는 " + result%.2f + "이며\n비만도 결과는 정상입니다.");
// 			// BMI수치가 그 나머지 값이라면
// 		}else {
// 			alert("BMI지수는 " + result%.2f + "이며\n비만도 결과는 저체중입니다.");
// 		}
// 		return;
// 	}
	
	function getBMI(result){
// 		hp = 0;
// 		result = document.getElementById("weightbar").value / (document.getElementById("heightbar").value*document.getElementById("heightbar").value);
		hp = document.getElementById("heightbar").value/100;
		result = Math.floor((document.getElementById("weightbar").value/ (hp * hp))*10)/10;
		if (result>=25) { 
			// BMI수치가 25보다 크다면
			alert("BMI지수는 " + result + "이며\n비만도 결과는 비만입니다.");
			// BMI수치가 23보다 크다면
		}else if (result>=23) {
			salert("BMI지수는 " + result + "이며\n비만도 결과는 과체중입니다.");
			// BMI수치가 18.5보다 크다면
		}else if (result>=18.5) {
			alert("BMI지수는 " + result + "이며\n비만도 결과는 정상입니다.");
			// BMI수치가 그 나머지 값이라면
		}else {
			alert("BMI지수는 " + result + "이며\n비만도 결과는 저체중입니다.");
		}
// 		alert(result);
	}
</script>
</head>
<body>
	<form action="${pageContext.request.contextPath}/Calc/BmiResult.jsp" method="post">
		<table>
			<tr>
				<td colspan="4" style="text-align: center">BMI 계산기</td>
			</tr>
			<tr>
				<td colspan="4" style="vertical-align: middle; text-align: center;">
					성별 : 
					<input type="radio" value="man" id="gender" name="gender" checked="checked">남자 &nbsp;
					<input type="radio" value="woman" id="gender" name="gender">여자
				</td>
			</tr>
			<tr>
				<td colspan="3" style="text-align: center">
					신장 : <input type="text" id="heightbar" name="heightbar" readonly="readonly"/>
				</td>
			</tr>
			<tr>
				<td colspan="3" style="text-align: center">
					체중 : <input type="text" id="weightbar" name="weightbar" readonly="readonly"/>
				</td>
			</tr>
			<tr>
				<td><input type="button" value="C" id="c" name="c" onClick="Clear()"/></td>
				<td><input type="button" id="remove" value=" ← "/></td>
			</tr>
			<tr>
				<td><input type="button" value="7" id="7" name="7" onClick="ClickNum(this.id)"/></td>
				<td><input type="button" value="8" id="8" name="8" onClick="ClickNum(this.id)"/></td>
				<td><input type="button" value="9" id="9" name="9" onClick="ClickNum(this.id)"/></td>
			</tr>
			<tr>
				<td><input type="button" value="4" id="4" name="4" onClick="ClickNum(this.id)"/></td>
				<td><input type="button" value="5" id="5" name="5" onClick="ClickNum(this.id)"/></td>
				<td><input type="button" value="6" id="6" name="6" onClick="ClickNum(this.id)"/></td>
			</tr>
			<tr>
				<td><input type="button" value="1" id="1" name="1" onClick="ClickNum(this.id)"/></td>
				<td><input type="button" value="2" id="2" name="2" onClick="ClickNum(this.id)"/></td>
				<td><input type="button" value="3" id="3" name="3" onClick="ClickNum(this.id)"/></td>
			</tr>
			<tr>
				<td><input type="button" value="타겟 변경" id="target" name="target" onclick="ChangeMode()"/></td>
				<td><input type="button" value="0" id="0" name="0" onClick="ClickNum(this.id)"/></td>
				<td><input type="button" value="결과 확인" id="result" name="result" onclick="getBMI()"/></td>
			</tr>
		</table>
	</form>
</body>
</html>

BmiResult.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");
%>

<%
	//          CalcVO vo = new CalcVO();
String gender = null;
int height = 0;
int weight = 0; // weight
double heightp = 0;
double result = 0; // result
double bmi = 0;
String result2 = "";
%>
<!DOCTYPE html>
<html>
<head>
<link
	href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
	rel="stylesheet"
	integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
	crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
	href="https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@700&display=swap"
	rel="stylesheet">
<title>BMI 결과창</title>
</head>
<style>
*{
font-family: 'Gowun Batang', serif;
}

</style>
<body>
	
	<h1>BMI 결과창</h1>
	<hr />
	<%
		gender = (String) request.getParameter("gender");
	// 	vo.setHeightbar(Integer.parseInt(request.getParameter("heightbar")));
	// 	vo.setHeightbar(Integer.parseInt(request.getParameter("heightbar")));
	// 	vo.setWeightbar(Integer.parseInt(request.getParameter("Weightbar")));
	weight = Integer.parseInt(request.getParameter("weightbar"));
	height = Integer.parseInt(request.getParameter("heightbar"));

	heightp = Math.floor(height) * 1 / 100;
	bmi = weight / (heightp * heightp);
	result = Math.round(bmi * 100) / 100.0;
	
	if (result >= 25) {
        result2 = "비만";
    } else if (result >= 23) {
        result2 = "과체중";
    } else if (result >= 18.5) {
        result2 = "정상";
    } else {
        result2 = "저체중";
    }
	
	%>
	
	<!--체질량지수는 자신의 몸무게(kg)를 키의 제곱(m)으로 나눈 값-->

	<!-- ex) 키 170㎝에 몸무게 73kg이면, 
			계산식 : 73 / (1.7×1.7) = 25.26 → 과체중 -->

	<!-- 	키를 100으로 나누고 소수점 첫째자리까지  -->
	전체 변수 출력
	<br /> 성별 :
	<%=gender%><br /> 신장 :
	<%=height%><br /> 체중 :
	<%=weight%><br />
	<!-- 	heightp :heightphtp %><br />
	bmi :bmibmi %><br /> <hr /> -->
	<hr />
	BMI측정결과:신체질량지수(BMI)는 <%=result%>로 <%=result2%> 입니다.<br />
	<button onclick="history.back()" class="btn btn-success btn-lg">Back</button>
	<br />

	<%-- 	getClass : <%=vo.getClass() %> <br /> --%>
	<%-- 	Heightbar : <%=vo.getHeightbar() %> <br /> --%>
	<%-- 	Weightbar : <%=vo.getWeightbar() %> <br /> --%>
	<%-- 	Result : <%=vo.getResult() %> <br /> --%>

	<script type="text/javascript">
		function check(result) {
			if (result >= 25) {
				alert("BMI측정결과:신체질량지수(BMI)는 " + result + "로 '비만'입니다.")
			} else if (result >= 23) {
				alert("BMI측정결과:신체질량지수(BMI)는 " + result + "로 '과체중'입니다.")
			} else if (result >= 18.5) {
				alert("BMI측정결과:신체질량지수(BMI)는 " + result + "로 '정상'입니다.")
			} else {
				alert("BMI측정결과:신체질량지수(BMI)는 " + result + "로 '저체중'입니다.")
			}
		}
		
		
		
		var result =<%=result%>;

		check(result);
		
		//신장과 체중 버튼 위치가 계속 변경되는 스크립트
		// 	function ChangeMode(){
		// 		if(check == 0){
		// 			check = 1
		// 		}else{
		// 			check = 0
		// 		}
		// 	}
		
		</script>
	<script type="text/javascript" src="/WebContent/Calc/js/bootstrap.js"></script>
</body>
</html>

import React,{ useState } from "react";
import logo from "./logo.svg";
import "./App.css";

function App() {
  

  let [글제목,글제목변경] = useState(['남자 코트 추천', '강남 우동 맛집', '여자코트 추천']);
  let [따봉, 따봉변경] = useState(0);
  
  // function 제목바꾸기(){
  //   var newArray = [...글제목];
  //   newArray[0] = '여자코트 추천';
  //   글제목변경(newArray);
  // }


  return ( 
  <div className="App">
      <div className="black-nav">
          <div>개발 Blog</div>
      </div>
      <button onClick={{}}>버튼</button>
      <div className="list">
        <h3> { 글제목[0] } <span onClick={()=>{따봉변경(따봉+1)}}>👍 </span> {따봉} </h3>
        <p>2월 17일 발행</p>
        <hr/>
      </div>
      <div className="list">
        <h3> { 글제목[1] } </h3>
        <p>2월 14일 발행</p>
        <hr/>
      </div>
      <div className="list">
        <h3> { 글제목[2] } </h3>
        <p>2월 15일 발행</p>
        <hr/>
      </div>


       <Modal />
      </div>

  
  );
}

function Modal(){
  return (
    <div className="modal">
        <h2>제목</h2>
        <p>날짜</p>
        <p>상세내용</p>
      </div>
  )
}


export default App;

나한테는 제일 쉬웠던 react 강의였다. https://www.youtube.com/watch?v=nahwuaXmgt8 주소로 가면 볼수있으며

코드는 다음과 같다!

위는 예시이다.

우리 스터디는 국비 학원생으로 이뤄진 스터디로 총 6명에서 나눠서 스터디를 한다. 

그 중 두명은 프론트엔드(나포함), 4명은 백앤드 개발자를 희망하고 있는데

처음부터 이렇게 나눠서 시작한것은 아니였다. 최근에서야 나는 프론트엔드 개발이 적성에 맞는 것을 알아채곤

바쁘게 프론트엔드 취업 준비중이다.(css, js, react, typescript) 등

우리학원 과정은 백앤드 과정으로 준비되어 있어서 따로 공부해야 될 내용이나 사야될 책이 많았다. ㅠㅠ

자바스크립트는 '모던 자바스크립트 입문' 이라는 책과 유튜버 코딩 앙마님의 중,초급 강의 100분짜리를 두개 다 들었다.

리액트는 코딩애플님의 '리액트 기초 : 블로그 프로젝트 만들기' 와 벨로퍼트님의 강의를 보며 아직 공부중이다.

아직 초반부지만 열심히 배워 다음 최종 프로젝트때는 꼭 리액트 + 타임스크립트를 활용해서 앞단을 꾸며보고 싶다.

아무튼 이 스터디에 내가 왜 들어가게 되었냐면 물런 취업준비를 위해서 들어갔다. 혼자서는 준비하기가 너무 막막했고, 답답했다.

우리조는 전공자 1명 + 비전공자 5명인데 전공자 분께서 많은 도움을 주면서 it지식을 우리에게 가르쳐주고 계시다

https://blog.naver.com/repaid11010/222630513357

이분의 블로그 인데 정말 도움이 많이 되었다. 다시 한번 읽어봐도 될거같다. 프론트엔드 개발자가 배워야 할 과목들과 다른 it 개발자들이 배워야 할 과목까지도 알게되었다.

우리 스터디는 매주 마다 전공자님의 가르침을 받고 있다(?) 첫 주에는 백준 티어 설정 법 부터 이클립스 깃 허브 연동, 커밋하는 법 까지 실무에 도움되는 부분(특히 깃허브!!)도 가르쳐 주셔서 백번 절해도 모자르다..

둘째 주에는 알고리즘 설계와 종류에 대해서 배웠는데 지금은 알고리즘과 자료구조의 종류 정도만 기억하고 있다. 

에 가면 볼 수 있는데 나중에 고차원적인 개발자가 되려면 어려운 알고리즘 문제도 풀어야 한다고 한다. 지금 나는 실버 5단계 정도의 랭킹이다. 자바로 문제를 풀고 있고, 조만간 자바스크립트로도 브론즈 5 부터 풀어볼 예정이다.

셋째 주에는 [Eclipse | Github] Pull 과 Branch, Commit 하는 법을 배웠는데, 실무에서 깃허브는 필수라고 한다. 미니 프로젝트를 진행하면서 pull로 뼈대만 된 자료를 받아 branch를 나누어 최종 commit 하였다. 미니프로젝트에 관한 내용은 나의 깃허브에 있다. 

https://github.com/serenaa2/SGAFirstExam

처음 프로젝트를 해본거라 지금 보면 아쉬운 부분도 많지만 그래도 끝까지 해냈다는게 자랑스럽다 ㅎㅎㅎ...

나는 계산기(calc)의 코드를 짜고 프론트엔드를 구성했다. 계산기 중간에 보면 -1씩 떨어지는 내용이 있는데 그 부분에서 올바른 값이 나오지 않아 고생했던 기억이 남아있다.

(지금보니까 들여쓰기를 하나도 안했다.... 김버그님의 유튜브를 보면서 들여쓰기의 중요성을 이제야 깨달았다...)

$(function () {
			$("#remove").click(function(){
				if(check==0){
					var value = $("#heightbar").val();
						if(value!=null && value.length>0){
				// 원본에서 맨뒤의 1글자를 제하고 잘라낸다.
						value = value.substring(0, value.length-1);
				// 그 값으로 내용을 변경한다.
						$("#heightbar").val(value);
					}
				}else{
						var value = $("#weightbar").val();
							if(value!=null && value.length>0){
						// 원본에서 맨뒤의 1글자를 제하고 잘라낸다.
							value = value.substring(0, value.length-1);
						// 그 값으로 내용을 변경한다.
							$("#weightbar").val(value);
							
						}
					}
			});
	});

강사님의 도움을 받아 제이쿼리로 처음 수정해본 코드라 인상깊게 남아있다.

지금은 우리가 처음 만들었던 계산기, 달력, 검색을 기본 삼아서 세 가지를 합친 홈페이지를 만들고 있는 중이다. 최종프로젝트 전까지 완성 될 예정이며 깃허브에 커밋 할 예정이다..!!

새 홈페이지를 만들때 jsp로 제작을 했는데, 홈페이지 로그인, 메인홈페이지, 자동가입방지 기능 구현, 아이디/비밀번호 유효성 검사, 회원정보 수정 등의 역할을 하였다. 많은 것을 하였지만 최종 완성(80%)이 다가오는 지금은 아쉬운게 많이 보인다. css를 따로 빼지 않고 style 태그에 그대로 적용했다던가, 들여쓰기가 제대로 안되있다던가... 최종 프로젝트는  이를 바탕으로 더 짧고 좋은 코드를 짤 예정이다.

인터넷에 국비학원 스터디를 보면 제대로 안돌아가는 스터디가 많던데, 우리 스터디는 서로 커뮤니케이션이 잘 되는 편이라 그럴 걱정은 없을꺼 같다.

연휴 설날때도 빠지지  않고 스터디를 하고 있고, 학원가는 날에는 새벽 두시까지도 디스코드로 스터디를 한적도 있다.

아무튼 지금은 매일매일 발전해 나가는 개발자가 되고 싶다. ㅎㅎㅎ 

이게 왜 안되는지 모르겠다.. 이클립스로 컴파일 했을때는 이상이 없었는데..

package baekjoon;

import java.util.*;

public class Main {
	public static void main(String[] args) {
		Scanner sc = new Scanner(System.in);
		int year = sc.nextInt();
		if ((year % 400 == 0) && (year % 100 != 0) || (year % 4 == 0)) {
			System.out.println("1");
		} else
			System.out.println("0");
	}
}