말맹의 블로그

Error querying database.  Cause: org.springframework.jdbc.CannotGetJdbcConnectionException: Could not get JDBC Connection; nested exception is com.microsoft.sqlserver.jdbc.SQLServerException: The TCP/IP connection to the host xxx.xxx.xxx.xxx, port 1433 has failed. Error: "Connection timed out: no further information.. Verify the connection properties. Make sure that an instance of SQL Server is running on the host and accepting TCP/IP connections at the port. Make sure that TCP connections to the port are not blocked by a firewall.

-> 해당 에러는 방화벽문제로 MSSQL 서버의 1433포트로 접근할려고 했는데, 접근이 실패했을 때 나는 에러 문구이다. 

해당 포트가 열려야 해결된다.

우선 Git를 설치해봅시다.

https://gitforwindows.org/

Git설치가 끝나면 

인텔리제이를 켜줍니다. 

File - Settings - Version Control - Git 항목을 클릭합니다.

path to Git executable : 항목이 정상적으로 생긴 것을 알 수 있다. 

Git 구조는 위의 그림과 같다.

내부 PC에 로컬 repository가 있고 작업이 끝난 것을 remote repository로 옮긴다.

local repository에 작업한 프로젝트를 add하는 것을 해보자.

해당 작업이 끝나면 내부 local repository에 master가 생긴다.

master 소스를 외부 remote repository로 push 해보자

push를 할 원격지는 git주소를 적고 push를 하면 된다.

https://fonts.google.com/

구글 폰트를 사용할려고 한다. 

우선 한글 폰트를 주로 쓰실 것이므로, 

오른쪽 중단에 있는 Language에서 korean을 선택한다.

한글로 된 구글 폰트 리스트에서 원하는 폰트를 플러스 아이콘을 눌러준다. 

모든 폰트를 다 쓰고 싶으면 다 플러스를 ..

현재 25가지의 폰트가 지원되고 있다.

그런 뒤 아래의 검은 팝업박스를 눌러 EMBED 탭에 <link로 시작하는 부분을 긁어서 쓰면 된다.

현재 구글의 모든 한글폰트를 쓸 수 있는 링크는

<link href="https://fonts.googleapis.com/css?family=Black+And+White+Picture|Black+Han+Sans|Cute+Font|Do+Hyeon|Dokdo|East+Sea+Dokdo|Gaegu|Gamja+Flower|Gothic+A1|Gugi|Hi+Melody|Jua|Kirang+Haerang|Nanum+Brush+Script|Nanum+Gothic|Nanum+Gothic+Coding|Nanum+Myeongjo|Nanum+Pen+Script|Noto+Sans+KR|Noto+Serif+KR|Poor+Story|Song+Myung|Stylish|Sunflower:300|Yeon+Sung" rel="stylesheet">

이렇게다.

Spring Web Application으로 프로젝트를 진행할 때 java에서 넘겨온 값을 이용하여 jsp단계에서 쓰고 싶은 일이 있을 것이다.

이 때 ModelMap객체를 이용해서 간단하게 사용할 수 있다.

[JAVA]

@RequestMapping(value = { "/sample/page" })
public String index(@RequestParam Map<String,String> params, ModelMap model, Locale locale, Authentication auth) {

Calendar calendar = Calendar.getInstance();
java.util.Date date = calendar.getTime();
String today = (new SimpleDateFormat("yyyy.MM.dd HH:mm").format(date));
model.put("nowDate",today); //모델맵 객체에 현재 시간을 input함
model.put("id","2"); //모델맵 객체에 id라는 키로 input함
return "index";
 }

[JSP]

<p id="nowDate" style="margin-bottom:auto;">${nowDate}</p> 

[JavaScript]

var pageId = "${id}";

간혹 가다가 실수하는 것 중 하나가

스트링 비교를 등호로 한다는 것이다.

