Sangil's blog

https://github.com/ChoiSangIl Admin

내가 Vue를 좋아하게 된 이유 DEV / WEB

2020-03-03 posted by sang12


이번에 회사에서 기존 Jsp페이지를 Vue로 전환하는 작업을 하며 느낀점을 공유 할까합니다.

세상에 저는 Juqery가 만능인지 알았죠. 쉽게 돔 객체에 접근해서, 구성요소들을 수정 삭제 하여 더욱 웹환경을 아름답게 해주니까요.
하지만 이번에 Vue를 사용하며 저의 마음이 흔들리고있습니다. 아니죠 변심했답니다 하지만 대다수의 프로젝트들이 Jsp라는...

사실 Vue라는 프레임워크는 아에 새로운 기술들로 탄생 된것은 아닙니다. 항상 저희가 모르게 사용 하고 있는 것들을 더욱 편하게 만들어 주는 프레임 워크죠 (블로그도 Vue로 만들걸..  변경하기에 저의 부지런함이 닫지 않네요.)

실제로 이번 블로그에 댓글작업을 하며, 댓글을 적고 삭제 하였을 때, 화면이 깜빡이지 않고 자연스럽게 보이기 위해 아래처럼 html 태그를 자바스크립트로 만들어서 특정 돔 엘리먼트에 Jquery를 사용하여 넣어줬습니다. jsp를 사용하신다면 아래처럼 많이 사용 하시겠죠..?

Vue에서는 이런 작업이 없을까요? 그건 아닙니다. Vue 또한 동일하게 결국 Html 소스코드를 반환 하는데요. 차이점은 위의 작업들을 훨신 간결하고 사용하기 쉽게 만들어 줍니다.  한가지 예를 들면 자주 사용하는 요소들을 컴포넌트로 만들어서 자유자제로 재사용 할 수 있습니다. 그리고 데이터를 바인딩 시켜노면 해당 데이터들이 바뀔 때마다 데이터를 갱신해주죠. 기존 Jsp페이지였다면 바뀐 데이터를 받아와서 특정 돔 엘리먼트를 셀렉터를 통해 찾고 데이터를 변경해줘야하는 작업을 해줘야 하죠 (뷰 만세).

그리고 가상돔을 사용해서 화면을 더욱 잘그린다고 하는데요 사실 이부분은 개발하며 크게 느껴보진 않았습니다 화면이 복잡한게 아니여서 몸에 체감되진 않았나봐요 (돔 객체를 찾고 다시 그리는 부분이 많은 비용이 든다고 하더라구요. 자세히는 모르니 패스^^;)

그리고 무엇보다 실제로 개발하면서 좋았던 점은 Hot Reload(핫리로딩)인데요. 제가 코딩하는 것들을 실시간으로 반영해줍니다! jsp는 변경하고 새로고침 하고 어? 변경된거 맞아? 됐나? 잘못했나? 다시 새로고침하고 이런 부분들이 사라지죠 뷰하다가 돌아오면.... 어? 왜 안돼 잠시동안 방황하게 됩니다 하핳. 

그리고 개인적으로  컴포넌트(화면) 들을 분리하고, 변경되는 데이터들을 바인딩 시키는 과정에서 백엔드를 개발 하는 것 같은 기분을 많이 받았습니다. jsp에서 javascript를 사용하는 느낌과는 많이 달라요. 실제로 뒷단의 서비스쪽 로직을 코딩하는 느낌이랄까..

뷰의 단점이라고하면, 앵귤러나 리액트등과 같이, 화면을 그려주는 부분이 서버가아니라 클라이언트에 있어서, 서버보단 클라이언트의 부담이 커지게 됩니다. 물론 요새는 휴대폰이나 노트북등의 사양들이 좋고 인터넷 속도도 빠르니까 크게 문제가 되진 않겠죠. 그리고 검색 노출이 중요한 사이트인 경우에는 좋지 않을 수 있습니다. SPA로 구성되어 있다보니 검색엔진 노출(SEQ)가 어렵기 때문입니다

