서버사이드 자스 (영어로 얘기했어서 죄송) > 자유게시판

자유게시판

서버사이드 자스 (영어로 얘기했어서 죄송) 정보

서버사이드 자스 (영어로 얘기했어서 죄송)

본문

전진님께 한 얘기는 제가 한글로 도저히 설명이 안되니 한글로 대신 설명해 주십사 했었던 겁니다.

전진님하고 저하고 서로 기분 나쁠일이 없지만 ㅎㅎㅎ, 다른분들중 혹시 기분나쁘셨던 분이 계셨다면 죄송합니다.

제가 제 친구들 얘기를 어느부분 잘못 이해한 부분도 있었고, 글만으로 설명하기는 어려운 부분이 아닌가 합니다.

server_side_js.jpg

결국 제 친구들 얘기는 이런방식으로 cross-browser 문제를 해결한다는 얘기였습니다.  여기서 문제가 되는것은 node.js 의 로딩속도.  이 문제를 nginx 의 reverse proxy 로 해결 

그리고 위의 방법과 유사하게 V8 엔진으로 rendering 되는 자스를 서버로 올리는 방식. node.js 사용없이.

저는 제 홈피를 두번째 방법으로 구축할 예정인데, 일단 구축을 해놓고 그냥 어떻게 구축된건지 보여드리는게 설명을 드리는 것 보다 더 수월할 것 같습니다.

V8 은 자스를 rendering 해주는 엔진 입니다.  


node.js 도 V8 을 사용하고 있구요.  그리고 자스를 이 V8으로 감싸서 서버로 올리는 방법이 있습니다.

이렇게 하려는 이유는

1. 더 빠른 자스 속도 
2. 위에서 언급한 크로스-브라우져 문제 해결

이상입니다.

그리고 전진님은 위의 방식이 client-side 에서 Modernizr 를 쓰는것과 다를게 없지 않느냐? 라는 의문을 갖게 되실텐데, 이런 문제들 생깁니다/생기고 있습니다.


그러니까 svg 도 현재 IE 10 이 다르고 IE 11 이 다르고 이런 문제가 생긴겁니다.  또  다른 이유/잇점들도 있는데, 아직 제가 그런 부분들에 대해 완벽하게 이해하지 못하고 있다고 생각되어....

솔직히 front-end 개발자가 이런 문제까지 다 파악하고 있을 필요는 없지 않나요?  

그냥 프로그래머들이 편안 환경을 만들어 주면, 그 환경에서 css 하고 자스 코딩만 하면 되는게 아닌가 싶은....
추천
0

댓글 21개

저도 저번에 보고 좀 의아 했는데..
크로스브라우징의 문제가 스크립트쪽도 있기는 하지만 극히 일부분이고.. 대부분은 css 쪽일듯 한데..
서버에서 브라우져를 체크해서 따로 뿌려주는 방식인건가요? ;;
css 는 별문제가 없습니다.  IE 버전별로 css 대응해주는게 어려운 문제도 아니구요..

가장 큰 문제는 자스의 IE 버전별 대응입니다.

그누보드 같은 경우, inline 자스들이 시한폭탄처럼 (g4 는 그랬었습니다.  g5는 자세히 살펴보지 않아서 잘 모르겠습니다.) 도처에 널려 있는데, 이걸 워드프레스 처럼

아예 모든 자스를 다 jQuery 로 바꾸던지, 아니면 inline 을 function 으로 바꾸던지 해야지, (function 으로 바꾼다고 문제가 해결된 다는 보장도 사실없죠) 버전별로 여러가지 conflict 들이 발생합니다.

IE10 이 나오기 전에 IE8 에서도 이런 문제가 발생했었습니다.  그러니까 제가 jQuery 로 뭘 하나 짜놓으면, 이게 그누보드의 inline javascript 과 충돌을 일으켜서 문제가 생기는 겁니다.

사실 지금 얘기하는 것과 약간 다른 문제이긴 한데, 암튼 이런식으로 버전마다 문제가 발생하는거고, 이걸 다 해결하려면 무지 골이 아프게 될 거란 얘기입니다.


