반응형

 

  이번에는 티스토리 블로그에 스크롤을 내려도 항상 애드센스 광고가 화면에 떠서 고정되어있는 플로팅 배너를 만들어볼 것이다.

 꾸미기 -> 스킨 변경

 

  현재 사용하고 있는 Book Club 스킨의 모습이다. 순정과 다른점이 있다면 스킨 설정에서 사이드바 위치가 좌측이라는점? 이건 개인차니 편한곳에 하면된다. 나는 일단 사이드바가 좌측에 있는걸 선호해서 좌측으로 바꾸고 시작하겠다.

 

  글을 읽다보면 저 빨간 공간이 남아도는데 저기다 광고를 넣을 수 있지 않을까? 생각을 하다가 넣어보니까 별거 없더라. 그래서 그 방법을 공유하려고 한다!

1. 전체크기 늘이기

  일단 현재 티스토리 컨텐츠 박스의 가로크기를 늘려야한다. 자 사실 좌측 슬라이드 밑에 광고 하나 다는건 크기 변경이 필요없다. 이미 사이드바 영역이 있기때문에 거기 밑에 새로 다는건 뭐 어렵지 않으니까, 그런데 기존 크기를 유지한 상태에서 광고가 하나 더들어면 div가 자리가 없어 계단식으로 깨지게된다. 그게 아니면 사이드바나 글이 나오는 컨텐츠 영역을 줄여야 하는데 그럼 가독성이 너무 없어진다. 그러므로 Full Size상태의 크기를 늘려주자.

  자 먼저 관리자 페이지에서서 꾸미기 -> 스킨편집에 들어와서 1번 박스에 있는 html 편집을 눌러주자.

 

  1. CSS 버튼을 눌러주자!

  2. 그다음 Ctrl+F 키를 눌러 검색을 해주자.

  3. 검색어는 1080이다. 1080px인것을 모두 조회해 1400px로 바꿔줄 것이다.

 

 

  바꿔야할 부분은 저렇게 7군데다.(순정 스킨기준) 저 옆에 줄번호는 CSS 수정유무에 따라서 차이가 날 수 있다. 검색은 그냥 컨트롤+F눌러서 계속 검색하면 된다. 저 1080을 모두 1400px로 바꿔주자!

 

  바꾸면 이런 모습이 된다. 일단 저장을 하자..!

 

  처음에 비해 사이드 영역이 아주 넓어진것을 확인할 수 있다. 이제 저걸 조금 줄여서 우측에 광고를 넣을 자리를 만들꺼다.

2. 사이드영역 조정

 

  자 잘보면 너비를 조정함으로써 저 사이드영역을 구분해주는 친구가 깨진것을 볼 수 있다 저친구를 바로잡아주자.

.layout-aside-left #container .content-wrap:before {

  위 코드를 Ctrl+F를 이용해 CSS에서 찾아보자

 

 

  저 margin-left 를 -256px에서 -455px로 바꿔주자! 이 값을 바꾸고 뭐가 바뀌는지보고 향후에 자기가 조정할 사람은 조정하면된다. 여기서 나온 가이드는 최소 블로그답게 보여주기 위한 셋팅이다.

  자 이렇게 바꼈을 것이당

#container .content-wrap:before

  그 다음 위 코드를 한번 더 검색한다.

 

 

  저 두 퍼센테이지를 바꿔줄 것이다. 잘 보면 저 두 비율의 합이 100%이고 보면 위에 것이 글이 나오는 컨텐츠 영영의 비율, 아래가 사이드바의 비율일 것으로 추측할 수 있다. 이건 무슨 코드냐면, 반응형으로 동작했을때 어떻게 도식할껀지에 대한 퍼센테이지 이다. 이걸 각각 70%, 30% 로 조정해준다. 이게 가장 자연스러웠던 것 같다.

  모두 바꿨으면 적용을 누르자. 그리고 화면을 보면 아직 약간 이상할텐데 일단 계속 진행하면 된다.

3. 좌측 사이드바 너비 줄이기

#aside

 

  맨 위에 커서를 대고 위 코드를 검색한다. 아마 아주 많이 검색될텐데 가장 첫번째로 검색되는 것을 고치면된다.

 

  저 21.x %를 17%로 바꿔주자!

 

  그리고 적용하고 화면을 확인해보자

 

 

  뭔가 많이 좁아진 것을 알 수 있다. 그리고 가운데 수직선이 지나면서 화면이 깨져보이는데 이건 우측 슬라이드를 추가하면 괜찮아진다. 이제 우측 영역을 추가해보자!

4. 좌측 사이드바 광고 추가

 

 

 

  이번엔 HTML 영역으로 이동하자.

<footer id="footer">

 

  그리고 위 코드를 검색해주자.

  그럼 이렇게 조회가 될껀데 저 빨간 네모박스 태그 사이에 아래 태그를 추가하자.

<!-- 2020-07-18 플로팅 배너 시작-->
<s_sidebar_element>
	<div class="banner">
		<div id="chase" style="top:0px;">
			//여기에 애드센스 코드를 넣으세요!
		</div>
	</div>
</s_sidebar_element>
<!-- 2020-07-18 플로팅 배너 끝-->

 

  나는 저기 코드에 "일치하는 컨텐츠 광고" 를 넣었다.

 

  뭐 추가하면 이런모슥이 될 것이다. 안에 광고코드는 본인들꺼를 넣으면 된다.

5. 우측 사이드바 광고 추가

 

<div class="content-wrap">

 

  HTML에서 위 코드를 검색하자

 

  이런식으로 검색이 될껀데 우린 저 빨간 상자안에 있는 태그 사이에 코드를 넣을꺼다.

 

<!-- 오른쪽 사이드바 시작-->
<aside id="asideRight" class="asideRight">
	<div id="chaseRight" style="top:0px;">

			<div class="sidebar-1">
				//광고 1
			</div>

			<div class="sidebar-1">
				//광고 2
			</div>
						
			<div class="sidebar-1">
				//광고 3
			</div>

	</div>
</aside>
<!-- 오른쪽 사이드바 끝 -->

 

  이런식으로 복붙한다. 만약 길게 배너 하나만 붙일꺼면 광고 1 div 태그만 사용하고 나머지 광고2, 광고3 div 뭉텅이는 지우면된다. 나는 길쭉한 배터는 좌측에 있음으로, 작은 배너 여러개를 노출시킬 것이다.

6. 우측 슬라이드 CSS 추가

 

 

  CSS로 이동을 해주자. 그리고 맨 마지막줄로 내려가 아래 코드를 추가해주자

/** 오른쪽 배너 CSS **/
	@media (max-width: 1400px){
		#asideRight { display : none;}
	}
	
	#asideRight { 
	float: right;
	margin-left: 0;
	padding: 80px 20px;
	height:100%;
	width: 160px;
	}

 

 

머 이정도가 될 것이다. 한번 적용을 해보자!

 

7. 상단 고정 스크립트 삽입

</style>

html에서 위 코드를 검색하자

  저기 검색될텐데 저 style 끝 태그와 head 끝 태그 사이에 코드를 하나 넣어주자.

<!-- 2020-07-18 플로팅 배너 시작-->
<script type="text/javascript">
	$(window).scroll(function(event){
		if(jQuery(window).scrollTop() > jQuery(".banner").offset().top) {
			jQuery("#chase").css("position", "fixed");
	}
	else if((jQuery(window).scrollTop() < jQuery(".banner").offset().top)) {
		jQuery("#chase").css("position", "static");
	}
});
</script>
<!-- 2020-07-18 플로팅 배너 끝-->
	
	<!-- 2020-07-18 플로팅 배너 시작 : 오른쪽 배너-->
