왜 직접 들어가서 확인해야할까

예전에 봐둔 2020 삼성전자 인턴 코테 결과가 나왔다.

 

이메일로 확인하라고 공지가 6월 23일에 나왔는데, 솔직히 별 관심이 없었다...

 

이후로 SK 브로드 밴드 면접 보느라 정신이 없었기 때문에...

 


시험때 풀었던 문제들은 현재 백준에 다 올라와있다.

 

 

다른분들의 후기를 보면 매우 어려웠다고 하는데, 사실 작년 삼성 A형 자격증을 딸 때 봤던 문제들과 큰 차이는 없어보였다.

 

다만 계속 어려워지고있는것은 확실했다.

 

6월 29일 월요일에 지원한 사업부 인사팀에서 전화가 왔었다. 

 

면접 전에 사전 검진 해달라는 링크를 문자메시지로 보내줬었는데, 면접에 불참하기 때문에 조사를 안해서 걸려온 전화였는데,

 

직전에 삼성전자 인사팀에 면접불참의사 메일을 답장했었는데, 대학생 인턴 과정을 관리하는 인사팀은 따로 있나보다...

 

 

최근 제작하려는 프로젝트에 WebRTC 기술을 적용해 보기로 했다.

 

기술 멘토님들과 상의한 결과, 생각보다 기술적으로 해결해야 하는 이슈들이 많았다.

 

따라서 이번 기회에 WebRTC의 기초를 잡아보려고 한다.

 


WebRTC는?

 

  • 웹 어플리케이션(+android & ios) 및 사이트들이 데이터를 브라우져끼리 주고 받을 수 있게 만든 기술
  • 음성, 영상 미디어 혹은 텍스트, 파일 등
  • 별도의 소프트웨어 필요하지 않음
  • p2p로 공유

 

일반적으로 화상 전송 (영상 + 음성) 에 사용한다고 알려져 있지만, 채팅에도 사용할 수 있다.

 

(데이터 형식에 제한이 크지 않다는 의미)

 

www.scaledrone.com/blog/webrtc-chat-tutorial/

 

WebRTC Chat Tutorial

This tutorial will teach you: The basics of WebRTC How to create a 1-on-1 text chat where users can enter their username and be assigned a random emoji avatar How to use RTCDataChannel to send peer to peer messages How to use Scaledrone realtime messaging

www.scaledrone.com

 

WebRTC의 프로토콜

철수와 영희가 연결을 한다고 했을 때 다음과 같은 문제들이 존재한다.

  • 연결을 시도하는 방화벽을 통과해야 한다.
  • 단말에 public IP가 없다면 유일한 주소값을 할당해야할 필요가 있다.
  • 실제 사용자는 private IP를 사용한다. (일반 가정에서)
  • 라우터가 peer간의 직접연결을 허용하지 않을 때에는?

NAT (network address translation)

NAT는 외부망과 분리하고 public 망과 private 망의 IP:Port 를 매핑해주는 것이다

 

IP 변환이라고 생각하면 된다.

앞서 설명한 문제들 중 일부는 우리가 NAT 환경을 사용하기 때문에 발생한다.

 

VoIP 도 그러하지만, WebRTC 역시 Peer 간 연결을 위해서 NAT 환경에 대한 고려가 필요하다.

 

브라우저가 peer를 통한 연결이 가능하도록 하게 해주는 ICE 프레임워크에서는 이러한 작업을 수행하기 위해 다음 서버들을 사용한다. (일부만 사용하기도 함)

 

STUN 서버 (Session Traversal Utilities for NAT)

TURN 서버 (Traversal Using Relays around NAT)

 

STUN 서버

(Simple Traversal of User Datagram Protocol Through Network Address Translators)

STUN은 네트워크 환경에서 Public 관점에서 종단에 Access 가능한 IP:Port를 발견하는 작업이다.

 

IETF RFC 5389에 정의된 네트워크 프로토콜/패킷 포맷으로, 공개 주소(public address)를 발견하거나 peer간의 직접 연결을 막는 등의 라우터의 제한을 결정하는 프로토콜이다.

 

STUN은 IP 종단을 연결하기 위해서

어떤 종단이 NAT/Firewall 뒤에 있는지를 판단하게 해준다.

