JSFiddle - React, Tailwind, and code Playground
by hohoya33
HTML
#Javasript 신입사원 교유
## Javascript?
전통적인 웹 방식은
새로운 페이지 요청 시마다 정적 리소스가 다운로드되고 전체 페이지를 다시 렌더링하는 방식을 사용
새로고침이 발생되어 사용성이 좋지 않다.
그리고 변경이 필요없는 부분를 포함하여 전체 페이지를 갱신하므로 비효율적이다.
SPA는 기본적으로 웹 애플리케이션에 필요한 모든 정적 리소스를 최초에 한번 다운로드한다.
새로운 페이지 요청 시, 페이지 갱신에 필요한 데이터만을 전달받아 페이지를 갱신
하므로
전체적인 트래픽을 감소
전체 페이지를 다시 렌더링하지 않고 변경되는 부분만을 갱신
하므로 새로고침이 발생하지 않아 네이티브 앱과 유사한 사용자 경험을 제공할 수 있다.
모바일의 사용이 증가하고 있는 현 시점에 트래픽의 감소와 속도, 사용성, 반응성의 향상은 매우 중요한 이슈이다.
SPA의 핵심 가치는 사용자 경험(UX) 향상에 있으며 부가적으로 애플리케이션 속도의 향상도 기대할 수 있어서 모바일 퍼스트(Mobile First) 전략에 부합한다.
초기 구동 속도
SEO(검색엔진 최적화) 문제
처음 자바스크립트가 나왔을 당시 브라우저에서 작은 단위를 처리하는 스크립트로 사용
데이터의 유형이 텍스트 -> 이미지 -> 미디어로 진화
웹 페이지의 성격이 동적으로 변화
HTML의 정적인 텍스트 데이터와 DB의 동적인 데이터를 결합하여 화면에 표시하기 위해, 서블릿 기반의 Server Side Rendering
앞단 화면에서 자바스크립트를 이용한 비동기 처리로 화면을 동적으로 구성 (Client Side Rendering)
예전 웹 사이트와 현대 웹 사이트를 보면 기능면에서 많은 차이가 있습니다.
Airbnb를 예를 들자면, 사용자의 입력을 받아 달력을 표시하고, 일정을 선택하면 해당 숙소의 사용 여부를 체크 및 숙소의 위치정보를 맵으로 표시하는 등의 많은 처리가 한 화면에서 일어납니다.
결국 이 과정들을 페이지별로 쪼개어 사용자에게 표현해주는 것이 아니라, 한 화면이나 특정 화면 범위 안에서 유동적이면서도 즉각적으로 반응을 해줘야 사용자 입장에서는 불필요한 대기시간을 줄이게 되는 것이죠.
이러한 동적인 화면 처리가 사용자에게 제공하는 Rich Experience(풍부한 경험)이라고 볼 수 있을 것 같습니다.
달리 말해 화면의 불필요한 깜빡거림을 줄이거나 매끄러운 화면전환 등을 의미합니다.
자 그럼 그렇게 화면에서의 사용자 경험 향상 이외에 더 편하게 웹을 사용하기 위해 또 어떠한 노력들이 현재 진행되고 있을까요?
바로 Progressive Web Apps입니다. Google에서 2015 년에 발표한 새로운 형태의 진보한 웹 앱 인데요. 한 문장으로 요약하자면 “최적화된 웹 성능에 모바일의 Native 기능을 결합한 최신 웹 앱” 입니다.
모바일 기기가 보급화되면서 PC Web 보다는 Mobile Web 으로 접속하는 사용자들이 훨씬 많아졌는데요.
이 사용자들이 웹에서 더 머무르고 다시 웹을 접속하기 수월하게끔,
웹 사이트에 App Icon & Install Banner & Push Notification 을 추가하여 모바일 앱을 설치하지 않고도 웹을 모바일 앱처럼 접근할 수 있는 편이성을 제공
모바일 앱의 “개발 -> 배포 -> 검색 -> 설치 -> 접속” 의 싸이클을 “개발 -> 배포 -> 검색 (설치 & 접속)” 으로 간편화 하여, 개발자 입장에서나 사용자 입장에서 앱스토어에 올리고 검색해서 다운로드하는 번거로운 시간들을 줄여주는 거죠.
이런 간편함으로 인해 Web App 이 점점 Native App 의 시장을 침범하고 있습니다.
JavaScript 와 Java는 근본적으로 다릅니다.
초기에 자바스크립트는 Mocha라는 이름으로 개발되다 추후에 Livescript라는 이름으로 변경되었다.
그러다 자바라는 언어가 인기가 많아지자 그 인기에 편승할 목적, 즉 마케팅 목적으로 자바스크립트라는 이름으로 변경 후 세상에 나오게 되었다.
자바가 인기가 많으니...