<script type="text/javascript">
	$(window).scroll(function(event){
		if(jQuery(window).scrollTop() > jQuery(".asideRight").offset().top) {
			jQuery("#chaseRight").css("position", "fixed");
	}
	else if((jQuery(window).scrollTop() < jQuery(".asideRight").offset().top)) {
		jQuery("#chaseRight").css("position", "static");
	}
});
</script>
<!-- 2020-07-18 플로팅 배너 끝 오른쪽 배너-->

  위코드가 이제 스크롤을 내려도 상단에 떠있게 하는 친구다

 

 

  그럼 대략 이런 모습으로 들어간다. 이것도 적용을 해보자!

8. 기타 마감작업

#content {

  CSS에서 위 코드를 검색해주자.

 

 

  이 친구가 보일텐데 값을 바꿔주자.

#content {
	float: left;
	width: 68%;
	padding: 72px 15px 0 60px;
	box-sizing: border-box;
}

  이코드는 화면이 뛰틀리는걸 잡아주는 설정이다. 이제 적용하고 확인!

9. 최종 검수

 

 

  자 이제 스크롤을 내려도 좌우로 광고가 따라붙게 된다 ㅎㅎ

 

 

  자 창크기를 줄이면 자동으로 우측 배너가 없어지게 된다. 거기서 더 줄이면 최종적으로 좌측 배너도 사라지게 되면서 반응형 웹이 만들어진다 ㅎㅎ

 

  궁금한게 있으면 댓글 남겨주세요

 

[HTML/CSS] 티스토리 스크롤내려도 항상 보이는 반응형 플로팅 애드센스 광고 배너 만들기 / 양쪽 사이드바 추가 방법 / Book Club 스킨 / 수익 극대화

 

#HTML #CSS #티스토리 #스크롤 #내려도 #항상 #보이게 #반응형 #플로팅 #애드센스 #광고 #배너 #만들기 #하는법 #방법 #양쪽 #사이드바 #모듈 #추가 #BookClub #스킨 #편집 #수익 #극대화

 

반응형
  1. 익명 2020.08.08 05:10

    비밀댓글입니다

  2. 외장_하드 2020.08.08 13:49 신고

    소스가 필요ㅇ할꺼같아요!

  3. 익명 2020.10.13 09:40

    비밀댓글입니다

반응형

 

SW 형상관리

 

  형상관리란, SW의 형상을 관리하는 것이다. 구체적으로 말하자면 음.. 일단 소프트웨어라는건 서비스가 출시를 한다고해서 거기서 끝나는게 아니고, 어떤 오류가 났다, 아님 어떤 기능을 추가한다, 아님 어떤 기능을 없앤다 등.. 유독 변화가 심한 제품이라고 할 수 있다.

 

  특히 대규모 프로젝트인 경우는 개발자들이 수십, 백 단위로 개발이 되었을텐데 내가 이부분 수정하고, 저사람이 이부분 수정하고 그렇게 하다보면 개판이 되어버릴꺼고 통합하는데 어려움일 있을 것이다.

 

  그래서 나온 것이 그 소프트웨어의 형상을 관리해주는 툴이다..! 같은 말만 반복하고 있는거 같은데, 예시를 들어 알아보자. ㅎㅎ 형상관리툴은 중앙에 우리 프로젝트의 메인 소스들이 있고, 사람들이 그 메인 파일을 각자 컴퓨터에서 지지고 복고, 수정을 한다음에 자신의 부분만, 중앙에 있는 메인소스에 반영을 시키는 것이다. 아까 말했던것처럼 다른 사람과 중복으로 수정한 부분이 있으면 이것또한 Conflict가 발생했다고 알려주고, 가장 편리한 점은 언제 어떤 소스를 누가 Commit 했는지까지 추적이 되는 것이다.

 

  뭔가 서비스를 운영하다가 갑자기 안된다.. 그럼 가장 최근에 Commit했던 코드부터 의심한다. 왜냐..? 그전까진 잘됐으니까! 그 코드중에 어떤부분이 바꼈는지 또 어느상태로 Rollback 해야하는지까지 할 수 있는 것이다.

 

형상관리 툴의 종류

SVN vs GIT

 

1. SVN

 

 

  이친구는 SubVersion의 약자로 중앙방식의 형상관리 툴이다. GIT도 나중에 설명하겠지만, 이친구는 중앙에 하나의 메인 저장소만 두고, 각 콤퓨타들이 그 메인 중앙서버에 소스를 반영하는 방식이다. 머야..? 당연한거자나!? 라고 생각하겠지만, 맞다. 아주 당연하게 만든 프로그램이라 2004년도에 개발됐다...상당히 오래된 방식.. 하지만 아주 직관적이고 편리해서 지금까지도 널리 쓰이고 있다.

 

2. GIT

 

 

  자 GIT이다.. 요즘 컴퓨타를 배우는 사람들은 많이 들어봤을 것이다. 왠만한 오픈소스들은 GIT으로 많이 공유가 되니까말이다.. 이름이 GIT인 이유는 제작자가 만들다보니 그냥 이렇게 됐다고.. 이거 출시일도 SVN이랑 비슷하다. 아주 오래 됐는데 SVN과의 관계를 보면. 제작자가 SVN쓰다가 더이상 이거 못 써먹겠다 하고 개빡쳐서 만든게 바로 GIT이라고 한다. 소문에 의하면 2주만에 만들었다고..

 

  암튼 기업형 소프트웨어 개발이 아닌 우리같이 주식개미마냥 취미로 개발하는 사람들한테 인기가 더 많은 이 GIT은 GITHUB라는 소스 공유 사이트까지 운영하고 있다. 왠만한 라이브러리나 누군가 개발해놓은 소스들을 여기가면 다있으니 그야말로 오픈 소프트웨어의 성지라고 할 수 있다.

 

 

  GIT이 SVN과 다른점은 머 많은 기능들도 있지만, 가장큰 차이점은 동작 방식이 조금 다르다. SVN은 중앙서버에 직접 소스를 반영하는 방식이라면, GIT은 내 로컬서버에 해당 저장소가 있어서 각 개발자들이 본인이 개발한걸 본인들 로컬 저장소에 Commit한다. 그리고 최종적으로 로컬에 있는 소스들을 중앙 메인서버에 Push하는 방식이다.

 

차이점을 한 눈에 이해했나..!? 바로 로컬서버가 존재한다는 것.! 이제 구성 방법에대해서 알아보자!

1. GIT 설치

 

https://gitforwindows.org/

 

Git for Windows

Git for Windows focuses on offering a lightweight, native set of tools that bring the full feature set of the Git SCM to Windows while providing appropriate user interfaces for experienced Git users and novices alike. Git BASH Git for Windows provides a BA

gitforwindows.org

자 들어가보자 ㄱㄱ

 

 

  별거 없다. 좋은 사이트란 어려우면 안된다. 저렇게 큼지막하게 직관적으로 버튼이 있어야하는데 아주 좋다. 다운버튼을 눌러보자.

 

 

  뚜둔..! 다운 받았당 히히....실행해서 설치하장.

 

 

 

 

 

 

 

 

  진짜 별거 없다. 뭐... 선택할 수 있는 버튼도 많고.. 알겠는데... 미안한데..뭔지 모르겠다.. 일단 최선의 선택을 디폴트로 뒀을거라고 GIT 개발자들을 믿으며 긍정적인 버튼들만 눌러서 설치를 완료해보자!

2. GIT 디렉토리 생성

 

 

 

  자. 자기 GIT 소스들을 저장할 폴더를 원하는 위치에 만들고 그 빈 폴더를 오른쪽마우스를 눌러 Git Bash Here 버튼을 눌러주자.

 

 

 

  Bash 쉘이 실행되면서 간지나는 화면이 나온다. 거기다가 git init 을 입력하고 엔터를 눌러주자.