벌써 IE 10, 11 때문에 골아프고 있죠.

https://dev.twitter.com/discussions/17354
네, IE8,9 에서는 멀쩡하게 작동되는 자스가 IE10에서는 먹통이 되어버리고, IE 8 하고 10 에서는 작동되지만, IE 9 에서만 작동이 안되고...

여기 sir.co.kr 질답 게시판에도 심심치 않게 이런 문제 해결을 구하시는 분들 글이 올라옵니다.

정확한 통계를 내본건 아니지만 아마 크롬에서는 작동되는데 왜 IE 에서는 작동이 안되나요?

이런 경우보다, IE 8에서는 작동되는데 왜 IE 10에서는 먹통이 되나요? - 이런 경우가 훨씬 더 많을 겁니다.


질답 게시판 눈팅 좀 하시면 이런 질문들 많이 올라옵니다.

http://sir.co.kr/bbs/board.php?bo_table=g4_qa&wr_id=280528

http://sir.co.kr/bbs/board.php?bo_table=g4_qa&wr_id=261394&sca=&sfl=wr_subject&stx=IE+10
IE가 불여시나 크롬처럼 css 만 통일되게 해석해줘도 크로스브라우징 80%는 해결이 될 거 같아요. 요즘은 모바일 때문에 오레라도 필수로 맞춰주고 있는데 외국애들이 왜 오페라오페라 하는지 알거 같아요.
JS가 브라우저별로 엔진에 차이가 조금씩 있지만 css만이라도 어떻게 맞춰 줬으면 좋겠어요.
빌게이츠 그렇게 안 봤는데 사람 고집 있는거 같아요.
Server Side(이하 SS)에서 처리를 한다면 UA값으로 분기 처리하거나 클라이언트단에서 JS를 조건분기 처리하는것이나 별반 차이가 없는것으로 사료 됩니다.
그리고, 분기처리를 한다면 SS에서 Node.js나 V8이 왜 필요한지요?
그냥 일반 php, jsp, asp등의 SS 스크립트로 해도 되는것을요?
조건분기 처리 (conditional loading 으로 이해했습니다) 를 SS 에서 하나 CS (client-side) 에서 하나 큰 차이가 없을수도 있지만, 이게 일단 속도에서 상당한 잇점이 있습니다.  SS rendering 이 CS rendering 보다 5배나 빠르답니다.

http://openmymind.net/2012/5/30/Client-Side-vs-Server-Side-Rendering/

그리고 크로스 브라우저 문제를 CS 에서 해결하나 SS 에서 해결하나 같은것 아니냐고 하시는데 물론 같다고 생각되실 수 있으나, SS 에서 이 문제를 해결함으로 해서 좀더 효율적인 code management 와 front-end 개발자의 편의성을 가져온다고 합니다.

SS javascript approach 의 잇점으로 Rapid development, 쉬운 JSOn, Dynamic ORM, Functional Programing 등을 말하네요.

http://stackoverflow.com/questions/1476967/pros-and-cons-of-serverside-javascript-implementation

물론 저 분은 Myna 에서의 예를 들고 있지만, node.js 에서도 동일하게 적용되는 잇점들 입니다.
두 예제 사이트는 RESTFul and SOAP service, XML-RPC, JSON-RPC등 객체를 다루는 부분에서는 말씀하신것처럼 node.js 및 SS JS, CoffeeScript 같은 언어를 사용하는것이 이점이 될수 있지만,
제가 잘못 이해하는지는 모르겠지만, 본질은 DOM 이벤트 컨트롤 부분에서는 SS JS와 CS JS는 무관하지 않을까 생각됩니다.
http://openmymind.net/2012/5/30/Client-Side-vs-Server-Side-Rendering/ 링크를 클릭해서 글을 읽어보았는데 이건 node.js와 전혀 상관없는 이야기입니다. 서버 사이드 렌더링이 클라이언트 렌더링보다 5배나 빠를 수도 없습니다. 글을 잘 읽어보면 어떤 상황인지를 알텐데요.

