분류 전체보기 (47) 썸네일형 리스트형 SaaS (Software as a service) SaaS (Software as a service) 클라우드 컴퓨팅이 도입되면서 생긴 용어이다. 어플리케이션을 조직이나 개인에게 쉽게 제공되는 IT 서비스 방식을 의미한다. 간단하게 인터넷으로 우리가 필요한 서비스를 별다른 설치 없이 pc에서 이용할 수 있는 서비스이다. 대표적으로 웹메일, 구글 클라우드, 네이버 클라우드, MS오피스365, 드롭박스 등이 있다. SaaS는 위의 구성요소 표에서 보이는 것처럼 서비스 제공의 관점에서 볼 때 철저한 소비(Consume)를 목적으로 한다. Finished Service의 관점으로도 볼 수 있으며, 서비스 사용자에게 추가적인 개발이나 데이터에 대한 추가적인 부담을 씌우지 않는다. 기업소비 관점에서 본다면 세일즈포스닷컴의 CRM 서비스나 개인 소비 관점에서 본다면.. SEO (Search Engine Optimization) SEO Search Engine Optimization의 약어이다. 대부분의 웹 크롤러, 봇들이 JavaScript 파일을 실행시키지 못하고 HTML에서만 컨텐츠를 수집한다. 때문에 CSR 방식으로 개발된 페이지를 빈 페이지로 인식하게 된다. 검색엔진에 제대로 노출이 되지 않는다면 웹 페이지의 유입이 줄어드는 악순환이 반복된다. (반면 SSR은 view를 서버에서 전부 렌더링하여 내려주므로 HTML에 모든 컨텐츠가 저장되어 있기 때문에 SEO 적용에 큰 문제가 없다.) 따라서 많은 사람들이 리액트(React), 앵귤러(Angular), 또는 앰버(Ember) 등을 사용하여 웹사이트를 개발하면 검색 엔진 랭킹에 안좋을 것이라고 생각한다. 만약에 HTML 코드가 본문의 내용없이 메타 태그나 스크립트 태그 같.. SSR과 CSR SSR 서버 사이드 렌더링의 약어로써 단어 그대로 서버에서 렌더링을 작업한다. 기존에 존재하던 방식으로 사용자가 웹 페이지에 접근할 때, 서버에 페이지에 대한 요청을 하며 서버에서는 HTML, view와 같은 리소스들을 어떻게 보여질지 해석하고 렌더링하여 사용자에게 반환한다. 웹에서 제공하는 정보량이 많아지고 데스크탑보다 성능이 다소 떨어지는 스마트폰의 웹에 대한 요구가 커지면서 새로운 기법이 탄생했다. CSR 클라이언트 사이드 렌더링의 약어로써 최초에 1번 서버에서 전체 페이지를 로딩하여 보여주고 이후에는 사용자의 요청이 올 때마다, 리소스를 서버에서 제공한 후 클라이언트가 해석하고 렌더링을 하는 방식이다. 여기에 Angular JS, Backbone JS같이 SPA 개발에 쉬운 JS 프레임워크가 등장.. SPA (Single-page Application) 데스크탑에 비해 성능이 낮은 모바일에 대한 니즈가 증가하면서 스마트폰을 통해 웹페이지를 출력하기 위해서는 기존 방식과는 다른 접근이 필요해졌다. 이를 위해 등장한 기법이 바로 SPA이다. Single-page application (SPA) 서버로부터 완전한 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션이나 웹사이트 SPA에서 HTML, JavaScript, CSS 등 필요한 모든 코드는 하나의 페이지로 불러오거나, 적절한 자원들을 동적으로 불러들여서 필요하면 문서에 추가하는데, 보통 사용자의 동작에 응답하게 되는 방식이다. SPA와의 소통은 웹 서버와의 동적인 통신을 수반하기도 한다. 이러한 접근은 연속되는 페이지들 간의 사용자 경험의 간섭을.. 최상의 웹 앱 성능을 위한 기술, WebAssembly WebAssembly 웹 어셈블리(webAssembly, WASM)란, C나 C++과 같은 프로그래밍 언어를 컴파일해서 어느 브라우저에서나 빠르게 실행되는 바이너리 형식(0,1로 이루어진 이진 형식)으로 바꿔주는 기술을 뜻한다. (프로그래밍 언어가 아니다!) 필자는 항상 궁금했다. JavaScript의 현재 성능이 웹 개발의 최선일까? 조금 더 성능을 향상 시킬 수는 없을까? 이를 위해 만들어진 WASM라는 기술이 흥미로워 포스팅을 하게 되었다. 주 목적은 웹 페이지에서 고성능의 어플리케이션을 가능케 하는 것이지만 포맷은 다른 환경에서도 실행 및 연동되도록 설계가 되어있다. W3C는 모질라, 마이크로소프트, 구글, 애플의 기여와 함께 표준을 관리하고 있다. 일반적으로 웹 개발자가 웹 어플리케이션을 개발할.. React #3. Props와 State 리액트의 기초 지식 중의 가장 핵심, Props와 State를 다뤄보겠다. Props 함수형 컴포넌트 vs 클래스형 컴포넌트 - 함수형 : 초기 마운트 속도가 미세하게 더 빠르다. 클래스형 컴포넌트에 비해 메모리 자원을 덜 사용한다. State state 내부 값은 직접 수정이 불가능하다. 불변성을 유지해야 한다. 이는 JS Immutability 개념을 참조하길 바란다. push, slice, *map, filter map : key 고유 값으로 구분. 배열을 렌더링 하게 될 때에는 꼭 고유값을 key 로 사용해야 한다. 불변성 유지를 위하여 데이터를 조작 할 때에는 기존의 배열을 건들이지 않는 방식으로 처리해야 한다. 만약 state 배열 값을 무작위로 변경하게 되면 필요치 않은 값 변경을 통해 프로.. 최근 MS가 출시한 gitHub 툴 'Scalar' 최근 마이크로 소프트가 Git을 통한 생산성 향상을 위해 새로운 툴을 출시했다. Git은 분산 버전 제어 시스템으로 기본적으로 각 Git 저장소에는 전체 히스토리에 있는 모든 파일의 사본이 있다. 중간 규모의 팀이라도 매 달 수백 메가 바이트를 추가하여 수 천 개의 커밋을 만들 수 있다. repository가 커지면 Git은 모든 데이터를 관리하는 데 어려움을 겪을 수 있다. 수정 된 파일을 보고하거나 최신 데이터를 얻기 위해 대기하는 시간이 낭비된다. 이러한 명령이 느려지면 개발자는 대기를 중지하고 컨텍스트 전환을 시작해야 한다. (이는 생산성에 해를 끼친다.) Microsoft에서 Git용 VFS를 사용하여 Windows OS repository를 지원한다. 가상화 된 파일 시스템을 사용하여 repo.. 성능 최적화 개발자에게 성능이란 굉장히 중요하다. 최근 웹 애플리케이션에서는 복잡한 기능과 UI를 통해 기능이 더욱 무거워지고 있다. 특히 Instagram, facebook, Pinterest 등의 SNS 플랫폼 같은 경우 빠른 리로딩 시간이 필요하므로 성능 최적화가 더욱 중요하다. 개발자는 끊임없이 구조를 단순화하고 최대한 렌더링 시간을 줄이기 위해 고민해야 한다. 최근 Grid 컴포넌트 성능 개선 작업을 통해 느꼈던 포인트들과 성능 최적화를 위한 사전 지식과 최적화 방법들을 정리해본다. 브라우저는 웹 페이지에 필요한 리소스를 내려받고 해석한 다음 여러 계산 과정을 거쳐 콘텐츠를 화면에 보여준다. 이를 브라우저의 로딩 과정이라고 하며 다운로드, 파싱, 스타일, 레이아웃, 페인트, 합성으로 나뉜다. 단계마다 어떤 .. 이전 1 2 3 4 5 6 다음