git init

 

  를 입력해보자! 그럼 저 위치를 저장소로 초기화했다는 문구가 나온다.

 

 

  우리가 지정했던 폴더에 .git 이라는 폴더가 생겼다 히히..만약 안보이는 사람이 있으면 폴더 옵션에 숨김파일 표시를 체크해주자!

 

  짜잔..! 로컬 GIT 저장소를 만들어따..!! 짝짝짞

 

 

#GIT #설치 #로컬 #저장소 #만들기 #형상관리 #툴 #SVN #차이점

 

 

 

 

 

반응형
반응형

 

https://extsdd.tistory.com/101

 

[Spring/eGov ] #5 웹 서비스 만들기 1 / 컨트롤러 생성 / VO 생성 / Controller / 다른 URL 페이지 포워딩 하�

https://extsdd.tistory.com/100 [Spring/eGov] #4 스프링 Sample 기본 예제 프로젝트, 패키지 이름 바꾸기 / 파일 찾기 extsdd.tistory.com 저번 시간에 드디어 예제 프로젝트의 정체성을 완전히 내걸로 만들어놨..

extsdd.tistory.com

 

 

  저번시간에 사용자가 URL요청을 하면, 서버가 다른 페이지로 넘겨주는 기능을 구현했다. 그런데 만약 여러 주소중 알맞은 주소로 포워딩 시켜준다고 하면 reqUrlNaver.do , reqUrlDaue.do, reqUrlGoogle.do 이런식으로 모든 .do 요청을 다 만들어야 할까?.! 아니다.

 

  페이지를 포워딩 시켜주는 reqUrl.do는 그대로 유지하고, 서버가 판단해주고 알맞은 서버로 포워딩 해주면 될 것같다. 그럴려면 사용자가 reqUrl.do를 호출할때 어떤 주소로 포워딩할 정보를 담아줄지 정보를 같이 넘겨줘야하는데, 이번시간에는 그 정보를 어떻게 넘겨주는지 알아보자! 많이 할껀 없고 저번에 VO를 만들어놨기때문에 좀 수월할 것이다.

 

@ModelAttribute

 

  자 사용자 화면에서 우리 서버로 요청을보낼때 데이터를 실어보내는 방법에는 여러가지가 있다.

  1. URL param (PathVariable)

  2. HttpServletRequest param

  3. RequestParam

  4. 기타 등등..

  꽤 여러가지가 있는데 우린 RequestParam 방식과 비슷하지만, 자동적으로 우리 VO와 매핑시켜주는 @ModelAttribute 방식을 이용해서 구현 할 예정이다.

 

  먼저 RequestParam방식은 @RequestParam("variable1") String variable1 이런식으로 사용자가 variable1로 데이터를 실어서 주면 스프링에선 String 자료형으로 variable1의 변수로 이용할 수 있다인데, 이게 불편한점이 머냐면, 가끔 변수 한, 두개 저렇게 해주면 쓸만한데 예를들어 사용자 페이지에서 변수 데이터 100개를 가져 와야한다고 치면

 

  @RequestParam("variable1") String variable1

  @RequestParam("variable2") String variable2

  @RequestParam("variable3") String variable3

  ...

  @RequestParam("variable100") String variable100

 

  이걸 다달아줘야한다.. 그렇지 않으려면 방법이 멀까!? 바로 VO를 이용하면 된다. 저번시간에 VO라는 친구들 배워봤다. 다시 리마인드 해보자면

 

 

  이런식이다. VariableVO에 변수 1부터 100까지 다 선언해놓고 그 100가지 변수를 담고있는 데이터 주머니를 VariableVO라고 부르는 것이다. 그건 알겠고 이제 그 VO랑 어떻게 하겠다는 건데?

 

 

  히힣.. 놀랍게도 벌써 그 구분은 저번에 코드에 넣어놨다. 저 1번 박스에 있는 부분만 한번 보자. 가장 핵심은 @ModelAttribute 어노테이션인데이 어노테이션은 사용자 페이지에서 넘어온 정보들을 서버에서 있는 스프링 프로젝트(java)단에서 쓸 수 있게 해주는 역할을 한다.

 

  자 그럼 저 어노테이션이 뭔 역할을 하는지 이제 알았고 searchVO라는것은 멀까 search..! 말그대로 찾는다..! 뭐를? VO를..!! VO를 찾는다..! 라는 뜻이다. 이걸 박아놓으면 사용자 요청에 어떤 데이터들이 들어올텐데 이걸 우리가 담을 데이터 바구니(VO)에 알아서 맵핑을 해주겠다는 것이고, searchVO로 불러온 데이터들은 보통 주로 쓰이는 메인 VO이기 때문에 자동으로 .do인 자바 요청이 끝난뒤 다시 사용자 페이지에 결과를 줄때 자동으로 모델에 추가해주는 기능을 한다. model.addAttribute("searchVO"); 이 한줄을 안써도 자동으로 된다는 뜻이다.!

 

  자 이제 개념은 알겠고, 혹여나 몰라도 상관없다. 이제 실습을 통해서 데이터를 어떻게 가지고 오는지 확인해 보자!

 

 

  자 저번에 우리가 만든 VO를 보면 reqParam 이라는 변수를 만들어 놨다. 이제 우리가 페이지 요청을 할때 저 데이터에 담아서 보내볼 껀데, 그 과정을 확인하려면, Debug를 해야한다!

 

Debug (디버그)

 

  오.. 오랫만에 그럴듯한 단어가 나왔다. 시스템에 문제가 생겼을때 개발자들이 말하곤한다. "디버깅해봐!", "디버깅 태워봐!!" 이런식으로 Debug + ing = Debugging 표현하는 것을 어꺠너머로 들어본 사람도 있을 것이다.

 

  TMI이긴 하지만, 근본적인거를 간단히라도 알고 하는게 좋으니까 한번 알아보자 ^_^. 자 Bug는 멀까!? 이거 게임많이 해본 사람이라면 아주 많이 들어봤을것이다. "아ㅡㅡ 버그 생겼어", "이거 버그 아냐!?" 뭔가 시스템적으로 오류가 생기면 버그가 발생했다고들 한다. 버그의 어원은 1940년대 하버드에서 컴퓨터 실험을하다 오작동이 발생해 확인해보니 컴퓨터 하드웨어에 모기가 껴있어서 발생해서 "Bug"라고 불리게 되었다.

 

  자 버그=오작동! 정도로 해석하면 되니 debug는 더 쉬울 것이다. de-라는 접두사는 반대의미를 가지고 있다. debug니 버그가 발생하지 않도록한다는 의미라고 해석하면된다.

 

  그럼 debug의미는 알겠는데 구체적으로 우리 프로그래머 단에서 하는건 먼데? 라고한다면, 코드를 한줄씩 돌려보고, 그 순간에 컴퓨터가 처리하고 있는 객체의 정보를 들여다 볼 수 있다. 즉, 우리가 어떤 요청을 했을때 우리가 보는 화면엔 "페이지를 표시할 수 없습니다" 이런 화면만 뜨면, 문제가 발생한 것은 알 수 있지만, 이 복잡한 컴퓨터 시스템에서 구체적으로 어떤 부분떄문에 문제가 발생했는지는 힘들 것이다. 실행->결과 이렇게만 나오니까.

 

  하지만 Debug과정을통해서 실행->과정->결과의 단계로 우리가 과정을 들여다보면서 원하는 코드구문에 BreakPoint를 걸어 한줄한줄 코드를 들여다보면서 어디서 어떤 부분에 어떤 데이터때문에 문제가 발생하는지 찾아볼 수 있는 분석 툴이라고 보면 된다!