링크에서 말하고자 하는 것은 다음과 같습니다:

처음 client-side rendering을 했던 이유는 사용자가 웹을 콘트롤 할 수 있도록 관련 api들을 담은 javascript를 client로 보내어 사용자가 원하는만큼만 데이터를 받아오도록 했습니다. 이것은 사용자들에게는 큰 잇점이 되지만 문제는 그에 필요한 api를 담은 방대한 javascript 코드를 client에 보내야 합니다. 문제는 모바일이 중심이 되어가는 시대에 이것은 효율성이 떨어진다는데 있습니다. 일반 피씨에서 javascript코드를 처리하는 것은 빠르지 않아도 문제가 없지만 모바일에서는 javascript코드를 처리하는 속도는 더욱더 느리고 또 데이터를 받아처리하는 api및 관련 javascript 코드를 받아야 하므로 더많은 데이터를 브라우져는 받아야 합니다. 따라서 이것은 모바일 시대에 맞지 않으므로 트위터에서는 server-side rendering으로 방향을 전환하고자 하는 겁니다.

그렇다면 server-side rendering이란 무엇인가? 그건 이미 대부분의 웹사이트(여기 sir.co.kr포함)에서 하고 있는 방식입니다. 관련 api없이 화면에 뿌릴 데이터를 서버에서 결정해서 관련 html 코드및 css, javascript 코드를 내려보내므로 client-side rendering 때보다는 관련 api가 없으므로 더 효율적입니다. 물론 사용자는 자신이 원하는 데이터만 받을 수없고 서버가 보여주는 모든 것을 봐야하므로 사용자 컨트롤은 사라집니다. 이것이 링크에서 말하는 요지입니다.

따라서 이것은 node.js와 전혀 연관이 없습니다.

또한 서버가 V8 엔진으로 돌아가는 node.js를 쓰더라도 다른 언어와 마찬가지로 클라이언트에서 화면제어에 사용될 javascript 코드는 내려보내야 합니다. 이유는 모든 서버는 무조건 클라이언트에 html, css, javascript 코드를 내려보내고 클라이언트 브라우져에서 그걸 받아들여 해석하여 화면에 뿌리기 때문입니다. 따라서 HackYa님이 원하는 것이 되려면 모든 브라우져는 동일한 javascript 엔진을 쓰지 않는 이상은 불가능합니다. 그런데 MS에서 혹은 Apple이 구글에서 만든 V8엔진을 사용할까요? 다행히 각 브라우져들은 업데이트 과정을 거치면서 어느정도 표준을 맞추어가고 있다는데 위안을 삼을 뿐이지요.
아, 그리고 제가 이해할 수 있는 부분만 말씀을 드린거고, 제 친구말로는, 저렇게 따로/개별적으로 자스를 뿌리지 않고, V8 handler 를 C# 으로 짤수 있는 방법이 있을것 같답니다. (확실한 건 아닙니다.)

그러니까 크롬 frame 이 이런 방식인데요

http://www.google.com/chromeframe?prefersystemlevel=true

이걸 강제할 수 있는 방식이 가능할 것 같다네요.  그러니까 방문자가 어떤 브라우저를 사용해서 사이트에 접근을 하던, 자스 부분은 V8으로 rendering 하게 강제하는....

예를들면 JAVA 는 어떤 브라우저든 간에 behavior 가 동일하거든요. (플래시도 마찬가지죠.) 플래시가 IE 라고 작동되고, 크롬이라고 작동안되고 그렇지 않잖아요.

그러니까 자스도 플래시 처럼 사이트의 모든 방문자들에게 동일하게 rendering 되는걸 강제할 수 있다는 겁니다. (이론상으로)