이번에 댓글개발을 하며, VUE생각이 간절히 나서 이렇게 포스팅하게 되었습니다 ^^; 블로그도 VUE로 다 바꿔버리고 싶은데 .. 결론은.. 뷰 만세
(적절한 예제와 설명이 들어가면 좋았을거라는.... 생각이 ^^;)

#Vue장점 #Vue #Vue 뭐가 좋나요?
REPLY

BootStrap4 댓글창(reply) 만들기 #1 DEV / WEB

2020-02-09 posted by sang12


이번에 BootStrap4와 awesome 4.7을 이용하여 댓글창을 개발 하고 있습니다. awesom 최신버전을 사용해볼까 했는데.. 뭔가 많이 바꼈더라구요. 그래서 계속 사용하고 있는 4.7버전을 이용했습니다. 쓸만한게 있나 찾아보다가.. Bootstrap3은 사용할만한게 많은데 4는 찾기가 쉽지 않더라구요 그래서 직접 만들어서 공유합니다


< div class="card mb-2">
	<div class="card-header bg-light">
	        <i class="fa fa-comment fa"></i> REPLY
	</div>
	<div class="card-body">
		<ul class="list-group list-group-flush">
		    <li class="list-group-item">
			<div class="form-inline mb-2">
				<label for="replyId"><i class="fa fa-user-circle-o fa-2x"></i></label>
				<input type="text" class="form-control ml-2" placeholder="Enter yourId" id="replyId">
				<label for="replyPassword" class="ml-4"><i class="fa fa-unlock-alt fa-2x"></i></label>
				<input type="password" class="form-control ml-2" placeholder="Enter password" id="replyPassword">
			</div>
			<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
			<button type="button" class="btn btn-dark mt-3" onClick="javascript:addReply();">post reply</button>
		    </li>
		</ul>
	</div>
</div>
#BootStrap4 #Bootstrap4 reply #bootstrap4 댓글창
REPLY

spring boot 301메세지로 페이지 이동 알리기(redirect) DEV / WEB

2020-02-05 posted by sang12


블로그를 운영하며 사용자의 접속자 수나 접속페이지를 보기위해 구글 아날리틱스를 이용하고 있습니다. 그런데 처음 개발을 할때 게시글의 구조를 도메인/게시글id (sang12.co.kr/1) 형태로 개발을 하여서, 접속 페이지를 보기 위해선 게시판아이디의 게시물이 뭔지 알고 있거나 직접 들어가야하는 방법밖에 없었습니다. 너무불편..답답 그래서 도메인/게시글id/제목(sang12.co.kr/1/title) 형태로 변경을 했습니다.

하지만 저렇게 변경해서 등록했음에도 불구하고 여전히 사람들은 기존에 주소로 들어오고 있네요..? 물론 RSS에도 등록을 해줘서 시간이 지난다면 변경된 URL로 자연스럽게 바뀔수도 있겠지만... 구글에게 변경된 주소를 알려줘야 겠다고 생각했습니다.
이럴때 사용하는게 301메세지인데요. 구글 로봇은 저의 URL로 접속 할 때, 301메세지를 받으면 아! 이 주소가 기존의 주소에서 변경됬구나 라고 알게됩니다.  302메세지는 임시로 바꿨어~ 라는 메세지가 되죠.

잡설이 길었네요 그럼 이제 spring boot에서 301메세지로 redirect 시키는 방법을 알아보겠습니다. 

        @RequestMapping("/redirect/{articleId}")
	public RedirectView redirectTest(@PathVariable int articleId){
		//String redirectUrl = "www.naver.com";
		String redirectUrl = "/redirect/" +articleId+ "/test";
		RedirectView redirectView = new RedirectView(redirectUrl);
		redirectView.setStatusCode(HttpStatus.MOVED_PERMANENTLY);
	    return redirectView ;
	}

setStatusCode를 이용해 HttpStatus.MOVED_PERMANENTLY(302) 메세지를 전달하며 이동된 페이지(redirectUrl)로 리다이렉트 시켜줍니다. 

이제 누가 어떤 페이지를 보고 있는지 알 수 있겠네요 만족!

#spring boot 301 #spring 301 #spring boot redirect #spring boot 페이지 이동 #구글아날리틱스 url
REPLY