Debug 모드로 프로젝트 실행

 

 

 

  자 우리가 원래 서버를 실행시킬때 보통 재생버튼을 눌러 실행해 보았으나, 이번에는 서버탭(1)을 클릭하고 원하는 서버를 클릭한뒤(2) 벌레모양의 버튼(3)을 눌러보자! 이쯤되면 이제 저 버튼이 왜 벌레오먕인지도 알 것이다. 저 버튼은 Debug 버튼인거다! 벌레잡는 버튼! = 버그 잡는 버튼!!

 

  http://localhost:8080/

 

  자 디버그 모드로 실행되면 뭐..그냥 Run(재생버튼) 했을때와 크게 다른점은 바로 안느껴진다. 일단 서버가 실행되면 정상적으로 실행됐는지 확인해보기 위해서 위 주소로 접속해서 페이지를 정상적으로 띄어주는지 확인해주자. 문제가 없다면 우리가 전에 만들었던 주소도 호출해보자!

 

  http://localhost:8080/reqUrl.do

 

  자 저번에 우리가 네이버로 넘어가는 코드를 작성했으니 네이버로 넘어갈 것이다. 자 이제 전에 만들었던 소스들이 문제가 없다는걸 확인했으니 본격적으로 진행해보자.

Perspective Java EE로 변경

 

  디버그모드를 원할히 이용하려면 Perspective를 변경해줘야한다. 한국말로 관점 정도로 해석하면 되는데,

 

 

  우측 상단 1시방향 구석을 보면 저기에 Perspective를 설정 할 수 있다. 지금 현재 우리는 저 빨간박스 우측에 G머시기가 써져있는 아이콘인 EgovFrame 관점으로 되어있을텐데, 이 Perspective로 하면 브레이크 포인트를 걸 수가 없다. 그러니 우리는 저 자바 콩 아이콘이 그려져있는 저 빨간박스에 있는 버튼을 눌러 Perspective를 변경해주자.

Breakpoints 탭 추가 "Alt + Shift + Q" + "B"

 

  자 디버그 모드로 들어왔는데 머 딱히 달라진게 없어서 별거 없다고 생각한 사람도 있겠지만, 이제부터 시작이다. 일단 Breakpoints 라는 것이 있는데 한국말로 "중단점"이다. 풀어말하자면 멈출 부분이란 뜻이다. 이 서버가 돌아가기 위해선 우리가 작성한 소스코드 일부분을 포함해서 수천, 수만 줄의 소스코드들이 있는데, 이중 우리가 멈춰서 보고싶은 부분에 중단점을 걸어 프로그램을 잠시 그 순간에 잡아두도록 설정할 수 있는 부분이다.

 

  일단 "ALT + SHIFT + Q" 버튼을 눌러보자, 3개의 키를 동시에 눌러주면 된다. 그리고 1초..?2초..?정도 기다려주자. 바로는 안뜨더라..ㅋㅋ

 

 

 

  그럼 화면 우측 하단 구석에 저런 화면이 뜰텐데 우린 Breakpoint를 열어줄꺼니 "B"버튼을 한번 더 눌러주자! 그럼 2번 화면처럼 Breakpoints 탭이 생긴 것을 볼 수 있다. 이 창이 바로 BreakPoints 를 관리하는 화면이다. 사실 단축키 말고 마우스로도 설정에 들어가 이탭을 불러 올 수는 있는데, 너무 과정이 많아서 그냥 단축키를 외우도록하자! "Alt + Shift + Q" + "B"!!

 

Breakpoints 선언 (Ctrl+Shift+B)

 

  자 이제 본격적으로 프로그램을 멈춰줄 중단점을 선언할건데 우린 요청한 데이터가 서버로 들어와 VO에 자동으로 Mapping 되는지를 확인할 것이기 때문에 우리가 만든 요청부분에 Breakpoints를 만들어주자.

 

 

  자 우리가 만든파일 16번 줄에 있는 return "redirect:http://www.naver.com";줄에 마우스를 눌러 입력커서를 저 위치로 이동시키고 Ctrl+Shift+B 단축키를 눌러보자! (1번 박스) 그럼 2번 박스위치에 파란색 점이 하나 찍힐 것이고 3번 박스인 Breakpoints 박스에 해당 중단점이 하나 추가될 것이다! (Brekapoints 박스가 하단에 있을테지만 난 우측이 편해서 우측으로 옮겼당 ㅎㅎ)

 

  1번 위치에서 Ctrl+Shift+B버튼을 눌렀을때 중단점이 추가되지 않은 사람들은 아직 Perspective가 egovFrame일 확률이 높다. 본문 위를 살펴보면 Perspective를 Java EE로 바꾸는 과정이 있는데 따라해주면 해결된다.

 

테스트 요청

 

  localhost:8080/reqUrl.do?reqParam=999

 

  자 이제 저 주소를 한번 들어가보자. 달라진 점이라면 기존 localhost:8080/reqUrl.do 뒤에 ?가 붙었다. ?가 붙으면 뒤쪽은 서버로 전달할 Data를 보내겠다는 의미정도로 해석하면 되겠다. ?뒤쪽을 보면 우리가 VO에서 선언한 변수명인 reqParam이 있다. reqParam=999 의 의미는 저 변수에 999라는 변수를 담아서 보내겠다는 뜻이다 엔터를 쳐보자!

 

 

 

  자 이클립스로 돌아와보면 이런 화면이 떠있을텐데, 중단점을 인식했고, 디버그가 걸렸으니, Perspective를 debug관점으로 바꿀꺼냐는 것인데, 뭐 우린 Debug 관점의 고급기능을 이용할 일은 없으니 1번을 체크해주고 2번을 눌러 관점을 바꾸지 않겠다고 하고 진행한다.

 

 

  소스 코드를 보면 우리가 중단점을 건 부분이 초록색으로 표시되며 현재 저부분에서 프로그램이 멈춰있다! 라고 생각하면 된다. 그럼 저 당시의 변수들을 어떻게 보는지 알아보장!

 

 

  자 1번 위치에 마우스를 올려 한 1초정도를 기다리면 노란색 박스가 뜨는데 거기 보면 지금 FwdVO형태로 이름이 맞는것끼리 자동으로 매핑된 reqParam이 들어온 것을 볼 수 있다. 값도 보면 999로 들어온 것을 볼 수 있다.

 

  현재 우리 VO에는 reqParam으로 한개 변수 밖에 없지만, 만약 여러개의 변수를 전달한다고 하면

 

  http://localhost:8080/reqUrl.do?reqParam=999&reqName=꺄하하

 

  이런식으로 변수뒤에 "&" 기호를 붙혀 추가로 전달이 가능하다. 아마 저 주소를 그대로 입력하면 오류가 나지는 않는다. 매핑할 수 있는것만 매핑하는 것이기 때문에 FwdVO에 선언되지 않은 reqName이란 변수는 매핑되지 않고 그냥 무시 되는 것이다!

 

  그리고 http://localhost:8080/reqUrl.do?reqParam=꺄하하