if(param.get("type") == "C"){ (x)

if(param.get("type").equals("C")){ (0)

//String은 equals로 비교해야한다..

// RestTemplate 에 MessageConverter 세팅
List<HttpMessageConverter<?>> converters = new ArrayList<HttpMessageConverter<?>>();
converters.add(new FormHttpMessageConverter());
converters.add(new StringHttpMessageConverter());

RestTemplate restTemplate = new RestTemplate();
restTemplate.setMessageConverters(converters);

// parameter 세팅
MultiValueMap<String, String> map = new LinkedMultiValueMap<String, String>();

HttpHeaders headers = new HttpHeaders();
headers.add("param1", param1);
headers.add("param2", param2);


headers.setContentType(MediaType.APPLICATION_FORM_URLENCODED);

HttpEntity<MultiValueMap<String, String>> request = new HttpEntity<>(map, headers);

// post
String result = restTemplate.postForObject("${rest-api Url}", request, String.class);

log.info("result:{}",result);


JsonParser parser = new JsonParser();
JsonElement element = parser.parse(result);
String code = element.getAsJsonObject().get("resultCode").getAsString();//결과값이 resultCode인 부분 받기
String message = element.getAsJsonObject().get("resultMessage").getAsString();//결과값이 resultMessage인 부분 받기

검색의 원리 (3단계)

크롬/페이지 발견(수집) -> Indexing(발견된 페이지를 분석하기 위해 색인) -> 랭킹&서빙

구글이 생각하는 검색 최적화는 페이지가 수집되고 잘 색인될 수 있는가? 이다. 

검색 시 상단에 위치하는 건 구글의 관심분야가 아니다..

스마트폰/데스크탑 활용도 조사에서

1위 : 뉴스 서치 엔진 (검색의 활용도가 높아짐)

2위 : 소셜 네트워크 방문이 높음

3위. : 게임

....

기본적인 최적화 점검하기

1.      태그의 올바른 활용

2.      이미지의 올바른 활용

3.      콘텐츠의 올바른 활용

4.      링크의 올바른 활용

------------------------------------------------- 반드시 해야만 것들 -------------------------------------------------

1. 태그의 올바른 활용

l  title tag - 가장 효과적인 방법

ü  북마크, 즐겨찾기

l  meta description

ü  간결하고 명확한 요약정보

ü  웹 페이지마다 다른 내용을 제공

ü  가능한 모든 페이지에 태그/속성을 사용

2. 이미지의 올바른 활용

l  이미지 검색의 활용도 증가

l  alt text 활용 - 파일명과 alt text 만 가지고도 이미지를 사람들과 검색엔진이 이해하기 쉽게 사용해라

l  가장 기본적인 키워드를 넣어라

3. 콘텐츠의 올바른 활용

l  주제에 연관된 내용으로 채우기

l  콘텐츠 구성에 필요한 요소가 접근 가능하도록

l  부적절한 광고 사용 지양하기

l  삽입광고 - 필요한가?

4. 링크의 올바른 활용

l  앵커 텍스트 활용하기

l  연관된 페이지로의 링크

l  내부링크 vs. sitemap (각각의 페이지들이 어떤 의미를 가지고 있는 지 파악할 수 있다)

²  구문을 읽을 때 이치에 맞게 하는 하이퍼링크를 사용한다.

²  “여기를 누르세요” 라는 링크 이름을 사용하지 말 것

²  대부분의 검색엔진은 javascript onclick 속성의 링크를 따라가지 않는다 a태그와 함께 href 속성을 사용할 것을 권장

모두가 노력해야 할 최적화

1.      url 관리

2.      보안이 잘 되어있는 페이지

3.      Mobile First Indexing

1. url관리

l  중복된 페이지를 정리해야 합니다

ü  Canonical, 집중 대 분산

l  사용자 친화적 페이지 주소

l  접근 가능한 URL 구조를 만들기

l  내부링크 (vs. sitemap)

²  rel="canonical" 속성을 사용해서 대표 url 을 알려준다.

²  canonical 태그를 활용하여 표준 url을 알려줌으로써 중복된 페이지를 정리한다.

사용자 친화적 페이지 주소

페이지 주소만으로 내용파악이 가능한가?

l  좋은 예 : www.indeed.com/cmp/google

l  좋은 예 : www.indeed.com/wiki/검색_엔진_최적화

2. 보안이 잘 되어있는 페이지

l  https

ü  인증 - 나는 지금 누구와 데이터를 주고받고 잇는가

ü  데이터 무결성 - 내가 주고 받고 잇는 데이터는 누군가에 의해 변조되지 않았는가

ü  암호화 - 누군가 내가 주고 받는 데이터를 보고 있지 않은가

ü  https는 보안의 기본

ü  https 는 랭킹시그널의 하나

ü  차세대 웹을 위한 전제조건

l  불필요한 사용자 공간 만들지 않기

l  스팸 댓글 방지(Recaptcha)

ü  게시판 댓글 기능 사용검토

ü  스팸방지도구 사용 (Recaptcha v3)

ü  "nofollow" 태그 사용 스팸방지 말고는 nofollow를 쓸 필요가 없음

ü  신뢰할 수 없는 콘텐츠가 검색되지 않도록 차단

3. mobile first indexing

l  모바일 친화적 페이지를 만들어라

l  mobile friendly 페이지

l  mobile first indexing - 모바일이 우선순위가 되어야한다

l  모바일 사용자에 초점을 두시고 사이트를 제작해라

l  같은 url을 가지고 반응형 페이지를 만들어라 (권장)

반응형 페이지 (추천)

ü  동일한 컨텐츠로

ü  동일한 URL로

ü  대세에 반응할 수 있는

²  공유하는 링크가 분산되기 때문에 링크가 같으면 한곳으로 집중할 수 있기 때문에 검색엔진최적화에 효과를 볼 수 있다

mobile first indexing 에 효과적으로 대처하기

l  모바일 시대에 어떻게 대처하는가

ü  스피드

l  기존의 방법을 잘 활용하기

ü  structured data

ü  internal links sitemap

l  새로운 툴을 활용하기

ü  Lazyloading

-       이미지 lazyload (스피드에 있어서 좋음) - 보고 있는 부분만 로딩해줌

-       noscript 안에 이미지 태그를 사용해라 - <noscript><img></noscript> - 이렇게 써야 구글 검색에서도 수집해 갈 수 있음

-       사용자 경험상 이미지 태그에 height랑 width를 넣어주는 게 나음 - 검색엔진에서도 사이즈가 있으면 힌트가 됨 width & height 넣어라

ü  dynamic rendering

유저에게는 렝더링되지 않은 javascript를 전송하거나 검색봇과 소셜미디어에는 사전렌더링 된 페이지를 전송함으로써 검색엔진이 더 빠르게 페이지의 내용을 파악할수 있다

SearchConsoole = 구)웹 마스터 툴

- 검색실적 확인/비교

- 색인페이지 확인

- URL검사

- 개선사항 (구글로부터의 다이렉트 피드백)

- 사이트맵

- 직접조치 (해킹된 사이트 - 재검토 요청)

int -> String

: Integer.toString(23);

float -> String 

: String s = Float.toString(25.0f);

String -> int 

: Integer.parseInt("1");

String -> float

: String s = "3.14";

float f = Float.parseFloat(s);

import java.text.SimpleDateFormat;
import java.util.*;

Calendar calendar = Calendar.getInstance();
java.util.Date date = calendar.getTime();
String today = (new SimpleDateFormat("yyyy.MM.dd HH:mm").format(date));//쓰고 싶은 패턴을 입력하면 됨.

chosen 

chosen이라는 plugin은 좀 무겁긴 하지만 

좋은 검색기능을 제공해준다.

https://harvesthq.github.io/chosen/

사용할 페이지에 

환경 셋팅 : 

내부 경로에 chosen 플러그인을 넣은 경우:

<script type="text/javascript" src="<c:url value="/resources/js/chosen.jquery.js"/>" charset="utf-8"/></script>

<link rel="stylesheet" type="text/css" href="<c:url value="/resources/css/chosen.css"/>">

javascript : 

jQuery(document).ready(function(){

jQuery(".chosen").chosen();

});

jsp :

<select  name="ryanBox" id="ryanBox" class="chosen">

<option value="aa">aa</option>

<option value="bb">bb</option>

</select>

로 사용하면 되고,

해당 값을 셋팅할 때는 아래와 같은 jquery 명령어를 사용해야 한다. 

값 셋팅 : 

$("#ryanBox").val("bb").trigger("chosen:updated");