멀티캠퍼스 JAVA 백엔드 부트캠프/정리

멀티캠퍼스 백엔드 개발자 취업캠프(Java) 입과 10주차 정리

5ein 2023. 4. 11. 01:24

2023.04.03

스프링 내부 처리방식이 알듯말듯 하게 머리속에서 알랑거린다 ㅠ 

스프링 내부 처리 방식1
스프링 내부 처리 방식2

 

톰킷이 읽는 xml순서?

web.xml => root-context.xml(context-loader) => servlet-context.xml

 

xml설정 확인문제

확인문제를 풀었다! 헷갈렸던 순서가 이제는 헷갈리지 않을수 있을 것 같다!

 

url과 uri의 차이

url (uniform resources locator) => 통일된 자원의 위치

uri (uniform resources identifier) : id => 통일된 자원을 id 표현, url형태

 

오늘 배운것을 토대로 게시글에 댓글다는것을 구현하였다! 주말에 또 복습해야겠다!! 


2023.04.04

스프링내부처리방식 그림을 다시 그려보고 흐름도 생각해봤다!

 

빨간 list가 무엇을 뜻하는지가 자꾸 헷갈렸었다!

 

마지막 문제로 기본문제(오늘배운것 복습할수있는 문제) 와 심화문제중 선택하는것 이었는데!

나는 랜덤으로 정해진 팀원들과 기본문제를 푸는것을 택했었다! 심화문제는 개인적으로 풀어봐야겠다!


2023.04.05

REST API(모듈만들기)

 

Json {“”:“”, “2”:””} 형태가 기본적이다,

외에도 {“키” : [1, 2, 3]} 형식과 {“키" : {“키”:”값"}, “키2: 100} 형식 등이 있다.

그런데 {“키" : “값"} {“키”: “값"} 이것은 안된다!! (why? 키가 같음, 쉼표와 대괄호 없이 이어져 있음)  

=> 이렇게 바꾸어줘야 [{“키" : “값"} ,{“키2: “값"}]

 

실습을 여러번 하고 정리문제를 풀었다!

카카오맵과 구글차트부분은 시간이 없어 수업시간내 해내지 못했다 강사님께서 내일 같이 해주신다고 하셨다!!


2023.04.06

어제 카카오맵문제와 구글차트 문제를 풀었다 하지만 어제 풀던 jsp에서 구현하는것이 아니라 따로 jsp를 만들어서 구현했기때문에 주말에 ajax_test4.jsp에 추가하는것을 혼자서 다시 해봐야겠다!!

 

1. 웹 프로그램 구조 그림
클라이언트측-----웹서버측-----db

2. 웹 프로그램 각 측면을 설명
클라이언트측- 웹서비스를 이용하는 고객, 브라우저
웹서버측- 웹서비스를 제공하는 서버, 웹서버+WAS
	웹서버: 클라이언트의 요청을 받아서 적절히 응답
	->단순한 요청(html)은 찾아서 응답
	->복잡한 요청(java, php, python, c#)은 웹서버 불가능 
      Web Application Server (WAS)
DB측 - 데이터를 가지고 있는 부분

3. 각 측면에서 필요한 기술
클라이언트측- html, css, js(jquery, ajax), 외부API
웹서버측- 자바, spring, jdbc(myBatis, jpa)
DB측 - sql

스프링에서 싱글톤 설정하고 사용하는방법 2가지

방법1) 설정파일 xml을 이용하는 방법 - 외부에서 가지고온 경우, class만 있는 경우 ->root-context.xml

방법2) @표시를 이용하는 방법 - java소스가 있는 경우(어노테이션, @Component, @Controller, @Autowired, ...)

 

내 코드에서는 2번방법 쓰면 되지만, 수정 할 때 코드를 열수 없는 경우에는 방법1 사용해야 함.

 

스프링에서 싱글톤으로 만드는 방법
1) 프로그래머가 생성한 코드들:
	클래스위에 어노테이션을 달아서 스프링에게
	싱글톤객체 생성 요청
2) mvn에서 다운로드 받은 클래스파일들:
	소스코드를 열어서 어노테이션을 달 수 없음.
	스프링에서 제공한 파일에 싱글톤객체 생성 정의 
    context파일(컨텍스트 파일)
	=> 스프링에서는 context단위는 스프링 프로그램 하나
	   스프링에서의 컨텍스트 파일은 스프링 전체에서 사용할 
       싱글톤 객체 생성을 담당
	=> 안드로이드에서는 context단위는 activity(액티비티) 하나

 