이 주소를 호출하면 역시 에러가 발생할 것이다 왜냐하면 FwdVO에 reqParam이 정수형인 Int로 선언되어 있는데 데이터로 "꺄하하"라는 String 형의 변수가 들어오니 형이 맞지않아 매핑에 실패하는 것이당 ㅎㅎ

 

 

  마지막으로 이런 URL 파라미터 전달방식으로 100개의 변수를 전달한다고 하면, 주소가 엄청나게 길어질 것이다. 이렇게 하지 않기위해 나중에는 form에 있는 정보를 그대로 보내는 방식이 있는데 그건 나중에 배워보도록하고 일단은 한두개 전달하는건 이방식이 좋으니 이렇게 진행해보자.

 

 

  자 다시 이상황으로 돌아와서 보면, 지금 저 16번째줄에 프로그램이 걸려있고 저 페이지를 요청한 인터넷 창을보면 아직도 모래시계가 뜨면서 멈춰 있는 것을 볼 수 있다. 이떄 한줄 씩 진행하고 싶을때는 F8을 진행시켜 진행해보자.

 

  - F5 : 함수 안으로 들어가본다

  - F6 : 코드를 한줄씩 실행시킨다

  - F7 : 이 함수를 나온다.

  - F8 : 걍 진행한다.

 

  이렇게 4가지 단축키로 프로그램 실행을 분석할 수 있다. 보통 F5는 잘 안누른다. 해당 함수안까지 봐야하는 세부분석이 필요할 때 보통 누르고, 보통은 F6을 눌러 한줄씩 실행한다. F7도 보통 많이 쓰진 않았다. F8은 중단점을 풀어 진행한다. 하지만 계쏙 진행하다 내가 만들어놨던 중단점을 또 만나면 그때 다시 중단점이 걸린다.

 

  자 저상태에서 F8을 눌렀다면 중단점에서 빠져나와 프로그램이 계속 실행되고 최초 해당 URL을 요청했던 인터넷 페이지는 정상적으로 Naver를 띄우고 있을 것이다.

 

사용자 요청에 따른 분기처리

 

  자 그럼 우리가 사용자가 reqParam에 1을 담아서 주면 네이버로 연결시켜주고, 2를 담아서 주면 다음에 연결시켜주는 소스를 작성해보자.

 

 

  자 기존 return 머시기 한줄 있던 코드대신 저 빨간 박스에 있는 코드들로 변경해주자. 그리고 Breakpoint도 ㄷ저 if문 처음 시작할때로 지정해주자.

package cpservice.fwd.web;

import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;

import cpservice.fwd.service.FwdVO;

@Controller
public class FwdController {

	@RequestMapping(value = "/reqUrl.do")
	public String selectReqUrl(@ModelAttribute("searchVO") FwdVO searchVO, ModelMap model) throws Exception {
		
		if (searchVO.getReqParam() == 1){
			return "redirect:http://www.naver.com";
		}else if(searchVO.getReqParam() ==2){
			return "redirect:http://www.daum.net";
		}
		
		return "redirect:http://www.google.com";
		
	}
	
}

 

귀찮은 사람을 위해서 코드도 첨부했당. ㅎㅎ

 

 

  코드 분석을 해보자.

 

  16번 줄을 보면 searchVO에서 reqParam의 값이 1이면

  17번 줄처럼 네이버로 연결시켜준다.

  18번 줄처럼 만약 reqParam의 값이 2면

  19번 줄처럼 다음으로 연결시켜준다.

 

  만약 reqParam의 값이 1도 2도 아니고 없거나 다른 숫자가 들어오면 그냥 구글로 넘겨준다!

 

  이정도 코드로 보면된다. 여기서 물어볼만한건, searchVO에서 값을 쓰고, 꺼내오는건 저번 시간에 VO를 선언할때 안에 같이 따라오는 get, set 함수를 지정했기 떄문에 이걸로 꺼내오느라고 searchVO.getReqParam() 함수를 사용하는 것이고 22번줄에 구글로 포워딩시켜주는 return을 넣어놓은 이유는 사용자가 요청을 줄때 꼭 reqParam을 안넘겨 줄 수도 있고, 혹은 넘겨준다 하더라고 1이나 2가 아닌 999를 넘겨줄 때는 처리할 로직이 없기때문에 그 아무것도 아닌경우는 구글롤 넘겨주겠다~ 해주는 로직이다.

 

  자 16번 if문줄에 브레이크 포인트를 걸었다면 진짜 값들을 보면서 어떻게 처리되는지 확인해보자. 코드가 수정됐으니 다시 Debug버튼을 눌러 서버를 재부팅 시켜주고 주소를 요청해보자!

 

http://localhost:8080/reqUrl.do

 

  자 우리가 처음 작성했던 기본 구문이다 어떻게 되는지 보기위해 인터넷창에 한번 쳐보자!

Variables 탭 추가 "Alt + Shift + Q" + "V"

 

  일단 우리가 들어온 값들을 계속 마우스 올려 보면 귀찮으니 이걸 보여주는 탭을 추가해보자, BreakPoints창을 연것과 단축키가 비슷하다, 알트+쉬프트+Q를 누르면 한 1~2초뒤 우측 하단에 머 창이뜨는데 거기서 V를 눌러주자.

 

 

  그럼 이렇게 현재 값들을 볼 수 이쓴ㄴ Variables 탭이 추가된다. 이제 코드를 한줄한줄 돌리면서 값들이 바뀌면 실시간으로 저 Variable들이 변화를 하게 된다. 위 사진처럼 searchVO를 펼쳐보면 reqParam이 보이게되고, 변수를 담아서 보내지 않으면 0을 보내주는 것을 알 수 있다.

 

 

  자 다시 돌아와서 현재 16번 줄에 멈춰있고 지금 이순간 searchVO에 reqParam은 0의 값이 들어온 것을 볼 수 있다. 이제 F6을 눌러 한줄 진행하면 16번 줄의 if문을 실행한 결과로 넘어간다. F6을 한번 눌러보자.

 

 

  자 1번 위치에서 2번 위치로 이동했다. 이유가 멀까. 간단하다 reqParam의 값이 0이니까 저 if문에 reqParam이 1이 아니기때문에 통과한 것이다. 한번더 F6을 눌러보자.

 

 

  자 2번 박스의 if문에도 해당하지 않으니 당연히 3번 박스로 커서가 이동할꺼고 이때 F8을 눌러 진행을 시키면 페이지가 google로 이동한 것을 볼 수 있다.

 

 

  이제 URL에 값을 넣어서 한번 테스트해보자.

 

  http://localhost:8080/reqUrl.do?reqParam=1

 

  다시 디버그가 걸릴텐대 한번 확인해보장

 

 

 

  자 우측 Variable화면을 보면 reqParam이 1로 들어온 것을 볼 수 있고 일단 16번줄에 브포를 걸었으니 멈춰있는데 F6을 한번 눌러보자!

 

 

  자 reqParam에 1이 들어왔으니 당연히 if문 내부로 통과할 것이고 커서가 2번 박스로 들어올꺼다. 여기서 F8을 눌러 진행하면 naver로 포워딩이 되고, 다시 reqParam을 2로 요청하고 다시 디버그 결과를 보면 daum으로 포워딩 되는 것을 볼 수 있다!

 

요청에 따른 분기처리는 여기까지~

 

 

#스프링 #Spring #전자정부프레임워크 #웹서비스 #만들기 #URL파라미터 #디버깅 #Debug #방법

 

 

반응형
  1. 김진호 2021.11.23 16:59

    정말 친절하게도 아주 자세하게 설명해 주셨네요.
    수고 많으셨습니다.
    감사합니다 ^^

반응형

 

https://extsdd.tistory.com/100

 

[Spring/eGov] #4 스프링 Sample 기본 예제 프로젝트, 패키지 이름 바꾸기 / 파일 찾기

 

extsdd.tistory.com

 

  저번 시간에 드디어 예제 프로젝트의 정체성을 완전히 내걸로 만들어놨다 ㅎㅎ이제 진짜 내프로젝트다. 이제 진짜 간단한 웹서비스를 만들어 볼껀데, 만드려는 서비스는 웹페이지를 포워딩 시켜주는 서비스 이다. 포워딩이란 다른곳으로 안내해준다는 건데, 사용자가 특정 URL로 접근하면 사용자가 가진 데이터를 확인해서 어디로 보내줘야할지 서버가 판단해주는 역할을 수행할 예정이다. 잔말 말고 컨트롤러를 추가해보자!!

 

