https://www.oracle.com/java/technologies/downloads/

 

Download the Latest Java LTS Free

Subscribe to Java SE and get the most comprehensive Java support available, with 24/7 global access to the experts.

www.oracle.com

들어간 후 본인이 원하는 버전에 java를 설치합니다.

 

x64 Installer 153.92 MB

저는 이걸로 설치했습니다 ~

다운로드가 완료되면 exe 파일을 실행하여 설치를 진행합니다.

 

 

설치 중간에 보여주는 자바 저장 위치를 꼭 메모장에 적어두거나 폴더로 열어두세요 ~~

설치가 완료될 경우 환경 변수를 설정해줄 차례입니다.

 

이때 환경 변수란 ?

쉽게 말해 alias입니다.

이름이 갓제너럴엠페러마제스티골져스프레셔스뷰리풀하이클래스엘레강스럭셔리클래식지니어스원더풀러블리월드탑클래스김자바인 사람을 매번 저렇게 부르기 힘드니,

킹자바로 줄여서 부르는 것과 마찬가지

매번 자바의 경로를 알려주는 것보단 환경변수를 설정함으로서 좀 더 쉽게 찾아갈 수 있습니다.

 

작업표시줄 윈도우 우클릭 > 시스템

(탭)고급 > (버튼)환경변수

 

(하단) 새로만들기 > 변수 이름 JAVA_HOME 변수값 자바 위치

Path 편집 > 새로만들기 > %JAVA_HOME%\bin 입력 후 위로 이동

확인할 경우 자바 설치 끝 ~

문제

Hello World!를 출력하시오.

입력

없음

출력

Hello World!를 출력하시오.

package JavaTestBackJoon;

public class B2557 {

	public static void main(String[] args) {
		System.out.println("Hello World!");
	}

}

11년 전 C언어로 첫 출력했었을 때 '이런 게 프로그래밍 .. ?' 했었는데 .. 감회가 새롭다.

반가워요 ~ 미세먼지 마지막 부분인 C 파트 프론트 부분을 설명드리는 날이네요.