1주: Spring project 전체구조
	(MVC2)
	m:특정한 기능을 수행한 클래스(방법,model)
		=> DAO, DTO
	v:보여지는 부분(view) => JSP
		2가지-webapp아래 : 클라이언트의 직접적인 호출
			 -views 아래 : 서버의 결과를 담아서 보여줄 페이지
	c: 클라이언트의 요청을 받아서 어떻게 처리할 것인지 제어하는 클래스(controller) => class

2주:Dependency Injection(DI, 의존성 주입)
-서버측의 객체 생성은 최소화시킬 필요가 있다.
-되도록이면 객체 생성은 한번만 하자!!
 (싱글톤 방법 사용)
-DAO는 하나만 싱글톤으로 만들어쓴다.
-한번 생성된 객체는 두번째 이상부터 사용할 때 또 생성하지 말자.
-이미 만들어져 있는지 찾아서 만약에 만들어져 있는 것이 있다면 그것을 그냥 사용하자.

myBatis를 사용하려면

1. 필요한 라이브러리 pom.xml에 정의
2. myBatis 싱글톤 객체 생성 정의(context파일)
3. db관련 설정을 해주어야 한다.
4. 한 테이블 당 하나의 mapper파일을 만들어준다.
   테이블이 5개라면 mapper파일도 5개.
5. mapper파일의 리스트를 관리해주는 전체 myBatis설정 파일 필요
   config파일
6. DTO, DAO필요
7. 프로젝트의 모든 코드는 파일 하나당 하나의 기능만 담당!
	(응집도가 높게!!!)
8. 프로젝트의 모든 코드는 결합도를 낮추어야 한다.!
	(업캐스팅)

 

에러보는법을 배웠다!!


2023.04.07

myBatis를 포함한 Spring설정(mvc2)

1. project facets: jdk, tomcat
2. pom.xml
		1)jdk, fwork
		2)repository
		3)mvn dependency 5개 설정
			- driver, dbcp
			- mybatis, mybatis-spring, spring-jdbc
3. context파일에 빈 설정
		1) dbcp: driver, url, user, pw설정
				(db.properties) => ns: context
	2) mybatis: 설정된 객체의 주소만 넣어서 객체 생성
    3) mybatis factory: dbcp설정, mybatis설정 파일 지정
4. myBatis 설정파일
	1) mapper파일: 테이블당 보통 하나씩 만든다. 
    2) config 파일: mapper파일 관리, 별명 설정
5. mvc에 맞게 구현
	1) 입력화면
	2) 컨트롤러
	3)dao객체 사용: dao내에 mybatis 주입 
    4)views화면

Book으로 해보기! (Insert, update, delete) 

one(검색) 배움! 그후 스스로 해보기

 

mapper

mapper

mapper파일의 역할
------------------
- 한 테이블당 필요한 sql문 작성
- ResultMap태그를 이용
   =>db table에서 추출한 정보를
	어떤 dto의 변수에 맵핑시킬지 정의
	Java ----- Rdb간 mapping
	(Object    Rdb   Mapping: ORM)
- db 테이블내의 한 행(레코드)은 java의 dto로 mapping
- 하나의 레코드는 하나의 dto로 mapping
- 여러개의 레코드는 dto가 여러개가 들어가 있는 list로 만들어짐.

 

팀원 미션! 파이널 작품 같이할 팀원들과 미션을 수행했다! 우리 팀원 좋은것 같다!


2023.04.08 ~ 2023.04.09

주말에는 4/6에서 결심했던 주말에 ajax_test4.jsp에 추가하는것을 혼자서 다시 해봐야겠다!! 를 해보았다

그런데 google차트가 버튼에 추가만 하면 자꾸 에러가 뜨는것이다 ㅠㅠㅠ 구글에 서치도해보고 여러가지 다해봤지만 안되어 강사님꼐 여쭈어보았다!!

구글차트는 함수와 버튼함수를 따로 만들어서 버튼을 눌렀을때 그 함수가 실행되도록 코드를 바꿔야한다고 한다!! 해결끝!!!

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="resources/js/jquery-3.6.4.js"></script>
<script type="text/javascript"
	src="//dapi.kakao.com/v2/maps/sdk.js?appkey=4d610e087d4d302ccdb7d223f816017f"></script>