1. Controller 추가

 

 

 

  일단 저번에 우리가 이 포워딩 기능을 담당하는 패키지가 fwd(fowarding)라고 정해놓았고 전 글들을 읽으면 알겠지만 컨트롤러 파일은 web에 위치해 있다. 따라서 1번에 있는 cpservice.fwd.web 디렉토리에 2번 New를 눌러 3번 Class를 생성해주자.

 

 

 

  별거 없다. 1번에 기능+Controller의 이름을 설정한다. 나는 forwading 기능을 수행하는 Controller이기 때문에 FwdController로 명명했다. 완료되면 딴거 손델 필요 없이 Finish를 눌러주자.

 

 

  ㅡㅡ... 찐따같은 파일이 하나 생겼다...음.. 지금까지 보던것고 다르게 간지가 하나도 안난다..기본적인 컨트롤러의 꼴을 잡아보자.

 

  먼저 이 FwdController 자바 파일은 컨트롤러의 역할을 수행할 것이기 때문에 서버가 서블릿한테 내가 컨트롤러라는 것을 알려야한다. 그러기 위해선 저번시간에 말했던 @ 모양의 어노테이션을 이용해 알린다고 했다. 한번 추가해보자

 

 

  망해따 벌써 오류가 뜬다.. 하지만 아니다. 저 빨간 줄이뜬 Controller라는 글자위에 마우스를 올려두고 한 1~2초를 기다려보자.

 

 

  이런 창이 나타난다. 그렇다 이클립스는 오류가 발생했을때 자기가 해결 할 수 있는만한것은 여려가지 방법으로 저렇게 추천을 해준다. 위 오류는 그거다. 그냥 @Controller만 써놓으면 컴퓨터가 모른다는 것이다. 그럼 저기 빨간 네모친 해결방안을 눌러보자.

 

 

  그럼 저 컨트롤러에 대한 정보들이 Import되는 것을 볼 수 있다. 그렇다. 컴퓨터가 알아먹을 수 있게 쟤에 대한 정보를 우리 컨트롤러에서 사용할 수 있도록 불러오자는 뜻이다. 저 org.springframework.stereotype.Controller 파일을 여기서도 사용하겠단 뜻이다. 그럼 저 @Controller가 뭔지 어떤놈이지 알아먹을 수 있단 소리로 이해하면 된다.

 

  저렇게 @Controller를 컨트롤러 클래스에 붙여놓음으로써 이제 서블릿은 사용자의 요청이 들어왔을때 여기서도 뒤지게 된다 ㅎㅎ 자. 이제 컨트롤러는 만들었고 이제 기능을 진짜로 만들어보자!!

 

  위에서 말했든 만들어볼 기능은 어떤 데이터를 사용자가 주면 그거에 따라서 서버가 알맞은 페이지를 띄어주는 기능이다. 자 그럼.. 일단 먼저 선행되어야 하는게. 사용자가 데이터를 줄때 이 데이터를 어떻게 넘겨주고, 서버에서 그걸 어떻게 받느냐는 것이다.

VO = Value Object (데이터 주머니)

 

  자 스프링에서 자료를 주고받고하는 대표적인 개념이다 브이오!! 한국말로 값을 가진 객체다!! 이게 머냐면은, 음.........구식 방식부터 생각해보자. 고객 검색 기능을 수행한다고 할때 최초에 사용자가 고객을 검색하면 이름, 연락처, 주소 등 3가지의 정보를 조회했다고 해보자. 과거에는 이 값들을 다 코드에 쳐서 달고 다녔다.

 

  통신기술이 발달함에 따라, 더 많은 정보들을 처리하게 되고, 예전시스템으로 어떤 기능을 처리하는데 200개의 변수를 담고 있다면.. 생각만해도 개 노가다일꺼 같다는 생각이 든다.. 그리고 이 고객정보 데이터를 한번만 가지고 가는것도 아니고 연계기능들을 수행하면서 계속 달고다니는데 그럴수록 문제는 더 심해진다.

 

  그래서 나온게 바로 VO다! 값들을 가진 객체!! 근데 이게 모든 데이터를 VO라는 데이터 주머니에 다 때려 박는게 아니고, 그 컨트롤러가 취급하는 정보들끼리 나눠놓는 것이다. 자 봐라, 고객정보를 처리하는 컨트롤러가 있고, 예약정보를 처리하는 컨트롤러가 있다고하면 여기서 VO는 몇개 일까? 2개다! (죽어도 2개여야하는 것은 아니다. 같이 쓸 수도 있고, 공통VO도 있고 하니까..)

 

 

  위 사진처럼 각 컨트롤러마다 필요한 공통정보들이 들어가 있을것이다. 저렇게 기능단위로 다 묶어놓으면 예약을 처리할때 저 VO만 가지고 댕기면 예약처리하는곳 어디서든 저 VO객체 하나만 넘기면 되는것이다. ㅎㅎ 쉽게 말하면 각 컨트롤러에서 사용하는 데이터들을 각각 모아놓은게 VO라고 보면 된다.

 

  나는 FwdController에서 취급할 데이터로는 고객이 요청할때 숫자 데이터를 넣어줄껀데 그데이터를 담고있는 VO를 지금 만들어보자.

 

 

  내가 FwdController에서 사용 할 VO다.... 기능이 너무 간단해서 사용자가 요청하는 데이터 한개만 담고 있을 VO다 .. 간지는 안나지만 따라하기엔 쉬울것이다. 이제 진짜 VO를 만들어보자.

 

 

  우리가 컨트롤러.java 파일을 생성했던 것 처럼 cpservice.fwd.service 패키지에 FwdVO.java를 추가해준다. 그리고 더블클릭하여 코드를보자!... 역시 간지가 안난다 빨리 채워보자.

package cpservice.fwd.service;

import java.io.Serializable;
import org.apache.commons.lang3.builder.ToStringBuilder;

public class FwdVO implements Serializable{


	/** reqParam */
	private int reqParam;

	public int getReqParam() {
		return reqParam;
	}

	public void setReqParam(int reqParam) {
		this.reqParam = reqParam;
	}


	@Override
	public String toString() {
		return ToStringBuilder.reflectionToString(this);
	}
	
}

 

  해당 내용을 복붙해준다. 만약 프로젝트 이름이 다르다면 그것만 수정해주면 된다.

 

 

  소스를 복붙하고, 저기 FwdVO에 마우스를 올리면 Add generated serial version ID 버튼이 있자. 버튼을 눌러 UID를 할당시키자. serialVersionUID란 같은 클래스인지 판별할때 쓰이는데 나중에 프로그램이 변하거나 할때 프로젝트가 안깨질 확률이 높아진다. 눌러서 추가하자.

 

 

  자 UID를 추가해서 serialVersionUID가 생성된 것을 볼 수 있다. 근데 저건 사실 필요없고 이제 VO에 담길 실제 데이터를 보자. 나는 진짜 딱 한 변수만 VO에 담았다. 혹시 다른사람 더 추가하고 싶은게 있으면 1번꼴로 계속 밑에 써내려가면 된다. 2번 박스는 VO에 한번만 작성되면 되는거라서 신경이 크게 안쓰인다. 머냐면은 VO.toString() 함수를 돌리면 VO내부에 있는 key 와 Value들이 쭈르륵 나와주게 하는 함수이다. 보통 로그데이터를 뽑거나할때 많이 쓰인다.

 

  다시 1번 박스를 보면 VO의 한 데이터는 3가지 구성으로 되어 있다 먼저 자료 선언이 있다. 나는 private int reqParam으로 선언해놨고 그 밑에 get, set이 붙은 함수들이 있다. 이건 약속이다 VO는 데이터 주머니기 때문에 데이터를 set하고 다시 가져갈 수 있도록 get이 있어야한다. 한변수당 이 두개 함수는 무조건 와야하는 것이다. 만약 없으면 오류가 난다.

 