어떤 종단에 대한 Public IP Address를 결정하고 NAT/FIrewall의 유형에 대해서 알려준다.

 

다음 그림을 보면 과정을 이해할 수 있다.

 

A 클라이언트는 A 클라이언트의 공개주소와 라우터의 NAT 뒤에 있는 클라이언트가 접근가능한지에 대한 답변을 위한 요청을 STUN서버에 보낸다.

 

STUN 은 다음 로직에 따라서 방화벽의 종류를 결정한다고 한다.

 

내부적으로 판별하는 로직

위 로직을 보면 알겠지만, UDP 프로토콜을 사용하는 것을 알 수 있다.

UDP는 연결을 설정하지 않고 수신자가 데이터를 받을 준비를 확인하는 단계를 거치지 않고 단방향으로 정보를 전송한다. (일단 전송해본다)

 

STUN서버는 패킷의 IP 헤더와 UDP 헤더의 값(클라이언트의 공인 주소)과 STUN 메시지 안에 있는 STUN 클라이언트의 IP 주소와 UDP 포트 넘버 (클라이언트의 사설 주소)를 비교한다.

 

STUN 서버는 두 개의 서로 다른 주소에 대한 바인딩 테이블을 생성해 연결을 맺어준다.

 

TURN (Traversal Using Relays around NAT)

Peer간 직접 통신이 실패할 경우 종단점들 사이에 데이터 릴레이를 수행하는 TURN 서버들을 사용해 우회한다.

 

직접 연결이 불가능해 TURN 서버를 통해 통신하는 구조

TURN 서버와 연결하고 모든 정보를 그 서버에 전달하는 것으로 Symmetric NAT 제한을 우회한다.

 

  1. 이를 위해 TURN 서버와 연결을 한 후
  2. 모든 peer들에게 저 서버에 모든 패킷을 보내고
  3. 다시 나에게 전달해달라고 요청한다.

이는 오버헤드가 발생하므로 이 방법은 다른 대안이 없을 경우만 사용하는 방식이다.

 

TCP / UDP

RTCDataChannel은 UDP와 유사한 신뢰성 없는 방식(mode)과 TCP와 유사한 신뢰성 있는 방식 둘 중 하나로 동작할 수 있다.

 

UDP Hole Punching

앞서 말한 NAT 환경에서 연결을 위해 사용하는 방법 중 하나이다.

 

방법 중 하나로 STUN을 사용하기 때문에 앞서 STUN과 TURN 을 설명했다.

 

Hole-Punching 기술 유형은 다음과 같다

기술 설명
Relaying Client 1 → NAT A → Server → NAT B → 2
C-S 모델 연동
Connection Reversal 1 → 2 시 NAT
2 → 1 시 R서버
STUN 서버로부터 Client에 맵핑된 공인 IP 정보 수집
Hairpin 기법 Client A, B는 Server에 NAT 정보 저장
통신 시 A → NAT → B로 전송
Internal 네트워크 Client A, B는 Server에 NAT 정보 저장
통신 시 A → Local Broadcast → B

대규모 연결

사실 WebRTC 방식으로 P2P로 사용자들끼리 연결하는 경우에 소규모인 경우는 문제가 없다.

 

그러나 만약  p2p로 여러 사용자를 연결하는 모두 경우에는 각 peer당 연결해야 되는 peer의 수가 많아져 높은 부하 (인코딩 등)를 감당하게 된다.

Server based
full mesh p2p

그래서 실제 서비스를 운영할 때는 위 두 방식을 부분적으로 조합해 사용한다.

 

전부 연결되었지만, 간선의 수가 full mesh보다 적다

 

 


최큰 카카오 엔터프라이즈가 리모트 몬스터라는 기업을 인수했다.

 

https://www.hankyung.com/it/article/2020052682471

 

카카오엔터, 56억에 리모트몬스터 인수

카카오엔터, 56억에 리모트몬스터 인수, 홍윤정 기자, 산업

www.hankyung.com

리모트몬스터는 WebRTC 방송통신 기술 전문 기업이다. 역으로 말하면 WebRTC 기술을 사용할 때 부하 등 인프라 구조에 대한 깊은 이해도가 필요하다는 의미일것이다.

 

 

출처