포스팅만 하면 좋겠지만 ,, 취업 준비를 하는 과정 중에서 현재 다른 공부도 병행하고 아르바이트지만 일도 하느라 이리저리 치이네요 〆(´ω`●)ゞ

 

프론트 부분 설명드리고 시리즈 포스팅 마무리하겠습니다 ~! (^人^)

 + 스크롤이 매우 깁니다 .. +

 

monitoring_main.jsp 메인 화면에서는 충전기 / 날씨 / 미세먼지를 보여주는데요, 미세먼지 부분을 보시면 됩니다.

<%@page import="java.time.format.DateTimeFormatter"%>
<%@page import="java.time.LocalDateTime"%>
<%@page import="com.project.airquality.AirqualityDTO"%>
<%@page import="java.util.ArrayList"%>
<%@page import="java.util.List"%>
<%@page import="java.time.LocalDate"%>
<%@page import="com.project.weather.WeatherUtil"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
	<head>
		
        ...				
					<div class="card info-card sales-card">
						<div class="card-header">
							<h5 class="card-title">미세먼지 정보</h5>
						</div>
						<div class="card-body">
							<div class="cmp-cmn-para odam-updated" style="padding: 10px; ">
								<a href="/evweb/airquality/getDataDust.do?stationId=${stationId}" class="updated-at">
								<%AirqualityDTO airqualityInfo =(AirqualityDTO)request.getAttribute("airqualityInfo"); 
								  LocalDate airdate = LocalDate.parse(airqualityInfo.getDatatime().substring(0,10), DateTimeFormatter.ISO_DATE);
								  String airtime = airqualityInfo.getDatatime().substring(5,7)+"."+airqualityInfo.getDatatime().substring(8,10)
										  		 +".("+util.getDayOfWeek(airdate)+")"+airqualityInfo.getDatatime().substring(11);
								%>
								<span><%=airtime%></span></a>
							</div>	
							<div class="cmp-cur-weather cmp-cur-weather-air">
							<h3 class="hid">대기질정보</h3>
							<ul id = "wrap-3" class="wrap-2 air-wrap no-underline">
								<li><span class="lbl">초미세먼지<small>(PM2.5)</small></span>
									<strong class="air-level val">
										<c:choose>
											<c:when test="${airqualityInfo.pm25value<=15}"><span class="air-lvv-wrap air-lvv-1"></c:when>
											<c:when test="${airqualityInfo.pm25value<=35}"><span class="air-lvv-wrap air-lvv-2"></c:when>
											<c:when test="${airqualityInfo.pm25value<=75}"><span class="air-lvv-wrap air-lvv-3"></c:when>
											<c:when test="${airqualityInfo.pm25value>=76}"><span class="air-lvv-wrap air-lvv-4"></c:when>
											<c:otherwise><span class="air-lvv-wrap air-lvv-0"></c:otherwise>
										</c:choose>
										<span class="air-lvv">${airqualityInfo.pm25value}</span><small class="unit">㎍/m³</small></span>
										<span class="air-lvt" style="color: #000;">
										<c:choose>
											<c:when test="${airqualityInfo.pm25value<=15}">좋음</c:when>
											<c:when test="${airqualityInfo.pm25value<=35}">보통</c:when>
											<c:when test="${airqualityInfo.pm25value<=75}">나쁨</c:when>
											<c:when test="${airqualityInfo.pm25value>=76}">매우나쁨</c:when>
											<c:otherwise>통신장애</c:otherwise>
										</c:choose>
										<a  href="#legend" data-air-type="pm25">범례보기</a></span>
									</strong>
								</li>
								
								<div class="cmp-cur-weather cmp-cur-weather-air">
									<h3 class="hid">대기질정보</h3>
									<ul class="wrap-2 air-wrap no-underline">
										<li><span class="lbl">초미세먼지<small>(PM2.5)</small></span>
											<strong class="air-level val"><span	class="air-lvv-wrap air-lvv-2"><span class="air-lvv">27</span>
											<small class="unit">㎍/m³</small></span>
											<span class="air-lvt" style="color: #000;">보통<a  href="#legend" data-air-type="pm25">범례보기</a></span></strong></li>
											
										<li><span class="lbl">미세먼지<small>(PM10)</small></span> 
											<strong	class="air-level val"><span	class="air-lvv-wrap air-lvv-2"><span class="air-lvv">68</span>
											<small class="unit">㎍/m³</small></span>
											<span class="air-lvt" style="color: #000;">보통<a href="#legend" data-air-type="pm10">범례보기</a></span></strong></li>
									</ul>
									<div class="cmp-air-legend">
										<div class="shadow-box" data-air-type="pm25">
											<div class="inner">
												<a href="#close" class="close-box">닫기</a>
												<h5>초미세먼지(㎛)</h5>
												<p>입자의 크기가 2.5㎛ 이하인 먼지</p>
												<ul class="air-legend">
													<li class="air-legend-1"><span>좋음<br>(0~15)
													</span></li>
													<li class="air-legend-2"><span>보통<br>(16~35)
													</span></li>
													<li class="air-legend-3"><span>나쁨<br>(36~75)
													</span></li>
													<li class="air-legend-4"><span>매우나쁨<br>(76~)
													</span></li>
												</ul>
											</div>
										</div>
										<div class="shadow-box" data-air-type="pm10">
											<div class="inner">
												<a href="#close" class="close-box">닫기</a>
												<h5>미세먼지(㎛)</h5>
												<p>입자의 크기가 10㎛ 이하인 먼지</p>
												<ul class="air-legend">
													<li class="air-legend-1"><span>좋음<br>(0~30)
													</span></li>
													<li class="air-legend-2"><span>보통<br>(31~80)
													</span></li>
													<li class="air-legend-3"><span>나쁨<br>(81~150)
													</span></li>
													<li class="air-legend-4"><span>매우나쁨<br>(151~)
													</span></li>
												</ul>
											</div>
										</div>
								<li><span class="lbl">미세먼지<small>(PM10)</small></span> 
									<strong class="air-level val">
										<c:choose>
											<c:when test="${airqualityInfo.pm25value<=30}"><span class="air-lvv-wrap air-lvv-1"></c:when>
											<c:when test="${airqualityInfo.pm25value<=80}"><span class="air-lvv-wrap air-lvv-2"></c:when>
											<c:when test="${airqualityInfo.pm25value<=150}"><span class="air-lvv-wrap air-lvv-3"></c:when>
											<c:when test="${airqualityInfo.pm25value>=151}"><span class="air-lvv-wrap air-lvv-4"></c:when>
											<c:otherwise><span class="air-lvv-wrap air-lvv-0"></c:otherwise>
										</c:choose>
										<span class="air-lvv">${airqualityInfo.pm25value}</span><small class="unit">㎍/m³</small></span>
										<span class="air-lvt" style="color: #000;">
										<c:choose>
											<c:when test="${airqualityInfo.pm25value<=30}">좋음</c:when>
											<c:when test="${airqualityInfo.pm25value<=80}">보통</c:when>
											<c:when test="${airqualityInfo.pm25value<=150}">나쁨</c:when>
											<c:when test="${airqualityInfo.pm25value>=151}">매우나쁨</c:when>
											<c:otherwise>통신장애</c:otherwise>
										</c:choose>
										<a  href="#legend" data-air-type="pm10">범례보기</a></span>
									</strong>
								</li>
							</ul>
							<div class="cmp-air-legend">
								<div class="shadow-box" data-air-type="pm25">
									<div class="inner">
										<a href="#close" class="close-box">닫기</a>
										<h5>초미세먼지(㎛)</h5>
										<p>입자의 크기가 2.5㎛ 이하인 먼지</p>
										<ul class="air-legend">
											<li class="air-legend-1"><span>좋음<br>(0~15)
											</span></li>
											<li class="air-legend-2"><span>보통<br>(16~35)
											</span></li>
											<li class="air-legend-3"><span>나쁨<br>(36~75)
											</span></li>
											<li class="air-legend-4"><span>매우나쁨<br>(76~)
											</span></li>
										</ul>
								<li><span class="lbl">미세먼지<small>(PM10)</small></span> 
									<strong class="air-level val">
										<c:choose>
											<c:when test="${airqualityInfo.pm25value<=30}"><span class="air-lvv-wrap air-lvv-1"></c:when>
											<c:when test="${airqualityInfo.pm25value<=80}"><span class="air-lvv-wrap air-lvv-2"></c:when>
											<c:when test="${airqualityInfo.pm25value<=150}"><span class="air-lvv-wrap air-lvv-3"></c:when>
											<c:when test="${airqualityInfo.pm25value>=151}"><span class="air-lvv-wrap air-lvv-4"></c:when>
											<c:otherwise><span class="air-lvv-wrap air-lvv-0"></c:otherwise>
										</c:choose>
										<span class="air-lvv">${airqualityInfo.pm25value}</span><small class="unit">㎍/m³</small></span>
										<span class="air-lvt" style="color: #000;">
										<c:choose>
											<c:when test="${airqualityInfo.pm25value<=30}">좋음</c:when>
											<c:when test="${airqualityInfo.pm25value<=80}">보통</c:when>
											<c:when test="${airqualityInfo.pm25value<=150}">나쁨</c:when>
											<c:when test="${airqualityInfo.pm25value>=151}">매우나쁨</c:when>
											<c:otherwise>통신장애</c:otherwise>
										</c:choose>
										<a  href="#legend" data-air-type="pm10">범례보기</a></span>
									</strong>
								</li>
							</ul>
							<div class="cmp-air-legend">
								<div class="shadow-box" data-air-type="pm25">
									<div class="inner">
										<a href="#close" class="close-box">닫기</a>
										<h5>초미세먼지(㎛)</h5>
										<p>입자의 크기가 2.5㎛ 이하인 먼지</p>
										<ul class="air-legend">
											<li class="air-legend-1"><span>좋음<br>(0~15)
											</span></li>
											<li class="air-legend-2"><span>보통<br>(16~35)
											</span></li>
											<li class="air-legend-3"><span>나쁨<br>(36~75)
											</span></li>
											<li class="air-legend-4"><span>매우나쁨<br>(76~)
											</span></li>
										</ul>
									</div>
								</div>
								<div class="shadow-box" data-air-type="pm10">
									<div class="inner">
										<a href="#close" class="close-box">닫기</a>
										<h5>미세먼지(㎛)</h5>
										<p>입자의 크기가 10㎛ 이하인 먼지</p>
										<ul class="air-legend">
											<li class="air-legend-1"><span>좋음<br>(0~30)
											</span></li>
											<li class="air-legend-2"><span>보통<br>(31~80)
											</span></li>
											<li class="air-legend-3"><span>나쁨<br>(81~150)
											</span></li>
											<li class="air-legend-4"><span>매우나쁨<br>(151~)
											</span></li>
										</ul>
									</div>
								</div>
							</div>
						</div>
						<div class="cmp-cmn-para cmp-cur-weather-air">
							<p class="right spon">
								정보출처: <a href="http://m.airkorea.or.kr" target="_blank"
									title="새창열림">대기질정보(한국환경공단)</a>
							</p>
						</div>
						</div>
					</div>
				</div>
				
				<!-- 충전량 -->
		        <div class="col-md-8 pr-0">
						<div class="card info-card sales-card " style="z-index : 1;">
							<div class="card-header">
								<h5 class="card-title">일간 충전량 <span style="float: right">${chargeAmount}kWh</span></h5>
							</div>
							<div class="card-body">
							<figure class="highcharts-figure">
						    <div id="chargeday"></div>
							</figure>
							</div>
						</div>
						<div class="card info-card sales-card" style="z-index : 0;">
							<div class="card-header">
								<h5 class="card-title">주간 충전량 <span style="float: right">${weekamount}kWh</span></h5>
							</div>
							<div class="card-body">
								<figure class="highcharts-figure">
						   		<div id="chargeweek"></div>
								</figure>
							</div>
						</div>
					</div>
		        </div>
			</div>
		</div>
	</body>
</html>

 

weather.jsp 입니다. 날씨와 미세먼지가 함께 있는데요. 

도저히 .. 길어서 편집했습니다. 모든 내용이 궁금하시다면 1편에 있는 깃허브 주소에 들어가주세요 ~ ❤

<%@page import="com.project.weather.WeatherUtil"%>
<%@page import="java.time.format.DateTimeFormatter"%>
<%@page import="java.time.LocalDate"%>
<%@page import="java.time.DayOfWeek"%>
<%@page import="java.util.ArrayList"%>
<%@page import="com.project.airquality.AirqualityDTO"%>
<%@page import="com.project.weather.WeatherDTO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles"%>
<!DOCTYPE html>
<html>
<head>
<title>단기예보 - 기상청 날씨누리</title>

...

			<!-- 미세먼지 시작 -->
			<div class="card-body">
				<div class="cmp-cmn-para odam-updated" style="padding: 10px;">
					<a href="/evweb/airquality/getDataDust.do?stationId=${stationId}"
						class="updated-at">
					</a>
				</div>
				<div style="display: flex; justify-content: center;">
					<div class="forecast-body" style="font-family: &amp; amp;">
						<%-- ${airqualityInfo.datatime} --%>
						<div class="forecast-body" style="font-family: &amp; amp;">
							<div class="forecast-body-summary">
								<table>
									<tr class="wf-row-pm25">
									<tr>
										<td>지역</td>

										<c:forEach items="${airqualityInfo}" var="dust">
	
											<!-- 구름 -->
											<td style="padding: px 1px 0px 0px;">
												<div style="display: inline-block; width: 80px;">
													<svg width="80px" height="80px" version="1.1"
														viewBox="0 0 64 52"
														style="filter: transform-origin: 50% 50% 0px;">
														<g>
														<c:choose>
											<c:when test="${dust.pm25value<=15}"><path fill="#099d6e"
															d="M47.165,51.322H16.834c-7.142,0-12.952-5.81-12.952-12.952c0-6.042,4.264-11.29,10.076-12.615 c-0.025-0.298-0.036-0.584-0.036-0.861c0-6.736,5.479-12.216,12.215-12.216c4.756,0,8.986,2.697,11.01,6.941 c5.152-0.822,9.957,1.677,12.398,6.033c6.063,1.131,10.571,6.503,10.571,12.718C60.117,45.513,54.308,51.322,47.165,51.322z"></path>
												</c:when>
											<c:when test="${dust.pm25value<=35}"><path fill="#fbde3d"
															d="M47.165,51.322H16.834c-7.142,0-12.952-5.81-12.952-12.952c0-6.042,4.264-11.29,10.076-12.615 c-0.025-0.298-0.036-0.584-0.036-0.861c0-6.736,5.479-12.216,12.215-12.216c4.756,0,8.986,2.697,11.01,6.941 c5.152-0.822,9.957,1.677,12.398,6.033c6.063,1.131,10.571,6.503,10.571,12.718C60.117,45.513,54.308,51.322,47.165,51.322z"></path>
												</c:when>
											<c:when test="${dust.pm25value<=75}"><path fill="#fb9c3d"
															d="M47.165,51.322H16.834c-7.142,0-12.952-5.81-12.952-12.952c0-6.042,4.264-11.29,10.076-12.615 c-0.025-0.298-0.036-0.584-0.036-0.861c0-6.736,5.479-12.216,12.215-12.216c4.756,0,8.986,2.697,11.01,6.941 c5.152-0.822,9.957,1.677,12.398,6.033c6.063,1.131,10.571,6.503,10.571,12.718C60.117,45.513,54.308,51.322,47.165,51.322z"></path>
												</c:when>
											<c:when test="${dust.pm25value>=76}"><path fill="#cb0b3d"
															d="M47.165,51.322H16.834c-7.142,0-12.952-5.81-12.952-12.952c0-6.042,4.264-11.29,10.076-12.615 c-0.025-0.298-0.036-0.584-0.036-0.861c0-6.736,5.479-12.216,12.215-12.216c4.756,0,8.986,2.697,11.01,6.941 c5.152-0.822,9.957,1.677,12.398,6.033c6.063,1.131,10.571,6.503,10.571,12.718C60.117,45.513,54.308,51.322,47.165,51.322z"></path>
												</c:when>
										<%-- </c:choose> --%>
       											   </c:choose>
        										  
       
            									<text text-anchor="middle" font-family="serif"
															font-size="12" y="42" x="32" fill="#ffffff">${dust.stationname}</hr5>
       											   </g>
      												  </svg>
												</div>
												
												
											</td>
										</c:forEach>
									<tr>
										<td>PM<sub>2.5</sub></td>
										<c:forEach items="${airqualityInfo}" var="dust"><td>
												<pm10box style="">${dust.pm25value}</pm10box>
											</td></c:forEach>
									</tr>
									<tr>
										<td>PM<sub>10</sub></td>
										<c:forEach items="${airqualityInfo}" var="dust"><td>
										<c:choose>
											<c:when test="${dust.pm10value<=30}"><pm10box style="background-color:#099d6e;">${dust.pm10value}</pm10box></c:when>
											<c:when test="${dust.pm10value<=80}"><pm10box style="background-color:#fbde3d;">${dust.pm10value}</pm10box></c:when>
											<c:when test="${dust.pm10value<=150}"><pm10box style="background-color:#fb9c3d;">${dust.pm10value}</pm10box></c:when>
											<c:when test="${dust.pm10value>=151}"><pm10box style="background-color:#cb0b3d;">${dust.pm10value}</pm10box></c:when>
										<%-- </c:choose> --%>
       											   </c:choose>
												
											</td></c:forEach>

									</tr>
									<c:forEach items="${airqualityInfo}" var="dust">
										
									</c:forEach>
								</table>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 미세먼지 끝 -->
</body>
</html>

한 화면에서 모든 측정소의 데이터를 보여줄 수 있도록 하였고요 ~

미세먼지 수치에 따라서 구름의 색이 변하도록 하였습니다.

포스팅 후기나 프로젝트 후기는 1편에서 확인 가능합니다. 감사합니다 ~ (✿◠‿◠)

 

+ Recent posts