자 여기까지 했으면 ReqParam이라는 하나의 데이터를 가지고 있는 주머니인 FwdVO를 생성했다. 이제 데이터 주고받을 주머니도 만들어 놨으니 진짜!! 컨트롤러에서 기능을 구현해보자!

 

@Request Mapping

 

package cpservice.fwd.web;

import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;

import cpservice.fwd.service.FwdVO;

@Controller
public class FwdController {

	@RequestMapping(value = "/reqUrl.do")
	public String selectSampleList(@ModelAttribute("searchVO") FwdVO searchVO, ModelMap model) throws Exception {

		return "redirect:http://www.naver.com";
		
	}
	
}

  자 다시 FwdController.java로 돌아와서 위 코드를 넣어주자! 그리고 코드를 분석해보자.

 

 

  새로 생긴거 위주로 보면 1번은 뭐 이제 살짝 느꼇을꺼다..크게 뭐 중요한건 아니라는걸... 어차피 소스 추가하면 이클립스가 다 자동으로 추가하기도 해주고, 없으면 넣으라고 알려도 주니까. 암튼 저 임포트 파일들은 아래 소스코드를 돌리는데 필요한 객체들을 다 가져와 놓은 것이라고 볼 수 있다.

 

  2번 박스를 보면 핵심이다. @RequestMapping 어노테이션이 붙으면 이건 서버에서 Servlet이 받아들일 URL주소를 정의할 수 있다! 나는 reqUrl.do 라고 정의해놨는데 기존에는 localhost:8080/reqUrl.do 주소를 쳐도 서버는 저게 뭔지 알 수 없었지만 이걸 추가하는 순간 서버는 localhost:8080/reqUrl.do를 요청하면 아래 구문들을 수행하게 된다!! 이런식으로 서버에 요청들을 여기 등록해놓을 수 있는것이다. 물론 경로형태로도 등록할 수 있다. localhost:8080/tm/rs/rm/reqUrl.do 이런식으로 세분화 시킬수도 있다는 말이당 ㅎㅎ 요기다 자기가 원하는 URL을 정의하면 된다. 나는 URL을 요청하는 작업을 구현할 것이기 때문에 reqUrl.do 로 지었당.

 

  3번 박스를 보면 함수이름은 selectReqUrl이고 그뒤가 살짝 어려울 수 있을텐데 설명을 들으면 그나마 이해가 갈 것이다. 자 처음부터 @modelAttribute("searchVO" FwdVO searchVO, ModelMap model) 이 구분부터 보면 이 요청이 오면 FwdVO라는 데이터주머니에 담아서 searchVO라는 이름으로 이 함수 내부에서 사용할 것이다. 그리고 model이라는 것을 만들어놨다가. 로직을 처하면서 여기다가 사용자가 볼 화면으로 보내줄 데이터들을 모아놓을 것이다~ 이정도 의미로 해석하면 되고, throws Exception 구문은 만약 에러가 발생할시 작동하는 함수인데 보통 서버 Log에 해당 사항을 기록한다.

 

  마지막 4번 보면 함수 내부에 별다른 로직은 없고 바로 return이 되는데, 기능을 해석해보면 사용자가 localhost:8080/reqUrl.do 이 URL로 접속하면 다시 naver로 포워딩 시켜주는 기능을 수행하게 되는 것이다. ㅎㅎㅎ

 

테스트

 

  자 이제 잘 작동하는지 모두 저장하고 서버를 작동시키자! 여러번 해봤으니 이제 따로 설명은 Pass..!

localhost:8080/reqUrl.do를 인터넷창에 입력해보자!

 

 

  뚜둔..! 분명 localhost 머시기 주소를 치고 들어갔지만 네이버 화면이 떳다!! 내가 만든 서버가 작동한 순간이다 .. 감동 짝짝짝.. 일단 오늘 여기까지하고.. 너무 졸려서 자러가야겠다..

 

#스프링 #Spring #전자정부프레임워크 #웹서비스 #만들기 #컨트롤러 #VO #생성 #다른 #URL #포워딩 #Controller

 

반응형
  1. 익명 2021.01.04 14:57

    비밀댓글입니다

  2. 익명 2021.01.28 13:21

    비밀댓글입니다

반응형

 

준비물
1. 4,500원
2. 8GB이상의 USB메모리

 

 

 

  새 컴퓨터를 샀다. 당연히 지출을 아끼려고 Free-DOS모델을 구매했다. 여기서 Free-DOS모델이란, PC에 운영체제를 포함하지 않고 파는 제품을 말한다. 보통 우리가 컴퓨터를 사면 윈도우 까지 깔려있어서 전원 버튼만 누르고 바로 사용하면 되나, 이 제품에는 아무것도 깔려 있지 않은 상태로 온다.

 

  때문에 사용자가 직접 OS설치를 해야하고, 파일을 어디서 구하던지, 시디키는 있는지 그런건 PC판매자가 고려하지 않아도 된다. 오직 구매하는 사용자가 알아서 하는 것일뿐...

 

  그렇다면 장점은 무슨 장점이 있기때문에 Free-DOS 모델을 사는 것일까?

 

Free-DOS 모델 구매시 약 150,000원 절감

 

  결론 부터 돈을 아낄 수 있다는 것이다. 우리가 윈도우가 탑제된 PC를 구매하면 거기에 이미 윈도우 OS값이 포함되어 있는 것이다. 당연히 PC제조사도 마이크로소프트에 돈을내고 윈도우를 사와서 PC에 설치해서 파니까 라이센스 비용을 지불하는 것이고 고스란히 소비자에게도 그 가격이 돌아오는 것이다.

 

  통상적으로 윈도우 OS정품을 사면 10~20만원 언저리 금액을 지불해야하나, 윈도우가 탑제되지 않은 모델은 그 비용을 내지 않기 때문에 윈도우가 탑제된 동일 PC보다 10~20만원을 아낄 수 있는 것이다. 따라서 본인이 OS설치만 해결 할 수 있다면 조금이나마 싸게 살 수 있다는 것이다.

 

  OS는 사용자가 설치

 

돈아낄 수 있다는건 그렇다 치고, 이제 어떻게 다운받을 것이며, 어떻게 인증을 받을 것인가. 이 두가지 문제에 직면한다. 그리고 OS가격이 15만원이라면서 어차피 내가 그돈 내고 구매해야하는거 아니야!? 라고 생각할 수도 있을 것이다. 실제로 10~20년 전에는 진짜 저 돈을 주고 샀어야 했으나 지금은 살짝 다른 방식으로 4~5000원이라는 금액만 지불하면 정상적으로 정품인증이 가능하다.

1. Window 10 소프트웨어 구매

 

 

 

  자 네이버에 윈도우 10이라고 검색해보자 그럼 한 3만원 부터 10만원 이상까지 엄청 많은 제품들이 검색된다. 일단 이건 너무 비싸다. 넘어가자.

 

 

  쿠팡에서 윈도우 10을 검색해보자. 먼가 사기꾼들 같은 가격의 제품들이 검색된다. 아니 무슨 윈도우가 4500원이야