http://www.authorstream.com/Presentation/kangsik-3609452-webrtc/

 

하이퍼커넥트-스타트업 핵심기술로서의 Webrtc(�

2018년 11월 1일, RTC KOREA 2018 컨퍼런스에서 하이퍼커넥트가 발표한 내용입니다.- authorSTREAM Presentation

www.authorstream.com

https://alnova2.tistory.com/1110

 

[WebRTC] STUN 과 TURN 에 대하여 #1 - 개요

 VoIP 도 그러하지만, WebRTC 역시 Peer 간 연결을 위해서 NAT 환경에 대한 고려가 필요하다. 이를 위해서 IETF에서 표준을 정의한 것이 바로 STUN과 TURN, 그리고 ICE 이다. 1. NAT에 대하여 NAT는 외부망과 ��

alnova2.tistory.com

https://www.slideshare.net/nurinamu/web-rtc-in-2014

 

WebRTC in 2014

Review the WebRTC issues & news and forecast the future WebRTC industry. This slide is used in GDG Seoul Monthly Meetup at 22th Jan, 2014.

www.slideshare.net

 

오랫만에 삼성전자 인재개발원으로 A형 평가 시험을 치루러 갔다.

 

역량평가 A형 등급취득을 위한건 아니고, 대학생인턴용 코테를 치루러 간 것이다...

 

평소엔 서울 멀티캠퍼스에서 시험을 봤었는데 난생 최초로 입사전형 코테를 인재개발원으로 가려고 하니 너무 부담됬다. (너무멀어)

 


삼성전자 A형

너무너무 더운 하루

삼성 SDS 가 아닌 전자의 시험이였기 때문에 오후반에 배정받았다. 시험 장소는 총 두 곳 인것같은데 둘다 경기도 수원쪽이였다. 

 

코로나 때문에 온라인으로 보지 않을까 했지만 오프라인으로 확정되고 별 고지가 없어, 별 수 없이 보러갔다...

 

장난아니게 더웠던 날씨

정말 마른하늘에 구름한점 없이 햇볓이 쨍쨍 내리쪗다...

 

사실 인재개발원은 2018년에 면접, 2019년엔 A형 역량평가를 위해 들었었던 곳이다. 이번이 세번째인 만큼 꽤 익숙했다.

 

사회적 거리두기

사회적 거리두기

입구의 앞에서부터 대기요원들이 안내를 해주고 있었다. 특히 도로에 파랑 테이프로 길을 안내해주고, 저렇게 발 표시로 강제로 거리를 두도록 요청하고 있었다.

 

사실 난 시험시작 40분 전에 도착했기 때문에 기다리는 일 없이 바로 들어갈 수 있었다.

 

저번 SKCT때는 1시간 일찍 도착하고서도 온도체크, 장갑착용 등을 이유로 밖에서 기다렸었지만 이번은 꽤 원활했다.

 

그런데 이 더운날씨에 진행요원들이 밖에서 풀세트로 껴입고 안내를 도왔다는게 참 대단하다...

 

쾌적했던 시험장

시험장은 굉장히 쾌적했다.

 

사회적 거리두기 때문에 고사장 별로 인원이 적었던 것도 있고, 창문으로 들어오는 바람도 시원했다.

 

충분히 집중할 수 있는 환경이였다.

 

진짜 너무 불편한 키보드

제일 좋았던 점은 키보드였다.

 

삼성 SDS 특강, 그리고 A형 평가 때 위 키보드를 사용했었는데 진짜 무진장 불편했었다.

 

이번 시험에는 저 키보드가 아닌 SKG-3000UB 모델과 비슷한 키보드를 사용했는데 너무 편했다.

 

다만 키보드 소음이 좀 있는 편이라 시험장에 키보드 소리가 너무 컸던건 단점.

 

평소에 Mac 키보드처럼 한영 전환 버튼을 Capslock에 두고 사용하는 버릇 때문에 쓸데없는 한/영 전환에 시간이 소요됬다.

 

무난했던 2문제, 조기퇴근

본론으로 들어가서 시험은 무난했다. 일반적으로 삼성전자의 코딩테스트는 시뮬레이션, 시뮬레이션+탐색 두 문제로 출제되는데 이번에도 큰 변동은 없었다.

 

그런데 1번, 2번 모두 문제 지문이 꽤 길고 생각보다 구현이 귀찮은 문제들이였다.

 

보통 기출문제를 풀었을 때 110줄 정도로 코드가 나오는데, 이번에는 이것보다 훨씬 길게 짯었다.

 

그래도 1시간 40분 정도 될 때 두문제 다 해결했고, 시험시간 2시간이 지났을 때 시험을 끝내고 나왔다.

 

이번 주 월요일부터 기출문제를 하루에 한 문제씩 시간을 재가며 풀어봤던게 도움이 됬던것 같다.

 

몇몇 놓친부분이 있을지도 모르지만 크게 걱정은 되지 않는다.

 

예전에 2시간이 지났을 때 나가는 사람들을 보면 대단하다고 느꼇는데, 그동안 알고리즘 문제 해결 능력이 성장한것 같아 다행이다.

 


브라운 팩토리가 벌써 저기까지...

집으로 돌아오는 버스가 NAVER 사옥 옆 고속도로를 지나서 오랫만에 NAVER 사옥을 다시 봤다.

 

인턴시절엔 신사옥이 저렇게 높지 않았는데, 벌써 저만큼이나 지었다니;

 

같이 인턴했던 친구들에게 이 사진을 보여주니 다들 놀랐더라.

 

사실 NAVER 인턴이나 지금이나 코로나 때문에 예년과 달라 너무 당혹스러운데 이 피해를 취준생이 입어야 하니 참 암담하다.

 


코딩 테스트에 합격했다. A형 평가가 다시 열린다면 A+ 자격증을 따러 꼭 신청해야겠다!

너무 옛날 일이지만 대학 2학년, 3학년 때 삼성 소프트웨어 트랙 채용과정에 지원했었고 두번 다 면접까지 봤었다.

 

어찌보면 나를 개발자의 길로 이끈 최초의 사건이기 때문에 늦었지만 지금에서라도 기록해보려한다.

 

만약 저 프로그램에 지원하지 않았더라면 부스트코스 2019과정도, NAVER 인턴도, SW 마에스트로 11기도 참여 안했겠지만....

 


2017년 내 진로를 설정해준 SST

난생 처음 접했던 코딩테스트

2017년 2학기에는 절대 잊을 수 없는 추억이 있다.

무려 2학년에 알고리즘도 모르는 신분으로 무려 삼성전자 A형 코딩테스트 시험을 통과했기 때문...

 

때를 거슬러 올라가면 2017년 2학년 2학기에 돌입하자마자, 애초에 벼르고 있던 SST 과정에 멋도모르고 신청을 했었다.

 

원래는 대외활동같은 개념인 줄 알고 지원했었는데, 설명회에서 "이것은 채용과정이다! 당장 OPIC 부터 따고와라!" 라는 말을 듣고나서 설명회를 같이 간 동기들은 전부 도망쳤다...

 

하지만 멋도 몰랐던 나는 설명회에서 OPIC 시험치라고 준 쿠폰 (뭐 입력하면 시험이 공짜였던것 같다) 을 사용해 공짜시험 개꿀이네 라며 시험을 쳤었다.

 

무난하게 IM2 성적을 취득 후, 99%를 붙여준다는 서류번형에 덜컥 합격했더랬다...

 

(사실 이때 자소서 검토받는다고 여기저기 들쑤시고다녔었다)

 

그리고 코딩테스트를 무려 C 언어로 SST 코딩테스트 대비반에 들어갔더랬다...

(C++도 아니다... stdio.h 하나로 아무것도 모르고 도전) 

 

왜 iostream과 STL을 안썻냐고 하면... 그때는 있는줄도 몰랐다.

 

엄청 오래 걸려서 풀었던 역량평가 대비 문제...

진짜 한 달동안 대학원생 멘토를 붙잡고 달달 볶으면서 공부했었다.

 

집에서도 밤늦게까지 하루 종일 알고리즘을 붙잡고 살았고, 마침내 시험날이 다가왔다.

 

기대도 안한 시험에 합격해버렸었다

결과는 합격... 무려 2솔이였다... (그때 유독 시험문제가 쉽게 나왔다)

 

첫 면접, 광탈

처음 면접보러갔던 서초 R&D 센터

아침 일찍 면접을 보러 갔었다.

 

정말 아무것도 모르는 2학년 짜리 전자과 학생은 면접때 "이렇게 살면 취업 못하겠구나" 라고 느꼇었다.

그리고 삼성의 무한 대기 면접을 경험하며 성장할 수 있었다. 면접에 기대도 안하고 긴장도 안하는 방향으로...

 

결과는 탈락! 기대도 많이 해서 아쉬웠지만, 도데체 어떻게 해야 취업을 할 수 있을지 걱정만 남기고 2017년은 끝났다...

 

참고로 밥 별로 맛없던데;;

 

2018년 일본 교환학생중에 SST

one more time

2018년 1학기는 사실 일본으로 교환학생을 가 있었을 때다.

일본에서 삼성 A형 역량평가를 치러 한국으로 왔다가, 또 면접을 보러 한국으로 왔다 갔다...

 

일본에 있을때 매번 이걸 먹었는데 아직도 그립다...

역시나 기대도 안하던 코테에 덜컥 붙어버려 면접을 치루러 삼성전자 인재개발원으로 갔었다...

 

두 번째 면접이라 좋았던 점은 긴장도 안되서 떨지도 않게 되었다는 점과, 좀더 여유가 생겼다는 점 이다.

 

일본에서 비행기타고 면접보러 왔다는 썰을 풀었을 때는 면접관 분들도 꽤나 놀란 눈치였다.

내가 생각해도 좀 신선한 충격이였을것 같다...

 

이 이름표는 아직도 버리지 않았다.

결과는 탈락. 불과 반년동안 성장하기에는, 교환학생이라는 이벤트 덕분에 SW 쪽으로 성장하기는 힘들었다.

 

사실 교환학생 기간동안 이번에 삼성에 떨어지면 공기업을 노려볼까... 하고 진지하게 고민도 많이 했었다.

그러면서 부스트코스 에이스 1기 과정에 참여해 Web Full-Stack 지식을 쌓게 되었고 이게 내 두 번째 인생의 turning point가 되었었다.

 

그래도 이 면접 & 코테 경험들 덕분에 나는 내 가능성을 보았고, 지금 개발자로 진로가 굳어질 수 있었다.


벌써 2~3년전 이야기다 보니 그때 느꼇던 절망이나 긴장감이 거의 남아있지 않게 되었다.

 

확실한건 삼성전자 면접을 경험하고 나서부터는 그 어떤 면접에서도 긴장을 한 적이 없었다. (SKT, NAVER, 현대카드, 스타트업 등등...)

 

사실 정말 우연치않게 참여했던 프로그램 덕분에 내가 여기까지 온 걸 생각하면 삼성전자에 절을 해도 모자를 판이지만...

 

당장 내일 삼성전자 코딩테스트를 보러 다시 인재개발원으로 가야하는 내 운명을 보면 참 사람일이란 모르는 것 같다.

Javascript없이 HTML 과 CSS 로는 단순히 정적인 페이지를 보여주는것만 가능하다.

(CSS 옵션 및 애니메이션이 아닌 데이터의 요청 등의 '변화' 를 기준으로 정적임을 판단.)

 

만약 새로고침 없이 동적으로 데이터를 받아오고 싶다면 Javascript로 서버에 통신을 요청하면 된다.

 

이런 방법을 어디에 사용할 수 있을까??

사실 현대 웹 에서는 UX의 모든곳에 사용하고 있다.

 

Chrome 브라우저의 개발자도구 > 네트워크 탭으로 확인해보자.

 

네이버 모바일 페이지의 홈 화면이다.
뉴스 탭을 클릭할때 데이터들이 받아지는것을 볼 수 있다.

 

이 데이터들의 통신을 AJAX 통신이라고 한다. (Asynchronous JavaScript And XML)

Asynchronous (비동기) 임에 주의하자.

 

Ajax 통신을 간단히 말하면 "서버와 통신하기 위해 XMLHttpRequest 객체를 사용하는 것" 이다.

 

Javascript는 브라우저에서 Ajax 통신을 지원하기 위해 자연스럽게 비동기를 지원하게 되었고,

브라우저의 자바스크립트 엔진은 싱글 스레드 기반이므로, 하나의 스레드로 이를 처리해야만 했다.

 

이 글에서는 Ajax 통신과 비동기에 대해서 설명한다.

 

 

Ajax 시작하기

본 문서는 AJAX의 기본을 익힐수 있도록 해주며, 두 가지 간단한 훈련용 예제를 제공합니다.

developer.mozilla.org


Ajax (Asynchronous JavaScript And XML)

소개글에서 웹 페이지에서 Ajax 통신을 어떻게 사용하는 지를 설명했다.

 

만약, 첫 메인페이지에서 다른 탭들의 데이터를 한꺼번에 로딩한다면 비동기 통신을 할 필요가 없다.

 

다만 이 경우 초기 브라우저 로딩 속도가 매우 느려지며, 사용자가 사용하지 않을 가능성이 있는 정보까지 요청한다.

거기다 사용자가 많아질 경우 서버에 큰 부담이 된다.

 

Ajax 통신으로 JSON, XML, HTML 그리고 일반 텍스트 형식 등을 포함한 다양한 포맷을 주고받을 수 있다.

그 중에서 일반적으로 사용이 편한 JSON 형식을 주고받는 방법을 사용한다.

JSON 

 

JSON (JavaScript Object Notation)은 경량의 DATA-교환 형식이며, 

Javascript에서 객체를 만들 때 사용하는 표현식 이다.

 

이 형식은 사람이 읽고 쓰기에 용이하며, 기계가 분석하고 생성함에도 용이하다.

 

특정 언어에 종속되지 않는다는 특징이 있다.

따라서 대부분의 프로그래밍 언어에서 JSON 포맷의 데이터를 핸들링 할 수 있는 라이브러리를 제공한다.

 

우선 JSON 데이터를 확인해보자

 

{
  "squadName": "Super hero squad",
  "homeTown": "Metro City",
  "formed": 2016,
  "secretBase": "Super tower",
  "active": true,
  "members": [
    {
      "name": "Molecule Man",
      "age": 29,
      "secretIdentity": "Dan Jukes",
      "powers": [
        "Radiation resistance",
        "Turning tiny",
        "Radiation blast"
      ]
    },
    {
      "name": "Madame Uppercut",
      "age": 39,
      "secretIdentity": "Jane Wilson",
      "powers": [
        "Million tonne punch",
        "Damage resistance",
        "Superhuman reflexes"
      ]
    }
  ]
}

JSON 데이터는 Key 와 Value로 이루어진 쌍의 데이터들을 가진다. : { String key : String value }

Key는 유일해야하며, Value로는 일반 값과 배열, JSON을 포함한 값들을 가진다.

 

JSON 내부에 JSON데이터를 넣을 수 있으므로 위 예시와 같이 응용할 수 있다.

 

JSON을 다룰 때 자주 사용하는 메소드로는 다음 두가지가 있다.

  • JSON.parse(JSON으로 변환할 문자열) : JSON 형식의 텍스트를 자바스크립트 객체로 변환한다.
  • JSON.stringify(JSON 문자열로 변환할 값) : 자바스크립트 객체를 JSON 텍스트로 변환한다.

다음 예제를 실행해보자

var jsonText = '{ "key": "value" }';
var realObject = JSON.parse(jsonText);

realObject	// {key: "value"}

var realObjectTojsonText = JSON.stringify(realObject);

realObjectTojsonText // "{"key":"value"}"

형식이 맞을경우 문자열을 JSON 데이터로 변환할 수 있다.

 

Ajax를 실행해보자

function ajax() {
 var oReq = new XMLHttpRequest();
 
 oReq.addEventListener("load", function() {
   console.log(this.responseText);
 });    
 
 // 요청방식, url, 비동기적으로 실행될지 boolean (생략가능)
 oReq.open("GET", "https://hacker-news.firebaseio.com/v0/topstories.json");
 oReq.send();
}

// 위 함수를 실행시켜보자
ajax()

출처 : 부스트코스 강의 내용 중

 

oReq는 XMXMLHttpRequest 로 생성된 객체이다.

 

이 객체에 이벤트 리스너로 load 되었을 때 console로 responseText를 출력하도록 설정했다.

여기서 this 바인딩을 사용했는데, 이 this는 함수의 인자로 자동으로 전달되는 객체를 가리킨다.

 

this 바인딩이 어려울 경우 다음 코드로 이해해도 된다.

function reqListener (e) {
    console.log(e.responseText);
}

 oReq.addEventListener("load", reqListener);  

 

open 메소드를 통해 요청방식, 주소, 비동기 여부를 지정하고,

send 메소드를 이용해 보낸다.

 

 

ajax함수를 실행시킨 경우 무언가 데이터가 출력되는것을 확인할 수 있다.

 

비동기

여기서 데이터의 출력이 '조금 늦게' 일어나는것을 유심히 살펴보자.

Chrome 개발자도구의 네트워크 탭을 열고 확인해보자

 

ajax()를 실행시키고 나서 데이터를 요청 후 받아오는데 171ms가 걸렸다.

요청처리가 완료되면(서버에서 응답이 오면) load이벤트가 발생하고, 콜백함수가 실행된다.

이 콜백 함수는 console.log를 실행하는 함수이다.


콜백함수가 실행될 때, ajax함수는 이미 콜스택에서 사라진 상태이다.

즉 ajax함수에서 oReq.send 가 끝날때까지 기다리지 않고, 서버에 요청만 보낸 뒤 ajax함수는 끝난것이다.

이는 setTimeout함수의 콜백함수의 실행과 유사하게 동작하는 '비동기'로직 이다.

 

자바스크립트는 싱글스레드이므로, 중간 중간 서버에 데이터를 요청하거나 setTimeout등과 같은 비동기 처리를 구현하기 위해 다음과 같은 구조를 사용한다.

 

자바스크립트 엔진, 이벤트 큐, WEb API

다음 동영상을 보면 더 자세한 설명이 나와있다.

 

 

Ajax의 응답 처리

서버로부터 받아온 JSON 데이터는 문자열 형태이다.

이는 문자열이므로 Javascript에서 사용하기 위해 문자열을 JSON으로 변화시켜주어야한다.

 

이때 JSON.parse 메소드를 사용한다.

var json객체로변환된값 = JSON.parse("서버에서 받은 JSON 문자열");

Ajax의 단점

동적인 웹과, 필요한 데이터만 전송할 수 있는 방식인 Ajax에는 다음과 같은 단점이 존재한다.

  • 히스토리 관리가 되지 않는다. (브라우저의 뒤로가기 앞으로가기 등과 상관 없는 데이터 전송) 
  • 연속으로 데이터를 요청하면 서버 부하가 증가할 수 있다.
  • XMLHttpRequest를 통해 통신을 하는 경우사용자에게 아무런 진행 정보가 주어지지 않는다.
  • 그래서 아직 요청이 완료되지 않았는데 사용자가 페이지를 떠나거나 오작동할 우려가 발생하게 된다. 

진행정보가 주어지지 않아 사용자가 로딩 중에 이탈하는 경우가 발생할 수 있음에 유의하자!

 

히스토리는 History객체를 의미한다. 자세한 내용은 아래 링크에서 확인하자.

 

History

History 인터페이스는 브라우저의 세션 기록, 즉 현재 페이지를 불러온 탭 또는 프레임의 방문 기록을 조작할 수 있는 방법을 제공합니다.

developer.mozilla.org

 


AJAX의 경우 비동기 방식이므로, Javascript의 매우 중요한 성질 중 하나를 사용하고 있다.

 

처리 과정을 파악하고 있다면, 앞으로 마주할 비동기 문제에 좀더 유연하게 대처할 수 있을것이다.

 

 

[LECTURE] 4) Ajax통신의 이해 : edwith

들어가기 전에 브라우저의 새로고침 없이 데이터를 얻어오는 방법이 있습니다. 이는 사용자가 더 빠르게 변경된 데이터를 화면의 새로고침 없이 확인할 수 있는 방법으로 더 좋은 UX(U... - 부스트코스

www.edwith.org

 

 

[LECTURE] 1) Ajax 응답 처리와 비동기 : edwith

들어가기 전에 브라우저의 새로고침 없이 데이터를 얻어오는 방법이 있습니다. 더 좋은 UX(User Experience)를 제공하는 좋은 방법이니, 알아보도록 하죠.     학습 목... - 부스트코스

www.edwith.org

 

+ Recent posts