제가 프로그래머가 아니라서 완벽하게 이해할 수 있는 문제는 아니고, 그리고 이게 가능할지도 현재 확실히 모르는거고, 단지 V8 엔진 사용을 통해 이런 가능성이 열려있다고 합니다.
서버사이드에서 처리해서 렌더링 되는걸 강제한다는 말이 무슨 뜻인지는 잘 모르겠지만
사용자 user agent 값을 체크해서 다르게 보여준다는 건가요?
그건 별로 좋은 방식이 아닐듯 한데 ;;
옛날에 자바를 실행해서 클라가 결과를 받기 위해서는 핫자바를 써야 했는데 서버사이드가 클라에 종속 된다면 다시 과거처럼 플랫폼 독립적인 웹프로그램이 어려워 질 것입니다. 미오님 말이 맞을 거 같아요. 서버 플랫폼은 독립적이여야 하고 클라가 환경을 맞춰줘야 되는 게 맞을 거 같아요. 비용측면에서도 user agent를 구분해서 프로세스를 별도로 작성한다는 건 효율적이지 못할 거 같아요.
크롬 frame은 플래시나 실버라이트처럼 클라이언트에 설치형입니다.
말씀하신것처럼 강제시키기위해서는 플러그인을 내려받아서 설치형으로 해야되거나
JVM 기반으로 in IE로 프로그래밍 한다면 가능할지 모르지만, 효율성 면에서는 IE일 경우 크롬 frame을 내려받게하는게 더 쉬울것 같습니다.
저는 프로그래머가 아니라서 어느게 더 효율적인지 잘 모르고 사실, 제가 이해하는 부분은 극히 제한적 이기도 합니다.  반응형도 RESS 형식으로 하는게 좋은가 아니면 순수한 RWD 으로 하는게 좋은가에 대한 논의도 계속 되고 있기도 한데,

단지 front-end 개발자들의 입장에서 보면, 이런 골아픈 로직을 SS 쪽에서 프로그래머들이 알아서 처리해주면 그게 좋게 느껴지는거죠.
제가 이해을 제대로 한건지 모르겠지만

응용 프로그램 사례로 비교해 볼께요..

웹이 뜨기전에는 2 Tiger ( Client - Server ) 였는데
매번 Upgrade 해야 되니, 번거스럽고 OS Lib 에 너무 의존하게 되는데다 용량이 커져서
나온것이 3 Tiger 방식 ( Client - Middle Ware - Server ) 가 생겼습니다.

여기서 Middle Ware 가 본글의 node.js 가 될것 같구요..

그런데, 응용프로그램 시절엔 접속자가 대중이 아니라
각 부서별 지역별 지점등이 연결된 구조라 동시 접속자수가 전국 대상은 아니기에
하드웨어만 빵방하면 그리 큰문제가 되지 않았습니다.

아주 큰 대기업은 접속자수 포화로 인해
볼랜드에서 나온 기능별 분리
( 단어을 잊어 먹었습니다..ㅠㅠ..M$ 가 라이센스 구매했고, Java 도 이와 비슷한 framework 을 가지고 있던데 )
을 이용 했었습니다.

하지만, 웹이 떴고 node.js 가 말씀 하신것처럼
전 세계의 대중을 대상으로 써비스한다면
부하를 서버에 두게됩니다.

웹은 분산화...
즉, 각 접속 Client 단에 부하을 넘겨 주고, 서버는 최대한 부하을 줄여주면서
퍼포먼스쪽에 효율성을 주는것이 대세가 아닌가 싶어요.

써비스 차원에서는 좋은 방식이기는 하지만
고급 사양의 서버라 하더라도 버티지 못할것 같은....ㅠㅠ

저의 사견이예요..^-^
그냥 아주 간단하게 정리 종결해 보겠습니다.

결국 크로스 브라우징 해결 책임이 누구에게 있느냐 이겁니다.

저 같은 경우 저는 클라이언트단의 모든부분을 책임져야합니다.  (웹디자이너/front-end 개발자 이니까)

제 친구는 서버단의 모든 부분을 책임집니다. (프로그래머/서버 관리자니까)

제가 현재 계약직으로 일하고 있는 곳도 동일한 셋업이고 다른 직장들도, 팀들도 단지 규모의 차이가 있을뿐. 이런 상황입니다.