ㅡㅡ 할 수 있겠지만, 이해한다.. 나도 과거에 그 감정들을 느꼈었다.. 하지만 저거 뭐 사기는 아니다.

 

  저렇게 저렴한 이유는. 저 윈도우 라이센스가 다르기 때문이다.

 

  - FPP (Full Package Product) : 실물 USB or CD로 설치 가능한 패키지

  - ESD (Electronic Software Distribution) : 설치파일은 공홈에서 받고 시디키만 발급받는 형태

  - DSP (Delivery Service Parck) = COEM : 한 메인보드에 귀속되는 형태, 메인보드 교체시 라이센스 소멸

  - OEM (Original Equipment Manufacturing) : PC제조할때부터 설치되서 나오는 형태 = 대기업 PC

 

  위 라이센스중 저 몇천원 짜리 라이센스는 ESD 라이센스 제품이다. 즉 실물도 없고 설치파일도 마이크로소프트웨어 공홈에 있으니 걍 이메일로 씨디키만 불러주면 되는거라서 애초에 가격이 저렴하기도하나, 저정도 가격으로 나오는 씨디키들은 아마 다른 편법이 있는 것 같기는 하다. 내생각에는 물가가 낮아 OS가격이 아주 저렴하게 책정되는 아프리카에 있는 나라에서 대량으로 구매한 라이센스들을 파는 것 같다.

 

  설명이 많았으나, 뭐 맘에드는 걸 구매한다. 나는 윈도우10 Pro로 구매했다. 홈 에디션이나 프로페셔널로 사도 상관은 없으나, 윈도우의 기능을 최대한 제한없이 이용하려면 최상위 트림인 Pro를 사는것이 좋다. 참고로 윈도우 10 Pro의 FPP 패키지는 정가가 33만원쯤 한다.. ㅠㅠ

 

 

  저런 사항들도 있다고 하니 충분히 고려하고 구매하길 바란다.

 

 

  구매할 때 저 이메일 쓰는 칸이 있으니 꼭 3번이상 다시 확인해서 이메일주소에 이상이 없는지 보고 진행하길 바란다. 오타나서 다른 메일로 가면 속이 뒤집어질지도 모른다.

 

 

  그리고 본인 이메일을 보면 이렇게 라이센스 키를 보내준다. 뭔가... 메일이 무슨 프리메이플 홍보 전단지도 아니고 ㅋㅋ.. 귀엽다.. 나는 구매하고 한 5분 뒤에 메일이 왔는데 어떤 판매자는 이거 다음날 발송해주기도하고 판매자마다 좀 다름으로 구매하기 전에 상품평을 보고 사면 좀 도움된다. 언제 보내줄꺼냐는 글 도배되어있으면 거르시길..

 

  자 여기까지 소프트웨어 구매는 끝났다..

 

2. Window 부팅디스크 만들기

 

 

 

 

  1. 8GB이상의 USB메모리를 컴퓨터에 삽입하고, 내컴퓨터에서 해당 USB 디스크에 오른쪽마우스 클릭후 포맷버튼을 눌러준다.

  2. 포맷화면이 나오면 포맷 옵션에 빠른 포맷이 선택 되어있나만 확인하고 시작 버튼을 누른다. 뭐 본인이 원하는 포맷 형식이 있다면 지정해도 상관은 없다.

 

  USB 메모리 포맷이 완료되면 뺏다 꽂아서 컴퓨터에 인식이 잘 되나 확인하고 꽂은 상태로 두고 이제 설치파일을 받아보자.

 

https://www.microsoft.com/ko-kr/software-download/windows10%5C

 

Windows 10 다운로드

Windows 10용 ISO 파일을 다운로드한 경우, 해당 파일은 선택한 위치에 로컬로 저장됩니다.컴퓨터에 타사 DVD 굽기 프로그램이 설치되어 있으며 해당 프로그램을 사용하여 설치 DVD를 만들려는 경우,

www.microsoft.com

  위 페이지에 접속한다.

 

 

  밑에 보면 지금 도구 다운로드 버튼이 있다. 눌러주자.

 

 

  위 파일이 다운받아졌다. 실행해보자.

 

 

 

  1. 문제가 생길 수가 없는 가장 쉬운 단계이다. 동의 버튼을 눌러주자.

  2. 그냥 다음을 누르지 말고 두번째 버튼인 "다른 PC용 설치 미디어 만들기" 버튼을 눌러준다.

 

 

 

  1. 이 화면은 저 빨간 원부분 체크를 "해제"하고 원하는 언어, 에디션, 아키텍처를 골라준다. 그다음 다음버튼 클릭,

  2. 여기서 USB 플래시 드라이브를 클릭하고 다음!

 

 

 

  1. 꼽아놨던 USB드라이브를 선택해주고 다음 버튼을 눌러주자.

  2. 진행되는 것을 확인하자

 

 

  부팅디스크 제작이 완료되면 해당 USB 디스크 폴더에 가보면 저런 파일들이 생성되어있다. 그럼 성공!

3. 윈도우 설치

 

  자 이제 새로산 PC에 윈도우를 설치해보자. 먼저 새로산 PC에 방금 만든 윈도우 부팅디스크 USB를 설치하려는 PC USB포트에 꼽고 컴퓨터 부팅을 시킨다.

 

 

  보통 요즘 나오는 컴은 자동으로 USB 포트가 윈도우 부팅보다 순서가 먼저로 셋팅되어있어서 문제가 없다면 윈도우 설치 화면이 나타난다.

 

  만약 저렇게 되지 않는다면 수동으로 부팅 순서를 설정해줘야한다. 보통 BIOS셋업 메뉴에 들어가서 부팅순서를 USB를 위로 설정시키는데 이게 메인보드 종류, 제조사에 따라 BIOS셋업 메뉴에 들어가는 키도 다르고, 들어가서 설정하는 방법도 다 제각각이기 때문에 이부분은 "부팅 순서 변경"을 검색해서 해결해보자!

 

 

 

 

  요기까지 나왔다면 이제 설치만 하면 된다.

 

 

 

  1. 계속 다음을 누르다보면 CD키 입력하는 화면이 나오는데 우리가 구매했던 CD키를 입력해주자! 해당 CD키를 입력하면 해당 CD키에 맞는 버전으로 OS를 설치해준다. = Window 10 Pro 시디키다! 하면 Pro를 알아서 설치해준다는 뜻!

 

  2. 계속 넘어가다 보면 해당 화면이 나오는데 저기서 "사용자 지정 : Windows만 설치(고급)" 버튼을 눌러 계속 넘어가준다.

 

 

  PC의 하드디스크 구성에따라 목록이 다를 수 있음.

  이제 파티션을 설정하는 화면이 나타나는데, 파티션 구분 없이 그냥 쓸꺼면 새로 만들기를 눌러서 볼륨 할당을 시키면 된다.

 

 

 

  새로만들기를 누를경우 크기를 정할 수 있는데 최초에는 그 파티션의 최대 크기로 할당되어 있다. 보통은 그냥 저 최대크기로 적용을 누르면 된다.

 

  이렇게 파티션하나 쓰는사람은 이렇게 하나만 만들어도 되고, 파티션 나눌 사람들은 저렇게 파티션을 나누면된다. 그리고 어차피 윈도우 설치 이후에도 이 파티션과 볼륨 조절은 할 수 있으니, 계획이 없다면 일단 넘어가도 된다.

 

 

  그리고 많이 실수하는 것중에..저 파랗게 선택된 파티션에 윈도우가 설치되지 실수하지 말자.. 나는 시스템 파티션/ 자료파티션 나눠놓고.. 모르고 자료 파티션 선택된채로 설치하는 실수를 저질렀다..

 

 

 

 

  1. 계속 진행을 하면 이제 실제로 윈도우를 설치한다. 기다리자

  2. 설치가 완료되면 재부팅이 된다. 보통 좋은 PC면 이번엔 설치된 윈도우를 띄우는데 또 설치화면이 나왔다면 꽂혀있는 USB를 제거하고 재부팅하자.

 

 

 

  1. 이후 이런 화면들이 나오는데, 여기서부턴 개인 설정을 해주면 된다.

  2. 쭉쭉 넘어오면 바탕화면이 나온다.

 

 

  여기까지 윈도우10 Pro 설치 끝!

 

#부팅디스크 #만들기 #윈도우10 #윈도우10Pro #설치 # 다운 #방법 # FreeDOS #라이센스 #ESD #종류

 

반응형

+ Recent posts