<script type="text/javascript"
	src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
	$(function() {
		$('#b1').click(function() {
			$('#result').empty()
			$('#here').empty()
			$.ajax({
				url : "jsonReponse3",
				data : {
					id : "cookie"
				},
				dataType : "json",
				success : function(x) {
					id = x.id
					pw = x.pw
					name = x.name
					tel = x.tel
					table = "<table><tr><td>id</td><td>pw</td><td>name</td><td>tel</td></tr>" +
								"<tr><td>" + id + "</td><td>" + pw + "</td><td>" + name + "</td><td>" + tel + "</td></tr></table>"
					$('#result').append(table)
				}//success
			})//ajax
		})//b1
		$("#b21").click(function() {
			$('#result').empty()
			$('#here').empty()
			$.ajax({
				url : "jsonResponse4",
				dataType : "json",
				success : function(x) {
					//alert(x.length)
					if (x.length>0) {
						$(x).each(function(i, person) {
							var id = person.id;
							var pw = person.pw;
							var name = person.name;
							var tel = person.tel;
							var result = id + " " + pw + " " + name + " " + tel + "<br>"
							$('#result').append(result);
						})
					}
				}//success
			})//ajax
		})//b21
		$("#b22").click(function() {
			$('#result').empty()
			$('#here').empty()
			$.ajax({
				url : "jsonResponse4",
				dataType : "json",
				success : function(x) {
					header = "<table style='border: 1px solid black;'><tr><td style='border: 1px solid black;'>id</td><td style='border: 1px solid black;'>pw</td><td style='border: 1px solid black;'>name</td><td style='border: 1px solid black;'>tel</td></tr></table>"
					$('#result').append(header);
					$(x).each(function(i, person) {
						var id = person.id;
						var pw = person.pw;
						var name = person.name;
						var tel = person.tel;
						var table = "<table style='border: 1px solid black;'><tr><td style='border: 1px solid black;'>" + id + "</td><td style='border: 1px solid black;'>" + pw + "</td><td style='border: 1px solid black;'>" + name + "</td><td style='border: 1px solid black;'>" + tel + "</td></tr></table>"
						$('#result').append(table);
					})
				}//success
			})//ajax
		})//b22
		$('#b3').click(function() {
			$('#result').empty()
			$('#here').empty()
			$.ajax({
				url: "jsonResponse5",
				dataType: "json",
				success: function(json) {
					lat = json.lat
					lon = json.lon
					
					var mapContainer = document.getElementById('here'),
					mapOption = {
						center : new kakao.maps.LatLng(lat,lon),
						level : 3
					};
					
					var map = new kakao.maps.Map(mapContainer, mapOption);
					
					// 마커가 표시될 위치입니다 
					var markerPosition  = new kakao.maps.LatLng(lat, lon); 

					// 지도를 클릭한 위치에 표출할 마커입니다
					var marker = new kakao.maps.Marker({ 
					    // 지도 중심좌표에 마커를 생성합니다 
						position: markerPosition
					}); 
					// 지도에 마커를 표시합니다
					marker.setMap(map);
				}//seccess
			})//ajax
		})//b3
		
		$('#b4').click(function() {
			$('#result').empty()
			$('#here').empty()
			$.ajax({
				url: "",
				success: function(x) {
				    google.charts.load('current', {'packages':['corechart']});
				    google.charts.setOnLoadCallback(drawChart);
				}
			})
		})
		
		function drawChart() {
			$.ajax({
				url: "jsonResponse6",
				dataType: "json",
				success: function(list) {
					var arr2 = new Array(list.length + 1);
				    var header = ["Task", "hours"];
				    arr2[0] = header
				    
					for(i = 0; i < list.length; i++){
				    	one = new Array(2)
				    	one[0] = list[i].work;
				    	one[1] = list[i].time;
				    	arr2[i + 1] = one
					}
			        var data = google.visualization.arrayToDataTable(arr2);
			        
			        var options = {
			          title: 'My Daily Activities'
			        };
			
			        var chart = new google.visualization.PieChart(document.getElementById('here'));
			
			        chart.draw(data, options);
				}//success
			})//ajax
		}//draw chart
	})//$
</script>
</head>
<body>
	<button id="b1">Member한명 검색</button>
	<button id="b21">Member 리스트</button>
	<button id="b22">Member 리스트 테이블 형태</button>
	<button id="b3">카카오맵 위도경도</button>
	<button id="b4">구글차트</button>
	<hr>
	<div id="result"></div>
	<div id="here" style="width: 100%; height: 350px;"></div>
</body>
</html>

controller 와 vo를 만들어놓은뒤 같이 실행했다!


기술면접에서 난이도 있게 나오는 문제

정답

- 기술면접에서 ibatis mybatis 관계에 대해 아는지 질문을 ! 상식!!

              구글에서 Ibatis 가지 기술을 추가해서 만든 것이 myBatis이다!

대기업의 4차면접에서 나올 가능성이 있음!

면접에서 xml읽는 순서와 각각이 하는지 아는가? 질문할 있음