그러니까 어떤 사람/사람들은 클라이언트 단 을 책임지고 있고, 어떤 사람/사람들은 서버단을 책임지고 있습니다.

제 입장에서 얘기해볼께요.

////////////////////////////////////////

서버단에서 해결할 수 있는걸 왜 클라이언트단으로 갖고 내려오니?  갖고 내려오지마,  골아파.  크로스 브라우징이고, 반응형 디자인이고, 서버단에서 해결 가능하잖아.  그런거는 너가 해줘야지 그것까지 내가 다 하면 너는 하는일이 뭔데?

돈도 너가 더 많이 벌잖아.

/////////////////////////////////////////

이런겁니다.


물론 서버단에서 해결하는게 더 비효율적이다, 이러면 얘기가 달라지겠지만, 크로스 브라우징이나 반응형이나 서버단에서 해결보는게 더 효율적이기까지 하답니다.

제 자랑이 아니라, 단순 웹디자이너 치고, 저의 기술적인 부분에 대한 이해도가 대체적으로 다른 분들보다 더 높습니다. (다른 디자이너 분들과 얘기해보면 이걸 항상 느낍니다.)

그래서 저보러 클라이언트 단에서 크로스 브라우징하고 반응형을 처리하라고 하면 할수 는 있습니다.

그런데 다른 분들은요?  다른분들 중 이 문제를 클라이언트 단에서 해결이 불가능 한 분들도 많습니다.  이런 부분도 프로그래머 분들이 고려해줘야 하는 겁니다.

골아픈건 일단 서버단으로 갖고 올라가자. - 이게 옳은 approach (접근) 이 아닐까요?
상황이 그렇다면 얘기는 달라질것 같아요...^-^

그리고, 제가 하나 관과한게 있었습니다...크로스 브라우징....

응용 프로그램은
원도우로 딱 고정이 되어 있었는데,
웹은 그게 아니니...

딜레마에 저도 빠져 버리네요...ㅠㅠ

node.js 을 해 본적이 없고 모르는데, 주절 거린것 같아요..죄송합니다..
HackYa 님 따라가기 바쁘네요....ㅋ으
이건 예전에 JS, CSS가 디자이너 영역이냐 개발자 영역이냐 뭐 그런 거 같아요. 이건 남북통일보다 해결이 어려울 거 같아요. ㅠㅠ
저도 웬만한건 클라에서 해결 보는게 낫다는 생각을 갖고 있는데 각자 의견이 분분하니 그건 프로젝트 팀마다 월급 많이 받는 사람이 일 조금 더 하는 걸로... ㅡㅡ;
설명해주셔서 고맙습니다.
저도 미오님 처럼 html/css 크로스 브라우징 으로 이해했습니다.
브라우져별 js 처리문제라면, HackYa님 말씀처럼 node.js 같은 서버사이드 js 엔진을 이용한 방법이 좋은 해법이 될수 있겠네요.
아.... css 관련 크로스 브라우징으로 이해하셨던거군요...

다들 쟤 또 뭔 개소리야? 라고들 생각하셨겠네요..... ㅠㅠㅠㅠ

그나저나 지금 이거 보고 열받아서 입술을 꽉 깨물고 있던 중......

http://www.youtube.com/watch?v=WiqiwVGyVVI

그러니까 마소 생각은,

왜 IE 를 미워해?  IE 를 미워하는 괴물들을 다 죽여버리겠어!! 이런식의 anime 를 만들었네요..


아, 열받아 정말.  아니 브라우져를 똑바로 만들면 왜 IE 를 미워하겠냐구요?

지들이 잘못하고 있는 건 생각안하고, 자기들이 피해자라는 의식을 갖고 있으니...

아,... 정말 화나고 짜증나네요....
제 컴이 얼마전에 JVM을 계속 업데이트 하던데 혹시 IE11을 위한 사전 조치일까요? ㅡㅡ; IE9 이제 겨우 적응했는데 걱정이네요.
전체 21 |RSS
자유게시판 내용 검색
  • 개별 목록 구성 제목 작성자 작성일 추천 조회
  • 게시물이 없습니다.

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT