면접에서 웹소켓을 물어보면? 간단하게 알아보기


안녕하세요.
고코더 입니다.


 1. 웹소켓이란 단어를 많이 들어봤지만 설명하라고 하면 입이 떨어지지 않는 주제입니다.
우선 소켓은 네트워크에 가장 기초적인 개념입니다. 통신을 위해 두 지점을 말합니다. 통신의 통로입니다. 여기서 Web이란 단어를 합성해서 "웹소켓"으로 불립니다. 기본 적으로 웹소켓은 Stateful Protocol 방식입니다. 한번 연결된 네트워크 라인 통신을 통해 데이터를 양측에 주고 받을 수 있습니다.  즉 기본 request, response 방법이 아닌 연결을 유지한채 정보를 주고 받는 방법입니다.
HTML5에서는 이런 웹소켓 방식을 2009년 부터 공식 지원하고 있습니다. 

1
websocket = new WebSocket(URL);
cs



 2. 웹소켓 장점
1. 80혹은 443 포트를 이용한 데이터를 교류 합니다. 그렇기 때문에 금융권에서는 이런 방화벽 오픈에 대해 민감하기 때문에 쉽게 사용할 수 있습니다. 
2. 정보를 서버와 실시간 교류 할 수 있기에 즉각적인 변화를 감지해야 하는 서비스에 좋습니다.(채팅, 주식,코인 거래소 등등)

 3. 웹소켓 단점 
1. 개발이 복잡하니다. 레퍼런스가 ajax 비해 많이 부족합니다. 완성도 높게 개발하지 않으면 유지보수가 어렵습니다.
2. 트래픽이 많이 발생합니다. 그래서 특별한 경우가 아닌 경우에는 서버 부하와 관리 때문에 도입에 대한 의견을 나누다 제외 되는 경우가 많습니다.
3. 최신 브라우저가 아니면 작동 되지 앖습니다. 2009년 부터 지원하고 있기에 ie8 같은 오래된 익스플로러에서는 작동되지 않습니다. (저희 부모님은 아직도 xp ie8을 사용중이시죠)

íµì ì ëí ì´ë¯¸ì§ ê²ìê²°ê³¼

 4. 최근 동향은 Ajax로 필요할때마다 시간마다 불러오는 Polling 방식에서 WebSocket으로 서비스를 고도화 하고 있습니다. 그래서 많은 취업 공고에 websocket에 개발자를 구하고 있으니 먼저 공부하고 간단하게 면접자에게 설명할 수 있도록 이론을 쌓아보시길 바랍니다.


마무리


최적 실시간 환경이 아닌 서비스에서는 웹소켓 보다 기존 ajax 방식이 아직 더 좋습니다.








댓글을 달아 주세요


formaction 예제


안녕하세요.
고코더 입니다.


 1. form을 전송하는 방법은 웹프로그래밍 언어에 기본 입니다.
필요한 데이터를 로직을 처리하는 소스르 넘기는 과정입니다.
그런데 html5부터는 formaction 속성을 이용해 폼 주소를 input 박스에서 수정이 가능합니다.

 2. 소스를 함께 살펴보겠습니다. 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
    <link rel='stylesheet' href='/stylesheets/style.css'/>
</head>
<body>
 
<form action="/board/update" method="post">
    <table border="1">
        <tr>
            <td colspan="2">
                <button type="submit">폼 전송</button>
                <button type="submit" formaction="/board/delete">폼 전송2</button>
                <a href="/board/list">목록</a>
            </td>
        </tr>
    </table>
</form>
</body>
cs


 3. formaction 속성이 없다면 post를 가로채서
스크립트를 작성하여 조건절을 걸었지만
html5에 편리한 기능 때문에 각각 다른 폼으로 전송이 가능합니다. 


 4. "폼 전송" 은 기존에 action 주소로 이동하고


 5. "폼 전송2" 는 formaction  주소로 이동합니다.


복잡한 스크립트 없이 form 전송을
동적으로 할 수 있습니다.


마무리


하지만 html5 브라우저가 아닌 옛날 익스플로러 사용하는 유저도 많으니
그림에 떡이네요.






댓글을 달아 주세요


html5 입력 유효성 확인 


안녕하세요.
고코더 입니다.


 1. HTML5에 새로운 기능들은 개발자에 피로를 많이 덜어줍니다.
그 중에 하나가 바로 required 속성입니다.
input이 비어있으면 자동으로 필수값으로 값을 넣으라고 해주는 유효성 체크 항목 입니다.

 2. 가끔 브라우저에서 이런 메세지 창을 보신적이 있죠?
required 속성을 입력한 input은 자동으로
이렇게 메세지 창을 띄워서 입력을 받도록 강제해줍니다.



 3. 사용법은 간단합니다. 그저 input 태그안에
required만 붙혀주면 됩니다.
<input type="text" name="title" id="title" required/>
그리고 해당 속성은 해당 input은 필수 값이라는걸 알려주는 태그임을 강조하는 역할도 합니다.


마무리


물런 최신 브라우저를 써야 작동하는 기능이라 
결국은 일부 유저를 위해 스크립트 유효성 체크를 해줘야 하겠죠.





댓글을 달아 주세요



미터, 프로그래스 태그 차이


오늘은 간단한 HTML을 설명하려고 합니다.
progress는 흔히 사용하는 태그입니다.
진행률 나타낼때 참 좋죠.

그런데 meter라는 태그도 progress와 너무 비슷합니다.
그래서 오늘은 이 두가지의 HTML 차이를 알아보려 합니다.

결론부터 말하면

progress : 진행율을 나타내기 위해, 동적 데이터
meter : 현재 점수나 범위를 나타낼때, 정적데이터



▼ 아래 소스를 크롬에서 확인하면
<html>
<head>
    <title>meter 태그와 progress 태그 </title>
</head>

*당신의 수학점수는?<br>
90-> <meter value="90" min="0" max="100">90</meter>

<br>

*현재 프로젝트 완성률은 <br>
70%-> <progress id="progressID" value="70" max="100"></progress>

</html>

▼ 아래처럼 보입니다. 특이점은
progress 태그는 눈금이 보이죠? 앞으로 뭔가 더 진행될거 같으 느껴집니다. 동적으로 보이고
meter 태그는 정적으로 보입니다. 


▼하지만 익스플로러에서는 조금 다릅니다.
우선 meter 태그는 디자인 없이 text속성의 값만이 보이고 progress는 크롬처럼 눈금이 없는 모양새네요
익스 때문에 한국에서는 구분없이  progress를 통일해서 쓰게 되고 있습니다.




마무리


이제는 익스가 호환성 문제가 많네요


댓글을 달아 주세요