dev-t-blog

웹사이트 혹은 브라우저에서 통신 테스트를 할 경우

인터넷 환경이 느린곳에서도 테스트를 해봐야 합니다.

이럴때 크롬에서 인터넷 속도를 조절(?) 할 수 있습니다.

우선 크롬을 실행 후 F12를 눌러서 개발자 도구를 활성화 합니다.

그 후 개발자 도구에서 Network 탭으로 이동 후 아래와 같이 설정이 가능합니다.

이외의 속도를 설정하고 싶으면은 Online 부분에서 Custom > Add 를 클릭하면 속도를 원하는 만큼 조절이 가능합니다.

윈도우 10 환경에서 express 설치하려면은 아래와 같은 단계를 거치면 됩니다.

1. node 사이트에서 node를 설치합니다.

(https://nodejs.org/ko/)

2. node를 설치를하고 CMD 창을 열어서 npm -v 라고 입력해보면 설치된 node의 버전이 보이면 성공적으로 설치가 된것입니다.

3. CMD 창에서 npm install express -g 명령어를 입력하여 설치합니다.

4. express 설치가 완료 된후 express my-app 으로 프로젝트를 생성합니다.(my-app 은 사용자가 변경할 수 있습니다.)

5. 만약 프로젝트 생성시 아래와 같은 오류가 난다면 npm express-generator -g 명령어를 입력하여 설치합니다.

6. express-generator 설치가 완료되면 다시 한번 express my-app 명령어로 프로젝트를 생성하면 됩니다.

생성이 완료되면 아래와 같은 메시지가 나옵니다.

7. 이제 개발을 진행하면됩니다.

계단식 그리드 레이아웃 라이브러리 입니다.

jQuery, Webpack, ES6, Browserify, RequireJS, Bootstrap 등을 통해서 설치 및 사용을 할 수 있습니다.

브라우저 지원 버전은

IE10+, Android 4+, Safari for iOS 5+, Firefox 16+, and Chrome 12+.

For IE8+ and Android 2.3 support, try Masonry v3. (발췌)

입니다.

Vue에서 created 문에서 for 문을 이용하여 화면을 그린 후 바로 DOM 객체 접근하려고 했을때

간혈적으로 해당 DOM을 찾지 못하는 오류를 발견 할 수 있습니다.

이는 Javascript가 비동기로 처리하기 때문에 발생하는 문제라고 합니다.

이를 해결하기위해 nextTick을 이용하여 해결하였습니다.

해당 부분은 아래 링크를 참조해 주세요.

nextTick: http://vuejs.kr/jekyll/update/2017/01/19/vuejs-nexttick-example/

반응형깊이 알아보기: https://kr.vuejs.org/v2/guide/reactivity.html

Puppeteer는 구글에서 제작한 웹 크롤링 라이브러리 입니다.

기존에는 selenium을 이용하여 했었는데 Puppeteer는 selenium 보다 사용하기 편하고

어느정도의 성능이 나올지 매우 기대가 됩니다.

그리고 구글 크롬 확장프로그램에서 Puppeteer recorder를 받아서 설치하면 좀 더 수월하게 개발할 수 있습니다.

링크: https://developers.google.com/web/tools/puppeteer/

웹서버 트래픽 폭주 대비하기 - (1) Apache + Tomcat 설정값 튜닝 사례

https://m.blog.naver.com/tmondev/220731906490

웹서버 트래픽 폭주 대비하기 - (2) APACHE vs. NGINX 성능 비교

https://m.blog.naver.com/tmondev/220737182315

몇일 전 유지보수를 하고 있는 사이트에서 뒤로가기에 대한 이슈를 접수 받았다.

하지만 이 이슈는 알고봤더니 꽤 오래전부터 묵혀져 있던 발효된 그러한 이슈 였다.

개발하던 개발자에게 부탁도 욕도 할 수 없는 상황이었다. 왜냐하면 그다음에 인수인계를 받은건 

나였기 때문이다. 

그래서 현재 발생한 이슈를 접수 받고 해결을 하기 위해 해당 증상을 파악하기 시작했다.

현재 유지보수를 하고 있는 프로젝트는 Spring + JSP + JSTL 로 이루어진 프로젝트 이다.

발생한 이슈의 내용은

화면에 들어가면 컨텐츠들이 나열되어 나오는데 이 컨텐츠들은 Spring의 ModelAndView로 리턴받아 JSTL 로 그려진 컨텐츠이다.

여기서 컨텐츠의 특정 아이콘을 누르면 해당 컨텐츠의 아이콘의 색깔이 변하면서 데이터베이스에 데이터가 쌓인다.

이 데이터를 쌓는 작업은 AJAX 비동기로 호출을 하고 있는 상태이다. 

여기서 이제 다른페이지로 이동 후 브라우저의 뒤로가기를 누르면 

이전에 클릭해서 색깔을 변경했던 아이콘들의 색상이 변경되어 있지 않은 것이다?!

하지만 새로고침을 하면 아이콘의 색깔이 정상적으로 돌아오는 것이다. 

그말은 즉슨 데이터베이스에는 데이터가 정상적으로 쌓여있다는 소리이다.

그래서 여기서 확인 할 수 있는건 브라우저의 뒤로가기시

브라우저에서 쌓는 Back Forward Cache 일 확률이 제일 크기 때문이다.

그럼 Back Forward Cache가 무엇인가 알아봤다.

Back Forward Cache 란 브라우저의 뒤로가기시 브라우저가 단일 세션내에서

자바스크립트 상태 및 웹 페이지를 전체를 캐싱함으로써 전체적은 응답속도를 빠르게 동작하기위해

사용되는 캐시입니다.

이 캐시는 페이지에 대한 추가적인 로딩을 하지않고 자바스크립트 상태 까지 유지하고 있기 때문에

페이지 로딩시 반드시 한번 호출되어야 하는 자바스크립트가 있다면 호출되지 않기 때문에 문제가 발생할 수 있습니다.

(인터넷 발췌)

라고 구글에게 검색해보니 나오고 있었다.

보아하니 현재 겪고 있는 상황이랑 매우 일치해 보였다.(뒤로가기시 해당 호출된 페이지는 서버에서 불러오지 않는다.)

그래서 Back Forward Cache를 해결하기 위해 몇가지 테스트를 진행해 보았다.

첫번째로 진행 한것은 JSP 문서상에 meta 태그로 Cache-Control을 추가하여 no-cache를 추가하였다.

결과는?! 간혈적으로 발생하지 않는 문제가 발생하였다.

인터넷상에 있는 글들을 검색해본 결과 반드시 no-cache가 되지않는다...라고 나오고 있었다.

그래서 이건 적용하지 않기로 하고 바로 두번째 테스트로 진행을 해보았다.

두번째로 진행 한것은 브라우저에서 로딩시 반드시 호출하는 window.onpageshow = function (event) {} 을 이용하는 방법이었다.

결과는?! 뒤로가기를 하던 페이지를 새로 접근을 하던 항상 onpageshow 함수는 호출을 해주었다.

여기서 이제 뒤로가기 이벤트를 잡는것이 관건이었는데 또다시 구글에게 물어본 결과

window.onpageshow 함수 인에 event 파라미터에서 event.persisted 를 통해서 Back Forward Cache를 이용해서 호출되었을 경우 true

그렇지 않을 경우 false로 호출한다는 결과를 알게되었다.

지금 당장 크롬, 익스, 파이어폭스, 사파리를 열어서 테스트해보았다.

결과는..파이어폭스와 사파리에서는 persisted를 통해서 뒤로가기 감지가 가능했지만 익스와 크롬에서는 불가능했다.

실패다. 벌써 이걸로 반나절을 까먹은듯 하다.

하지만 여기에 window.performance로 뒤로가기를 체크 할 수 있다는것을 알게되었다.

바로 코드를 작성하고 테스트를 진행하였다.

해당 자바스크립트 코드는 

window.onpageshow = function(event) {

    if ( event.persisted || (window.performance && window.performance.navigation.type == 2)) {

// Back Forward Cache로 브라우저가 로딩될 경우 혹은 브라우저 뒤로가기 했을 경우

    }

}

Spring + JSP로 개발을 하다보면 Spring의 ModelAndView 에서 전달 받은 Attribute와 JSP 변수를

자바스크립트에서 사용해야 되는 경우가 있습니다.

이 경우 손쉽게 자바스크립트에서 JSP 변수와 Spring의 ModelAndView 에서 전달받은 Attribute를 사용할 수 있습니다.

사용 방법은

첫번째- 자바스크립트에서 Spring ModelAndView의 Attribute를 사용하는 방법

var text = '${helloText}';

or

var test = "${helloText}";

(여기서 helloText는 Spring의 ModelAndView 에서 전달해준 Attribute 키 값 입니다.)

로 사용할 수 있습니다.

두번째 - 자바스크립트에서 JSP 변수 사용 방법

우선 JSP에서 변수를 이와 같이 선언합니다.

<% String helloText="Hello~!"; %>

그 후 자바스크립트에서

var text ="<%=helloText%>"; 

이렇게 해서 사용할 수 있습니다. 

이렇게 사용할 수 있는 이유는 JSP 실행 순서가 

Java => JSTL => HTML => javascript 이기 때문입니다.

그래서 자바스크립트에서 JSP 혹은 Spring의 ModelAndView 변수를 사용할 수 있지만 

반대로는 어렵습니다.

하지만

만약에 JSP 변수 혹은 Spring의 ModelAndView 변수 안에 

싱글 쿼테이션(작은따옴표 ') 혹은 더블 쿼테이션(큰 따옴표 ")이

있을 경우 예외 적인 상황이 발생 됩니다.

변수안에 싱글 쿼테이션이 있을 경우 자바스크립트에서 

var text = '${helloText}'; 이렇게 선언했을 경우 helloText안에 싱글 쿼테이션이 존재할 경우(ex helloText 값은 hello 'Text)

text의 값은 text = 'hello' Text'; 가 되는데 이렇게 될 경우 브라우저에서 

Uncaught SyntaxError: Invalid or unexpected token

오류가 발생합니다.

 더블 쿼테이션의 경우 자바스크립트 변수 text를 var text = "${helloText}"; 로 선언하고 

helloText안에 더블 쿼테이션이 

있다면 위와 같은 오류가 발생하니 주의해 주시기 바랍니다.

마지막으로

개인적으로는 JSP나 JSTL을 사용하는 것보다 Front, Server 단을 나눠서 개발하는것이 더 추천합니다.